Who wants ice cream!? — A HERE Maps API for JavaScript Tutorial (Part 8: Wrapping Up)

29 November 2016 by Teemu Kallio and Florian Plank

Header

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 the previous post we learnt how to add traffic and incident data into our map, if you haven't read it yet, you might want to take a look at it first before going on.

It's been quite a journey for our ice cream men and now it's time to wrap things up. In this chapter we will recap the API features we've used and what we have learned so far. Let's go!

Basic setup

In the first chapter we went over the basics so we can utilize HERE API's. HERE provides comprehensive APIs for mapping, routing, places and traffic data and much more, so in order to use them in our application, we needed to set them up.

The first thing we did was set up a basic structure and took the first steps with HERE's APIs. We registered our app to obtain API keys and we learned how to place markers on the map and how to set custom SVG icons. The end result was a very simple interactive map with custom icons. A good foundation to build upon and spread the word of ice cream!

Custom Marker

You can refresh your memory with the basic setup post here.

Geolocation

In this chapter we demonstrated how to use the browsers geolocation API with HERE maps. It's was pretty simple and it connected us to the real world and gave us some ideas how to move forward with our application.

You can read the geolocation post here.

Routing

Routing API is one of the interesting features provided by HERE. It comes handy in many cases, also in context of delivering ice cream! At this point our application had the ability to draw a map and a marker to our location. We extended this by adding routing from location A to location B and placing markers to the locations.

Routing is perhaps the most used feature in our upcoming ice cream delivereries. We made this feature a little bit more practical by adding an interface component for rendering different route options so that our user can select the route that they would prefer.

Reroute

You can find the basic routing post here and the post on advanced routing here. If you're looking for more information on the routing API, you can check the documentation.

Places

Along routing another great feature provided by HERE is the so called Places API. As the name implies, this API helps us to find places and businesses from a certain geolocation.

For our use this comes handy when our ice cream deliverers want to refill their ice cream storages. The Places API is also very easy to use since it takes simply a search term and location and returns all the places found with those criterias.

You can the post on how to use the Places API here.

Also you can find more information on the Places API in the documentation.

Traffic & incidents

The last API feature that we covered was HERE's traffic and incident data API. This provides us realtime information about traffic conditions and incidents happening in a certain area. The feature is really easy to use and drawing the data to the map was simply done by just placing traffic and incidents layers on our map.

For our ice cream delivery company this was a very useful API since now our deliverers can navigate around the worst traffic jams and incidents. No more melting ice cream and more precise delivery times!

We also built a small user interface for the traffic and incidents data. With this our users could toggle data layers on and off. We implemented the interface using pure JavaScript, but of course, in the real world you would probably use a JavaScript framework of your choice.

Traffic

You can find the traffic and incidents post here.

Also you can read up more about the Traffic API in the documentation.

Wrapping up

Whew! We have come a long way with our ice cream delivery application. We built a basic application for delivering ice cream and we are ready to launch up our business! Of course our app is very simple but it demostrates how easy it is to build applications that uses maps and location data - from idea to reality - with help from HERE APIs.

Thanks for reading and stay tuned for the next series!

top 

You cannot use this account to purchase a commercial plan on Developer Portal, as it is already associated to plans with different payment methods.

To purchase a commercial plan on Developer Portal, please register for or sign in with a different HERE Account.

Something took longer than expected.

The project should be available soon under your projects page.

Sorry, our services are not available in this region.

Something seems to have gone wrong. Please try again later.

We've detected that your account is set to Australian Dollars (AUD).
Unfortunately, we do not offer checkouts in AUD anymore.
You can continue using your current plan as normal, but to subscribe to one of our new plans,
please register for a new HERE account or contact us for billing questions on selfservesupport@here.com.