Interleave vector and object layers"

Insert an object layer between the two vector layers

HTML

<script src="https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js"></script>
<!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>Remove Western Sahara label</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>
  </head>
  <body id="markers-on-the-map">
    <div class="page-header">
        <h1>Remove Western Sahara label</h1>
    </div>
    <div id="map"></div>
    <script type="text/javascript" src='demo.js'></script>
  </body>
</html>

CSS

#map {
    width: 95%;
    height: 450px;
    background: grey;
}

#panel {
    width: 100%;
    height: 400px;
}

JavaScript

/**
 * 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.render.webgl.Style.State.READY) {
      style.removeEventListener('change', changeListener);
      
      const filterWestSahara = `function(data, extraData) {
        	if (extraData && extraData.political_view && extraData.political_view == "ma" && data.places) {
                const pview = extraData.political_view;
                const features = data.places.features;
                let featureIdx = features.length;
            	while (featureIdx--) {
                	let properties = features[featureIdx].properties;
                    if (properties['name:en'] && properties['name:en'].toUpperCase() == "WESTERN SAHARA") {
                		properties.kind = 'country:' + pview;
                    }
                }
            }
          if (extraData && extraData.political_view && data.boundaries) {
          	
            const pview = extraData.political_view;
            const features = data.boundaries.features;
            let featureIdx = features.length;
            while (featureIdx--) {
              let properties = features[featureIdx].properties;
              if (properties['kind:'+pview]) {
                properties.kind = properties['kind:'+pview];
              }
            }
          }
          return data;
        }
`;
  style.setProperty("sources.omv.transform.political_view", filterWestSahara, true);
  style.setProperty('global.political_view','ma');
      

    }
  }

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

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

//Step 1:...