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.

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.

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
2. Select a vector tile to read the vector data