OpenStreetMap is een vrije/gratis tegenhanger van Google Maps. Het neerzetten van een kaart middels OSM is iets ingewikkelder, maar met een duidelijke uitleg natuurlijk goed te doen.
Dit voorbeeld is een mix van Php-code en Javascript. De Php-code is zo basic dat het makkelijk om te zetten is naar projecten die gebruik maken van Java, C#, Python fo een andere taal/framework.
Als eerste is natuurlijk Node.js nodig, aangezien het natuurlijk in Javascript gemaakt is. Node.js is hier te vinden, https://nodejs.org/en
Nadata Node.js is geïnstalleerd, kan deze vanaf de DOS-prompt worden aangeroepen. Er kan gecontroleerd worden of het werkt d.m.v.: npm
Wat er vervolgens nodig is, is de volgende tool,
- jspm
'jspm' is een Javascript Package Manager. Deze genereert een zogeheten 'importmap' en zorgt er voor dat de javascript-files kunnen worden opgezocht en ingeladen.
Mijn voorkeur heeft deze globaal te installeren, zodat het commando 'jspm' vanaf de prompt direct aanroepbaar is: npm install -g jspm
Pagina maken
Nu dat jspm is geinstalleerd kunnen we de pagina maken. De eerste stap is de zogeheten 'importmap' aan te maken: jspm install ol/Map.js ol/View.js ol/layer/Tile.js ol/source/XYZ.js ol/proj.js ol/source/Vector.js ol/geom/Point.js ol/Feature.js ol/layer/Vector.js ol/style/Style.js ol/style/Icon.js
Dit geneerd 'importmap.json'. Vervolgens kan de HTML pagina gemaakt worden en de Javascript code,
Html
<!DOCTYPE html>
<html>
<head>
<title>OSM Test</title>
</head>
<body>
<div id="map" style="width: 500px; height: 500px; border: 1px solid #ccc;"></div>
<script type="importmap">
<?php include __DIR__.'/importmap.json' ?>
</script>
<script src="script.js" type="module"></script>
</body>
</html>
Javascript
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import XYZ from 'ol/source/XYZ.js';
import Vector from 'ol/source/Vector.js';
import Point from 'ol/geom/Point.js';
import Feature from 'ol/Feature.js';
import VectorLayer from 'ol/layer/Vector.js';
import Style from 'ol/style/Style.js';
import StyleIcon from 'ol/style/Icon.js';
import * as proj from 'ol/proj.js';
function initMap() {
let lat = 52.457142;
let lon = 5.105979;
// De TileLayer toont de Open Street Map kaart tegels
let tileLayer = new TileLayer({
source: new XYZ({
url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
})
});
// Vervolgens wordt er een Marker gemaakt met een MarkerLayer om een punt te tonen
let marker = new Feature({
geometry: new Point(
proj.fromLonLat([lon, lat]) // Same coordinates as center
)
});
// Style the marker
marker.setStyle(
new Style({
image: new StyleIcon({
anchor: [0.5, 1],
src: 'https://openlayers.org/en/latest/examples/data/icon.png' // Default marker icon
})
})
);
// Create a vector layer for the marker
let markerLayer = new VectorLayer({
source: new Vector({
features: [marker]
})
});
// Nu kan de kaart geinitialiseerd worden
new Map({
target: 'map',
layers: [
tileLayer, markerLayer
],
view: new View({
center: proj.fromLonLat([lon, lat]),
zoom: 12
})
});
}
initMap();