here-apiheremaps

HERE Maps Morocco and Western Sahara


As you know, Morocco disputes the territory of Western Sahara.

We are using geo-political views (political_view) for Morocco, which successfully removes the border, however it doesn't remove the label "WESTERN SAHARA" from the view.

mapStyle.setProperty('global.political_view','ma');

Map showing Morocco with WESTERN SAHARA label

Is there some additional property we need to set, or is this a change needed to the political view for Morocco?


Solution

  • Yes, using geo-political views successfully removes the border but not labels.

    You can achieve it to change the program code of "transform.political_view" of styles.

    1. In skeleton.yaml file (path: "sources.omv.transform.political_view") - maybe you need Map Style Editor: https://enterprise.here.com/map-style-editor/

    Direct download (already reworked for you): https://github.com/alexisad/alexisad.github.io/blob/master/vector-styles/removeSomeLabel/skeleton.yaml

    1. At run time, code:

    /**
     * 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: 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: 10,
      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);
    

    JSFiddle: https://jsfiddle.net/hnromqaL/1/