Home

Welcome to the Workshop Vector Tiles!

Presentation

This workshop will start with a presentation to introduce the basic concepts that are needed to do this workshop.

Workshop beschrijving

Vector tile technologie is een nieuw alternatief op de traditionele raster image tiles voor web maps. Zij maken web maps sneller te publiceren en flexibeler vorm te geven. Een leuke techniek om een kaart goed aan te laten sluiten bij het ontwerp van jouw project!

De focus bij deze workshop ligt op de front-end ontwikkeling. We maken een kaart te maken met Mapbox Studio. Daarna zetten we zelf een eenvoudige web-pagina met een kaart-viewer op te zetten met MapboxGL.js. We gebruiken de Mapbox Style Specification om een eigen cartografische vormgeving te specificeren in de vorm van een style.json bestand.

We kiezen 1 huisstijl, (een bestaand project waar je aan werkt?) en gaan de kaart hier op aanpassen.

Enige voorkennis van HTML, CSS en JavaScript is hierbij handig.

Goal

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!

Beginners

You need to know a little about: HTML, CSS & JS.

🔗 If you are not that comfortable with HTML, CSS and JavaScript yet, this Making a Web page tutorial will help you along!

🔗 Or do some online courses like the ones on Code Academy

Next you need a computer with:

• a web browser, like Firefox, Chrome or Safari.
• a proper text editor, like Visual Studio Code , Nodepad ++, SublimeText or Brackets with Syntax Highlighting.
• Internet

Syntax Highlighting

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.

How does this tutorial work?

Just follow the links or the sidebar. At the bottom of each step is the link to the next step.

⏩ Takes you to the next step

In the tutorials you will see:

▶️ This are the things that you should do, execute, get working! Hands on!

ℹ️ 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

🔗 Some additional reading materials or interesting Links.

Preparation

▶️ On your computer create a directory for yourself, where we can work in today. For example:

/home/niene/Documents/MyVectorTileMap

In these directories we save everything we make and download today. During this workshop it is referred to as 📂yourDirectory.

Let's start!

➡️ If you are not that comfortable with HTML, CSS and JavaScript yet, this Making a web page tutorial will help you along!

➡️ If you already know some HTML, CSS and JavaScript, you can start immediately with reading the introduction to Vector tiles