Search code examples
javascripthere-apihere-maps-restheremaps

HereMaps javascript API displaying minor_roads at zoom level 12

I would like to show minor_roads(residential) at zoom level 12. However, it appears that by default (vector tile) data source doesn't include minor roads at 12. I tried to set road width for zoom level 12 but it doesn't appear to work

minor_road_width: [[6, 1px], [7, 1px], [8, 1px], [9, 1px], [11, 1px], [12, 1px], [13, 1px],[14, 1px], [15, 2px]]

Solution

  • You can set this properties but they will not be applicable for minor roads because they are not retrieved by Vector Tile API https://developer.here.com/documentation/vector-tiles-api/dev_guide/index.html because minor roads are returned only for zoom level >= 13

    You need to draw such roads by your self to utilize Fleet Telematics API (FTA) using ROAD_GEOM layer. See please this example on https://jsfiddle.net/L5vsjtwd/

    /**
 * Shows the postcode layer provided by Platform Data Extension REST API
 * https://developer.here.com/platform-extensions/documentation/platform-data/topics/introduction.html
 *
 * @param  {H.Map} map      A HERE Map instance within the application
 */
function showPostcodes(map, bubble){
  var service = platform.getPlatformDataService();
  
  service.searchByBoundingBox(
    ["CARTO_LINE_DO3", "CARTO_LINE_DO2"],
    ["CARTO_ID","CARTO_ID"],
    map.getViewModel().getLookAtData().bounds.getBoundingBox(),
    function(arrD){
        for(var i=0; i<arrD.length; i++){
        //console.log(arrD[i].getCell("FEATURE_TYPE"), arrD[i].getCell("WKT").toString());
        map.addObject(new H.map.Polyline(
                arrD[i].getCell("WKT"), { style: { lineWidth: 4 }}
            ));
      }
        
    },
    console.error
  );

}

/**
 * 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  - not specificing a location will give a whole world view.
var map = new H.Map(document.getElementById('map'),
  defaultLayers.vector.normal.map, {
    pixelRatio: window.devicePixelRatio || 1
  });
// add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize());

map.setCenter({lat:52.5159, lng:13.3777});
map.setZoom(9);

//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 components
var ui = H.ui.UI.createDefault(map, defaultLayers);

// create info bubble that is used to display the postcode data
bubble = new H.ui.InfoBubble(map.getCenter(), {
  content: ''
});
bubble.close();
ui.addBubble(bubble);

map.addEventListener("mapviewchangeend", function(){
    showPostcodes(map, bubble);
});
// Now use the map as required...
//setTimeout(function(){showPostcodes(map, bubble);}, 2000);

    In above example is similar issue (no showing rails for some zoom level) but using FTA (layers "CARTO_LINE_DO3", "CARTO_LINE_DO2") with JS API is possible.

    Documentation: