Learn what libraries and web services are available for visualizing your 2D and 3D geospatial data in a web browser. We’ll demo how to use FME to connect to data from any source and prepare it for three.js, Leaflet, Mapbox, glTF, I3S, and Cesium.

1. Tools for Visualizing Geospatial
Data in a Web Browser

2. About us
DMITRI BAGH
Scenario Creation Analyst
TIANA WARNER
Product Marketing Manager

3. Outcomes
1. Deciding which library to use.
a. 2D web maps
b. 3D scenes
2. How to prepare your data and build a web page using your
tool of choice.

5. Choosing a web visualization library
Questions to ask yourself:
● What kind of data do you need to visualize?
○ e.g. 2D/vector data on a map, 3D building exploration, interactive analytics
● Do you need to see the data on a spatially referenced background map?
● Do you prefer a free and open source (FOSS) solution or a proprietary one?
● How much coding are you willing to do?

6. Poll
What kind of data do you need to visualize?
GIS
CAD
BIM
Raster
Tabular/web

7. Building interactive web
maps for 2D data

8. Leaflet
● Straightforward and lightweight.
● FOSS.
● Minimal or no JavaScript coding.
● Choice of basemap (OpenStreetMap, Mapbox,
Esri, etc, or custom-made).
See also: fme.ly/spatialvideo | fme.ly/cartography
Picture here

9. Simple Leaflet
Approach
No JavaScript coding!
Advanced example:
fme.ly/coinstats

10. With Some JS
Coding
Use custom web tiles
Define object behavior
Create any layout
Set your styles
Add more interactivity

11. OpenLayers
● Mature, rich, customizable.
● FOSS.
● Direct support for a lot of data formats.
Example: “Streaming GeoJSON” on knowledge.safe.com
Picture: SK53 OSM

12. Picture here
Mapbox GL
● Free and paid versions.
● Powerful – WebGL renders vector tiles.
● Different than Mapbox.js, which renders raster
tiles.
● Format: Mapbox Vector Tiles.
Picture: Mapbox

13. Picture here
Google, HERE, Bing, and
other mapping providers
● Straightforward tools and APIs built into your
favourite mapping providers.
● Access whatever these providers offer, e.g.
Google navigation and traffic/transit info.
● Less control over end result.
● Must comply with their terms of service.
Example: Data download service using Google
Maps, powered by FME Cloud (click ‘KC article’ for
tutorial).

14. Poll
Which web mapping tool do you plan to use?
Leaflet
OpenLayers
Mapbox GL
Mapping provider API/toolkit
Other (let us know with a comment)

15. Building interactive 3D visualizations

16. Cesium
● Powerful, accurate 3D environment.
● Coordinate system aware.
● Has pre-made globes for background maps.
● Supports tiling.
● Open source with an active community.
Cesium ion blog and webinar: fme.ly/cesium
CesiumJS blog: fme.ly/cesiumjs

17. I3S
● Developed by Esri.
● OGC community standard.
● Renders 3D objects, meshes, points, point clouds.
● Designed for GIS data and easily connects to
ArcGIS’ geoprocessing power.
Picture: https://developers.arcgis.com/3d/indexed-3d-scene-layers/

18. three.js
● Powerful and lightweight.
● Broad range of use cases, from gaming to sharing
BIM data.
● No geospatial reference.
● WebVR support for building virtual reality scenes
(try on mobile: fme.ly/vrhome).

19. ThreejsSceneCreator
● Automates data conversion
and coding for three.js.
● Outputs HTML and converted
data to a folder that you can
host somewhere like S3.

20. BabylonJS
● Popular 3D rendering tool for gaming.
● Less functionality than three.js but a more
controlled dev cycle (Microsoft).
● No direct writer support in FME, but Babylon files
are just JSON.

21. Optimized 3D format: glTF
● Like a JPEG for 3D data.
● Open specification.
● Optimizes the size of the asset.
● Can write to this instead of JSON or 3D Tiles.
● Doesn’t support attributes (but FME can help!).

22. Poll
Which 3D rendering library do you plan to use?
Cesium
I3S
three.js
BabylonJS
Other (let us know with a comment)

23. Summary:
Steps for building a web visualization
1. Choose a library – Leaflet, three.js, Cesium, etc.
2. Create an FME Workspace that prepares and converts your data so it meets the
library’s requirements.
3. Build a web page using the library.
4. Host the page and data somewhere.
5. Keep the web visualization up to date by running your FME workspace on a
schedule or in response to an event, e.g. whenever new source data arrives.

24. Resources
Type a library name into the safe.com search bar, e.g. “three.js” or “leaflet”,
to find blogs, tutorials, and more.
● blog.safe.com – more info + helpful tips, tutorials, and transformers.
● Web map examples on the FME Server Playground.

25. Thank you!
Live chat or get a free trial of FME® at www.safe.com