Home
Welcome to the vector-tiles-workshop!
Maptime, time for making maps!
The team from Webmapper developed this workshop in the context of Maptime to share their hands-on experience in web cartography and geographic web application development.
Webmapper is a cartographic development and consultancy company based in Utrecht, the Netherlands. -They make geographic applications for the web with special attention for web-cartography.
Datalab Amsterdam is providing the vector tiles. Datalab is a working space, knowledge hub and open stage. A place where everyone is invited to work open and safe with data for and from Amsterdam. At Datalab the city is working on making plenty of datasets open to use.
Vector tiles are a way to deliver geographic data in small chunks to a browser or other client app. Vector tiles are similar to raster tiles but instead of raster images the data returned is a vector representation of the features in the tile.
Vector tiles make huge maps fast while offering full design flexibility. They are the vector data equivalent of image tiles for web mapping, applying the strengths of tiling – developed for caching, scaling and serving map imagery rapidly – to vector data.
Vector tiles have two important advantages over fully rendered image tiles:
- Styling - as vectors, tiles can be styled when requested, allowing for many map styles on global data
- Size - vector tiles are really small, enabling global high resolution maps, fast map loads, and efficient caching
As the name suggests, vector tiles contain vector data instead of the rendered image. They contain geometries and metadata – like road names, place names, house numbers – in a compact, structured format. Vector tiles are rendered only when requested by a client, like a web browser or a mobile app. Rendering happens either in the client (Mapbox GL JS, Mapbox iOS SDK, Mapbox Android SDK) or on the fly on the server (map API).
Mapbox have defined an open standard for vector map tiles called "vector-tile-spec" which uses Google protocol buffers for space-efficient data serialisation. Web Mercator is the projection of reference, but vector tiles may be used to represent data with any projection and tile extent scheme. It is also tied to the Mapnik rendering engine, using a "serialized version of the internal data that Mapnik uses".
More about mapbox vector tile: https://www.mapbox.com/vector-tiles/specification/
In this workshop we will give you:
- a full code example of how to make a map with the Mapbox GL js library
- a endpoint where to find your tiles
- a standard style.json for you to edit
- Putting your map online with Github!
Optional:
- How to make your own vector tiles
- How to donwload OSM vector tiles
At the end of this workshop, you will have your own web page with an interactive map based on vector tiles! Custom styled by yourself! Your web page will be hosted on Github, so you can immediately share your progress of the day with all your family and friends!
Your laptop with:
- a web browser, like Firefox, Chrome or Safari.
- a proper text editor, like SublimeText or Brackets with Syntax Highlighting.
- a Github account. Create one at www.github.com.
- internet.
Syntax highlighting is a feature of text editors that are used for programming, scripting, or mark-up languages, such as HTML. It displays text, especially source code, in different colours and fonts according to the category of terms to make them more visually distinct. Highlighting does not affect the meaning of the text itself; it is intended only for human readers.
Just follow the links. At the bottom of each step is the link to the next step.
➡️ Takes you to the next step
ℹ️ Indicates an explanation about the code blocks.
Code is shown in code blocks or in-line. this is in-line code
<h1> This is block code </h1>Some background information, extra information or debug tips are shown in grey :
This is some additional information or Some extra explanation
So:
➡️ Start with step one: Getting the code