Adding Venues layer to the Map

Display venue objects (e.g. shops, airports etc) on the map

HTML

<link rel="stylesheet" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css">
<!-- SCRIPTS -->
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>

<!-- BODY -->
<h1>Adding Venues layer to the Map</h1>
<p>This example shows how to display different venue objects on the map like shops, restaurants, parkings, taxi stands etc and how to customize default styling for them.<br><br>Use the controls to change the floor level of the venues.<br></p>
<hr/>
<div id="map" style="width: 600px; height: 400px; background: grey"></div>

CSS

code, h1, h2, h3{
  color: #124191;
  letter-spacing: -0.03em;
}
body {
  font-family:"Lucida Grande",Tahoma,sans-serif;
  color: rgb(102, 102, 102);
  font-size: 80%;
}
b, strong {
  color: black;
}
code {
  font-weight: 700;
  font-size: 120%;
}

JavaScript

/**
 * Shows how to add venue objects to the map, change default styling
 * and change a floor level for all venues.
 * @see http://developer.here.com/rest-apis/documentation/venue-maps
 *
 * @param {H.Map} map A HERE Map instance within the application
 * @param {H.service.Platform} platform Platform instance within the application
 * @param {Function} renderControls Custom helper function for adding buttons
 */
function addVenueLayer(map, platform, renderControls) {
  // Create a tile layer, which will display venues
  var customVenueLayer = platform.getVenueService().createTileLayer({
    // Provide a callback that will be called for each newly created space
    onSpaceCreated: onSpaceCreated
  });

  // Get TileProvider from Venue Layer
  var venueProvider = customVenueLayer.getProvider();
  // Add venues layer to the map
  map.addLayer(customVenueLayer);

  // Use the custom function (i.e. not a part of the API)
  // to render buttons with corresponding click callbacks
  renderControls('Change floor', {
    '+1 Level': function () {
      // Increase global floor level on the venue provider
      venueProvider.setCurrentLevel(venueProvider.getCurrentLevel() + 1);
    },
    '-1 Level': function () {
      // Decrease global floor level on the venue provider
      venueProvider.setCurrentLevel(venueProvider.getCurrentLevel() - 1);
    }
  });
}

/**
 * Changes the default style for H&M shops
 *
 * @param {H.service.venues.Space}
 */
function onSpaceCreated(space) {
  // getData for spaces contains data from the Venue Interaction Tile API,
  // see https://developer.here.com/rest-apis/documentation/venue-maps/topics/resource-type-venue-interaction-tile.html
  if (space.getData().preview === 'H&M') {
    space.setStyle({
      fillColor: 'rgba(0,255,0,0.3)'
    });
  }
}

/**
 * Boilerplate map initialization code starts below:
 */

// Step 1: initialize communication with the platform
var platform = new H.service.Platform({
  app_id: "DemoAppId01082013GAL",
 ...