The document provides an overview of web mapping, highlighting how to create dynamic web maps using geospatial data, including tools and techniques for data integration and visualization in platforms like ArcGIS Online. It discusses various types of web mapping applications, vector tilesets, and the use of FME for automating data workflows. Additionally, it outlines the upcoming Peak of Data Integration event and resources for further learning.

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. Peak of Data Integration
Seattle, WA | May 6–8, 2025
● Register at the best price!
○ Early Bird Pricing live til Feb 7, 2025.
● 3 days of data disruption
○ Be among the first to hear ground breaking
updates and launches!
● *New* - Get FME certified for free at the event!
○ 2 exams offered on Wednesday, May 7.

6. Poll:
Have you ever created a
web map before?

7. Agenda
1 Overview: Web Mapping & 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

8. 1
Introduction

9. 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.

10. Web maps provide a widely
accessible way to visualize
and share valuable data.

11. 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

12. 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)

13. Popular web mapping
applications
● ArcGIS Online
● CARTO
● Mapbox
Some BI tools have spatial compatibility as
well:
● Tableau Online
● Qlik
● Power BI

14. Popular Web Mapping APIs
● Google Maps API
● MapBox
● ArcGIS API
● D3
● Bing Maps
● Open Street Maps
More examples on https://www.safe.com/demos/ !

15. 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

16. 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

17. But how can I get my
geographic data into a
web map?
… well FME can do that!

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

19. 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

20. 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

21. 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

22. 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

23. Demo

24. 3
Custom
Vector
Tilesets

25. 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

26. 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

27. Demo

28. Tiling Beyond Vectors
Raster Support
● Raster Tiler
● WebMap Tiler
● OGC WMTS
● OGC GeoPackage Tiles
Generic
● Tiler
And more!

29. 4
3D Web Mapping

30. 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

31. 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

32. 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.

33. Demo

34. 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

35. Poll:
What type of data are you
most interested in visualizing
with web maps?

36. 5
Web Sockets

37. 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

38. 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.

39. 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.

40. Demo

41. 8
Conclusion

42. 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

43. Provide critical
information in a
visual, easy to
understand way
to anyone,
anywhere,
and at
any time.

44. 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

45. 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

46. 9
Resources

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

48. 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

49. 10
Next Steps

50. We’d love to help you get
started.
Get in touch with us at
info@safe.com
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

51. ClaimYour Community Badge &
Dive into the new Community!
● Get community badges for watching
webinars
● community.safe.com
● Today’s code: ZSG7XU
Join the Community today!
Next Steps

52. Peak of Data Integration
Seattle, WA | May 6–8, 2025
● Register at the best price!
○ Early Bird Pricing live til Feb 7, 2025.
● 3 days of data disruption
○ Be among the first to hear ground breaking
updates and launches!
● *New* - Get FME certified for free at the event!
○ 2 exams offered on Wednesday, May 7.

53. 11
Q&A

54. ThankYou
Recap of Next Steps
1 Follow us on LinkedIn!
2 Contact us
3 Experience the FME Accelerator
Please fill out our
webinar survey