Niene Boeijen

Hello this page is about me!

I am a full stack web map developer at Webmapper . Check my online portfolio for my work online and workshops and presentations.

In my free time I am a artist and tinkerer. Check my offline portfolio

Workshop creative with vector tiles


Workshop Vector Tiles for MGI Alumni day 2018

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.

Hoe werken vector tiles en hoe kom je er aan? In deze workshop maken we zelf een web map op basis van vector tiles. We gebruiken vector tiles van PDOK en OpenMapTiles of maken vector tiles van eigen geo-data (PostGIS/GeoPackage). Er zijn voorbeelden voor beginners en gevorderden.

Voor beginners ligt de focus 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. De vector tiles komen van PDOK. Enige voorkennis van HTML, CSS en JavaScript is hierbij handig.

Voor gevorderden zijn er voorbeelden om vanuit PostGIS je eigen data te serveren als vector tiles met Tegola of T-rex en om OpenStreetMap data te serveren met OpenMapTiles Server. Als extra kan je de cartografische vormgeving verder uitwerken door zelf iconen (sprites) te maken en eigen lettertypes (glyphs) te gebruiken. Deze voorbeelden gebruiken Docker of NodeJS/NPM om de tools te installeren en draaien. Short outline of the workshop

  1. Try out Mapbox Studio Upload your own data and style this in the browser.

  2. Develop your own web map mapboxGL js part 1 Set-up your own web map with HTML, CSS and JS. We will use the MapboxGL JavaScript library and import the map you made in the previous step with Mapbox Studio

  3. Make your own custom style. MapboxGL js part 2 Get loose from Mapbox and remove your access token to use the library at it fullest power with your own custom style!

  4. Get familiair with Fonts, Extrusion and even some JavaScript interaction in MapboxGL js part 3

  5. Put your map online so you can show your results with the world!

At the end of the workshop you will be able to:

  • Style a simple map in Mapbox Studio.
  • Make a custom map with MapboxGL.js.
  • Style vector tiles from PDOK according to the Mapbox Style Specification.

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!

repro