Eenvoudig, kosteloos en snel een kaartje zonder beperkingen op uw website? De ArcGIS API for Javascript biedt de mogelijkheid om op elke website een geografische kaart te tonen met daarop bijvoorbeeld de locatie(s) van een organisatie. Hoe is een punt op basis van coördinaten op de kaart te zetten en deze kaart op een website toe te voegen?
Kosteloos
Online dienstverlening wordt steeds vaker betaalde dienstverlening. Dat geldt ook voor kaartensoftware. Waar voorheen snel een gratis kaartje aan een website kon worden toegevoegd, betekent dit nu dat er vaker betaalgegevens moeten worden verstrekt of er extra beperkingen zijn. En gaat je kaart viral? Dan kun je verrast worden met een grote kostenpost. Dit maakt het gebruik van diverse kaartaanbieders onzeker. Esri biedt basisfuncties van ArcGIS kosteloos aan en zonder gedoe.
Geen gedoe
ArcGIS is het meest gebruikte platform voor professioneel kaarten maken en het doen van geografische analyses. Via het ArcGIS-platform is het mogelijk om kosteloos een puntje op een kaart te zetten, zonder dat persoonsgegevens of betaalgegevens nodig zijn. Het stukje code, dat iedereen kan aanpassen, is voldoende voor een kaart met een punt.
Wilt u direct met het eindresultaat aan de slag? Op de Github-pagina van Esri Nederland is de code te vinden.
Een punt plaatsen op een kaart is eenvoudig. Wat moet je doen? Volg na het maken van een developer-account (zonder extra kosten) de volgende 5 stappen.
Stap 1: Referenties naar de JavaScript API
We beginnen met het importeren van de JavaScript code en stylesheets. Hiermee kunnen we de code gebruiken om onze kaart te genereren. Gebruik hiervoor de volgende regels code:
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css"> <script src="https://js.arcgis.com/4.8/"></script>
Deze regels code zet u in uw webpagina binnen de <head>-element.
Stap 2: Modules inladen
Vervolgens zijn de benodigde modules voor de kaart zelf te definieren. In dit geval zijn dat de Map en de MapView voor het tonen van de kaart. De Graphic gebruiken we om een punt op de kaart te zetten.
<script> require([ "esri/Map", "esri/views/MapView", "esri/Graphic", "dojo/domReady!" ], function(Map, MapView, Graphic) { // Code to create the map and view will go here }); </script>
Stap 3: Kaart aanmaken
De kaart bevat onder meer de basiskaart en eventueel extra kaartlagen. In dit voorbeeld gaan we alleen verder met de basiskaart-optie.
//Construct a Map object
var map = new Map({
basemap: "topo"
});
//Construct a MapView object
var view = new MapView({
container: "viewDiv",
map: map,
center: [4.468430, 51.922852],
zoom: 18
});
De MapView is het openingsbeeld van de kaart. We stellen hier in op welke locatie de kaart gecentreerd staat en vanaf welke zoomniveau het deze locatie toont.
Stap 4: Voeg een punt op kaart toe
Nu de kaart is aangemaakt, is het tijd om een punt op de kaart toe te voegen. Een punt bestaat uit twee delen: de geometrie voor de positie en de visualisatie (om het punt een bepaalde kleur en stijl mee te geven).
//Construct a point object
var point = {
type: "point",
longitude: 4.468430,
latitude: 51.922852
};
De geometrie bestaat uit een longitude en latitude. In dit geval valt ons punt in Rotterdam,
//Construct a SimpleMarkerSymbol object
var markerSymbol = {
type: "simple-marker",
color: [226, 15, 5],
outline: {
color: [255, 255, 255],
width: 2
}
};
Het puntje krijgt een kleur, zodat het op de kaart is te zien. Hierboven is het punt een rode vulling met witte rand gegeven. Via de Symbol Playground is een eigen stijl te genereren.
//Construct a Graphic object
var graphic = new Graphic({
geometry: point,
symbol: markerSymbol
});
Nu het punt klaar is, voegen we deze toe aan de kaart.
// Add GraphicsLayer to Map object
view.graphics.add(graphic);
Stap 5: Voeg de kaart toe aan de website
De kaart met punt moet aan de website worden toegevoegd. Het MapView-object geeft met het container-attribuut aan op welke plek in de website de kaart getoond moet worden. Als alle code vervolgens klaar is en de webpagina wordt geladen, zien we het volgende resultaat:
De uiteindelijke code ziet er alsvolgt uit:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>Punt op de kaart</title> <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css"> <script src="https://js.arcgis.com/4.8/"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 400px; width: 400px; } </style> <script> require(["esri/Map", "esri/views/MapView", "esri/Graphic", "dojo/domReady!" ], function(Map, MapView, Graphic) { //Construct a Map object var map = new Map({ basemap: "topo" }); //Construct a MapView object var view = new MapView({ container: "viewDiv", map: map, center: [4.468430, 51.922852], zoom: 16 }); //Construct a point object var point = { type: "point", longitude: 4.468430, latitude: 51.922852 }; //Construct a SimpleMarkerSymbol object var markerSymbol = { type: "simple-marker", color: [226, 15, 5], outline: { color: [255, 255, 255], width: 2 } }; //Construct a Graphic object var graphic = new Graphic({ geometry: point, symbol: markerSymbol }); // Add GraphicsLayer to Map object view.graphics.add(graphic); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Op Github delen we verschillende andere voorbeelden, zoals een kaart met een basiskaartgalerij en een puntje op basis van een adres.
Bekijk de broncode en andere voorbeelden
Lees meer over de mogelijkheden van ArcGIS en Javascript
Dit blog is mede tot stand gekomen door een bijdrage van Maarten van Hulzen.
