Map Tile API Developer's Guide

Metainfo with Street Labels

The user wants to make street labels on the map interactive to offer, for example, several options for having the map display additional information. This requires obtaining metadata information about an image showing a map tile that includes street labels.

Original Map Tile

This request obtains a map tile with a street label:

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 contains a street label for Berliner Ring:

Figure 1. Map Tile with Street Label

The following request obtains more information about this map tile:

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

In this request, the query parameter metadata specifies that the response is to contain only metadata and the query parameter mgen specifies what metainfo is in the response.

{
  "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":[  ]
  }
}
Note: Parts of the response are modified as described in the introduction to Examples.

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

Using these vertices, you can draw a thick 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