Two MapLibre GL JS raster layers pointing to same Geoserver layer

Question

Is it possible to use in MapLibre GL two raster layers on the same time that point to the same Geoserver layer?

I defined two raster layers in maplibreGL pointing to the same Geoserver layer. One are the Spanish provinces and the other is used to highlight a particular province at user request.

So, one layer with a cql_filter should stay on the top, and on the background stays the other with all provinces.

When both layers are added, the one in the background (all provinces) stays, but on zooming in/out disappear.

Checking console network I see that only the newly added 'provinces_highlighted' layer is called via GetMap.

As you can see in code below, both layers have different ids. And have different named data sources.

But both point to same Geoserver layer. It would be non-sense to duplicate the postGIS table so that I can create 2 different (but same content) layers.

var layer_name='provinces';
var province_name='Girona';

var tiles = ['https://mygeoserver/wms?service=WMS&request=GetMap&format=image%2Fpng&
              layers=hsm:' + layer_name + '&VERSION=1.1.0&transparent=true...'];

map.addSource(layer_name + '_source', {
        "type": 'raster',
        "tiles": tiles
    });

map.addSource(layer_name + '_highlighted_source', {
        "type": 'raster',
        "tiles": tiles
    });     

map.addLayer({
            id: layer_name,
            source: layer_name + '_source',
            'source-layer': layer_name,
            type: 'raster',
            'layout': {
                'visibility': 'visible'
            },
            'paint': {
                'raster-opacity': 1,
                'raster-opacity-transition': { duration: 3000 }
            }
        });           
setTimeout(function()
 {
  map.addLayer({
            id: layer_name + '_highlighted',
            source: layer_name + '_highlighted_source',
            'source-layer': layer_name,
            type: 'raster',
            'layout': {
                'visibility': 'none'
            },
            'paint': {
                'raster-opacity': 0,
                'raster-opacity-transition': { duration: 3000 }
            }
        })    

        var source = map.getSource(layer_name + '_highlighted_source');
                        
      var tiles = source.tiles[0].split('cql_filter=')[0];
      source.tiles[0] = tiles + `cql_filter=province LIKE '${province_name}`;

      map.getSource(layer_name + '_highlighted_source').load();
      map.setLayoutProperty(layer_name + '_highlighted', 'visibility', 'visible');
      map.setPaintProperty(layer_name + '_highlighted', 'raster-opacity', 1);
      map.setPaintProperty(layer_name, 'raster-opacity', .4);

  },1500)                    

Answer 1

Two things have to be corrected to make this work:

• When defining highlighted layer you have to leave out option 'source-layer': layer_name, it should be used only for vector tile source (see https://maplibre.org/maplibre-style-spec/layers/#source-layer).
• Method .setTiles should be used to set new titles for highlighted source.

So code should then look something like this:

setTimeout(function() {
  map.addLayer({
    id: layer_name + '_highlighted',
    source: layer_name + '_highlighted_source',
    type: 'raster',
    'layout': {
      'visibility': 'none'
    },
    'paint': {
      'raster-opacity': 0,
      'raster-opacity-transition': { duration: 3000 }
    }
  });    

  var source = map.getSource(layer_name + '_highlighted_source');                          
  var tiles = source.tiles[0].split('cql_filter=')[0]  + `cql_filter=province LIKE '${province_name}`;
  source.setTiles([tiles]);

  map.setLayoutProperty(layer_name + '_highlighted', 'visibility', 'visible');
  map.setPaintProperty(layer_name + '_highlighted', 'raster-opacity', 1);
  map.setPaintProperty(layer_name, 'raster-opacity', .4);
}, 1500);     

See JSFiddle: https://jsfiddle.net/TomazicM/6ykda7uz/