Interactieve kaart thema iconen

Het gebruik van thema iconen op de kaart is een relatief technisch verhaal. In de toekomst zal dit gebruiksvriendelijker gemaakt worden, maar tot die tijd is er bepaalde kennis van webontwikkeling vereist.

Dit artikel is momenteel alleen van toepassing op de interactieve kaart, zie de how-to en widget referentie voor meer informatie:

Interactieve kaartIdeeën op een kaart (Kaart applicatie)

Daarnaast is dit artikel een aanvulling op het instellen van thema's op een website. De basis hiervoor wordt hier uitgelegd:

Global

Dit artikel gaat over de drie verschillende soorten iconen die in de interactieve kaart gebruikt worden; de markers die een inzending op de kaart aangeven, de icoontjes op de tegels in de lijstweergave, en de marker die een geselecteerde locatie op de kaart aan geeft.

Twee verschillende soorten iconen in de interactieve kaart; links in de lijstweergave en rechts op de kaart.

Iconen definiëren

De iconen definieer je in het JSON formaat.

Van alle iconen heeft het JSON object de volgende onderdelen:

Key
Toelichting

"html"

De afbeelding van het icoon in SVG formaat. Vul de SVG in als een string. Let op: de SVG string moet je escapen.

"width"

De hoogte van het icoon in aantal pixels, als number.

"height"

De breedte van het icoon in aantal pixels, als number.

In het geval van de inzendingen op de kaart en de geselecteerde-locatie-marker, is het ook nodig om het ankerpunt van het icoon aan te geven:

Key
Toelichting

"anchor"

De positionering van het ankerpunt van de marker op de kaart, aangegeven met de x- en y-waarden in pixels, in een array van twee numbers.

In het geval van de geselecteerde-locatie-marker moet de volgende className toegeovegd worden:

Key
Waarde

"className"

"osc-ideas-on-map-icon"

De iconen van inzendingen op de kaart en in de lijstweergave stel je in bij thema's in Global, de geselecteerde-locatie-marker geef je aan in de widget-instellingen onder Kaart.

Voorbeelden

Icoon in lijstweergave

Icoon op de kaart

Last updated