Mapbox tooling in een Jekyll website
Miniwebsite voor Agentschap Binnenlands Bestuur
Een miniwebsite in Jekyll met een kaartfunctie van Mapbox met twee centrale uitdagingen: een strakke deadline en een gebruiksvriendelijke tool zodat het ABB-team er zelf mee aan de slag kan.
België bestaat uit zo’n 300 steden en gemeenten. Dat is een hele hoop voor een klein land. Om de bestuurskracht van onze steden en gemeentes te vergroten, waren ze de afgelopen decennia genoodzaakt de handen in elkaar te slaan. Dat heeft ervoor gezorgd dat we de dag van vandaag met een kluwen van verschillende samenwerkingsverbanden zitten rond o.a. afvalophaling, hulpverlening, politie… Telkens met verschillende gemeentes en steden.
De Vlaamse Regering kwam met een oplossing: Afbakening van de referentieregio’s. Om tot een grotere coherentie te komen en om de regionale samenwerking te stimuleren, zet de Vlaams Regering in op Regiovorming. De Vlaamse Regering stelde een basisopstelling samen van 13 referentieregio’s waarmee de burgemeesters en lokale besturen het debat konden starten.
Onze UX designers zorgen voor een visuele kaart zodat de 13 referentieregio’s tastbaar zijn voor de verschillende burgemeesters.
Een design vriendelijke technologie om online kaarten in jouw huisstijl toe te voegen aan je website of applicatie.
Met Jekyll bouwen we een razendsnelle site voor ABB
In opdracht van het ABB (Agentschap voor Binnenlands Bestuur) ontwikkelden wij een dynamische kaart waarmee de discussie optimaal gevoerd kon worden. De dynamische kaart heeft drie specifieke functionaliteiten, namelijk een aantal vaststaande kaartlagen zoals Vlaanderen en zijn provincies. Ten tweede bevat de kaart een set van kaartlagen die de verschillende soorten samenwerkingszones toont zoals een zone van afvalophalings, politiezones, … De websitebezoeker heeft de mogelijkheid om zelf aan- of uit te vinken welke extra kaartlagen hij wil bekijken. Ten derde beschikt de kaart over een eenvoudige zoekfunctie naar de verschillende gemeentes met als bedoeling deze te markeren op de kaart.
De uitdaging van dit project was dat de tool op korte termijn opgeleverd moest worden en dat de tool zo flexibel mogelijk moest zijn voor de interne medewerkers van het ABB. Het is namelijk de bedoeling dat het ABB de vrijheid heeft de kaarten te manipuleren en/of uitbreiden zonder afhankelijk te zijn van een externe developer. Zo zijn we terecht zijn gekomen bij de tool Mapbox.
Mapbox is net zoals Google Maps een leverancier van op maat gemaakte online kaarten voor websites en applicaties. Applicaties zoals Foursquare, Lonely Planet, Snapchat, Strava, … maken gebruik van Mapbox.
Het voordeel van Mapbox is dat deze tool een heel uitgebreide en gebruiksvriendelijke omgeving aanbiedt om kaarten en kaartlagen naar eigen voorkeur vorm te geven. Deze functie heet Mapbox Studio en is een soort Photoshop voor kaarten. Je kan een map perfect afstemmen met de huisstijl van je merk. Je past eenvoudig kleuren en lettertypen aan, je voegt iconen of pictogrammen toe en je kan zelfs 3D-functies en camerahoeken aanpassen. Dankzij Mapbox ontwerpen we gebruiksvriendelijke kaarten waar het team van ABB geen complexe code voor nodig heeft.
Zodra de testversie of MVP (Most Viable Product) gefinaliseerd is, implementeren we deze oplossing in een Jekyll website. We maken gebruik van Jekyll omdat deze sitegenerator voor andere projecten voor ABB al succesvol is gebleken. Zowel smart.flanders als VLOCA zijn projecten voor ABB die we met Jekyll hebben opgezet. Op deze manier kunnen we efficiënt een nieuwe site in de juiste stijl opzetten.
Jekyll is een static site generator waarmee je lichtere sites kan bouwen. Dit betekent dat er op basis van enkele tekstbestanden HTML-pagina’s gegenereerd worden. Deze kunnen simpelweg opgeladen worden via (s)ftp of via github. Het feit dat pagina’s via Jekyll statisch zijn, betekent dat ze razendsnel zijn.
We creëren een miniwebsite met kaart, volledig in de stijl van de Vlaamse overheid. ABB beschikt zo over alle functionaliteiten die ze nodig hebben en de flexibiliteit om kaartlagen toe te voegen, te wijzigen of uit-/aan te vinken. Dit alles realiseerden we in een 5-tal dagen tijd. Alweer een succesvolle case voor de Vlaamse overheid.
