OpenStreetMap

Creating Vector Tiles for use with iD

Posted by Glassman on 29 August 2018 in English (English)

Version 2.11.0 of the iD editor now has the ability to display vector tiles as overlays. With help from a bunch of people I was able to create and display a vector tile overlay for use in iD. I want to pass along what I learned to help others.

Creating Vector Tiles

So you have some data you would like to display in iD to help editing. I used Florida State Trails data which is open data on the Florida State open data site. The licensing is suitable for OSM. Once you download the data, I recommend reviewing the data using QGIS to see what it look like. QGIS shows all of the data visually. Adding an OSM baselayer helps understand how the data would fits with OSM. QGIS will also convert the data to a GeoJSON needed for the next step, which is coverting the GeoJSON to a Mapbox mbtiles files. Lets look at the steps in more detail.

  1. Download the data and open in QGIS.
  2. Convert to a GeoJSON. If the data looks good in QGIS, save a copy as a GeoJSON using the Save As in the Layer menu option. If the data isn't in WGS84 (EPSG:4326) projection QGIS will allow you to change the projection for your new file.
  3. Use Tippecanoe to convert the GeoJSON to an mbtiles file tippecanoe -o yourdata.mbtiles yourdata.geojson

Serve the data as a Vector Tile

The data is now ready for a Vector Tile Server. I used Mapbox's Studio to load and serve the data.

  1. Create a new Tileset in Mapbox Studio
  2. Mapbox Studio will assign a unique Map ID for each of your tilesets under your user name. Mapbox Tileset

Your data is now ready to be used. All that's needed is a url for iD. The URL will look like
https://a.tiles.mapbox.com/v4/glassman.1p3h6kof/{z}/{x}/{y}.mvt?access_token=pk.eyJ1IjoiZ2xhc3NtYW4iLCJhIjoiRjk3dWdwYyJ9.Tg_fMJWxygeKBgVTrZHmGA

To determine your URL use your Map ID created in step 2 above and your Mapbox Access Token to create https://a.tiles.mapbox.com/v4/Map ID from step 2/{z}/{x}/{y}.mvt?access_token=your token

To create an access token, go to https://www.mapbox.com/account/ and select Create a Token. Mapbox Access Token

#Using Vector Tiles in iD Now that you've created your first vector tile, you are ready to use it in iD.

  1. Use the Map Data icon to add in your new URL Add Vector Tile URL
  2. Select a vector tile to read the vector data Display Vector Data

Comment from SK53 on 30 August 2018 at 10:09

I'm not certain but you may be able to do this from within QGIS, see https://github.com/geometalab/Vector-Tiles-Reader-QGIS-Plugin/issues/63.

Comment from Glassman on 30 August 2018 at 13:00

The Vector Tiles Reader is similar to what iD allows you to do, that is read the data from vector tile objects.

GeoServer does have an option to serve vector tiles, but I haven't figured it out yet. It provides the user with an .html object that contains styling for the vectors to render in a browser. The user is able to change rendering on the fly from the browser. From conversations with Brian Housel, I expect the iD development team to add the ability to style the vector tiles in iD at some time in the future.

Login to leave a comment