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 thats easy to understand and share with others.
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!
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.
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
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
29.
30.
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
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.
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
43. Next Steps
Download
FME 2021.2 &
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
info@safe.com
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: ASWCF
46. Reach out to us!
Interested in building plugins
and would like to be a part of
our Beta testing group later this
year?
Email:
claire.gallant@safe.com
47. The Peak of Data Integration 2022 UC
August 24-26, 2022 Vancouver, Canada
Apply to Present | Register now
48. FME World Tour 2022
March 22 - June 24 | 45+ Events
View the Tour Schedule & Register Now
49. Check out our upcoming
& on-demand webinars:
safe.com/webinars
51. Thank you!
Download FME 2021.2 Free Trial | Upgrade
Chat with us info@safe.com
Connect with us in the Community
Connect with us for more FME
Please share
your feedback
with us through
the webinar
survey!