The team from Webmapper developed this workshop in the context of the event 'Are you following me?' to share their hands-on experience in web cartography and geographic web application development. The workshop has been given for several conferences and meetups.

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.

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

We will work with raster tiles in Leaflet. Starting from a simple web map and moving further into the GIS world with every step.

1. Leaflet part 1 we will set up a Leaflet map and learn about the different options and settings.
2. In Leaflet part 2 we will add custom data to our basemap. In the form op a marker, icon, circle, polygon or small GeoJSON dataset.
3. in Leaflet part 3 we will change the projection of the map and add some WMS layers.
4. in Leaflet part 4 we will add GeoJSON data and a WFS to the map and use some data driven styling.

We will work with vector tiles in MapboxGL. Setting up a basic map, manipulating the style with JavaScript and designing our own style object.

1. MapboxGL part 1 let's us set up a simple map with mapbox as a provider.
2. MapboxGL part 2 we will move to custom tiles and learn how to make the map interactive and make small changes to the style with javascript.
3. MapboxGL part 3 shows you how to start working on your own style json file based on the Mapbox GL styling specs.

Just follow the links. At the bottom of each step is the link to the next step. All the steps can also be seen in the Table of Contents on the right.

➡️ Takes you to the next step

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