Skip to Content

 

Sinds de aanpassing van het prijsmodel van Google zijn voor veel bedrijven de kosten voor het gebruik van Google Maps aanzienlijk gestegen. Veel developers zoeken daarom naar alternatieven. ArcGIS biedt alles dat een developer nodig heeft om een kaart op zijn website te plaatsen.

De ArcGIS API voor JavaScript is een “state of the art” web mapping API met krachtige tools om data te creëren en visualiseren, zowel in 2D als in 3D. Het bevat widgets om snel aantrekkelijke applicaties te ontwikkelen en gebruikt client-side processing om interactieve apps te maken die gebruik maken van de laatste browser technologie.

Bovendien krijgt u met een Essentials Developer Account kosteloos beschikking over het volgende:

  • Gebruik van alle Esri SDK’s en API’s voor het ontwikkelen van web, native en mobiele apps
  • 1.000.000 basemap en geosearch transacties per maand
  • 50 credits voor o.a. het genereren van routes
  • Deployen van een onbeperkt aantal niet-commerciële apps
  • Onbeperkt aantal gebruikers van uw apps
  • Toegang tot de wereldwijde content die Esri beschikbaar stelt
  • Mogelijkheid om zelf kaarten te maken en vorm te geven
  • Eigen data hosten in Esri's cloud storage en daar queries en analyses op doen

Voor het migreren van Google Maps naar de ArcGIS API for JavaScript, volg onderstaande uitleg van een aantal basisconcepten.

      

Ontwikkelen met de API

 

Begin met het aanmaken van een Essentials Developer Account. Dit geeft developers kosteloos toegang tot de complete stack aan Esri developer producten.

Om de Google Maps API te laden maakt u een referentie naar de API en gebruikt u een Google API Key als volgt:

Met de ArcGIS API for JavaScript heeft u geen API key nodig. U hoeft enkel een referentie op te nemen naar de API en de stylesheet:

Het tonen van een kaart 

Met Google maakt u op de volgende manier een kaart:

Met ArcGIS gaat dat als volgt. Let op dat u zowel een “Map” als een “MapView” maakt. De View maakt het mogelijk om onderscheid te maken tussen 2D kaarten (“MapViews”) en 3D kaarten (“SceneViews”).

Bovenstaande code maakt een kaart die Esri’s “World Navigation vector basemap” gebruikt als basiskaart. Esri levert echter een groot aantal basemaps waar u uit kunt kiezen. Naast een topografiche kaart staan uiteraard ook luchtfoto's of Open Streetmap en een volledig donkergrijze of lichtgrijze kaart tot uw beschikking. Op basis van vector basemaps is het zelfs mogelijk uw eigen achtergrondkaart te ontwerpen.

 

Een marker op de kaart zetten 

Met Google plaatst u op de volgende manier een marker op de kaart:

In ArcGIS voegt u een “Graphic” toe aan de “graphics collection” van de View


Deze Graphic kan u een default “simple-marker” symbol geven, maar u kunt ook kiezen voor een Esri Icon Font. Om een map pin icon toe te voegen, gebruik de volgende code: 

Naast het “hardcoded” toevoegen van een icon biedt ArcGIS een veel krachtiger optie om het type, de kleur en de grootte van het icon te laten afhangen van de attributen van uw punt. Dit voorbeeld laat zien hoe u Graphics maakt van GeoJSON data met aardbevingsinformatie en daarbij het symbool dynamisch kunt aanpassen aan de hand van de kracht van de aardbeving.

Een pop-up gebruiken

In Google Maps gebruik je een InfoWindow om content te tonen in een pop-up en deze aan een marker te koppelen:

ArcGIS biedt de mogelijkheid om een pop-up “template” aan te maken. De template bepaalt de inhoud van de pop-up. Dit is alle code die u nodig hebt om een kaart te maken met een MapView, daar een marker met pin icon aan toe te voegen en de marker te voorzien van een pop-up op basis van een template:

Deze app is ook beschikbaar in codepen.

Wanneer u in bovenstaande code de MapView vervangt door een SceneView, zul je zien dat je precies dezelfde applicatie krijgt maar dan in een 3D omgeving! Zo eenvoudig is het om met dezelfde data in ArcGIS ook 3D applicaties te bouwen.

En nu verder

De volgende tutorials laten (in het Engels) ook andere aspecten zien van het migreren van Google Maps naar ArcGIS:

Verder is er nog een groot aantal bronnen met informatie over de JavaScript API die je helpen om u productiviteit te verhogen wanneer je met de API aan de slag gaat:

                  

Geïnteresseerd?


Boek een demo om te ontdekken hoe Esri's kaarten voor developers werken of ga direct aan de slag.

Meer informatie?

Boek een demo