Who wants ice cream?! — In this series of blog posts we are going to develop a small web application called "Gelary" using HERE maps and services. Gelary aims to disrupt the ice-cream market by enabling ice-cream producers to deliver their sweet goods directly to their customers, wherever they are.

The final application will resemble a mobile dashboard view for the employees of our little start-up which they can either take on the road or use at Gelary HQ to plan their work. It will consist of a map and a floating control panel behind a menu button. The map is used to visualise a route, starting from the user's current position along a series of customers, and the traffic situation along the route. The control panel will enable our delivery drivers to search for nearby ice cream shops, display turn-by-turn directions as well as to calculate the best pick-up location for a group of selected customers. The app will also be able to handle order changes: e.g. if a customer cancels or updates his or her position, the route will automatically be recalculated.

To keep things simple our application will use plain Javascript (ES5) and front-end technologies and will target mobile and desktop browsers alike.

What will we learn in this tutorial?

In order to give our drivers more accurate delivery times, we need to know if there are any issues along their route that might affect their delivery. For this, we will have a look at traffic and incident data, create a new class HERETrafficPanel to encapsulate it and then introduce layers to show the issues on the map.Sounds cool? — It is! Let's find those problem areas!

Traffic API

Due to our earlier hard work, displaying traffic and incidents on our map is going to be really easy. Actually, we already have all the required pieces for displaying the data! With the HERE Traffic API we treat these visualizations as layers on the map, so all we have to do is to retrieve those layers and insert them on the map, easy right?

Our map tiles already come from a default layer instance, the instance that we previously received from the platform object. Default layers also contain traffic and incident tiles, so we can simply get them from there. Simple!

Traffic panel

Now we have learned the fundamentals for handling traffic and incident data layers. That's all good, but next we have to think how we want our users to interact with these layers. We also want to encapsulate the logic somehow so that our code stays clean and doesn't get too bloated.

To solve both of these issues let's create a new class which renders buttons for the user interaction and holds the state of the displayed layers. Let's call it HERETrafficPanel.

Let's start by creating a constructor for HERETrafficPanel. It takes the traffic and incident layers and also a placeholder DOM element where we will insert the panel.