how to change base map ?

shinnobi

I use this code in leaflet to change base map . But when i am using windy api v4 it can't change base map

L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Trung tâm thông tin & dữ liệu KTTV',
maxZoom: 16
}).addTo(map);

How to do it with windy api v4

siim

L.tileLayer(
  "https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}",
  {
    attribution: "Trung tâm thông tin & dữ liệu KTTV",
    minZoom: 12,
    maxZoom: 18
  }
).addTo(W.map);
W.map.options.maxZoom = 18;

shinnobi

windyInit( options, windyAPI => {
// windyAPI is ready, and contain 'map', 'store',
// 'picker' and other usefull stuff

    const { map } = windyAPI
    // .map is instance of Leaflet map
    L.tileLayer(
    "https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}",
    {
         attribution: "Trung tâm thông tin & dữ liệu KTTV",
            minZoom: 12,
        maxZoom: 18
    }
    ).addTo(W.map);
    W.map.options.maxZoom = 18;

i add this but it seem not working please help me

shinnobi

windyInit( options, windyAPI => {
    // windyAPI is ready, and contain 'map', 'store',
    // 'picker' and other usefull stuff

    const { map } = windyAPI
    // .map is instance of Leaflet map
    L.tileLayer(
    "https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}",
    {
         attribution: "Trung tâm thông tin & dữ liệu KTTV",
            minZoom: 12,
        maxZoom: 18
    }
    ).addTo(W.map);
    W.map.options.maxZoom = 18;

p/s update code
i add it but it seems not working

siim

const { map } = windyAPI
// .map is instance of Leaflet map
L.tileLayer(
"https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}",
{
    attribution: "Trung tâm thông tin & dữ liệu KTTV",
    minZoom: 12,
    maxZoom: 18
}
).addTo(map);
map.options.maxZoom = 18;

zoom in and works fine

shinnobi

https://codepen.io/siim/pen/JBBepy

i found this. but when i zoom it doesn't change base map

siim

@shinnobi

Check that example again.

Your tile choice is not very good for windy.
Tiles must be transparent when showing with wind layer.
Only when max zoomed in you can use tiles with background.

siim

With google basemap:
https://codepen.io/siim/pen/xQYvNd

shinnobi

thanks you very much :D