Metainfo with Street Labels

Original Map Tile

This request obtains a map tile with a street label:

https://2.base.maps.ls.hereapi.com/maptile/2.1/maptile/newest/normal.day/14/8818/5384/256/png8
?apiKey={YOUR_API_KEY}

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.ls.hereapi.com/maptile/2.1/maptile/newest/normal.day/14/8818/5384/256/png8
?apiKey={YOUR_API_KEY}
&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":[  ]
  }
}
  

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

Related Information

• Constructing a Request
• Map Versions
• Metainfo Tile Format for Metadata Generation Two
• Metainfo Tiles
• Resource type, scheme, format, metadata and mgen
• The Mercator Projection