New Drupal website for Vlaams Verkeerscentrum

We gave Vlaams Verkeerscentrum’s website a Drupal update! The combination of a powerful but flexible framework and a map solution that meets the highest expectations makes the new website the place to be if you want to get access to recent and historic information on mobility in Flanders. Which strategy did the developers and analysts from #teamAUSY use?

In short: what can you find on the website?

  • A clear road map that contains information on the traveling time, incidents, the location of park & ride zones … including the possibility to switch to a template adapted to the colourblind. 
  • Aside from current traffic information, you can also get an indication of the traffic jams on a specific day of the week and at a specific time.
  • Drupal saves a snapshot based on the information of the Traffic Control Centre every 15 minutes. This makes it possible to request historical traffic information.
  • You can calculate the travel time between 2 points and check the traffic situation on the ring around Antwerp and Brussels.
  • You can find news items and live camera feeds, read more about upcoming roadworks and consult studies, databases and frequently asked questions.
  • The website offers the possibility to register. This way, you can add your frequent trajectories. Afterwards, you have easy access to the details of the trajectory. 

Let’s take a closer look at some of these functionalities.

Interactive map showing current traffic information

Where exactly are you stuck in traffic, did an accident happen and are there roadworks near you? You get an answer to these questions and many others on the map, prominently shown on the homepage. By default, you get to see the traffic in Flanders and in Brussels, but you can use the drop down menu to select a different region, for traffic information that’s always up to date and adapted to your needs!

While developing this map we worked together with GIM. This company specializes in Geo-ICT & GIS, location intelligence and earth observation. The ideal partner for us!

The map component is integrated as a JavaScript Widget that runs entirely in the browser of the end user and doesn’t require any specific browser plugins. This widget is based on OpenLayers, AngularJS and Bootstrap. When you select an intersection, that specific region is communicated to the map via an API. The map positions itself and zooms in on the chosen region.

Furthermore, the map also contains some functionalities that aid the user friendliness:

  • You want to show or hide some specific layers (traffic jams, incidents, video footage …)? This is possible thanks to the hierarchically constructed layer manager.
  • The HTML 5 Location API allows you to immediately zoom in on your location when you click on ‘My location’. The API uses localisation based on the GPS or on the internet connexion.
  • You can share the map on Twitter or Facebook. The active map will be switched to an image.

Traveling time from intersection to intersection

How long does a specific trajectory take? On the updated page ‘traveling times’ you can calculate the traveling time between 2 intersections. Those intersections will be send to the map through the API, after the selection.

Furthermore, the separated cards for the region Brussels and Antwerp allow you to check your current traveling time. You can access this information for the inner as well as the outer ring and all of the incoming and outgoing highways.

Do you also need a new web application?

We compose your own client team and we get to work on your digital project!

This page needs a close interaction between the different page components and the map component. When the user selects an intersection in the drop down menu, the correct intersection has to light up on the map. If the user selects an intersection on the map, the correct intersection also has to be selected in the drop down menu. We made sure there is no mutual dependency necessary between the map widget and the page. All the information needed for a correct functioning of the map widget is sent from the page to the widget. The page interacts with the widget through the API.

How does the map communicate with the page? It makes use of occurrences as part of the API. Those occurrences, such as zooming in or selecting an intersection, are passed on from the widget to the page.

Daily traffic jams: efficient animation

Which roads are typically blocked on a specific day of the week? You can learn this in an interactive and visual way on the page ‘daily traffic jams’:

  • You pick a date and time and press play.
  • The CMS loads the matching snapshot of the average traffic information.
  • This information is sent to the map, the map visualizes it.

If a visitor presses play on the button with play- and pause functionality, the page sends the traffic information for different times, and the frequency with which the info is refreshed, to the map widget. Doing this, we can guarantee that the exchange between the map and the Drupal module is restricted. This enhances the performance of the animation.

We’re definitely pleased with the results!

In short: our team gave the website the makeover it needed: user friendly functionalities and necessary links between the different components to get to the ecosystem that will allow Vlaams Verkeerscentrum to achieve its goals!

Read on

2 people working with post-its on a wall
Why the agile approach will continue to grow
6 people icons in a grid
From pharmacy technician to helpdesk support
#Colleague #IT
A black and white picture of Sam in the woods
From IT’er of the family to IT’er at AUSY
#colleague #IT