• JavaScript
  • HTML
                  
                  

/**
 * The function add the "change" event listener to the map's style
 * and modifies colors of the map features within that listener.
 * @param  {H.Map} map      A HERE Map instance within the application
 */
function interleave(map){
  var provider = map.getBaseLayer().getProvider();

  // get the style object for the base layer
  var style = provider.getStyle();

  var changeListener = () => {
    if (style.getState() === H.map.Style.State.READY) {
      style.removeEventListener('change', changeListener);

      // create a provider and a layer that are placed under the buildings layer
      objectProvider = new H.map.provider.LocalObjectProvider();
      objectLayer = new H.map.layer.ObjectLayer(objectProvider);
      // add a circle to this provider the circle will appear under the buildings
      objectProvider.getRootGroup().addObject(new H.map.Circle(map.getCenter(), 500));
      // add the layer to the map
      map.addLayer(objectLayer);

      // extract buildings from the base layer config 
      // in order to inspect the config calling style.getConfig()
      buildings = new H.map.Style(style.extractConfig('buildings'));
      // create the new layer for the buildings
      buildingsLayer = platform.getOMVService().createLayer(buildings);
      // add the layer to the map
      map.addLayer(buildingsLayer);

      // the default object layer and its objects will remain on top of the buildings layer
      map.addObject(new H.map.Marker(map.getCenter()));
    }
  }

  style.addEventListener('change', changeListener);
}

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

//Step 1: initialize communication with the platform
// In your own code, replace variable window.apikey with your own apikey
var platform = new H.service.Platform({
  apikey: window.apikey
});
var defaultLayers = platform.createDefaultLayers();

//Step 2: initialize a map
var map = new H.Map(document.getElementById('map'),
  defaultLayers.vector.normal.map, {
  center: {lat: 52.51477270923461, lng: 13.39846691425174},
  zoom: 16,
  pixelRatio: window.devicePixelRatio || 1
});
map.getViewModel().setLookAtData({tilt: 45});

// add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize());

//Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// Now use the map as required...
interleave(map);                  
                
                  
                  
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <title>Interleave vector and object layers</title>
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
    <link rel="stylesheet" type="text/css" href="demo.css" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <link rel="stylesheet" type="text/css" href="../template.css" />
    <script type="text/javascript" src='../test-credentials.js'></script>    
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
  <script type="text/javascript" src='../js-examples-rendering-helpers/iframe-height.js'></script></head>
  <body id="markers-on-the-map">
    <div class="page-header">
        <h1>Interleave vector and object layers</h1>
        <p>Insert an object layer between the two vector layers</p>
    </div>
    <p>This example shows how to interleave an object layer and the vector layer. It is possible to do it dynamically during the map runtime.
      The map is loaded with the default vector layer, after that the layer is split into two and the new object layer is inserted between them.
    </p>
    <div id="map"></div>
    <h3>Code</h3>
    <p>The code below extracts the <code>buildings</code> configuration from the base layer. After that it creates a new <code>object</code> and <code>vector</code> layers
      that are added sequentially to the map's layer collection. The layers are rendered in the order they are added and the default object layer remained
      on top of the layers collection.
    </p>
    <script type="text/javascript" src='demo.js'></script>
  </body>
</html>