Map Tile API Developer's Guide

Metainfo Tiles with Labels

This article shows example usage of matainfo tile for displaying and interaction with different kinds of labels.

User story

In order to make labels on the map interactive (display additional info upon selection, etc.) user obtains metadata information about an image, showing a map tiles that include different kinds of labels.

Mountain Peak Labels

Some tiles contain mountain peak labels, e.g. Vesuvius Volcano in Italy:

https://2.base.maps.cit.api.here.com
/maptile/2.1/maptile/newest/normal.day/17/70789/49227/256/png8
?app_id={YOUR_APP_ID}
&app_code={YOUR_APP_CODE}

The response to the request delivers the following image:

Figure 1. Map tile with mountain peak label

The code block below demonstrates a complete request for a metadata map tile:

https://2.base.maps.cit.api.here.com
/maptile/2.1/maptile/newest/normal.day/17/70789/49227/256/png8
?app_id={YOUR_APP_ID}
&app_code={YOUR_APP_CODE}
&metadata=metaonly
&mgen=2

The response to the request delivers the following Metainfo tile as a JSON object:


{ "metadata" : {
"street labels":[  ],
"labels":[{ "name": "Mount Vesuvius", "type":"MOUNTAIN_PEAK", "bounding boxes": [ { "box 1":[ 106, 226.80, 10, 10 ] }, { "box 2":[ 90, 195.80, 41.53, 31 ] } ] }],
"city center labels":[],
"buildings":[  ],
"transit stops":[  ],
"POIs":[  ]
}
}

This information allows to locate mountain peak label in order to make it interactive.

Mountain peak labels belong to "labels" array of metadata JSON object and have a "type" equals "MOUNTAIN_PEAK". Metainfo provides "box 1" array for mountain peak icon in the following format: [x, y, width, height], representing icon's bounding box. "box 2" represents bounding box for text label in the same manner.

Pedestrian Point Labels

Some tiles contain pedestrian point labels, e.g. in Kiev:

https://2.base.maps.cit.api.here.com
/maptile/2.1/maptile/newest/pedestrian.day/19/306646/176817/256/png8
?app_id={YOUR_APP_ID}
&app_code={YOUR_APP_CODE}

The response to the request delivers the following image:

Figure 2. Map tile with pedestrian point label

The code block below demonstrates a complete request for a metadata map tile:

https://2.base.maps.cit.api.here.com
/maptile/2.1/maptile/newest/pedestrian.day/19/306646/176817/256/png8
?app_id={YOUR_APP_ID}
&app_code={YOUR_APP_CODE}
&metadata=metaonly
&mgen=2

The response to the request delivers the following Metainfo tile as a JSON object:


{ "metadata" : {
"street labels":[  ],
"labels":[{ "name": "", "type":"PEDESTRIAN_POINT", "bounding boxes": [ { "box 1":[ 109, 157.91, 14, 14 ] } ] }],
"city center labels":[],
"buildings":[ { "id": "1602689303044557003", "vertices": [ 248.81, 256, 206, 197.88, 187, 210.44, 157, 174.31, 176, 163.34, 153, 133.50, 139, 116.25, 187, 81.69, 198, 92.69, 256, 167.28, 256, 256 ], "polygons": [ [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]], "outlines": [ [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]] },
{ "id": "1602689303044557014", "vertices": [ 0, 256, 0, 136.95, 53, 197.88, 86, 174.31, 120, 215.16, 86, 244.97, 71.33, 256 ], "polygons": [ [ 0, 1, 2, 3, 4, 5, 6]], "outlines": [ [ 1, 2, 3, 4, 5, 6 ]] } ],
"transit stops":[  ],
"POIs":[  ]
}
}

This information allows to locate pedestrian point label in order to make it interactive.

Pedestrian point labels belong to "labels" array of metadata JSON object and have a "type" equals "PEDESTRIAN_POINT". Metainfo provides "box 1" array for pedestrian point icon in the following format: [x, y, width, height], representing icon's bounding box.

Other (Unclassified) Labels

There are also a lot of objects with other kinds of labels on the map tiles: land use objects (i.e. parks), hydro labels (oceans, seas, rivers, lakes), country names, continent names, etc. All of them are represented by "labels" array of metainfo tile JSON object and have type "TEXT".

In order to make these labels interactive, one can use "text box" array in the following format: [x, y, width, height], representing label's bounding box.

I.e. this is a tile containing countries of Asia-Pacific region:

https://2.base.maps.cit.api.here.com
/maptile/2.1/maptile/newest/normal.day/3/6/3/256/png8
?app_id={YOUR_APP_ID}
&app_code={YOUR_APP_CODE}

The response to the request delivers the following image:

Figure 3. Map tile with country name labels

The code block below demonstrates a complete request for a metadata map tile:

https://2.base.maps.cit.api.here.com
/maptile/2.1/maptile/newest/normal.day/3/6/3/256/png8
?app_id={YOUR_APP_ID}
&app_code={YOUR_APP_CODE}
&metadata=metaonly
&mgen=2

The response to the request delivers the following Metainfo tile as a JSON object:


{ "metadata" : {
"street labels":[  ],
"labels":[{ "name": "China", "type":"TEXT", "bounding boxes": [ { "box 1":[ 32.30, 41.16, 41.47, 15.50 ] } ] },
{ "name": "Myanmar", "type":"TEXT", "bounding boxes": [ { "box 1":[ 12.84, 127.76, 52.39, 11.75 ] } ] },
{ "name": "Thailand", "type":"TEXT", "bounding boxes": [ { "box 1":[ 44, 159.43, 52.38, 11.75 ] } ] },
{ "name": "Philippines", "type":"TEXT", "bounding boxes": [ { "box 1":[ 156.96, 179.50, 62.20, 11.75 ] } ] },
{ "name": "Japan", "type":"TEXT", "bounding boxes": [ { "box 1":[ 236.23, 37.80, 33.80, 11.75 ] } ] }],
"city center labels":[],
"buildings":[  ],
"transit stops":[  ],
"POIs":[  ]
}
}

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.