Through ncmws2, I am publishing my local dataset. snapshot of the published dataset
But when I want to use the same through the WMS service of maplibregl, multiple images are overlayed on the map.
snapshot of the multiple images being overlayed
a snapshot of the code using the maplibregl+wms service is here
<!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/maplibre-gl/dist/maplibre-gl.css' />
<script src='https://unpkg.com/maplibre-gl/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=l1pwXTuM4tkfkKv0lOMc',
zoom: 1,
center: [-74.5447, 40.6892]
});
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': ['http://localhost:8080/ncWMS2/wms?SERVICE=WMS&REQUEST=GetMap&SRS=EPSG:3857&VERSION=1.3.0&DATASET=1&STYLES=&CRS=CRS:84&WIDTH=256&HEIGHT=256&LAYERS=spi&bbox=33.875,10.875,60.125,33.125&format=image/png&transparent=true'],
'tileSize': 512
});
map.addLayer(
{
'id': 'wms-test-layer',
'type': 'raster',
'source': 'wms-test-source',
'paint': {}
}
);
});
</script>
</body>
</html>
Also, I have multiple timestamps in the dataset, any information on publishing and accessing the layer of each timestamp along with retrieving the time series data for a selected location would be of great help.
I have tried adding image sources, ideally, wms should fetch the georeferenced image from the server and place it as per the bounds.
I had a similar issue and the problem was the bbox fixed. Change it to bbox={bbox-epsg-3857} so the maplibre (mapbox) will figure out.
You can find this info here: https://docs.mapbox.com/style-spec/reference/sources/