How to display a group of WMS layers with on/off switches?

[itsgifnotjiff]

Hello, great work and keep it coming, but can you help me figure out how to display 4 different maps with 4 different WMS Image layers and have a sync all maps views to map 1 and also unsync them. Something similar to this ( https://github.com/itsgifnotjiff/CMC-Demo ) but integrated in Vue 2? I have tried

     <vl-layer-tile id="geomet">
       <vl-layer-image>
         <vl-source-image-wms
          url='https://geo.weather.gc.ca/geomet'
          layer-name='CURRENT_CONDITIONS'
          params="params"
          server-type= 'mapserver'
          >

         </vl-source-image-wms>
       </vl-layer-image>
     </vl-layer-tile>

and combinations of it but for some weird reason it either does not display the map at all or just does not display the WMS layer.

[ghettovoice]

Hello @itsgifnotjiff , thanks for review!

Take a look at the demo https://codesandbox.io/embed/vuelayers-sync-maps-u9beb?fontsize=14&hidenavigation=1&theme=dark

[itsgifnotjiff]

Hello @itsgifnotjiff , thanks for review!

Take a look at the demo https://codesandbox.io/embed/vuelayers-sync-maps-u9beb?fontsize=14&hidenavigation=1&theme=dark

I did see it and it was very helpful however the other part is how would you implement the play and pause buttons that I implemented ( https://github.com/itsgifnotjiff/CMC-Demo/blob/master/WMS-Multiple-Time.js ) using :

function setTime() {
  current_time = current_time
  getRadarStartEndTime().then(data => {
    if (current_time === null) {
      current_time = data[0];
    } else if (current_time >= data[1]) {
      current_time = data[0]
    } else {
      current_time = new Date(current_time.setMinutes(current_time.getMinutes() + 10));
    }
    layers_map_1[1].getSource().updateParams({'TIME': current_time.toISOString().split('.')[0]+"Z"});
    updateInfo(current_time)
  });
}

setTime();

var stop = function() 
{
    if (animationId !== null) 
    {
        window.clearInterval(animationId);
        animationId = null;
    }
};

var play = function() 
{
    stop();
    animationId = window.setInterval(setTime, 1000 / frameRate);
};

Would you use watch as well?

[ghettovoice]

I have just updated the demo. It's a bit ugly, but you should see an idea

[itsgifnotjiff]

Wow thank you so much, you helped me a lot. One last question if you have a list of pointshow would you go about mapping them with clusters and on click show a card with information? Also if you are ever in Montreal, I owe you :)

[ghettovoice]

One last question if you have a list of pointshow would you go about mapping them with clusters and on click show a card with information? It depends on how many points at the same time need to be showed. If the layer is huge I usually prefer to use WMS or vector tiles and make clusters on the backend, because it doesn't have huge impact on CPU in the browser (> 1000 points). In other cases making clusters on this client side can work good enough

Also if you are ever in Montreal, I owe you :) we shall see 👍