Map Tile API Developer's Guide

Metainfo Tiles with Street Labels

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

User story

In order to make street labels on the map interactive (display additional info upon selection, etc.) user obtains metadata information about an image, showing a map tile that includes street label.

Original map tile

Given the following request:

https://2.base.maps.cit.api.here.com
/maptile/2.1/maptile/newest/normal.day/14/8818/5384/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 street label

This tile contains street label for Berliner Ring. When the user wants to find out more information they can use the following request:

Metainfo Tile Request

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/14/8818/5384/256/png8
?app_id={YOUR_APP_ID}
&app_code={YOUR_APP_CODE}
&metadata=metaonly
&mgen=2

Processing Metainfo Tile Response

The response to the request delivers the following Metainfo tile as a JSON object (response is suppressed to show only relevant street labels data):


{ "metadata" : {
"street labels":[ { "name":"Berliner Ring", "font size":"15", "vertices": [ 82.37, 214.71, 90.64, 189.39, 91.79, 185.92, 94.70, 177.84, 97.71, 170.14, 103.47, 155.49, 118.07, 127.86 ] } ],
"labels":[ ... ],
"city center labels":[],
"buildings":[  ],
"transit stops":[  ],
"POIs":[  ]
}
}

This information allows to locate street label in order to make it interactive. Metainfo tile provides array of "vertices", representing street segment's polyline, as well as font size.

I.e. one can draw fat line with HTML5 canvas:


<canvas id="street_canvas" width="256" height="256" style="border:1px solid #d3d3d3;" />
<script>
  // Assuming we have metadata from described request
  var vertices = [ 82.37, 214.71, 90.65, 189.39, 91.80, 185.92, 94.70, 177.84, 97.71, 170.13, 103.47, 155.49, 118.07, 127.86 ]
  var font_size = 15

  var street_canvas = document.getElementById('street_canvas').getContext('2d');
  
  street_canvas.lineWidth = font_size;
  street_canvas.beginPath();

  // Move to start point
  var point = vertices.slice(0, 2);
  street_canvas.moveTo(point[0], point[1]);
  
  // Draw rest of the points
  for (var idx = 2; idx &lt; vertices.length; idx+=2) {
    point = vertices.slice(idx, idx+2);
    street_canvas.lineTo(point[0], point[1]);      
  }

  // Finalize
  street_canvas.stroke();
</script>
Figure 2. Reflected street label polyline

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.