CODEWITHSUNDEEP
javascriptmapbox-gl-js
Rolando
Rolando

Reputation: 62664

Does MapboxGLJS support WMS-T and/or TMS?

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.

Upvotes: 6

Views: 2461

Answers (2)

anneb
anneb

Reputation: 5768

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)

Upvotes: 15

Steve Bennett
Steve Bennett

Reputation: 126425

Mapbox-GL-JS doesn't even support regular WMS, let alone WMS Time. If you look at the example for WMS, the whole URL is hardcoded.

Mapbox-GL-JS does not support TMS, which is a sort of metadata wrapper around the raw OSM tile serving conventions. Mapbox's equivalent is TileJSON.

Upvotes: -1

Related Questions