HERE maps for JavaScript API: traffic flow without WebGL

Question

I want to show a here map with traffic flow information. I have a solution for web browser with WebGL (there I can just add the vector layer using map.addLayer(defaultLayers.vector.normal.traffic);).

For a browser without WebGL I use raster layers. I'm not able to add a traffic layer, I tried using the following code which I found at: https://developer.here.com/documentation/maps/3.1.14.0/dev_guide/topics/migration.html

var trafficService = platform.getTrafficService();
var provider = new H.service.traffic.flow.Provider(trafficService);
map.addLayer(new H.map.layer.TileLayer(provider));

What do I need to do, to add traffic flow information for browsers without WebGL?

Here is the complete code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Here Map Traffic</title>
    <meta name="description" content="" />
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-service-legacy.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
</head>
<body>
    <div id="container">
        <div id="mapContainer"></div>
    </div>
    <script>
        const KEY = "XXX";
        var platform = new H.service.Platform({
            apikey: KEY
        });
        var defaultLayers = platform.createDefaultLayers();
        // Instantiate (and display) a RASTER map object:
        var map = new H.Map(
            document.getElementById('mapContainer'),
            defaultLayers.raster.normal.map, {
                zoom: 10,
                center: {
                    lat: 50.00,
                    lng: 10.00
                },
                engineType: H.map.render.RenderEngine.EngineType.P2D,
                pixelRatio: window.devicePixelRatio || 1 //Optional
            }
        );
        var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
        var ui = H.ui.UI.createDefault(map, defaultLayers);

        //Add traffic layer
        var trafficService = platform.getTrafficService();
        var provider = new H.service.traffic.flow.Provider(trafficService);
        map.addLayer(new H.map.layer.TileLayer(provider));

    </script>
</body>
</html>

Tomas · Accepted Answer · 2020-04-20T14:22:52.657

As noted in the documentation for H.service.traffic.flow.Provider, it can be used only with WEBGL engine. For legacy P2D rendering engine you should create your custom traffic MapTileService and use it to create traffic tile layer:

var pixelRatio = window.devicePixelRatio || 1,
    tileSize = 512,
    ppi = (pixelRatio >= 2) ? 250 : 72,
    trafficService = platform.getMapTileService({type: 'traffic'}),
    trafficLayer;

// list of available schemes:
console.log(trafficService.getInfo().schemes);
// list of available tiletypes:
console.log(trafficService.getInfo().tiletypes);

trafficLayer = trafficService.createTileLayer(
  'traffictile',
  'normal.traffic.day', // 'hybrid.traffic.day' for satellite + traffic
  tileSize, 'png',
  {'ppi' : ppi}
);

map.setBaseLayer(trafficLayer);

This way you prevent loading a lot of map tile requests as the layer is set as baseLayer. Also labels are shown correctly on top of traffic flow lines.

If you really need to add the traffic layer on top of your customised base layer, then just replace tileType parameter 'traffictile' with 'flowtile'. This will load transparent traffic flow tiles.

Additionally you might want to put this layer into the MapSettings UI. For that you could use this answer.

HERE maps for JavaScript API: traffic flow without WebGL

1 Answers1

Linked