Hoe kan ik een webmap met aangepaste weergave embedden op een website?

Het is mogelijk om een webmap, gemaakt in ArcGIS Online, te embedden op een bestaande website.

De link die gebruikt wordt bij het embedden begint met de organisatie URL en bevat de ID van de webmap:

https://<organisatie>.maps.arcgis.com/apps/Embed/index.html?webmap=<webmap ID>. Daarachter kunnen nog een aantal parameters toegevoegd worden, waarmee het uiterlijk, gedrag of de functionaliteit van de webmap aangepast kan worden. Zo kun je zoom knoppen toevoegen, de legenda zichtbaar maken of een marker toevoegen.

Zodra een webmap in ArcGIS Online wordt gedeeld met iedereen, komt de knop “INBEDDEN IN WEBSITE” beschikbaar.

Door hierop te klikken wordt een dialoogvenster opgestart waarin allerlei opties aan- en uitgezet kunnen worden. Hiermee wordt de HTML-code aangemaakt om de webmap te embedden op een website, waarbij voor iedere optie de correcte parameter wordt toegevoegd.

In dit artikel worden de opties van het dialoogvenster uitgelegd en nog een aantal andere opties besproken, die niet via het dialoogvenster toegevoegd kunnen worden.

Overzicht parameters tabblad Kaartopties

Na het klikken op de knop “Inbedden in website” verschijnt het dialoogvenster met de opties voor het embedden van een webmap en de mogelijkheid om een marker toe te voegen aan de webmap.

Zodra een optie wordt aangevinkt, verschijnt deze als <optie>=true in de URL.

Bij een aantal opties moet een bepaalde waarde opgegeven worden, dit wordt in de onderstaande tabel bij de desbetreffende opties aangegeven.

In onderstaand screenshot staan de opties van het eerste tabblad Kaartopties, met de bijbehorende parameter namen.

De beschrijving van alle opties staat in onderstaande tabel:

Overzicht parameters tabblad Symbool toevoegen

Via het tweede tabblad, Symbool toevoegen, kan een marker toegevoegd worden aan de webmap.

In onderstaande tabel worden de opties uitgelegd:

Toevoegen van de locatie van een marker

Het is niet altijd eenvoudig om achter de breedte- en lengtegraad van een locatie te komen. Er zijn twee manieren om dit op te lossen.

1. Maak gebruik van de optie Zoeken

Kies voor de optie ‘Zoeken’ en vul een adres in:

Vervolgens worden automatisch de correcte breedte- en lengtegraad ingevuld:

2. Pas de URL handmatig aan, zodat RD New coördinaten gebruikt kunnen worden

Een andere optie is om de URL, die gegeneerd wordt door het dialoogvenster, handmatig aan te passen. De syntax van een marker is als volgt:

Hier kan als derde optie de wkid ingevuld worden, iets dat niet kan via het dialoogvenster. Wanneer hier de wkid van RD new wordt ingevuld (28992), kunnen wel RD New coördinaten gebruikt worden. Het resultaat ziet er dan zo uit:

Overige parameters, handmatig toe te voegen

Zoals gezegd wordt niet voor alle parameters een optie in het dialoogvenster weergegeven. Hieronder staat een beschrijving van de overige parameters die handmatig aan de URL toegevoegd kunnen worden:

Gebruik van de parameter feature

Om in te kunnen zoomen naar een feature met een bepaalde attribuutwaarde, is een doorzoekbare laag nodig. Volg deze stappen om het zoeken naar attributen binnen een laag aan te zetten: ga naar ArcGIS Online > Content en klik op de webmap. Ga vervolgens naar Instellingen > webmap > Applicatie-instellingen. Vink bij “Locaties zoeken” de optie “Op kaartlaag” aan en kies de laag en het attribuut waarin gezocht moet worden.

De syntax van de feature parameter is als volgt:

De layerID van de laag kan als volgt worden achterhaald:

Ga naar https://www.arcgis.com/sharing/rest/content/items/<webmap ID>/data?f=json.

Wanneer de webmap ID is ingevuld in de link, wordt een overzicht gegeven met de IDs van de lagen in de webmap:

Om te kunnen zoeken naar het Groothandelsgebouw in de laag RdamGebouwen moet de parameter als volgt aan de URL toegevoegd worden:

Coderen van teksten en URL’s

Bij verschillende parameters kan tekst ingevuld worden, bijvoorbeeld bij title en description van de marker, de feature en find parameters en de URL’s van logoimage, logolink en de marker. Omdat hier speciale tekens gebruikt worden, kan dit voor problemen zorgen. Het veiligste is om daarbij gebruik te maken van gecodeerde html, waarbij bijvoorbeeld de spatie vervangen wordt door %20. Op het internet zijn verschillende websites waar teksten gecodeerd kunnen worden, bijvoorbeeld: https://www.urlencode.nl.