Web Mapping with Mapbox GL JS

Introduction 

Mapbox is one of the leaders in web mapping, for good reason. Their flexible web services lend themselves to dynamic, interactive maps that look great on any website or application. Even better, many of the tools they offer are open source. 

Using the HTMLReportGenerator transformer, we can integrate Mapbox directly into our FME workflows to create custom web maps with our own data, without ever having to write a line of code. 

Part 1 of this tutorial creates a Mapbox web map from a SpatiaLite dataset. The data will be displayed on a web map that is built with the Mapbox GL JS library.  This HTML file can be used as-is on the web. 

But the value of web mapping comes from the fact that it gives access to information to a wide audience, including non-technical folks. So Part 2 of this tutorial will build a web mapping application with the workspace from Part 1.With an FME Server app, users can request specific datasets, then have that data streamed back to them in the browser. 

Requirements 

• A token is required for authentication to use Mapbox services. Please make an account with Mapbox to obtain a token. 
• FME Server is required to make the workspace app in Part 2. 

Step-by-Step Instructions

A web map typically consists of the datasets, JavaScript, CSS, and an HTML document to contain it all. We can use FME Workbench and the HTMLReportGenerator transformer to automatically create and compile each of these components. 

To follow along, download the dataset (CulturalSpaces.sqlite) from the tutorial’s resources. 
 

Part 1: Building a Mapbox Web Map 

In this part, we will create a workspace that builds an HTML file containing our Mapbox map of Vancouver cultural spaces. 

1. Add the Data
Open FME Workbench to begin the workflow. Add a Creator transformer to the canvas. Then, add and connect a FeatureReader transformer. 

Inside the FeatureReader transformer, point the Dataset parameter to the CulturalSpaces.sqlite database. The Format should automatically update to SpatiaLite. 



2. Allow the User to Select a Neighbourhood
Our dataset contains point data representing cultural spaces in Vancouver. The points are divided into different neighbourhoods. We’d like the user to choose their neighbourhood(s) (I.E. our Feature Types for this dataset) at runtime. 

Inside the FeatureReader's Constraints section, beside the Feature Types to Read parameter, select the dropdown menu. Select User Parameter > Create User Parameter…



The Parameter Identifier (“Neighbourhood”) will be its attribute name in the workspace, and the Prompt (“Select a Neighbourhood”) are the instructions the user will see. 

To add all our Feature Types as options, select the ellipses (...) next to Default Value. Tick the Select all box to add all of them. 



Make sure that the Required box is also ticked. 



To return to the canvas, select OK in the User Parameter dialog, then click OK again to close the FeatureReader.
 
3. Read in the Data
Save and run the workspace to review the data. Before the translation starts, the User Parameter we just created will prompt us to select the Neighbourhood(s) to view. Selecting all options will produce a workspace with data at each Feature Type port (make sure to enable Feature Caching!). 



Click the magnifying glass next to a Feature Type to display the point data in the Visual Preview window.



4. Start building the Map
Add an HTMLReportGenerator transformer to the page. We need to connect it to all of the FeatureReader’s Feature Type ports, since we can select any number of neighbourhoods at runtime. A quick way to connect multiple ports is by using the Feature Type Connections window (Main Menu > View > Windows > Feature Type Connections). 

In Sources, select all the "FeatureReader: [Neighbourhoods]". In Destinations, select "HTMLReportGenerator: Input". Lastly, select Connect >>.



All the Feature Type ports will now be connected to the HTMLReportGenerator.  



5. Start building the HTML 
Open up the HTMLReportGenerator Parameters and select the Page Contents parameter to view all the HTML elements we can build. There are two options for Mapbox.  

Mapbox Leaflet uses the Mapbox.js library that is a plugin for Leaflet, an open-source Javascript library. This legacy product still works, but is no longer in active development. 

Mapbox GL JS also uses javascript libraries, but it incorporates Mapbox GL (OpenGL, or “Open Graphics Library”) to render more responsive and interactive maps. These maps are more customizable because they’re based on vector tiles. 

Select Mapbox GL JS. 

6. Style the Map 
In the Content Settings section, enter your Access Token for Mapbox.
Select “culturalsp” for the Label Attribute, it will display the cultural space’s name when a user selects a point. 
Choose a colour for the Layer Colour. Using this template, all vector features will adopt this colour. (Advanced tip: if you have multiple features requiring different colours, consider customising the html_content attribute after running the transformer.) 
The Basemap parameter offers default selections from Mapbox’s style, but can be used with custom styles created in Mapbox Studio, too. Select "Mapbox Light". 
WMS URL(s) allow you to add layers that use the OGC Web Map Service Protocol. Since our FME Mapbox GL JS template is built to write only vector layers, WMS is a great choice if you need to include raster data. 


 
7. Get Vector Layers from Mapbox Studio 
The Vector Layers parameter allows you to add vector tile layers directly from Mapbox Studio, a third party source, or a custom vector tileset uploaded to your own server.

