Web Mapping 101: What Is It and Making It Work For You

Web mapping is the process of using the internet to visualize, analyze, and share your geospatial data through a map. Web maps are an important tool for many organizations as they provide the ability to distribute critical information to anyone, anywhere, and at any time.

Web maps provide endless potential for visualizing valuable data that may otherwise go unused. But, not everyone knows how to get started with creating one. In this webinar, we’ll cover:

- An overview of web mapping and how it works
- How OpenLayers and Leaflet work with web mapping
- How to use web mapping tools, including Esri Leaflet and Mapbox with the HTMLReportGenerator
- How to create vector tilesets in FME to make web mapping easier than ever

Join our team of Support Specialists to learn how to get started using FME to create a web map of your own to visualize and share your data.

Stop wasting the value of your geospatial data by letting it sit unused. You’ll leave this webinar with the tools to get you started with creating a web map of your own so you can present your data in a way that's easy to understand and share with others.

1. Web Mapping 101:
What Is It and Making it Work For You

2. Meet the Presenters
Sienna Emery
Technical Support Specialist,
Customer Solutions
Sanae Mendoza
Technical Support
Specialist, FME Server
Mark Warren
Technical Support
Specialist, FME Server

3. Agenda
●Overview: web mapping & how it
works
●Translating Data to Arcgis Online
and a Simple Web Map
●Working with Mapbox and
Vector Tiles
●Custom coding and the
HTMLReportGenerator
●Q&A and Wrap Up

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

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

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

7. Neogeography
“Traditional Geographic Information Systems historically have developed tools and
techniques targeted towards formal applications that require precision and accuracy.
By contrast, neogeography tends to apply to the areas of approachable, colloquial
applications. The two realms can have overlap as the same problems are presented
to different sets of users: experts and non-experts”
-Wikipedia

8. Types Web Mapping Platforms
1.Web Mapping Applications
a.Easy to get started- just import your data
b.Hosted for you
c.Analysis is built into the platform

2.Web Mapping APIs
a.Understanding of JavaScript, CSS, and HTML needed (unless using FME)

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

10. Popular Web Mapping APIs
●Google Maps API
●MapBox
●ArcGIS API
●D3
●Bing Maps
●Open Street Maps


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

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

12. Our Strength
We bring the power of spatial data
to your decision making.

13. Years of solving data challenges
27+
13,000+
Organizations trusting us worldwide
Global partners delivering FME Services
150+
128
Countries with FME customers
Safe Software
Company Profile
www.safe.com

Users active in FME Community
16,000+

14. FME
®
Integration Platform
Connect. Transform. Automate.
FME Desktop FME Server FME Cloud
Build & Run Data Workflows Automate Data Workflows
(on-premises)
Automate Data Workflows
(cloud)
Get a free trial of FME Desktop and FME Server at safe.com

15. Connect
Data between
450+ systems
Extend
Capabilities with custom
connections, transformers,
R & Python


Run
Workflows locally or publish
to FME Server

FME Desktop
Quickly author repeatable, self-documenting data integration
workflows using an intuitive visual interface.
No coding required.

16. 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. Translating Data to Arcgis Online
The Goal
I have JSON data
that is updated
regularly and I
need to post it to
ArcGIS Online
The Obstacles
I donʼt want to
manually
transform and
upload this data
every two weeks
The Solution
FME can help you
transform this data
and post it.
The Result
Now I have an
automated way of
pushing data to
ArcGIS Online

21. Demo

22. FME Tools for Web Mapping

23. Web maps have a lot of moving parts.

There are readers, writers and transformers
that can used be at each step.

24. Web Mapping Layers
Basemaps give your web map context.
Raster tilesets are static. Prerendered images are loaded at different zoom levels
(PNG, GeoTIFF)
Vector tilesets are versatile. They adapt to zoom levels, loading different features at
each (MVT, OSM PBF)

25. Web Mapping Layers
Features are in the foreground. They are often dynamic or interactive.
GeoJSON is a plain-text format for drawing geometry. Simple, easy to read, and
supported by nearly everything.
Vector tilesets can also be used to draw features. (MVT, MBTiles)


Lots of other options: KML, TopoJSON, Shapefiles, Esri
File Geodatabase, etc.

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

27. The Web Page
HTML (Hyper Text Markup Language) tells the browser how to structure the content.
CSS (Cascading Style Sheets) tell the browser how to style the content.
e.g. Bootstrap
Javascript (JS) is a scripting language that allows web content to be interactive
e.g. Leaflet, OpenLayers, D3, Mapbox GL JS, ArcGIS API for JS
A server to host the web page and data
E.g. Amazon S3, Azure, a local server

