Mapbox Vector Tiles from Geoserver 2.11 in Mapbox GL JS

Question

I am running Geoserver 2.11.0, have installed the vector tiles extension and enabled the application/x-protobuf,type=mapbox-vector tile format.

Requesting vector tiles from my server using OL3 works great using the format below

layers: [new ol.layer.VectorTile({
  style:simpleStyle,
  source: new ol.source.VectorTile({
    tilePixelRatio: 1, // oversampling when > 1
    tileGrid: ol.tilegrid.createXYZ({maxZoom: 19}),
    format: new ol.format.MVT(),
    url: 'http://SERVER_IP_ADDRESS:8080/geoserver/gwc/service/tms/1.0.0/blocks:midwestBlocks@EPSG%3A'+projection_epsg_no+'@pbf/{z}/{x}/{-y}.pbf'
  })
})

How could I add these MVT tiles to a MapBox GL JS application as a new layer? Trying like below does not work where my workspace is blocks and my layer is midwestBlocks. Console shows a 404 for these requests

map.addLayer({
    "id": "censusBlocks",
    "type": "line",
    "source": {
        type: 'vector',
        url: 'http://SERVER_IP_ADDRESS:8080/geoserver/gwc/service/tms/1.0.0/blocks/'
    },
    "source-layer": "midwestBlocks",
    "layout": {
        "line-join": "round",
        "line-cap": "round"
    },
    "paint": {
        "line-color": "#ff69b4",
        "line-width": 1
    }
});

Answer 1

Thanks to anneb I got it to work and this is how it looks like:

Here's the relevant portion of the script (c.f. links below):

var simple = {
    "version": 8,
    "sources": {
        "osm": {
            "type": "vector",
            "scheme": "tms",
            "tiles": ["http://geoserverHost:8080/geoserver/gwc/service/tms/1.0.0/opengeo:hessen@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf"]
            //"tiles": ["http://TegolaServerHost:8082/maps/zoning/{z}/{x}/{y}.vector.pbf"]
        }
    },
    "layers": [
        {
            "id": "background",
            "type": "background",
            "paint": {
                "background-color": "#ffffff"
            }
        }, {
            "id": "hessen",
            "type": "line",
            "source": "osm",
            "source-layer": "hessen",
            "filter": ["==", "$type", "LineString"],
            "paint": {
                "line-color": "#3887be"
            }
        }
    ]
};

var map = new mapboxgl.Map({
    container: 'map',
    style: simple,
    zoom: 9,
    center: [9, 51]
});

The outcommented URL is for a Tegola tile server which works perfectly fine (wothout the "scheme": "tms"!).

This is a based on https://www.mapbox.com/mapbox-gl-js/example/third-party/, thanks Alex Leith for the heads up!

Some info to redo this: downloaded Germany->Hessen.pbf and put into PostGIS database (osm2pgsql), published a layer in GS in namespace 'opengeo' with name 'hessen', activated tile server things (c.f. http://docs.geoserver.org/latest/en/user/extensions/vectortiles/tutorial.html).

Keep in mind that Mapbox GL wants WGS84 (EPSG:4326) coordinates for the center definition.

Answer 2

I think you'll have success following this example: https://www.mapbox.com/mapbox-gl-js/example/third-party/

Here's the code from the example:

var simple = {
    "version": 8,
    "sources": {
        "osm": {
            "type": "vector",
            "tiles": ["https://vector.mapzen.com/osm/all/{z}/{x}/{y}.mvt?api_key=vector-tiles-LM25tq4"]
        }
    },
    "layers": [
        {
            "id": "background",
            "type": "background",
            "paint": {
                "background-color": "#41afa5"
            }
        }, {
            "id": "water",
            "type": "fill",
            "source": "osm",
            "source-layer": "water",
            "filter": ["==", "$type", "Polygon"],
            "paint": {
                "fill-color": "#3887be"
            }
        }
    ]
};

var map = new mapboxgl.Map({
    container: 'map',
    style: simple,
    zoom: 1,
    center: [-14, 35]
});

From here, you can see an example of the URL to use.

Something like:

'http://SERVER_IP_ADDRESS:8080/geoserver/gwc/service/tms/1.0.0/blocks/{z}/{x}/{-y}.pbf'

(There was something about a EPSG code in there, but that may not be required.)