Maps style not related to the online map styler?

Maps SDK for Web (JavaScript)
#1

Hi,

I want to add some style inside my map, when i go to the url Map styler | Map Display API and export all the JSON style i can add it with success in my map.

map.setStyle(JsonStyle);

But, i don’t want to pass all the object so i found the property addLayer. For example, if i change the water fill, i need to add the following code:

this.map.addLayer({
  "filter": [
    "all",
    [
      "==",
      "category",
      "permanent_water"
    ]
  ],
  "id": "Water - Fill",
  "metadata": {"group": "water"},
  "paint": {
    "fill-color": [
      "interpolate",
      ["linear"],
      ["zoom"],
      3,
      "hsl(346,44%,23%)",
      6,
      "hsl(354,100%,40%)"
    ]
  },
  "source": "vectorTiles",
  "source-layer": "water",
  "type": "fill"
}
)

On my map i don’t have any error, and nothing change. I’m pretty sur it’s related to the source-layer, because if i inspect the object map, inside the style._layer i don’t have any water layer.

I think this come from the data source tile, on the online style we have 4 poiTile and 4 vectorTile, on my current map i got this:

[
    "https://a.api.tomtom.com/map/1/tile/basic/main/{z}/{x}/{y}.pbf?key=xxx",
    "https://b.api.tomtom.com/map/1/tile/basic/main/{z}/{x}/{y}.pbf?key=xxx",
    "https://c.api.tomtom.com/map/1/tile/basic/main/{z}/{x}/{y}.pbf?key=xxx",
    "https://d.api.tomtom.com/map/1/tile/basic/main/{z}/{x}/{y}.pbf?key=xx"
]

I have tried other layer, and to understand more about this, but without success.
My goal, is to have exactly the same layer from the online editor and add directly the layers i want with the methods addLayer().
Thanks for your help !

#2

related topic: How to change zoomlayer visibility of traffic and incidents

1 Like
#3

Thanks for the topic, but i try to figure out because i’m not sur i can use that.

To put more context, my map is load for the client john.
john want to add some new style inside the map, he goes on the map styler.

Ir he want to change for example only the water color to red, he goes inside the section “water” and “water - Fill”.
Now he take the JSON inside the json editor, he paste it somewhere (on my api) and i get it, the format will be this:

{
  "filter": [
    "all",
    [
      "==",
      "category",
      "permanent_water"
    ]
  ],
  "id": "Water - Fill",
  "metadata": {"group": "water"},
  "paint": {
    "fill-color": [
      "interpolate",
      ["linear"],
      ["zoom"],
      3,
      "hsl(353,92%,45%)",
      6,
      "hsl(353,92%,45%)"
    ]
  },
  "source": "vectorTiles",
  "source-layer": "water",
  "type": "fill"
}

With this, i want to change the color on my map. But if i inspect my map or take the following code from the topic:

TTmap.getStyle().layers.filter(function(layer) {
   console.log(layer)
});

I don’t have any id called Water - Fill, i have:

  • Other water
  • Intermittent water
  • Other water body labe
  • Intermittent water label

For each object above the source-layer is equal to the id and the metadata is always group:label.

I’m pretty sur is because i don’t have the same map, because if i export all the JSON from the map editor i have the tile on map/2 https://a.api.tomtom.com/map/2/tile/basic/{z}/{x}/{y} and my map have on map/1 https://a.api.tomtom.com/map/1/tile/basic/main/{z}/{x}/{y}