HSFM09 - Webcartografie

Les 2. JavaScript en web mapping

  1. Huiswerk bespreken
  2. Web mapping
  3. JavaScript
  4. Web mapping libraries
  5. Code, code & code!

CSS class vs id

							#id {



Default CSS settings

					* {
						box-sizing: border-box;


Auto indent in VS code

							On Windows Shift + Alt + F
							On Mac Shift + Option + F
							On Ubuntu Ctrl + Shift + I

What is a web map?

Analogue paper maps

Digital maps VS Web Maps
Data Tiles, styles and servers
On the computer View in a browser
Calculate, analyze scroll, pan, zoom



Tiled web map

a little History

Digital maps & GIS software

1996 Mapquest first with a web service!

But really slow to load..

2004 - Endoxon found a way for quick online mapping!


2005 Google Maps took over!

The solution?



All tiles size 256x256 pixels

Placed in a grid, sharing boundaries

Seamless map

All these little tiles load way faster than one big map!

We call this slippy maps

Zoom levels

Each zoom level has its own set of tiles!

Zoom level 0: 1 tile for the whole world.

Increases exponentially...

Zoom level 1: 4 tiles

Zoom level 2: 16 tiles


Map with tile bounds

Styling & Serving tiles

Tiles are styled and rendered in advance

Tiles are just images on the web



Styling tiles

styling per zoom level

Lot's and lot's of geo data!

SLD & Mapfile styling..

Advantages Raster tiles


Showing a huge amount of geo data with small file size

It's proven by time technology, which works on all types of devices (desktop and mobile) and all browsers

Rendered on a server, raster map tiles do not create performance load on client site

Disadvantages Raster Tiles

No interaction with objects

No information available about objects

Multiple visualizations = multiple tile sets

elaborate & hard styling syntax

Raster tiles zijn 1 manier om een gecompliceerde achtergrond kaart te visualiseren.

Er is meer..

Open Geospatial Consortium - OGC standards

  • WMS Web Map Service
  • WMTS Web Map Tile Service
  • WFS Web Feature Service

Defacto - Community standard

Making a web map

a map is a lot!

  • Map Interface and Interaction
  • Zoom, panning, clicking etc.
  • Map events
  • popups markers
  • Tiles (raster/vector) as Base Layer
  • Additional Data
  • File (GeoJSON)
  • Tiles


Puts it all together,

Tiles, content, interaction

JavaScript Library

Including a JavaScript library in your code is like copying and pasting someone else's code into yours. You have access to everything in that library.

In our case, it's a bunch of cool tools to make web maps and give them familiar functionality.

Web Map Building blocks voor vandaag

Web page, HTML, CSS & JS

JS mapping library

Base Layer - raster tiles

Interface and Interaction

Zoom, panning, clicking etc.

Volgende keer

Additional Data:

Data, files, api, GeoJSON, WMS, WFS

Vector Layers

vector tiles


JavaScript is a programming language that adds interactivity to your website

veel online te vinden:

link link 2

Bouw interactieve websites

simpele, flexible programmeer taal

Javascript engine in jouw browser!

Libraries en APIs

Javascript in onze websites

Maak een bestand aan: /js/main.js

<script src="/path/to/script.js">
<script src="/js/main.js">

Visual studio code met Syntax highlighting

en auto complete ! :D


Code wordt gelezen van boven naar beneden!


							// Dit is een comment
							alert('Hello, world!'); // This comment follows the statement
// Onze eerste JavaScript code 
alert('Hello, world!');
console.log('Hello world!');

Gebruik de Developer/debugging tools!

Debugging, erros, logs

Variable : Let

Variabelen worden gebruikt om informatie op te slaan

named storage

Object based programming

						let message;
						message = 'Hello'; // store the string 'Hello' in the variable named message
						alert(message); // shows the variable content

Variable : Constants

						const myBirthday = '18.04.1982';
						myBirthday = '01.01.2001'; // error, can't reassign the constant!

Data types

						typeof undefined // "undefined"

						typeof 1 // "number"
						typeof true // "boolean"
						typeof "hello" // "string"
						typeof {} // "object" 
						typeof alert // "function"  

						typeof [0,1,2] // "object"


						+ addition
							 6 + 9;
							'Hello ' + 'world!';

						- * /  substraction, multiply, division
						= assingment  
							let myVariable = 'niene';
						=== Strict equality
						!== Does not equal


Event in the browser

Click, hover, scroll

	.addEventListener('click', function() {
		alert('Ouch! Stop poking me!');


							const array = [];
							const cats = ['Leopard', 'Serval', 'Jaguar', 'Tiger', 'Caracal', 'Lion'];


							const object = {};
							const person = {
								name: ['Bob', 'Smith'],
								age: 32,
								bio: function() {
								  console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
								introduceSelf: function() {
								  console.log(`Hi! I'm ${this.name[0]}.`);



https://geojson.org/ geojson.io


							const cats = ['Leopard', 'Serval', 'Jaguar', 'Tiger', 'Caracal', 'Lion'];

							for (const cat of cats) {
							for (let i = 0; i < cats.length; i++) {



							if () { }
							else { }

							statement ? true : false ;
let greeting;

if (hour < 18){ greeting = "Good day" } 
else { greeting = "Good evening"};

greeting = (hour < 18) ? "Good day" : "Good evening" ;


Hulp nodig?

Er staat heel veel op het internet!

JavaScript Libraries for mapping!

Wanneer gebruik je wat nou?

JavaScript Libraries for Mapping

Leaflet.js for simple light weight raster web maps

OpenLayers for more elaborate raster web map with more functionality

ArcGIS Javascript API if your client uses ESRI software

D3.js for data driven info graphics

MapboxGL.js for vector tiles

MapLibre for vector tiles open source alternative

Mapbox Studio for easy cloud solutions

CARTO and buisness intellegence & cloud solutions

HERE Maps and Google Maps API for navigation, Google services and commercial goals

Turf.js for geospatial computation in the browser

Main considerations

Open source vs closed source

Amount of Interactivity or GIS functionality

Amount of data to show

Raster vs Vector


Elke Javascript library komt met zijn eigen taal en functies!

Elke library dus opnieuw leren en begrijpen

Gebruik daarom ALtIJD de documentatie er bij

We gaan kijken naar

Leaflet JS

OpenLayers Js




An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps

simplicity, performance and usability

Developed by: Vladimir Agafonkin.

Weighing about 38 KB of JS.

Has all the mapping features most developers ever need.

Can be extended with Plugins

Well documented

What Leaflet does not do:

Provide data for you.

Provide the basemap.

Its not GIS

Leaflet is a framework

Raster tile base map providers

Nationaal geo register

Leaflet quickstart



							let map = L.map('mapid').setView([51.505, -0.09], 13);
							L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
							  attribution: '© OpenStreetMap contributors'

Adding data layers

					// ADD a WMS layer
					let cbs = L.tileLayer.wms('https://service.pdok.nl/cbs/wijkenbuurten/2022/wms/v1_0', {
						'layers': 'buurten',
						'srs': 'EPSG:28992',
						'format': 'image/png',
						'transparent': true,
						'opacity': 0.5


Base Layer


Data Layer / Feature Layer





Use EPSG:28992 > Government in Netherlands obliged to use it!



Dynamic map making

Tiles, vector data, markers, and any gis source





const openLayersMap = new ol.Map({
    target: 'openLayersMap',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
    view: new ol.View({
        center: ol.proj.fromLonLat([5.2213, 51.7160
        zoom: 8
Working without `import` https://bjkronenfeld.wordpress.com/2019/09/10/getting-openlayers-5-examples-to-work-without-node-js/


Propiatary software

Works well with the Esri environment!

Need api key..

						<link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css">
						<script src="https://js.arcgis.com/4.26/"></script>

require(["esri/config", "esri/Map", "esri/views/MapView"], function (esriConfig, Map, MapView) {

	esriConfig.apiKey = "yourKey";

	const arcGisMap = new Map({
		basemap: "arcgis-topographic" // Basemap layer service

	const view = new MapView({
		map: arcGisMap,
		center: [5.2213, 51.7160], // Longitude, latitude
		zoom: 8, // Zoom level
		container: "arcGisMap" // Div element

Aan de slag!

  • Voeg de top 5 meest interessante web mapping libraries toe aan jouw website
  • Centreer en schaal de kaart naar waar jij wil
  • Werk de structuur en ontwerp van je website verder uit
  • Organiseer je code netjes
  • Alle code weer naar github!
  • Straks

    Stukje theorie

    Daarna toepassen lessen uit de theorie in de code!