How to show vector and raster layers in a mixed mode in Here Maps 3.1 (WEBGL engine only)

How to show vector and raster layers in a mixed mode in Here Maps 3.1 (WEBGL engine only)

This article provides a way to show needed parts of raster layer together with a transparent vector layer.

Some Vector spatial objects (e.g. forest, mountains etc.) are less detailed

When map is represented in vector format the such spatial objects e.g. forest, mountains , parks etc. look like colored polygons only without some details.

Sometimes customer wants to see e.g. mountains/forest as terrain/satellite type what provides the raster layer.

Set up of a combined view with vector and raster layers

See full code below. (http://jsfiddle.net/uycv9m8x/)

<br />/** * 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 changeFeatureStyle(map) { // get the vector provider from the vector layer var provider = map.getLayers().get(1).getProvider(); //get provider from vector layer // get the style object for the vector layer var vStyle = provider.getStyle(); var changeListener = (evt) => { if (vStyle.getState() === H.map.Style.State.READY) { vStyle.removeEventListener('change', changeListener); // query the sub-section of the style configuration // the call removes the subsection from the original configuration var vConfig = vStyle.extractConfig([ 'earth', //'landuse' 'landuse.wood', 'landuse.forest', 'landuse.park', 'landuse.builtup', 'landuse.national_park', 'landuse.nature_reserve', 'landuse.green-areas', 'landuse.other', 'water.small_water', 'water.deep_water', 'water.river' ]); } }; vStyle.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 apikeyvar platform = new H.service.Platform({ apikey: window.apikey});var defaultLayers = platform.createDefaultLayers();//Step 2: initialize a mapvar map = new H.Map(document.getElementById('map'), defaultLayers.raster.terrain.xbase /*set terain xbase as base layer*/ , { center: { lat: 47.60586, lng: 14.27161 }, zoom: 9, pixelRatio: window.devicePixelRatio || 1 });map.addLayer(defaultLayers.vector.normal.map); //add vector layer on the top// add a resize listener to make sure that the map occupies the whole containerwindow.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));// Create the default UI componentsvar ui = H.ui.UI.createDefault(map, defaultLayers);// Now use the map as required...changeFeatureStyle(map);<br />