Heatmap tonen op Open Street Maps dmv Open Layer

In een vorige blog is al uitgelegd waar een postcode database is te vinden met adressen en coördinaten. Deze coördinaten kunnen natuurlijk weer op een kaart geplot worden. Hier kan je b.v. Google Maps voor gebruiken, maar ook Open Street Maps icm Open Layer.

Open Layer is een library waarmee je dynamische kaarten kan maken. Deze worden opgebouwd uit zogeheten "layers". Een Tile-layer kan bijvoorbeeld Open Street Map zijn. Daar boven op kunnen weer andere layers geplaatst worden. De getoonde layer kan weer afhankelijk gemaakt worden van het zoom level.

Concreet kan je zo een heatmap tonen op landelijk niveau, terwijl als je op een plaats inzoomt de exacte datapunten toont.

Voorbeeld in Javascript.

import Map from '/static/lib/ol/Map.js';
import View from '/static/lib/ol/View.js';
import TileLayer from '/static/lib/ol/layer/Tile.js';
import XYZ from '/static/lib/ol/source/XYZ.js';
import HeatmapLayer from '/static/lib/ol/layer/Heatmap.js';
import Vector from '/static/lib/ol/source/Vector.js';
import Point from '/static/lib/ol/geom/Point.js';
import Feature from '/static/lib/ol/Feature.js';
import VectorLayer from '/static/lib/ol/layer/Vector.js';
import Style from '/static/lib/ol/style/Style.js';
import StyleIcon from '/static/lib/ol/style/Icon.js';
import * as proj from '/static/lib/ol/proj.js';



function initMap() {
	let locations = getdata();
	
	let vectorSource = new Vector();
	
	for(let i=0; i < locations.length; i++) {
		let loc = locations[i];
		
		var geom = new Point(proj.fromLonLat([loc.lon, loc.lat])); // Convert to OSM's projection
		var feature = new Feature(geom);
		vectorSource.addFeature(feature);
	}
	
	
	let tileLayer = new TileLayer({
      source: new XYZ({
        url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
      })
    });
	
	
	let heatmapLayer = new HeatmapLayer({
	    source: vectorSource,
	    blur: 10,
	    radius: 5,
		maxZoom: 8
	});
	

	let markerLayer = new VectorLayer({
	    source: vectorSource,
	    style: new Style({
	        image: new StyleIcon({
	            anchor: [0.5, 1],
	            src: '/static/img/yellow-dot.png', // Marker icon
	        })
	    }),
		minZoom: 8
	});
				

	new Map({
	  target: 'container-map',
	  layers: [
	    tileLayer, heatmapLayer, markerLayer
	  ],
	  view: new View({
		center: proj.fromLonLat([5.210938, 52.136333]),
	    zoom: 7
	  })
	});
}


initMap();



function getdata() {
	let data = [
		{ "lat": ..., "lon": .... }
	];
	return data;
}