geojson-vt for Highly Efficient Geojson Rendering in Open Layers
GeoJSON is one of the most common geospatial data formats. In simple terms, it is an extension of JSON with geometry property. It is text-based and designed with human readability in mind. For the sake of being eye-convenient, there is a performance trade-off when the browser renders it. GeoJSON consists of features containing redundant property keys, causing the size to be bloated as the feature size goes up. Commonly, drawing GeoJSON with the size of tens megabytes would be slow. Showing a hundred megabytes of GeoJSON data on the browser would most likely crash the browser.
When we are in complete control of the system: back end, front end, or anything in between, we could probably change the source format to something more efficient like Vector Tiles. But what if we can only tweak the front end?
When we can only tweak the front end, geojson-vt comes to the rescue. Initially designed for Mapbox, we can pair it with OpenLayers to render GeoJSON on the fly as Vector Tiles. We will compare the performance between direct GeoJSON rendering versus geojson-vt for different types of GeoJSON. The usage is straightforward, making it a pretty easy solution to improve our map’s performance. On top of that, we could still use Vector-specific Open Layers function like getFeatures when needed.
