Skip to content
Web map workshop for web developers. What is geo-location, geo-data and how do I make a custom map on my website?
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
img
leaflet-part-1
leaflet-part-2
leaflet-part-3
leaflet-part-4
mapbox-gl-js-part-1
mapbox-gl-js-part-2
mapbox-gl-js-part-3
reveal.js
README.md
index.html

README.md

Web mapping for web developers

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

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.

Short outline of the 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. In 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.
You can’t perform that action at this time.