28. Tools for Creating Web Pages
HTMLReportGenerator
HTMLLayouter
HTML writer

Readers, writers and connecters for many
types of databases
HTTPCaller
MapboxStyler

FME Server Data Streaming service
FME Server KML Network Link service

31. Build
Create schedules, web
applications and
automations in a GUI.
Scale
Process massive amounts
of data as needed.


Control
Cost effectively deploy
processing
close to the source.

FME Server
Connects more than just data and applications, it
connects teams.

32. Web-Mapping with Mapbox
The Goal
Create a web
mapping
application with
our own data
sources
The Obstacles
Building a custom
web map and
application takes
time and
maintenance
The Solution
Use the
HTMLReportGenerator
to build the layers and
web page.
FME Server can stream
the map back.
The Result
An accessible,
web-based map
that can be easily
updated or
modified

33. Web-Mapping with Mapbox
Build web maps with your
data using the
HTMLReportGenerator and
mapping services, like
Mapbox
●GeoJSON is a good choice for display
custom vector data, as long as the
datasets arenʼt too large
●Enrich the map by adding Mapbox
vector tilesets
●Use the Data Streaming service to
deliver your maps online

34. Custom Vector Tilesets
The Goal
Create custom
vector tiles so that
large, dynamic
datasets can be
displayed in my
web maps
The Obstacles
Tiling conversion
libraries require
special knowledge
The Solution
Use our vector tileset
writers to translate
our spatial data
The Result
Vector tilesets that
can be hosted,
maintained and
used in a variety of
mapping
applications

35. Custom Vector Tilesets


Dynamic maps can be
created by writing vector tile
layers at different zoom
levels
●Vector tilesets are responsive to user
interaction with the map
●Tilesets should be uploaded to a server
for web mapping applications
●Create custom tilesets from your own
data, or search the web for 3rd party
sources

36. Demo

37. Creating a web map game with FME
Combine all these web mapping
skills together and get creative!

Extend the HTMLReportGenerator
with your own code to make custom
web apps!

●Workspace Functions:
a.Generate web page
b.Check answer, calculate &
return score

38. Custom Interactivity in a Web Map
The Goal
Embed a web map
into a web page with
custom interactive
elements and styles.
The Obstacles
How do we add our
own HTML, CSS,
and JavaScript to
the web maps?
The Solution
Extend the HTML
Report Generator
with custom code.
The Result
Automatically
generate custom
web maps based
on incoming data
with FME.

39. Demo

40. Share data online!

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

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

43. Next Steps
Download
FME 2022.0 &
the webinar
workspaces
Apply the
workspaces to your
own data to
manage changes
Free Trial | Upgrade
Contact us. We
would love to chat
with you about
anything data
[email protected]

44. Resources
Blog: The Ultimate Guide to Online Mapping
Blog: 8+ Ways to Visualize Geospatial Data in a Web Browser
How to Customize HTML Reports
Getting Started with ArcGIS Online

45. Claim Your Community Badge
Get community badges for
watching webinars!
fme.ly/WebinarBadge

Todayʼs Code: WGMFS

46. We Value Your Feedback
Share Your Experience with FME on
Gartner Peer Insights
Gartner Peer Insights content consists of the opinions of individual end users based on their own experiences with the vendors listed on the platform, should not be construed as statements of fact, nor do they
represent the views of Gartner or its affiliates. Gartner does not endorse any vendor, product or service depicted in this content nor makes any warranties, expressed or implied, with respect to this content, about its
accuracy or completeness, including any warranties of merchantability or fitness for a particular purpose. Gartner and Gartner Peer Insights are registered trademarks of Gartner, Inc. and/or its affiliates in the U.S.
and internationally and are used herein with permission. All rights reserved.
Gartner Peer Insights
Reviews from your enterprise peers – verified by Gartner
●Reviews are anonymous and take approximately 10
minutes to complete.
●You will be asked to create a profile using your business
email or LinkedIn account prior to completing the survey
for validation purposes.
Contribute a review today
Email [email protected] if you have any questions

47. The Peak of Data Integration 2022 UC
August 24-26, 2022 Vancouver, Canada
Register now

48. Check out our upcoming
& on-demand webinars:
safe.com/webinars

49. Q&A

50. Thank you!
Download FME 2022.0 Free Trial | Upgrade
Contact us [email protected]
Connect with us in the Community


Connect with us for more FME




Please share
your feedback
with us through
the webinar
survey!