Tutorials / Use HERE Location Services Routing API to navigate to features in hosted in the Data Hub provided by HERE.
Last Updated: December 15, 2020
Introduction
Duration is 3 min
This tutorial will walk you through combining the Data Hub API and Spaces and HERE Location Services to create an interactive routing application. Using a public data source of drinking fountains in Seattle, the user of the application will be able visualize the path from a specified starting location to a drinking fountain location. The drinking fountain dataset will be stored in a Data Hub space.
The result of this tutorial will be an interactive map application rendered with Leaflet and Tangram.
screenshot
This tutorial demonstrates the use of multiple HERE products:
The Geocoder REST API enables developers to convert street addresses to geo-coordinates and vice-versa with forward geocoding, including landmarks, and reverse geocoding.
What is the Places API?
The Places (Search) API is a REST API that allows you to build applications where users can search for places and receive detailed information about selected places.
What is a Data Hub Space?
A Data Hub space is an open, interoperable and real-time location data management service from HERE Technologies that offers simple APIs, SDKs, components, and interactive tools that enable everyone to make maps easier and faster.
A Data Hub space is a real-time cloud-based location hub for discovering, storing, retrieving, manipulating and publishing private or public mapping data.
Click on the export button in the top right, and then the GeoJSON link.
Move the file into your project’s directory. For convenience, I renamed the file fountains.geojson
Upload data to a Data Hub space
Duration is 12 min
The first task we’ll accomplish is uploading the data to a Data Hub space. Data Hub spaces, part of the Data Hub API, are powerful geo-spatial databases that can store millions of rows. A great benefit about Data Hub spaces, is that they automatically tile the data; meaning that the data can be queried efficiently for map display.
For more information about Data Hub spaces, take a look at the documentation.
There are many ways to upload data to a Data Hub space:
I prefer the CLI because of its ease of use. To install the CLI, run the command:
npm install -g @here/cli
Next, configure your credentials by running:
here configure account
When prompted, enter your here account credentials.
The next step is to create a new Data Hub space with the following command:
here xyz create -t "Seattle Drinking Fountains" -d "Locations of drinking fountains throughout Seattle"
The -t and -d options are for the space’s title and description.
Upon completion, the here xyz create command will a success message like:
xyzspace 'zgsrj7y4' created successfully
Be sure, to copy the id in quotations–we’ll be using this in a future step.
To upload the data to the space, use the following command:
here xyz upload YOUR_SPACE_ID -f fountains.geojson
Be sure to replace YOUR_SPACE_ID with the space id that was outputted when you created the space with the here xyz create command.
Now is also a good time to grab your Data Hub space token. To see your available tokens, run the following command:
here xyz token
Keep one of these tokens handy–we’ll be using it in future steps.
Congrats! We’ve now created a new Data Hub Space and uploaded data. To verify you’ve successfully created the space, you can run the following command:
Last but not least, create a file titled index.js with the following code:
const here = {
id: 'HERE-APP-ID',
code: 'HERE-APP-CODE'
};
const map = L.map('map', {
center: [47.608013, -122.335167],
zoom: 13,
layers: [
Tangram.leafletLayer({
scene: 'scene.yaml',
events: {
click: onMapClick
}
})
],
zoomControl: false
});
async function onMapClick() {
//We will write code in here later...
}
The above code initiates the Leaflet map with a Tangram vector layer. Don’t try to run the project yet–it is still missing some components.
Additionally, be sure replace HERE-APP-ID and HERE-APP-CODE with your own credentials obtained on the HERE Developer Portal.
Configure the Tangram layer
Duration is 5 min
So far, we’ve uploaded data to the Data Hub space and carved out our web application’s basic code skeleton. In this section, we’ll focus on getting our Leaflet/Tangram map up and running.
Go ahead and create a new file scene.yaml. A YAML scene file is a file Tangram uses to interpret map styling rules. In this file, we’ll be configuring styling rules that not only style cartography objects like parks, roads and builings, but also our very own drinking fountain data.
Go ahead and paste the following into the scene.yaml file:
Be sure to replace STUDIO-TOKEN with your your account’s token. Remember, you can find your account’s token by running here xyz token in the command line or by visiting the Token UI. Quick checkpoint: let’s open up the index.html file and take a peak at the application. If all goes well, you should be seeing the following:
checkpoint
You may need to set up a local server in order for the map to render properly. For example, on a mac, you can try something like:
python -m SimpleHTTPServer 8888
Add drinking fountain data to the map
Duration is 5 min
Now that the map is configured, let’s add the drinking fountain data to it from the Data Hub space.
To do this, we’ll be adding a new source and layer to Tangram’s scene.yaml file, just like we would do with any other cartography feature.
First, we added the data source inside of the sources section. Then, we configured the fountains dataset as a layer inside of layers. Ensure that interactive is set to true. This will be important when we try to interact with the data inside on the map.
If you are curious about how the Tangram scene file works, I recommend taking a look at the official documentation.
Now, let’s take a look back at our map. Refresh the page and you should see the map populated with purple markers!
checkpoint-2
Add geocoding capabilities to the map
Duration is 5 min
In our application’s interface, we enable the user to input a starting location for the routing to a drinking fountain. The input takes in addresses, which is easy for us humans to understand. However, maps and services built on top of maps require coordinates instead of addresses. In order to transform addresses to coordinates, we must geocode them. Luckily, HERE has a REST service to do exactly that.
The function geocode() takes in a parameter, query, and pumps it through the HERE Geocoder API, and then returns a latitude and longitude object in the form of:
{
Latitude: Number,
Longitude: Number
}
Add routing capabilities to the map
Duration is 5 min
We now have two points:
the starting location specified by the user in the input form (and then geocoded)
the location of a particular drinking fountain in the Data Hub space (the user will click on this)
This means we can move on to the routing function. Add the following method to index.js:
This function takes in two sets of coordinates (start and end) and returns an object with routing information. Since we would like shape information of the route, we added on &routeattributes=shape onto our request URL. For additional routing features and parameters, be sure to check out the Routing API documentation.
Put it all together
Duration is 10 min
Now that we have our map, geocoding function, and routing function complete, let’s start tying it all together with some interactivity.
Insert the following after the map initialization in index.js:
The variable startCoordinates will be the variable storing the coordinates of the starting position of the route. This variable can be updated by the user through the input form. This variable is currently an empty string, but will be assigned once addStartingMarker() is called upon map load.
addStartingMarker() is a function to add the starting marker to the map. Anytime the change button next to the input form is clicked, this function will update the marker’s position. This function also calls geocoding function to translate the input form’s address to coordinates.
clearMap() is a helper function for clearing lines on the map. This function is executed when the Clear polyline button is clicked by the user. This function will only clear out polylines from the map; the starting marker and the Tangram layer will not be removed from the map.
You may be wondering why Leaflet and Tangram were used in this tutorial, as opposed to the HERE JavaScript API. The Data Hub is all about interoperability with 3rd party and open source tools, so we wanted to provide an example of Data Hub spaces and Leaflet and Tangram. Data Hub spaces can be used with any vector tile renderer of your choice.
In this tutorial, you’ve learned how to:
create Data Hub spaces and upload data with the HERE command line interface.
transform addresses to coordinates with the HERE Geocoding API.
create routing requests with the HERE Routing API.
develop interactive mapping applications with Leaflet and Tangram.
and navigate to nearby Seattle drinking fountains!
This is just a basic example of what can be done with HERE Location Services and the Data Hub API, take a look at the HERE Developer blog to see more examples of creative and useful applications of HERE Location Services and Data Hub.