Advanced Maps Data Sets: Display Road Names Within a Box
In the last blog post on the HERE Advanced Map Data Sets API I talked about displaying complete geometric layers on the map. In this blog post, I will discuss about applying spatial filters to these layers. Let's begin!
From the first blog post about HERE Advanced Map Data Sets, we learned that map data is arranged in tiles and organized as attributes with key-value pairs. In the second post we found out that there are geometric layers and attribute layers. We then rendered a geometric layer on the map. This layer displayed all the public transport stations in the world. Now, let’s learn how to filter these layers to return map data within certain areas using spatial filters.
Consider the following use-case: The user wants to draw a box on the map and get all road names within that box.
Select a layer
First you need to choose a suitable layer which has this information. A quick call to the list available attributes endpoint will tell you that road names are available in the layer ROAD_GEOM_FC1..5
.
GET https://s.fleet.ls.hereapi.com/1/doc/attributes.json?apiKey={YOUR_API_KEY}
...
{
"name": "NAME",
"description": "A name of this road line. Roads can have multiple names, in the same or multiple languages. This field contains any of those.",
"layers": [
"ROAD_GEOM_FC1",
"ROAD_GEOM_FC2",
"ROAD_GEOM_FC3",
"ROAD_GEOM_FC4",
"ROAD_GEOM_FC5"
]
},
...
Once you get details about this layer, you will learn that the numbers at the end of the layer name, correspond to the road functional classes. So, ROAD_GEOM_FC1
has names of all the major national roads (roads that allow for high volume, maximum speed traffic movement between and through major metropolitan areas). While ROAD_GEOM_FC5
holds the details of the tiny roads with the least volume and traffic (walkways, emergency vehicle only roads, access roads, parking lanes, etc.). Depending on the road names you need, you will need to query one or all the layers.
Filtering
Depending on your use-case, you can apply 4 types of spatial filters to the geometric data sets.
- Bounding Box- search within a box
- Corridor- search along a corridor/ road
- Proximity- search within a circle
- Quad Key- search through the grid location of a map tile which combines the zoom level, column and row information for a tile in a one value.
For this use-case, we will use the bounding box search. To define the bounding box, use the same convention that you would use for drawing the map object rectangle. This means, you need the top-left latitude, top-left longitude, bottom-right latitude and bottom-right longitude of this box. The main parameter here is the layer_id
. For bounding box search, you can specify only a single layer name at a time. As we want to get all road names within the box, we will loop this request for all 5 ROAD_GEOM_FC
layers. However, for corridor search and proximity search, you can specify multiple layers under layer_ids.
function printRoadNames(){
for(i=1; i<=5; i++){
var url = `https://s.fleet.ls.hereapi.com/1/search/bbox.json?`+
`apiKey=YOUR_API_KEY`+
`&layer_id=ROAD_GEOM_FC`+`${i}`+
`&key_attribute=NAME`+
`&bbox=${rectTopLeft.lat}`+`,`+`${rectTopLeft.lng}`+`;`+
`${rectBottomRight.lat}`+`,`+`${rectBottomRight.lng}`+
// `&bbox=52.45583,13.38771;52.45248,13.39629`+
`&geom=local`;
fetch(url)
.then(result => result.json())
.then(result => {
result.geometries.forEach(road => {
if(road.attributes.NAME!=null){
document.getElementById("panel").innerHTML+=`
`+road.attributes.NAME;
}
});
})
.catch(error =>{
console.error(error);
})
}
}
While handling the results, I have just printed the road names. You can use the other return parameters of the layer to form your result.
Conclusion
So, in just 2 steps you can use the HERE Advanced Map Data Sets to display data within a given area. The recommended way to use Fleet Telematics Advanced Data Sets is the tile interface, with caching on the client side. If you want an example that filters the Advanced Data Set along a road (corridor), check out the code snippet from day 85 of 100DaysOfCode with HERE. Also, if you haven’t done it yet, get your freemium apikeys form developer.here.com.
Have your say
Sign up for our newsletter
Why sign up:
- Latest offers and discounts
- Tailored content delivered weekly
- Exclusive events
- One click to unsubscribe