Skip to content

Instantly share code, notes, and snippets.

@ThomasG77
Last active May 21, 2021 18:49
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save ThomasG77/0feccc76e01bdbfd98b7f628c1c4e6f0 to your computer and use it in GitHub Desktop.
Demo to make single WMS call using "image" source in Mapbox GL JS. Useful for correctly managing labels (default WMS source multiply them because it calls tiled WMS)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add a WMS Single source</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/@mapbox/sphericalmercator@1.1.0/sphericalmercator.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css" rel="stylesheet" />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function getExtentCoordinatesFromBounds(bounds) {
return [
bounds.getNorthWest().toArray(),
bounds.getNorthEast().toArray(),
bounds.getSouthEast().toArray(),
bounds.getSouthWest().toArray()
];
}
function wmsExtent130FromBounds(bounds) {
var sm = new SphericalMercator({
size: 256
});
return [
...sm.forward(bounds.getSouthWest().toArray()),
...sm.forward(bounds.getNorthEast().toArray())
];
}
function addSingleWms(map, baseUrl) {
return function() {
var myCanvas = map.getCanvas();
var myBounds = map.getBounds();
var imageCoordinates = getExtentCoordinatesFromBounds(myBounds);
var imageExtent3857 = wmsExtent130FromBounds(myBounds);
if (map.getSource(sourceName) && map.getLayer(wmsLayerName)) {
map.removeLayer(wmsLayerName);
map.removeSource(sourceName);
}
var urlWms = `${baseUrl}?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image/png&TRANSPARENT=true&LAYERS=topp:states&CRS=EPSG:3857&STYLES=&FORMAT_OPTIONS=dpi:180&WIDTH=${myCanvas.width / window.devicePixelRatio}&HEIGHT=${myCanvas.height / window.devicePixelRatio}&BBOX=${imageExtent3857.join(',')}`;
map.addSource(sourceName, {
'type': 'image',
'url': urlWms,
'coordinates': imageCoordinates
});
map.addLayer({
'id': wmsLayerName,
'type': 'raster',
'source': sourceName,
'paint': {}
});
}
}
var map = new mapboxgl.Map({
container: 'map',
style: {
"version": 8,
"sources": {
"raster-tiles": {
"type": "raster",
"tiles": ["a", "b", "c"].map(subdomain => "https://" + subdomain + ".tile.openstreetmap.org/{z}/{x}/{y}.png"),
"tileSize": 256
}
},
"layers": [{
"id": "simple-tiles",
"type": "raster",
"source": "raster-tiles",
"minzoom": 0,
"maxzoom": 20
}]
},
zoom: 8,
center: [-74.5447, 40.6892]
});
var sourceName = 'wms-test-source';
var wmsLayerName = 'wms-test-layer';
var baseUrl = 'https://ahocevar.com/geoserver/wms';
map.on('load', addSingleWms(map, baseUrl));
map.on('moveend', addSingleWms(map, baseUrl));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment