Tools for Visualizing Geospatial Data in a Web Browser
3 likes6,304 views
The document outlines tools and steps for visualizing geospatial data in web browsers, including a comparison of various libraries such as Leaflet, OpenLayers, and Cesium. Key considerations include the type of data to visualize, preferred coding level, and whether open-source or proprietary solutions are desired. It also provides a summary of the process for building web visualizations and resources for further learning.
Tools for Visualizing Geospatial Data in a Web Browser
- 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