Hands on

Park and Ride Routing with the HERE Intermodal Routing API

By Lene Preuss | 20 March 2018

As previously announced, HERE recently released the Intermodal Routing API. Intermodal routing is a novel capability that allows users to find routes across different modes of transportation, such as combining air and ground travel, rail and bike share, or public transit and taxi services.

Current routing services can only route across a single mode of transportfor example, car routing, public transit routing or bike routing. Combining modes really opens new possibilities.

Because Park and Ride is a common and oft-requested application for intermodal routing, we implemented it first. Park and Ride enables use cases ranging from calculating your personal best route to reach your office, to showing customers a map with comfortable Park and Ride solutions to reach your company headquarters in a congested city, to offering a fully flexible Park and Ride Routing solution.

Please note that HERE is offering Park and Ride Routing only in specific locationssee the Coverage Information for currently supported cities. This list is growing as we collect the necessary data for more and more destinations, so check back soon if you don't see what you're looking for now.

Without further ado, let's show you how to implement a map using the HERE Intermodal Routing API on your website.

 

What you need

To work with any HERE API, you need to get yourself a pair of credentials. They consist of an App ID and an App Code. You can get your own set of credentials by signing up for free on developer.here.com. After signing up you will see an option to generate an App ID and an App Code. If you have already signed up, you can access your credentials on your "Projects" page. 

For this API, licensing compliance means there's one extra hoop to jump through to activate access. Please fill out the form on the Contact Us page, noting your App ID and requesting that it's enabled for the Intermodal Routing API. We'll try to respond ASAP, but it can take up to three days to activate.

In the meantime, we will quickly show you how to set up the HERE Maps JavaScript API. While this post does not go into details of how to use the HERE Maps JavaScript API itself, our 8-part in-depth tutorial does:

In this tutorial we will create a JavaScript program that displays a map of Chicago and, from a starting point you choose, calculates a Park and Ride route to the HERE offices in Chicago. It should be easy for you to choose a different destination, or extend the script so you can select both origin and destination for your journey freely.

 

Finally: some code!

Now that you have your HERE API credentials, you can go ahead and create a JavaScript script to render a map.

Of course, you must first create an HTML file to render your JavaScript:

Here we have included the basic HERE JavaScript API imports and also created a div where our map will be displayed. Then we are including the file here.js, which we are writing next:

Now you have set up a HERE map, centered at the HERE Chicago offices, which are located at 41.884238 degrees North, 87.638862 West. (See? You already learned something!) It should look approximately like this:

HERE Map centered on Chicago HERE office

Since it is out of scope of this tutorial to explain how to process and render a route (the HERE Maps Javascript API tutorial is covering that), I'll just give you some code which takes care of that. Let's just very quickly add in some code to select a point on the map to start our route from. Copy it and save it to the file tools.js, which, you may have noticed, we are already including in the HTML file above:

Now that you have the basics in place, you are ready for the big moment: Firing off a request to the HERE Intermodal Routing API. The request will look like this:

The request parameters are the app ID and app code you set up earlier, the parameter profile you use to specify you want a Park and Ride route, dep and arr to specify the coordinates of your start and end point, and a time for which you want the route to be calculated.

If you look at the function Mobility.prototype.route above, you will see this request being assembled, along with the parameters graph and maneuvers, which are needed if you want to visualize the returned route - if you don't want to know the geometry and maneuvers for the route, you can omit them.

And here is (an edited version of) what the response will look like. Actually, you'll get a much longer response, but we are limiting ourselves to the bits that are interesting for this tutorial. For a depiction of the full response, see the Park and Ride Routing Example from the documentation.

The response gives us a JSON list of three Connection objects (of which only one is shown here), each of which contains a list of Sec objects (again, we are only showing the first one). The Sec objects represent parts of the journey between which the vehicle is switched. Most importantly for us here, they also contain the Graph object, which we use to visualize the route on the map.

Let's use our utility class to make a request to the HERE Intermodal Routing API and visualize the response. To the end of the here.js file, add this code:

And with just that you have requested and displayed a Park and Ride route on a map. Your result, depending on the start point you use, should look something like this:

HERE Map with PnR route to Chicago HERE office

Now you can go forth and modify the code to suit your needs!

 

Summary

We have implemented a map doing Park and Ride Routing in about 180 lines of code, most of which is needed to visualize the route. But of course there is more to it. The Intermodal Routing API Documentation is there to help you. For more general questions on how to use the HERE Javascript API, refer to the HERE JavaScript API documentation or the eight-part tutorial linked above. If you run into a problem the documentation cannot solve, please ask questions on Stack Overflow. Finally, this tutorial is available as a Markdown file on GitHub here.

Happy coding!