Venue Maps API Developer's Guide

Display the Louvre Museum Using Tiles

A common use case is viewing information about a certain venue on the viewport of a portable device. This means you're probably already at the venue and you want to see more information about it on your smartphone of navigation device.

A simple implementation could be a mobile web application that uses the Venue Maps API in combination with the HERE Maps API for JavaScript.

In following examples, we look at how to display venue information for the Louvre Museum in Paris, France. These examples use the Venue Map Tiles resource in combination with the HERE Maps API for JavaScript to display interactive map tiles with minimal effort.

Set the View Port

To display a basic default map, we first need to get the coordinates for our venue. Once we have the coordinates, we can use them to center our venue map tile. We can get the coordinates by submitting a simple text search to the HERE Geocoder API

Here's an example of a request to Geocoder API for the center of a bounding box that encloses the Louvre Museum, Paris, France:

http://geocoder.api.here.com/6.2/geocode.xml?
  &app_id={YOUR_APP_ID}
  &app_code={YOUR_APP_CODE}
  &gen=8
  &searchtext=louvre+museum+paris+france

In the response, we look for the NavigationPosition element. According to this element, the center navigation position for Louvre Museum, Paris, France is as follows:

<NavigationPosition>
  <Latitude>48.8597984</Latitude>
  <Longitude>2.3408899</Longitude>
</NavigationPosition>

Now, we refer to the Quick Start example of the HERE Maps API for JavaScript. In this example, we replace the coordinates with the coordinates for the Louvre Museum that we received from the Geocoder API. We set the center of the viewport by setting the property to lng:2.3408899 ,lat:48.8597984.

Displaying Venue Maps Tiles Layer

You can then use the HERE Maps API for JavaScript to render tiles for the Louvre Museum on to of the default map.
  • In Venue Maps API, you could request several types of venue map tile.
  • In the HERE Maps API for JavaScript, you could then implement the venue map tile as a tile layer.

For more detailed information on to display venues in the HERE Maps API for JavaScript, see the venues example.

Venue Maps API Tiles can be used as a TileLayer on top of the default map using HERE JavaScript Developer API

Using the HERE JavaScript Developer API requesting Venue Maps API Image Tiles in combination with Interaction Tiles shall provide a fully interactive experience of Venue Maps. Alternatively, requesting Interaction Tiles with Base64 Images provides the same experience.