From a browser, navigate to Mapbox Studio’s Tilesets page to view the default tilesets and any custom tilesets that you’ve created (Advanced tip: create your own tiles with the Mapbox Vector Tile (MVT) and MVT Tileset Reader/Writer)

Select the ellipses next to the "Mapbox Streets v8" tileset to copy the Tileset ID. We will paste this in our HTMLReportGenerator transformer.



Select the tileset view the data. Inside, there are 16 layers listed in the Vector Layers sidebar (toggle on and off to view). We can choose any of these layers to display on our map. Be aware of the Zoom Extent. Vector tiles load different features at different zoom levels. For example, don’t choose layers that will only load at high zoom levels (e.g. a city) for a map that is meant to be viewed at low zoom levels (e.g. a continent). 

For our map, we’ll choose the Road layer to give context to the map. Our cultural centre point dataset covers a city-level scope (Vancouver), so the zoom levels will work (z0-z16). 



8. Configure the Vector Layers
Back in FME Workbench, paste the Tileset ID ("mapbox.mapbox-streets-v8") into the Feature Layer URL column. We want to use the "road" layer, so enter that into the Source Layer column. 



Our Mapbox map is now configured.

9. Add any other web page elements
A map is only one part of a web page. The HTMLReportGenerator transformer can add lots of other features to a webpage that will give your map context. Add a descriptive Header, Separator, and Table to the Page Contents. This is entirely optional, but makes for a better user experience. 



10. Write the HTML
Add an HTML writer to the canvas, name the file (e.g. "CulturalSpacesMap.html") and connect it to the HTMLReportGenerator. 



Run the workspace to write the HTML file. Open the HTML file in a browser, like Google Chrome. Selected cultural space points display a label. Notice that the road layer, the Mapbox Studio vector tileset, is responsive as we zoom in and out. 



Use this HTML file as is, customise it, or carry on to Part 2 to turn this into a web application using FME Server Workspace Apps. 

Save the Workspace.
 

Part 2: Streaming a Mapbox Web Map in FME Server 

Web maps are a great option for sharing data with others. We can harness FME Server Workspace Apps and the Data Streaming service to create a web application that streams our Mapbox web map on demand. 

1. Publish the FME Workspace 
From FME Workbench, select Publish from the ribbon menu to open the Publishing Wizard. Create a new Repository called “MapboxIntroTutorial” to save your workspace to. Make sure to upload all data files. Continue. 



In Register Services, select Data Streaming and the Job Submitter. 



Publish. 

2. Create a Workspace app 
Open FME Server in a browser. From the main menu, select Server Apps > Build a Workspace App. 

Give your app a Name (e.g. "CulturalSpacesWebMapApp"), Title, and Description. From the MapboxIntroTutorial Repository, select the CulturalSpaceWebMap.fmw Workspace. Make sure the Service is set to Data Streaming. 



Select OK to publish. 

3. Run the App
Open the Workspace App URL. Select a few neighbourhoods at runtime to test the app. 



Select OK to run. 



Using this Server app, our end user can now select which neighbourhood cultural spaces they’re interested in viewing. Those points are streamed back, in the browser, based on their selection. The embedded web map was built using FME and Mapbox GL JS libraries.

4. Put on your Web Developer Hat (optional) 
Feeling adventurous? Open up the HTML file (CulturalSpacesMap.html) in a text editor to view the code. The SpatiaLite cultural spaces points are represented in GeoJSON. 

GeoJSON is the most simple web mapping format and it’s compatible with almost any mapping platform. If you regularly use GeoJSON for your web maps, we have a MapboxStyler transformer just for that purpose. 



Scroll down to the bottom of the HTML to view where the Mapbox vector tile layers are referenced. 



Our final result is a fully functional HTML web page and an embedded Mapbox web map featuring our own data. The HTML file can be customised to use your own styling, additional functionality, or used as-is. 

Additional Resources 

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

[Article] Getting Started with FME Server Apps
[Article] How to Customize HTML Reports
 

Data Attribution

The data used here originates from data made available by the City of Vancouver, British Columbia. It contains information licensed under the Open Government Licence - Vancouver.