Maps API for JavaScript Developer's Guide

StreetLevel

The HERE Maps API for JavaScript includes a StreetLevel module (mapsjs-pano.js), which enables navigation between panoramic views available at different locations along streets, squares and other public places. This article describes how to access and use the StreetLevel functionality.

Configuring and Setting the StreetLevel Engine.

To access the StreetLevel functionality, add a <script> element referencing the module mapsjs-pano.js in the <head> of the HTML page:

<!DOCTYPE html>
  <html>
  <head>
  ...
  <meta name="viewport" content="initial-scale=1.0, width=device-width"/>
  <script src="http://js.api.here.com/v3/3.0/mapsjs-core.js" 
     type="text/javascript" charset="utf-8"></script>
  <script src="http://js.api.here.com/v3/3.0/mapsjs-service.js" 
     type="text/javascript" charset="utf-8"></script>
  <script src="http://js.api.here.com/v3/3.0/mapsjs-pano.js" 
     type="text/javascript" charset="utf-8"></script>
  ...
  </head>

Next, configure the StreetLevel engine through the Platform object, supplying your application credentials. Please see also H.service.Platform for information about the Platform object.

To display a panorama in the map view port, you need to set the engine type on the map object. If you know the location of a StreetLevel panorama at map instantiation time, you can set the engine type directly through the map constructor options property engineType as in the code example below:

<script type="text/javascript" charset="utf-8">
  // Create a Platform object:
  var platform = new H.service.Platform({
    'app_id': '{YOUR_APP_ID}',
    'app_code': '{YOUR_APP_CODE}'
  });

  // Configure panorama with platform credentials:
  platform.configure(H.map.render.panorama.RenderEngine)

  // Instantiate a map, giving the constructor the engine type to use:
  map = new mapsjs.Map(mapElement, someBaseLayer, {
    center: {lat: 48.8733641244471, lng: 2.294754032045603},
    zoom: 19,
    engineType: H.Map.EngineType.PANORAMA
  });
</script>

The following image shows the resulting panorama display:

Figure 1. A StreetLevel panorama
Note: To implement user interaction with a StreetLevel panorama, you need to load the mapsjs-events.js component of the API and add event listeners to the map, with the appropriate handler functions.

Checking Coverage and Entering StreetLevel

If you do not know the location for which a street level panorama is available in advance, you can use a static method on the StreetLevel engine to enable panorama discovery around a point defined in terms of latitude and longitude. The method allows you to access both the exact location of the available panoramas and their identifiers.

The panorama map type layer (see also Map Types) shows areas on the map covered by StreetLevel.

The following code demonstrates how to retrieve the panoramas in the vicinity of a known geographic location. A callback function receives the panoramas as an array. The callback in the example checks if the array contains any elements and, if so, displays the first of them by setting the map engine type.

<script type="text/javascript" charset="utf-8">
  // Assuming that engine was configured and map exists, 
  // get panoramas near a location:
  H.map.render.panorama.RenderEngine.getClosestPanoramas(
    {lat:51.51, lng: -0.07}, function(panoramaData) {
    if (panoramaData.length) {
    
      // Set map center to the location of the first available panorama:
      map.setCenter(panoramaData[0].position);
      
      // Switch to to the panorama engine to show the panorama:
      map.setEngineType(H.Map.EngineType.PANORAMA);
    }
  });
</script>

StreetLevel UI

The HERE Maps API for JavaScript ui module (see also Map Controls and UI) provides a default StreetLevel user interface control. When StreetLevel is enabled, the map viewport displays the control as an icon showing a human figure in a black circle. The default StreetLevel control enables panorama discovery by setting panorama as a map base layer. If a panorama is available, the application user can view it (enter StreetLevel) by clicking on the map. The code below contains the essential part of the implementation:

<script type="text/javascript" charset="utf-8">
  // Assuming that platform was instantiated, get default map layers:
  var maptypes = platform.createDefaultLayers()

  // Create the StreetLevel UI element:
  var ui = new H.ui.UI(map, {
    panorama: {
      // Provide panorama coverage layer:
      mapTypes: maptypes
    }
  });
</script>

The following image shows the map user interface with the street level control in the top-right corner.

Figure 2. Map display with the StreetLevel UI