IT

Nieuwe Drupal-site voor Vlaams Verkeerscentrum


De website van het Vlaams Verkeerscentrum zit in een nieuw Drupal-jasje! De combinatie van een krachtig, maar flexibel framework en een kaartoplossing die voldoet aan de hoogste verwachtingen zorgt ervoor dat de nieuwe site dé toegangspoort is voor actuele en historische informatie over mobiliteit in Vlaanderen. Hoe gingen de developers en analisten van #teamAUSY te werk?

In ’t kort: wat vind je zoal terug op de site?

  • Een duidelijke wegenkaart met informatie over de reistijd, incidenten, de locatie van park & ride zones … Inclusief de mogelijkheid om te switchen naar een styling aangepast aan kleurenblinden.
     
  • Los van de actuele verkeersinformatie, kan je ook een indicatie krijgen van de files op een bepaalde weekdag en op een bepaald tijdstip.
     
  • Drupal slaat om de 15 minuten een snapshot op gebaseerd op de informatie uit het Traffic Control Centre. Daardoor is het mogelijk om historische verkeersinformatie op te vragen.
     
  • Je kan de reistijd berekenen tussen 2 knooppunten en de situatie bekijken voor de ring van Brussel en Antwerpen.
     
  • Je vindt er nieuwsberichten en live camerabeelden, leest er meer over geplande werken en je kan er studies, datasets en veelgestelde vragen raadplegen. 
     
  • De website biedt de mogelijkheid om te registreren. Op die manier kan je een traject dat je regelmatig aflegt, toevoegen. Nadien kan je dan snel en eenvoudig de details van het traject raadplegen.

Laat ons wat dieper ingaan op een aantal van die functionaliteiten.

Interactieve kaart toont actuele verkeersgegevens

Waar sta je in de file, gebeurde er op je weg een ongeluk en waar stoot je op wegenwerken? Onder andere op die vragen krijg je op de kaart, die prominent aanwezig is op de homepage, een antwoord. Standaard zie je de verkeerssituatie voor Vlaanderen en Brussel, maar je kan in het dropdownmenu ook een regio selecteren. Zo krijg je up-to-date verkeersinformatie op maat!

Om de kaart optimaal te kunnen ontwikkelen, werkten we samen met GIM. Zij zijn gespecialiseerd in Geo-ICT & GIS, location intelligence en aardobservatie. De partner bij uitstek dus! 

De kaartcomponent is geïmplementeerd als een JavaScript Widget die volledig in de browser van de eindgebruiker draait en geen specifieke browser plugins vereist. Deze widget is gebaseerd op OpenLayers, AngularJS en Bootstrap. Selecteer je een knooppunt, dan wordt die specifieke regio doorgegeven aan de kaart via een API. Op die manier kan de kaart zich positioneren en inzoomen op de gekozen regio. 

Verder bevat de kaart nog een paar functionaliteiten die zorgen voor een optimale gebruiksvriendelijkheid:

  • Wil je bepaalde lagen (files, incidenten, camerabeelden …) zichtbaar of onzichtbaar maken? Dat kan dankzij de hiërarchisch opgebouwde layer manager
     
  • Dankzij de HTML5 Location API kan je, als je klikt op de knop ‘Mijn locatie’ onmiddellijk inzoomen op de locatie waar je je op dat moment bevindt. De API maakt gebruikt van lokalisatie op basis van de GPS of de internetverbinding. 
     
  • Je hebt de mogelijkheid om de kaart te delen via Twitter of Facebook. De op dat ogenblik actieve kaart wordt dan omgezet in een beeld.

Reistijd van knooppunt tot knooppunt

Hoe lang doe je over een bepaald traject? Via de vernieuwde pagina ‘reistijden’ bereken je de reistijd tussen 2 knooppunten. Die knooppunten worden na de selectie ook doorgegeven aan de kaart via de API. 

Bovendien krijg je op dezelfde pagina voor de regio Brussel en Antwerpen afzonderlijke kaartjes met de actuele reistijden te zien. Je kan die informatie raadplegen voor de binnen- en buitenring en de inkomende en uitgaande snelwegen.

Ook nood aan een webapplicatie?

We stellen je eigen client team samen en smijten ons volledig op je digitale project!

Onder andere op deze pagina is er nauwe interactie nodig tussen de verschillende paginacomponenten en de kaartcomponent. Selecteert de gebruiker een knooppunt in het dropdownmenu, dan moet op de kaart het juiste knooppunt oplichten. Omgekeerd moet in het dropdownmenu het juiste knooppunt geselecteerd worden wanneer de gebruiker op de kaart een knooppunt aanduidt. We zorgden ervoor dat er geen wederzijdse afhankelijkheid nodig is tussen de kaartwidget en de pagina. Al de informatie die nodig is om de kaartwidget correct te laten werken, wordt doorgegeven van de pagina naar de widget.  De pagina interageert met de widget via de API. 

Hoe kan de kaart met de pagina communiceren? Dankzij gebeurtenissen als onderdeel van de API. Die gebeurtenissen, zoals inzoomen of een knooppunt aanduiden, worden doorgegeven van de widget naar de pagina.

Dagelijkse files: performante animatie

Wat zijn de typische files op een bepaald moment in de week? Dat kom je op een interactieve en visuele manier te weten op de pagina ‘dagelijkse files’:

  • Je kiest een dag en tijdstip en klikt op de afspeelknop. 
  • Het CMS laadt de bijhorende snapshot van de gemiddelde file-informatie. 
  • Die info wordt doorgegeven aan de kaart, die op haar beurt de informatie visualiseert.

Klik je als bezoeker op de afspeelknop met play- en pauzefunctionaliteit, dan geeft de pagina aan de kaartwidget het filebeeld voor verschillende tijdstippen door, samen met de frequentie waarmee het filebeeld wordt ververst. Op die manier garanderen we dat de uitwisseling tussen de kaart en de Drupal-module beperkt blijft. Dat heeft dan weer een gunstig effect op de performantie van de animatie.

En of we klinken op het resultaat!

Samengevat, ons team gaf de website de makeover die hij nodig had: gebruiksvriendelijke functionaliteiten en noodzakelijke koppelingen tussen de verschillende deelcomponenten om tot het ecosysteem te komen dat het Vlaams Verkeerscentrum moet toelaten om haar doelstellingen te halen!

Lees verder

Picture of a macbook with colourful stickers
6 digitale trends waar elke CEO baat bij heeft
#digitaltrends #changeyourmind
Developer achter pc
Maak je klaar voor Drupal 9 (e-book)
#Drupal9 #webdevelopment #newrelease
Logo KV Mechelen e-sports
AUSY verovert de e-sportwereld
#IT #kvmechelen #esports