Skip to content

Instantly share code, notes, and snippets.

@ThomasG77

ThomasG77/mapbox-gl-js-wms-single-call.html

Last active May 21, 2021 18:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ThomasG77/0feccc76e01bdbfd98b7f628c1c4e6f0 to your computer and use it in GitHub Desktop.
Save ThomasG77/0feccc76e01bdbfd98b7f628c1c4e6f0 to your computer and use it in GitHub Desktop.
Download ZIP
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)
Raw
mapbox-gl-js-wms-single-call.html
<!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