Protocolbuffer Binary Format(.pbf) and Mapbox Vector Tiles(.mvt) are two popular formats for sharing map data. Prior to this GSoC project, the iD editor in OSM supported GPX data. GPX is an XML schema designed as a common GPS data format for software applications. It can be used to describe waypoints, tracks, and routes.

The main objective of the project was to add support for vector tile data to iD. MVT and PBF contain data of a particular tile. These files contain data in Protocolbuffer binary format and can have various sets of data like name of cities, or train stations etc. This data can be in the form of points, lines or polygons. A vector tile looks something like this :

The goal is to draw the data of these tile on iD and it should show up on the screen like this :

For implementing the feature the following steps were followed:

1. Creating a new layer : A new mvt layer is created that would accept a pbf/mvt file. d3_request library is used to read the data in arraybuffer format.
2. Converting data to GeoJSON : The arraybuffer data is converted to GeoJSON format before passing to the drawMvt function.
   For converting vector tile data to GeoJSON data, Mapbox provides with two libraries:
   1. vt2geojson
   2. vector-tile-js
   vt2geojson is great for changing vector tiles to GeoJSON from remote URLs or local system files but it works with Node.js only.
   For iD we have used mapbox’s vector-tile-js, it read Mapbox Vector Tiles and allows access to the layers and features, these features can be further converted to GeoJSON.
3. MVT drawing : This GeoJSON data is pass directly to the D3 draw functions which renders the data. (iD uses D3 for all of our drawing already)

All the work related to the above steps is here.

4. Next step was writing the tests for the above code. Tests for the code are here.

Performance Testing

1. Choosing data : The data which was used to create the vector tiles for testing is this : https://data.cityofnewyork.us/Environment/2015-Street-Tree-Census-Tree-Data/pi5s-9p35/data
   It is a dense data consisting of only points.
2. Creating MVTs : Vector tiles were created using the above data using a tool called tippecanoe. Mapbox’s tippecanoe is used to build vector tilesets from large (or small) collections of GeoJSON, Geobuf, or CSV features.
3. Tippecanoe converts GeoJSON data to mbtiles format, these files contain data for more than one tile. Mapbox/mbview was used to view these tiles in localhost and extract individual tiles from the network tab.

4. This URL when passed to iD draws the vector tile like this :

URL used : http://preview.ideditor.com/master/#background=Bing&disable_features=boundaries&map=9.00/39.7225/-74.0153&mvt=https://a.tiles.mapbox.com/v4/mapbox.mapbox-terrain-v2,mapbox.mapbox-streets-v7/12/1207/1541.vector.pbf?access_token= ‘pk.0000.1111’
# replace value with your mapbox public access token

Some More Interesting Stuff

There is much more that can be done with vector tiles. One thing is better styling of the drawings. A very next step is to provide different colors to different layers of the tile data.

For more discussion, you can follow here.
My earlier blogs can be found here.

https://medium.com/@vershwal/vector-tile-support-for-openstreetmaps-id-editor-40b1cb77f63b?source=rss-a18d6bdbacf3------2