Het is super waardevol om informatie over voorzieningen in de omgeving op een kaart weer te geven. Of het nu de locatie van een winkel is, de locatie van een evenement of een andere locatie waar je de bezoekers van je website naar toe wilt laten gaan. In deze blog lees je de 5 stappen om binnen 5 minuten met ArcGIS een kaart met een locatie aan een website toe te voegen.
Stap 1: Account en API key
Om gebruik te maken van ArcGIS kaarten op je website heb je is een API key nodig. Een API key ontvang je door een kosteloos ArcGIS Developer-account aan te maken op developers.arcgis.com. In elk nieuw gemaakt ArcGIS Developer-account staat een default API key die direct gebruikt kan worden.
Stap 2: JavaScript API toevoegen
De ArcGIS API for JavaScript voeg je toe aan je eigen webapplicatie door de volgende twee regels code aan de applicatie toe te voegen, één voor de CSS en één voor de JavaScript.
<link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/css/main.css"> <script src="https://js.arcgis.com/4.21/"></script>
Stap 3: Kaart maken voor de website
Hierna is de JavaScript zelf aan de beurt. Eerst zet je de API key in de code en daarna is tijd voor het het maken van de kaart, een Map, met een mooie achtergrondkaart, ook wel een basemap. In dit geval de ArcGIS topografische kaart, maar er zijn er veel meer om uit te kiezen. Deze Map komt in de MapView en de MapView geef je een plek in je applicatie door hem te koppelen aan het id van een div.
Dit zie je in de code hieronder:
var esriConfig = {
apiKey: “MY_API_KEY”
};
require([
“esri/Map”,
“esri/views/MapView”,
“esri/Graphic”
], function (Map, MapView, Graphic) {
var map = new Map({
basemap: “arcgis-topographic”
});
// Get your x and y coordinates at http://www.arcgis.com/home/webmap/viewer.html
var x = 6.092056; //lon(gitude)
var y = 52.502827; //lat(itude)
var view = new MapView({
container: “viewDiv”, // Reference to the div
map: map, // Reference to the map object created before the mapview
zoom: 16, // Sets zoom level
center: [x, y] // Sets center point of view using longitude,latitude
});
});
Stap 4: Coördinaten van jouw locatie bepalen
Om de coördinaten te bepalen van de locatie die je op de kaart wil weergeven, ga je naar de arcgis.com MapViewer. Klik rechts op ‘location’ en daarna bovenin op ‘Capture mode’. Klik vervolgens op de kaart op de locatie die je wilt weergeven en rechtsboven verschijnen de coördinaten van de locatie. Kopieer deze en vul ze in op de x en y in de code van stap 3.
Stap 5: Coördinaten op de kaart zetten
Een punt op de kaart noemen we een Graphic. Een Graphic heeft altijd met een locatie nodig en een symbool. In dit geval een oranje cirkel met een transparante binnenkant. Vervolgens voeg je de gemaakte Graphic toe aan de graphics van de MapView en je code is klaar.
// Create your own symbols in the Esri symbol playground: https://developers.arcgis.com/javascript/latest/sample-code/playground/live/index.html var point = new Graphic({ geometry: { type: "point", x: x, y: y }, symbol: { type: "simple-marker", outline: { width: 3, color: [255, 99, 0, 1] }, size: 20, color: [255, 255, 255, 0.5] } }); view.graphics.add(point);
Deze 5 stappen zorgen voor een actuele kaart op jouw website, met jouw gekozen locatie weergegeven met een symbool. Mocht je de code van dit voorbeeld willen zien dan vind je deze je op GitHub.
Ik hoop dat deze stappen je helpen om een mooie kaart toe te voegen aan jouw website. Voor meer voorbeelden en voorbeeldcode, kijk op de developer website.
En mocht je vragen hebben of willen weten wat voor mogelijkheden er nog meer zijn neem gerust contact met ons op door een e-mail te sturen naar contact@esri.nl.
