Map Tile API Developer's Guide

Metainfo Tiles with POIs

This article shows example usage of metainfo tile for displaying and interaction with POIs.

User story

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

Original map tile

Given the following request:

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

The response to the request delivers the following image:

Figure 1. Map tile with POI

This tile contains a POI - Zoological Garden in Berlin (near the top left corner). When the user wants to find out more information about it 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/19/281563/171971/256/png8
?app_id={YOUR_APP_ID}
&app_code={YOUR_APP_CODE}
&metadata=metaonly
&mgen=2
&pois

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 POIs data):


{ "metadata" : {
"street labels":[ ... ],
"labels":[ ... ],
"city center labels":[],
"buildings":[  ],
"transit stops":[  ],
"POIs":[ { "name":"Zoological Garden","geoposition":{"latitude":52.508211, "longitude":13.334570},"bounding boxes":[ { "box 1":[ 217, 35.75, 14, 14 ] }, { "box 2":[ 199.86, 13.75, 48.28, 20.50 ] } ],"info": [{"PLACE NAME":"Zoological Garden", "PLACE PHONE NUMBER":"+(49)-30-254010", "PLACE CATEGORY":"Tourist Attraction", "PLACE ID":"50668488"}] } ]
}
}

This information allows to locate POI's icon and label in order to make them interactive. For this you can use elements of "bounding boxes" array: "box 1" describes a bounding box for icon, "box 2" describes a bounding box for text label.

Geographical coordinates of POI is exposed as a "geoposition" object of metainfo JSON. This can be used to obtain the address of POI, e.g. using Reverse Geocoding:
http://reverse.geocoder.cit.api.here.com/6.2/reversegeocode.xml
?app_id={YOUR_APP_ID}
&app_code={YOUR_APP_CODE}
&gen=7
&prox=52.508211135864258,13.334569931030273,100
&mode=retrieveAddresses
<Address>
  <Label>Hardenbergplatz, 10623 Berlin, Deutschland</Label>
  <Country>DEU</Country>
  <State>Berlin</State>
  <County>Berlin</County>
  <City>Berlin</City>
  <District>Charlottenburg</District>
  <Street>Hardenbergplatz</Street>
  <PostalCode>10623</PostalCode>
  <AdditionalData key="CountryName">Deutschland</AdditionalData>
  <AdditionalData key="StateName">Berlin</AdditionalData>
</Address>
One can also display some additional information regarding POI (e.g. using info bubble). This information is provided by "info" JSON object:
  • name ("PLACE NAME" attribute)
  • category ("PLACE CATEGORY" attribute)
  • phone number ("PLACE PHONE NUMBER" attribute)
  • place id ("PLACE ID" attribute)