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
}
});
Best Answer
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):
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.