Download to read offline
Uploaded bySafe Software
Web Mapping 101: Creating Dynamic Web Maps with Geospatial Data
Web maps are a game-changer for visualizing, analyzing, and sharing your geospatial data with anyone, anywhere, at any time. Yet, many struggle with how to get started. This webinar will show you how to bring your data to life through web mapping. In this webinar, we’ll cover: -What is web mapping and how it works -How OpenLayers and Leaflet work with web mapping -How to use web mapping tools, including Esri Leaflet -How to create vector tilesets in FME to make web mapping easier than ever -How to integrate the FME Flow REST API into your Web Development Projects -How to use Web Sockets to stream real-time data into your web maps Join our expert Support Specialists as they guide you through the process of creating your own web map with FME. Discover how to make your geospatial data interactive, shareable, and meaningful. Don’t let your valuable data gather dust! After this webinar, you’ll be equipped with the tools and knowledge to start building web maps that turn complex information into powerful, shareable insights.
Web Mapping 101: Creating Dynamic Web Maps with Geospatial Data
- 1. Web Mapping 101: CreatingDynamic Web Maps with Geospatial Data
- 2. Sanae Mendoza Customer Solutions Specialist Dylan Paterson Technical Support Specialist, FMEFlow Donal Mateer Technical Support Specialist, FME Form Meet the Team
- 3. Welcome to Livestorm. Afew ways to engage with us during the webinar: Audio issues? Click this for 4 simple troubleshooting steps.
- 4. How to downloadslides 1. Hover over the slide deck in the webinar room 2. Click this button
- 5. Agenda 1 Overview: WebMapping & How It Works 2 Getting Data into ArcGIS Online and a simple HTML 3 Working with Vector Tiles 4 3D Web Mapping 5 Web Sockets 6 Conclusion 7 Resources & Next Steps 8 Q&A Agenda
- 6.
- 7. Web Mapping Overview ●Web mapping is the process of using the internet to visualize, analyze, and share your geospatial data through a map. ● Web maps provide the ability to distribute critical information to anyone, anywhere, and at any time.
- 8. Web maps providea widely accessible way to visualize and share valuable data.
- 9. Web Mapping ● Webmaps often contain a basemap and layer(s) on top of it ● Typically, web maps are interactive and they allow users to adjust the viewing area, zoom in and out, and select features https://www.iqair.com/ca/air-quality-map
- 10. Types Web Mapping 1.No-Code Web Mapping Applications a. Easy to get started- just import your data b. Hosted for you c. Analysis is built into the platform 2. Custom Web Mapping APIs a. Understanding of JavaScript, CSS, and HTML needed (unless using FME)
- 11. Popular web mapping applications ●ArcGIS Online ● CARTO ● Mapbox Some BI tools have spatial compatibility as well: ● Tableau Online ● Qlik ● Power BI
- 12. Popular Web MappingAPIs ● Google Maps API ● MapBox ● ArcGIS API ● D3 ● Bing Maps ● Open Street Maps More examples on https://www.safe.com/demos/ !
- 13. Tools for CreatingFeatures ● GeoJSON ● TopoJSON ● OGC WMS/WFS ● OGC/Google KML ● Esri Geodatabase ● ArcGIS Online / Portal ● Mapbox Raster MBTiles / Vector MBTiles ● Mapbox Vector Tile and Tileset ● Google WebP ● AWS Terrain Tiles ● Cesium 3D Tiles
- 14. Tools for CreatingWeb Pages Readers, writers and connecters for many types of databases: ● HTMLReportGenerator ● HTMLLayouter ● HTML Writer ● HTTPCaller ● MapboxStyler FME Server Data Streaming service FME Server KML Network Link service
- 15. But how canI get my geographic data into a web map? … well FME can do that!
- 16. 2 Getting Data into ArcGISOnline and a simple HTML
- 17. Posting data toArcGIS Online ● FME has an ArcGIS Online Reader and Writer ● Data from many sources can be modified and pushed to ArcGIS Online on a Schedule ● Resource: Getting Started with ArcGIS Online and Portal
- 18. Once data isin ArcGIS Online ● Data can be visualized and analyzed in ArcGIS Online ● Maps can be embedded in an existing HTML page page if needed ● Maps can be shared amongst an organization or the public ● Maps can be viewed web browser, ArcGIS Pro, smartphones or tablets
- 19. Creating HTML pagesin FME ● FME also has the HTML Report Generator which can create basic HTML pages ● The HTML Report Generator will take geographic data in your workspace and create a web map ● Can be completed without any custom code or code can be added to enhance the results
- 20. Goal Block KeyResult I have JSON data that is updated regularly and I need to post it to ArcGIS Online Translating Data to ArcGIS Online I don’t want to manually transform and upload this data every two weeks FME can help you transform this data and post it. Now I have an automated way of pushing data to ArcGIS Online
- 21.
- 22.
- 23. Vector Tilesets A collectionof points, lines or polygons for a specific area organized into zoom levels. ● Vector tilesets are responsive to user interaction with the map ● Good for large data sets that require quick rendering ● Create custom tilesets from your own data, or search the web for 3rd party sources Zoom Level = 1
- 24. Slide Title Create custom vectortiles so that large, dynamic datasets can be displayed in my web maps Goal Block Key Custom Vector Tilesets Result Tiling conversion libraries require special knowledge Use our tileset writers to translate our spatial data Vector tilesets that can be hosted, maintained and used in a variety of mapping applications
- 25.
- 26. Tiling Beyond Vectors RasterSupport ● Raster Tiler ● WebMap Tiler ● OGC WMTS ● OGC GeoPackage Tiles Generic ● Tiler And more!
- 27.
- 28. 3D Data Visualization 3DWeb Mapping 3D Libraries in FME ● Cesium ○ Cesium 3D Tiles Writer ○ Cesium 3D Point Cloud Reader/Writer ● Indexed 3d Scene Layers (I3S) ○ Esri Indexed 3D Scene Layer (I3S) Writer ● three.js ○ ThreejsSceneCreator ● gITF ○ glTF (GL Transmission Format) Writer Top: three.js Bottom left: three.js Bottom right: Cesium
- 29. Converting 2D to3D with FME 3D Web Mapping 1. Start with 2D data 2. Combine footprints with elevation data 3. Get building heights from clipped rasters 4. Extrude footprints based on retrieved elevation data 5. Share 3D data to web visualization 1 2 3 4 5
- 30. Slide Title Create a3D web map that can be easily shared with others. Goal Block Key Peeling Back the Layers of Cesium 3D Result The starting dataset is in 2D and not compatible with web mapping applications. Use FME to transform the 2D data into 3D Cesium Tiles. A fully interactive 3D web map of Surrey, ready to share.
- 31.
- 32. Tips and Tricksfor Writing 3D Data for Web Maps ● Simplify data: MeshSimplifier, Dissolver, Tiler ● Data Quality: Validate schemas, values, geometry, standards. ● Real-time updates: Automations, Connectors ● Create background maps: Raster Writers ● Coordinate systems: Reprojectors ● Convert geometry to 3D: 3DForcer, Extruder, FaceReplacer, AppearanceSetter, GeometryFilter, TINGenerator, SurfaceModeller, and Triangulator. 3D Web Mapping
- 33.
- 34. Websockets with FME AWebSocket is a protocol for real-time, two-way communication between a client and server over a single, persistent connection. You can communicate with the WebSocket Server in the following ways: ● Notification Mode ● Message Streaming Mode ● WebSocket Connector Transformer
- 35. Websocket Streaming The WebSocketConnectortransformer allows an FME workspace to send and/or receive WebSocket messages. You can use it for either task independently or both within the same workspace. This mode works well when you can dedicate an FME Engine to running a workspace continuously, receiving and sending messages, until you explicitly cancel it.
- 36. Slide Title I havea real-time data stream to visualize in a downstream application. Goal Block Key Web Sockets Result The data needs cleaning, and I want to avoid running multiple update jobs. Use FME to route the stream into a workspace and format it. My downstream application receives a correctly formatted, error-free stream.
- 37.
- 38.
- 39. Summary Points ● Webmapping can be easy! You just need a few tools to get started ● With FME, you can choose how much or little you’d like to code
- 40. Provide critical information ina visual, easy to understand way to anyone, anywhere, and at any time.
- 41. 29+ 27K+ 128 190 20K+ years of solvingdata challenges FME Community members countries with FME customers organizations worldwide global partners with FME services 30+ 37K+ 128 140+ 25K+ years of solving data challenges FME Community members countries with FME customers organizations worldwide global partners with FME services 200K+ users worldwide Safe & FME
- 42. Number of supported data types in FME 1995 2000 20052010 2015 2020 2023… 10 100 300 500 GIS CAD Database XML Raster 3D BIM Web Point Cloud Cloud Big Data IOT Gaming BI Indoor Mapping AR/VR Generative AI Cloud Native Tabular Unrivalled Data Support
- 43.
- 44. Resources ● How toCustomize HTML Reports ● Web Mapping with Mapbox GL JS ● Spatial Dashboard Using WebSockets ● Writing Cesium 3D Tiles with FME Resources
- 45. Get our Ebook SpatialData for the Enterprise fme.ly/gzc Guided learning experiences at your fingertips academy.safe.com FME Academy Resources Check out how-to’s & demos in the knowledge base support.safe.com Knowledge Base Webinars Upcoming & on-demand webinars safe.com/webinars
- 46.
- 47. We’d love tohelp you get started. Get in touch with us at [email protected] Experience the FME Accelerator Contact Us A world where data is not just a commodity but a catalyst for real change. fme.safe.com/accelerator Next Steps
- 48. ClaimYour Community Badge& Dive into the new Community! ● Get community badges for watching webinars ● community.safe.com ● Today’s code: N80XSV Join the Community today! Next Steps
- 49.
- 50. ThankYou Recap of NextSteps 1 Follow us on LinkedIn! 2 Contact us 3 Experience the FME Accelerator Please fill out our webinar survey