Interactieve kaart
Last updated
Last updated
De ‘interactieve kaart’-widget kan onder andere op de volgende manieren ingezet worden:
Ter informatie punten op de kaart tonen - Plaats punten op de kaart en voeg hier een afbeelding en tekst aan toe.
Reacties op punten op de kaart uitvragen - Plaats punten op de kaart, met afbeelding en tekst, en vraag gebruikers van de website om op deze punten te reageren.
Gebruikers zelf punten op de kaart laten plaatsen - Vraag gebruikers om een locatie op de kaart te selecteren, en hier een afbeelding en tekst aan toe te voegen. Optioneel kunnen andere gebruikers hier weer op reageren.
De indeling van de ‘interactieve kaart’-widget bestaat uit 3 hoofdonderdelen:
Kaart (C) - aan de rechterkant wordt de kaart getoond, met daarop de punten die vooraf zijn ingeladen, of door gebruikers zijn geplaatst.
Contentvlak (B) - het contentvlak aan de linkerkant bestaat uit twee onderdelen. Bovenaan het selectievlak met grijze achtergrond (B1), welke meer informatie geeft over een geselecteerde locatie of inzending. Er onder een lijstweergave met inzendingen (B2). Zie hieronder Verschillende weergaves voor meer informatie over de inhoud van het selectievlak en de lijstweergave in verschillende omstandigheden.
Zoek- en filterbalk (A) - uitgestrekt bovenaan de lijst- en kaartweergave bevindt zich in de overzichtsweergave een grijze balk met daarin optioneel een zoekveld, filter-dropdown en een knop om alle punten op de kaart weer in beeld te krijgen.
Hierboven is de lay-out op brede schermen beschreven, zoals desktop en tablet. Op smallere schermen, zoals mobiel, wordt óf de kaart óf het contentvlak op de volle breedte van het scherm getoond.
Er kunnen verschillende weergaves onderscheiden worden. Ten eerste is er een verschil tussen de overzichtsweergave en de detailweergave.
In de detailweergave wordt alle informatie behorend bij één specifiek punt op de kaart volledig getoond, met eventueel bijbehorende reacties.
In de overzichtsweergave worden meerdere punten op de kaart getoond. Dit kunnen alle punten zijn, maar het kan ook een selectie van alle punten zijn, bijvoorbeeld binnen een bepaald gebied en/of binnen een bepaald thema. Binnen de overzichtsweergave kunnen we nog 3 verschillende weergavemodi onderscheiden:
Niets geselecteerd - dit is de weergave op het moment dat de widget vers geladen wordt. Op de kaart is niets geselecteerd. Optioneel wordt er in het grijze informatie/selectie-vlak algemene informatie getoond. In deze weergave kan dit vlak ook verborgen worden. Het contentvlak aan de linkerkant toont een lijst met tegels met alle punten die zichtbaar zijn op de kaart. Standaard worden bij het inladen van de widget alle punten op de kaart getoond, en worden deze dus ook in de lijst getoond. Als de gebruiker gaat inzoomen en schuiven met de kaart, dan kunnen er punten buiten de viewport vallen. Die punten verdwijnen ook uit de lijst. Oftewel; de lijst toont alleen de punten die op dat moment zichtbaar zijn op de kaart en dus binnen de viewport vallen. De gebruiker kan altijd terugkeren naar het totaaloverzicht door in de zoek- en filterbalk te klikken op de knop ‘Alles tonen’. Als de gebruiker klikt op een tegel in de lijst, dan opent de detailweergave van dat punt. Als de gebruiker klikt op een punt op de kaart, dan opent óf de detailweergave óf wordt de ‘punt geselecteerd’-weergavemodus getoond (zie hieronder), afhankelijk van de instellingen van de widget.
Punt geselecteerd (optioneel) - als er op de kaart een (ingezonden) punt aangeklikt wordt, dan kan deze optioneel in de overzichtsweergave uitgelicht worden. In het contentvlak wordt dan bovenaan met grijze achtergrond het geselecteerde punt op de kaart als tegel getoond. Daaronder worden in de lijst de dichtstbijzijnde punten getoond, die dus geografisch het dichtst in de buurt liggen van het geselecteerde punt.
(Nieuwe) locatie geselecteerd - dit is de weergavemodus als de gebruiker ergens op de kaart klikt, waar nog geen punt geplaatst is. In het contentvlak wordt een lijst met de dichtstbijzijnde punten vanaf de geselecteerde locatie getoond, vergelijkbaar met de ‘punt geselecteerd’-weergavemodus. Optioneel, afhankelijk van de instellingen van de widget, wordt er bovenaan in het contentvlak een knop getoond waarmee de gebruiker zelf op deze locatie een nieuw punt kan toevoegen aan de kaart.
Om de interactieve kaart in te kunnen zetten op een website, is het belangrijk dat op verschillende plekken de juiste instellingen staan.
Zoals elke widget, wordt ook de kaart geplaatst in een column section. Het is in het geval van de kaart belangrijk dat de volgende instellingen van de column section goed ingesteld zijn:
| Instelling | Waarde |
|---|---|
Columns | Full screen (vertical & horizontal) |
In combinatie met de 'full screen'-instelling van de column section, is het ook belangrijk dat de cookiebar gefixeerd onderaan de pagina getoond wordt. Zorg dat in de Page Settings van de pagina waarop je de kaart plaatst, het volgende staat ingesteld:
| Instelling | Waarde |
|---|---|
Hide the footer? | Yes |
Set the cookiebar fixed at the footer? | Yes |
Vanuit de globale instellingen van de website regel je twee verschillende zaken, die beide optioneel zijn; een grens om een bepaald gebied af te kaderen, en de verschillende thema's van de punten op de kaart.
Om een grens van een bepaald gebied aan te geven worden polygonen gebruikt. Lees in de volgende artikel meer over het gebruik van polygonen:
PolygonenPunten op de kaart kunnen gegroepeerd worden per thema, die je definieert in Global.
GlobalIn het geval van de interactieve kaart, kun je ook thema-specifieke iconen instellen. Lees meer in het volgende artikel:
Interactieve kaart thema iconenDe rest van de instellingen definieer je in de Ideeën op een kaart-widget.
Ideeën op een kaart (Kaart applicatie)
