OpenStreetMap kaart maken met marker

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' 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();

 

 

 

 

 

 

- Bent u opzoek naar een Php of Java programmeur voor uw website of applicatie? (freelance / detachering)
- Losse tickets, opdrachten, of gehele projecten in de planning?
- Systeembeheer van Linux of Windows Server ?

Dan kom ik graag met u in contact! Meer informatie over mij vindt u hier.
Sitemap | Op alle producten & diensten zijn de algemene voorwaarden van toepassing
Php programmeur | Maatwerk software Alkmaar | Maatwerk software Heerhugowaard | Maatwerk software Purmerend | Maatwerk software Zaandam | Software laten maken | Freelance php programmeur Afbouw maatwerk software Blogs