Menu
I have a WMST service I want to show on a mapboxgl map. The following is an openlayers example: https://openlayers.org/en/latest/examples/wms-time.html
Is there an example for MapBoxGLJS? Does it support TMS as well? I can't find any documentation or examples on this... am not sure if this is poorly documented or the feature just does not exist.
If the answer is no, that is an acceptable answer.
270
A source in Mapbox GL JS is a file or service that supplies data for a layer displayed in a map. The most common source types are vector , for vector tile sources, and geojson , for GeoJSON files or data constructed in the browser.
A source layer is an individual layer of data within a vector source. A vector source can have multiple source layers. A source layer differs from a style layer, which is used to add styling rules to a specific subset of data in a map style.
Yes, you can use both WMS and tms in mapbox-gl.
The mapbox-gl WMS support is somewhat awkward, because mapbox-gl always uses tiled sources. So, for WMS, you have to retrieve your WMS data as tiles. If you need WMS-Time, you can add the &time= parameter to the WMS request.
TMS looks very much like the de-facto standard tile sets provided by Google, Bing, MapQuest, OpenStreetMap but they have the Y factor 'upside-down'. You can tell mapbox-gl that it should handle the y-factor differently by adding option: "scheme": "tms".
Example WMS source:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.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>
var map = new mapboxgl.Map({
container: 'map', // container id
style: {
"version": 8,
"sources": {
"wms-tiles": {
"type": "raster",
"tiles": [
"https://geodata1.nationaalgeoregister.nl/luchtfoto/wms?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&width=256&height=256&styles=default&layers=luchtfoto_jpeg"
],
"tileSize": 256
}
},
"layers": [{
"id": "aerial-photo",
"type": "raster",
"source": "wms-tiles",
"minzoom": 5,
"maxzoom": 22
}]
},
center: [5, 52.5], // starting position
zoom: 10 // starting zoom
});
</script>
</body>
</html>
For TMS you can use the same setup, but set "scheme":"tms" in the source section:
"source": {
type: 'vector',
tiles:["http:/yourserver/geoserver/gwc/service/tms/1.0.0/yourendpoint/{z}/{x}/{y}.pbf"],
"scheme": "tms",
"minzoom": 13,
"maxzoom": 19,
"bounds": [3.38,50.73,7.2432,53.5455]
},
(Note that if you happen to use geoserver as a tms vector tile server, geoserver should be using a 512x512 grid)
83
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
