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: