How to change zoomlayer visibility of traffic and incidents

Good evening.

After a long time of running happily this Maps SDK in my Magic Mirror, I want to change one thing. This is that some traffic incidents must become visible in a higher zoom level. The thing is that my code doesn’t use a map but style parameters in the map object. I can’t make a map and include it as a whole, the style of the map is dynamic.

style: {
map: ‘basic_night’,
poi: ‘poi_main’,
trafficIncidents: ‘incidents_day’,
trafficFlow: ‘flow_’+self.config.traffic,
stylesVisibility: {
trafficFlow: self.config.showTraffic,
trafficIncidents: self.config.showIncidents,
poi: self.config.showPOI

I am looking for help how I can realize my idea to show the icons on a higher zoom level. Perhaps I can use the maps Traffic Incidents from the Map Styler? Or can I include an JSON file with only Traffic settings? I looked around in the documentation, and I am not certain how to do this. Any help is very welcome. :slight_smile:

In the style file you have defined layers that show on certain zoom levels.
So you can just create your own style with Map Styler and use it in your application.

Is there a way I can upload the design used in this configuration and alter it? I am happy with the style, and only need to change some settings. Or even better, download the style and edit it on the fly in Javascript.

There is a number of methods to manipulate the style: setLayoutProperty(), setPaintProperty(), addLayer(), addSource()

Thanks. I checked them out. But there a lot of layers from the group “group:incidents_marker”
With setLayerZoomRange(id, min, max) it is possible to change them. It is quite a long list. Is there a way to get the layers used from a certain metadate like “group:incidents marker”
Perhaps with

queryRenderedFeatures([geometry], [options]): Array

BTW the function getLayoutProperty(layer, name): Any is not working for me as documented.

TTmap.getLayoutProperty(“Traffic Incidents Markers Motorway all”, “metadata”)

is returning an uncaught TypeError. And documentation does randomly speak about ID and name.

So the thing is that methods like getPaintProperty() or getLayoutProperty() are meant to be used only with respective groups of properties. What does it mean?
If you look at any layer definition in the style it looks like this:

layer: {
    id: 'layer_name',
    paint: {...},
    layout: {...},
    metadata: '...'

So with getLayoutProperty() you can only access what’s inside layout field (same thing applies to setPaintProperty()).
As you can see the metadata property doesn’t belong to any of these two groups (neither paint nor layout). It doesn’t have its dedicated “get” method. So I would propose iterating over all the layers and filtering them based on the metadata property. Something like this:

TTmap.getStyle().layers.filter(function(layer) {
    var isTrafficIncident = layer.metadata === 'group:incidents_marker';
    if (isTrafficIncident) {
        TTmap.setLayerZoomRange(, YOUR_MIN_VALUE, YOUR_MAX_VALUE);

That did the trick. I had the read more carefully and strictly.

Instead of metadata I used sourcelayer and wrote the code a bit differently. I have still some sort of reverse engineering feeling.