Vector Tiles are an efficient way of displaying a large amount of data on a mapping control. The traditional approach of adding pushpins, or other layers in the browser fail with large amounts of data. The browser becomes sluggish when the number of points reaches 1000.
Colleagues of mine have produced an excellent workshop with detailed steps on how to build your own vector tile layers using Postgres, PostGIS, Geoserver and React.js. I was curious to find if there was a more ‘lightweight’ way of achieving the same goal.
In this post, I use three JavaScript libraries:
geojson-vt calculates the features to render on a vector tile.
vt-pbf encodes these features in a MVT protobuf format.
OpenLayers is a browser based mapping component used to display the tiles.
We can build a simple vector tile server using node. The server will generate mapping tiles on the fly, and return them to the browser as protobuf encoded vector tiles.
Building the Tile Server
The vector data starts off in a GeoJSON format. This is loaded into geojson-vt. The getTile method then allows you to extract subsets of the data for any given tile.
To encode the data as an MVT tile, we need to use vt-pbf
Bringing it all together, this is what our node app looks like:
The dependencies can be installed with npm:
Building the UI
We can use OpenLayers to display the vector tiles.
We can configure the layer as follows:
And then add it to the map component:
The whole HTML file looks like this:
Conclusion
In conclusion, it’s possible with a few lines of node.js, to build a vector tile service from a GeoJSON source file, without the need for a database. From my simple experiments, the tiles are generated quickly, and with a low payload size. This is probably a good solution if your source data is fairly low volume and changes infrequently.