raster source.setUrl() does not dynamically replace {bbox-esg-3857} for a wms #3816

smridhm · 2024-03-08T20:20:14Z

smridhm
Mar 8, 2024

Trying to use map-libre 4.1.0 to dynamically change images from a wms source when refreshed... but the source.setUrl(url) method does not dynamically replace {bbox-esg-3857} with the actual bounding box...

For eg:
the request made to wms is:
https://io.apps.fao.org/geoserver/wms/WAPOR_2/L3_MUV_E_A/v2?&service=WMS&request=GetMap&styles=&format=image/png&transparent=true&crs=EPSG:3857&height=512&width=512&bbox={bbox-epsg-3857}&version=1.3.0&layers=WATER_MM:YEAR:YEAR

while it should have been something like:

https://io.apps.fao.org/geoserver/wms/WAPOR_2/L3_MUV_E_A/v2?&service=WMS&request=GetMap&styles=&format=image/png&transparent=true&crs=EPSG:3857&height=512&width=512&bbox=3130860.6785608195,-626172.1357121654,3443946.7464169003,-313086.06785608083&version=1.3.0&layers=WATER_MM:YEAR:YEAR

maplibre-gl-js version: 4.1.0

browser: Chrome

Steps to Trigger Behavior

set up a wms raster source
attempt to update the url on the source using .setUrl()

Link to Demonstration

HarelM · 2024-03-08T20:31:59Z

HarelM
Mar 8, 2024
Maintainer

Please provide a jsbin/codepen reproduction.

0 replies

smridhm · 2024-03-09T03:38:59Z

smridhm
Mar 9, 2024
Author

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Add a WMS source</title>
    <meta property="og:description" content="Add an external Web Map Service raster layer to the map using addSource's tiles option." />
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='https://unpkg.com/[email protected]/dist/maplibre-gl.css' />
    <script src='https://unpkg.com/[email protected]/dist/maplibre-gl.js'></script>
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    const map = new maplibregl.Map({
        container: 'map',
        style: 'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
        zoom: 8,
        center: [-74.5447, 40.6892]
    });
   // adding a wms source to the map
    map.on('load', () => {
        map.addSource('wms-test-source', {
            'type': 'raster',
            // use the tiles option to specify a WMS tile source URL
            // https://maplibre.org/maplibre-style-spec/sources/
            'tiles': [
                'https://img.nj.gov/imagerywms/Natural2015?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=Natural2015'
            ],
            'tileSize': 256
        });
        map.addLayer(
            {
                'id': 'wms-test-layer',
                'type': 'raster',
                'source': 'wms-test-source',
                'paint': {}
            },
            'aeroway_fill'
        );
        //trying to change the url using the new setUrl functionality.
        const src = map.getSource('wms-test-source');
        console.log(src);
        src.setUrl('https://img.nj.gov/imagerywms/Natural2015?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=Natural2015');
    });
    
</script>
</body>
</html>

Link: https://jsfiddle.net/bjycpa91/

You will notice that setUrl call will throw error in the console. And the request made when setting url to the wms was:
https://img.nj.gov/imagerywms/Natural2015?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=Natural2015

where as the initial source setting will issue a request like:

https://img.nj.gov/imagerywms/Natural2015?bbox=-8375052.315150192,4931105.56873329,-8296780.798186172,5009377.085697312&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=Natural2015

so the {epsg-3857-bbox} is usually replaced by actual bbox, when you add a source for wms service, but the setUrl does not correspond to the same.

let me know if you need any other detauls.

0 replies

HarelM · 2024-03-09T13:42:13Z

HarelM
Mar 9, 2024
Maintainer

url and tiles are different, I'm not sure the provided example is a valid use case.
Url should point to a tile json file, no bbox replacement should happen.

0 replies

smridhm · 2024-03-09T14:19:03Z

smridhm
Mar 9, 2024
Author

Well, I needed to update the source periodically to poll on wms if they have new images to provide… so if I update tiles again and again and trigger repaint it would make the entire view port blank out and be drawn again (and you’d notice the blip every time I refresh tiles)
So I would need a way to make the raster tiles update dynamically, like vector tiles do.

For eg: A wms weather source with cloud imagery being able to be show clouds moving around the map smoothly…
with trigger repaint, you do not see the motion in effect but rather see flashing of the tiles again and again (in effect ruining the experience)

So I had thought thats what this setUrl would do, by changing the source behind the curtains and supplant bbox with the tile bounds as the tiles are to be served.

Do we have a setTiles method then (or in roadmap?) to do the same as one can do for a vector source?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

raster source.setUrl() does not dynamically replace {bbox-esg-3857} for a wms #3816

Uh oh!

{{title}}

Uh oh!

Replies: 4 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

raster source.setUrl() does not dynamically replace {bbox-esg-3857} for a wms #3816

Uh oh!

smridhm Mar 8, 2024

Steps to Trigger Behavior

Link to Demonstration

Replies: 4 comments

Uh oh!

HarelM Mar 8, 2024 Maintainer

Uh oh!

Uh oh!

smridhm Mar 9, 2024 Author

Uh oh!

HarelM Mar 9, 2024 Maintainer

Uh oh!

smridhm Mar 9, 2024 Author

smridhm
Mar 8, 2024

HarelM
Mar 8, 2024
Maintainer

smridhm
Mar 9, 2024
Author

HarelM
Mar 9, 2024
Maintainer

smridhm
Mar 9, 2024
Author