# Interactieve kaart thema iconen
{% hint style="info" %}
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.
{% endhint %}
Dit artikel is momenteel alleen van toepassing op de interactieve kaart, zie de how-to en widget referentie voor meer informatie:
{% content-ref url="/pages/rFm9Ak9B0XFWS1cXDscq" %}
[Interactieve kaart](/openstad/manual/how-tos/interactieve-kaart.md)
{% endcontent-ref %}
{% content-ref url="/pages/aoHXeGVNhO72bQamBDu2" %}
[Ideeën op een kaart (Kaart applicatie)](/openstad/manual/modules/ideeen-op-een-kaart-kaart-applicatie.md)
{% endcontent-ref %}
Daarnaast is dit artikel een aanvulling op het instellen van thema's op een website. De basis hiervoor wordt hier uitgelegd:
{% content-ref url="/pages/QjsFzmcmio5GEsYX4fIs" %}
[Global](/openstad/manual/miscellaneous/openstad-hoofdmenu/global.md)
{% endcontent-ref %}
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.
## Iconen definiëren
De iconen definieer je in het [JSON formaat](https://developer.mozilla.org/en-US/docs/Glossary/JSON).
Van alle iconen heeft het JSON object de volgende onderdelen:
| Key | Toelichting |
| -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| "html" | De afbeelding van het icoon in [SVG formaat](https://developer.mozilla.org/en-US/docs/Web/SVG). Vul de SVG in als een string. Let op: de SVG string moet je [escapen](https://www.freeformatter.com/json-escape.html). |
| "width" | De hoogte van het icoon in aantal pixels, als [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number). |
| "height" | De breedte van het icoon in aantal pixels, als [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) van twee [numbers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number). |
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](/openstad/manual/miscellaneous/openstad-hoofdmenu/global.md), de geselecteerde-locatie-marker geef je aan in de widget-instellingen onder [Ideeën op een kaart (Kaart applicatie)](/openstad/manual/modules/ideeen-op-een-kaart-kaart-applicatie.md#kaart).
### Voorbeelden
#### Icoon in lijstweergave
```
{
"html": "",
"width": 34,
"height": 34
}
```
#### Icoon op de kaart
```
{
"html": "",
"width": 34,
"height": 45,
"anchor": [17,45]
}
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.openstad.org/openstad/manual/miscellaneous/interactieve-kaart-thema-iconen.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.