How vector maps work
Before designing a single road, waterway, or city label, it’s important to understand how vector maps function.
Vector maps are an advanced approach to mapping where map data is delivered and precisely rendered in real-time. They are delivered to the browser or mobile device using WebGL or OpenGL which dynamically draws data with the speed and smoothness of a video game. The result fast interactive maps.
Since the map is literally being drawn in browser or device, you can dynamically change styled elements during runtime. Lighten or darken the map based on the time of day, personalize icons and the colors based on user activity, switch languages on the fly, or bump label sizes based on user preferences to improve legibility, all in real time.
A vector maps consist of three working parts: 1) the renderer, 2) the vector tiles, and 3) the style rules.
1) The renderer
Vector maps are rendered with Mapbox GL. Mapbox GL uses the power of WebGL to combine vector data and style instructions and draw them in the client. To display a map in web browsers, use the Javascript library Mapbox GL JS which draws the map and allows for motion and interactivity to be incorporated with code. For maps in native applications such as Mapbox iOS and Android SDKs, use Mapbox GL Native.
2) The vector tiles
The vector tileset is a set of points, lines, and polygons that represent natural and manmade features across the globe. Vector tilesets describe the geometry of each feature, where they belong in the world, and other key properties. They do not include any inherent style properties. This data is optimized in vector tile format which renders the data lightweight and ready for delivery on mobile or web platforms.
3) The style rules
The map style itself is written as rules which define its visual appearance using the Mapbox GL Style Specification. It specifies:
- What data to draw
- What order to draw the data in
- How to style the data when drawing it
Don't worry you don't have to touch a line of code. Mapbox Studio's style editor provides the user interface where you can define your map style. Behind the scenes, Studio creates this file the style.json and hosts it on the Mapbox Styles API when published. This style is then accessible via endpoint to add to your mobile or web app.
View the live version of map style hosted on the Mapbox Styles API at a url like:
https://api.mapbox.com/styles/v1/mapbox/streets-v9.html?<access-token>#0/0/0
View the style.json style rules document at a url like:
https://api.mapbox.com/styles/v1/mapbox/streets-v9?<access-token>#0/0/0
