Custom WordPress Culturele Kaart Plugin met Leaflet voor IVAK

Ruiter Fotografie - Nieuwe responsive website

De vraag: Ontwerp en bouw een filterbare kaart voor WordPress waarop al het cultuuraanbod in onze gemeente te zien is

Stichting IVAK in Delfzijl, Loppersum en Appingedam moest invulling geven aan haar nieuwe rol in het culturele landschap. Naast het ontwerpen en ontwikkelen van een vernieuwde website was een van de vragen of wij ook een cultuurkaart konden bouwen en ontwerpen. Het doel van de cultuurkaart is om al het cultuuraanbod in de nieuwe gemeente in één oogopslag zichtbaar te maken.

De kaart moest aan een aantal eisen voldoen: Naast gebruiksvriendelijkheid moest de kaart ook op mobiel functioneren, toegankelijk zijn en moest IVAK zelf beheer krijgen over de aan te maken categorieen.

Een dynamisch aanpasbare filterbare kaart die via de backend van WordPress onderhouden kan worden dus.

Onze oplossing maakt gebruik van een aantal technieken. Zo hebben we met CSSGrid gezocht naar een geschikte manier om de kaart en het filter weer te geven op alle schermen. Ook maakten we gebruik van Leaflet voor het opbouwen van de kaarten en kan IVAK via de custom plugin eenvoudig de kaart beheren in WordPress.

Project details

Klant Stichting IVAK
Datum januari 2019 tot oktober 2019
Skills design, development
Tools Sketch / Invision / GIT / WordPress / Leaflet
Bekijk live project »

Custom Kaart Plugin met Leaflet voor WordPress

De cultuurkaart plugin is opgeleverd als volledig dynamisch product. Met Leaflet hadden we zelf meer controle over het type weergave en de manier waarop de data aan de achterkant kon worden afgehandeld. Leaflet is dé open-source Javascript library voor responsive en interactieve kaarten. We hebben een eigen plugin geschreven waardoor het toevoegen van deelnemers aan de cultuurkaart aan de achterkant niet afwijkt van het invoeren van een nieuwsbericht. Ook is het beheer van de categorieën op deze wijze doorgevoerd. Het resultaat moest natuurlijk op alle soorten schermen functioneren. We hebben het dus allemaal responsive gebouwd. De kaart kan middels een shortcode geladen worden op een pagina naar keuze. Ook hierin is IVAK keuzevrij!

Ruimte voor een goed idee tijdens de ontwikkeling…

Een leuke extra functionaliteit die we tijdens de ontwerpfase hebben bedacht is dat je bij het filteren een pop-up krijgt wanneer er geen resultaten zijn. De kaart vraagt dan of je een aanvraag wil versturen naar IVAK met jouw selectie. Deze gedachtegang paste helemaal bij de nieuwe rol van IVAK en dus kreeg de functie een plekje in het eindresultaat.

Open Lesweek, nóg een custom kaart!

Nadat de cultuurkaart was gelanceerd en we de kinderziektes eruit hadden gekneed was het tijd voor de tweede kaart. Het IVAK zit nooit stil als het om cultuuraanbod gaat en had bedacht om de Open Lesweek in September ook via een kaart te promoten. Op deze kaart werden deelnemers aan de lesweek getoond met de extra informatie over de tijdvakken waarin men kon langskomen op de open dagen. Ook dit moest filterbaar worden weergegeven: Op datum, lestype en leeftijd. Ook moest de kaart ieder jaar kunnen worden aangepast met nieuwe deelnemers, data en selectiecriteria.

Op basis van de cultuurkaart hebben we deze versie gebouwd. De grafische schil was er al, alleen de extra achterliggende logica nog. Met name de weergave van meerdere deelnemers per locatie was een extra uitdaging. Dit hebben we opgelost door een nieuw icoontje te introduceren op de kaart waarmee wordt aangegeven dat er meer deelnemende partijen op die locatie zijn. Na een doorklik krijg je dan een dropdown lijst te zien met de deelnemers.

Via WordPress dynamisch deelnemers en categorieën toevoegen

Het bouwen van de kaart was op zich prima te doen. Ook pinnetjes plakken op een locatie is nog prima te doen. De uitdaging zat ‘m vooral in het beheersbaar maken van de plaatsingen in de back-end van WordPress. Er moest immers een grafische schil om de data heen gebouwd worden zodat medewerkers van het IVAK zonder het invoeren van codes gewoon een deelnemer konden toevoegen. Ook bleek later dat er nogal wat uitzonderingen zijn: immers iemand van buiten de gemeente die op meerdere locaties lesgeeft moest óók op de kaart worden weergegeven. Ook wilde IVAK graag zelf de categorieën kunnen beheren en naar eigen inzicht toevoegen, toewijzen en organiseren.

We hebben voor Leaflet gekozen omdat we het veelvuldig gebruik en delen van data van Google wilden vermijden. De gegevens die op de kaart getoond worden zijn via de back-end van WordPress in te vullen door een gewone gebruiker en worden opgeslagen in de standaard WordPress tabellen. Er worden dus geen extra tabellen gemaakt maar er wordt gebruik gemaakt van de native WordPress functionaliteiten.

Kaart ook in lijstview beschikbaar maken

De kaart moest ook als cultuurlijst beschikbaar zijn, want er zijn altijd gebruikers die liever in een lijst met aanbod filteren dan op een kaartje kijken. De kaart opent op de pagina en dient hierbij vooral om in een oogopslag de hoeveelheid en diversiteit van het cultuuraanbod in de regio te tonen. De lijstview biedt daarentegen in een oogopslag meer achtergrondinformatie over de deelnemers. De deelnemers zijn daar namelijk direct met foto/naam/categorie en omschrijving zichtbaar. Ook is er voor iedereen een link naar de website en/of facebook mogelijk.