As part of our developer series, we recently discussed the benefits of vector tiles in one of our previous blog posts.
OS Open Zoomstack and the OS Vector Tile API already offer some amazing mapping which can be used as the basis for overlaying other information. There are various ways to add data overlays to your base map including data received from Web Feature Services (WFS) such as the OS Features API or simply GeoJSON files which are stored on your web server.
Although both these options are perfect for smaller volumes of data (in terms of number of features and/or geometric complexity), sometimes it makes more sense to take advantage tiled vector data which can enable data of any size to be quickly rendered in your browser.
The OS Vector Tile API already offers a selection of data overlays but, with the right tooling and a bit of data processing, it is relatively straight-forward to generate your own.
In this blog, we are going to look at the steps involved in creating your own vector tile overlay using the parliamentary constituency polygons from the Boundary-Line dataset. Although we are using the parliamentary constituencies in this example, it is possible to swap in any of the administrative and electoral boundaries (or alternatively the entire dataset as demonstrated here).
Fast, customisable, versatile web maps
Web mapping has come a long way since the first map server was built in 1993 at the famed Xerox Palo Alto Research Center. Since then, users have come to expect intuitive, beautiful and instant maps on their desktop and mobile devices.
The typical modern map user accesses map data on devices that usually don’t have the storage capacity for high resolution maps of the entire world. Instead, apps and websites show mapping data that is served as needed over the web.
When a web map is loaded, it is set to a zoom level and extent, which defines the level of detail and the area that will be visible in the viewer. A map server sends grid sections of the map, called “tiles”, to the user, where they are arranged in the right configuration to appear as a map. As the user pans and zoom in and out, requests for the correct tiles are sent, and the response is used to update the screen.