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.

1. Web Mapping 101:
Creating Dynamic Web
Maps with Geospatial Data

2. Sanae
Mendoza

Customer Solutions
Specialist
Dylan
Paterson

Technical Support
Specialist,
FME Flow
Donal
Mateer

Technical Support
Specialist,
FME Form
Meet the Team

3. Welcome to Livestorm.
A few ways to engage with us during the webinar:


Audio issues? Click this for 4 simple
troubleshooting steps.

4. How to download slides
1.Hover over the
slide deck in the
webinar room
2.Click this button

5. Agenda
1Overview: Web Mapping & How It Works
2Getting Data into ArcGIS Online and a simple HTML
3Working with Vector Tiles
43D Web Mapping
5Web Sockets
6Conclusion
7Resources & Next Steps
8Q&A


Agenda

6. 1
Introduction

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 provide a widely
accessible way to visualize
and share valuable data.

9. Web Mapping
●Web maps 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 Mapping APIs
●Google Maps API
●MapBox
●ArcGIS API
●D3
●Bing Maps
●Open Street Maps


More examples on https://www.safe.com/demos/ !

13. Tools for Creating Features
●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 Creating Web 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 can I get my
geographic data into a
web map?
… well FME can do that!

16. 2
Getting Data into
ArcGIS Online and a
simple HTML

17. Posting data to ArcGIS 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 is in 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 pages in 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 Key Result
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. Demo

22. 3
Custom
Vector
Tilesets

23. Vector Tilesets
A collection of 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
vector tiles 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. Demo

26. Tiling Beyond Vectors

Raster Support
●Raster Tiler
●WebMap Tiler
●OGC WMTS
●OGC GeoPackage Tiles
Generic
●Tiler

And more!

27. 4
3D Web Mapping

28. 3D Data Visualization
3D Web 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 to 3D 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 a 3D 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. Demo

32. Tips and Tricks for 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. 5
Web Sockets

34. Websockets with FME
A WebSocket 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 WebSocketConnector transformer 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 have a 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. Demo

38. 8
Conclusion

39. Summary Points
●Web mapping 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 in a
visual, easy to
understand way
to anyone,
anywhere,
and at
any time.

41. 29+
27K+
128
190
20K+
years of solving data
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 2005 2010 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. 9
Resources

44. Resources

●How to Customize HTML Reports
●Web Mapping with Mapbox GL JS
●Spatial Dashboard Using WebSockets
●Writing Cesium 3D Tiles with FME
Resources

45. Get our Ebook
Spatial Data 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. 10
Next Steps

47. We’d love to help 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. Claim Your 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. 11
Q&A

50. Thank You
Recap of Next Steps

1Follow us on LinkedIn!
2Contact us
3Experience the FME Accelerator

Please fill out our
webinar survey