3

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
    }
});
4

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

Geoserver serving Vector Tiles visualized using OpenLayers

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.

  • 3
    Warning - please do not use obscenities in your posts. Note that other users may have flagged your post as rude or abusive leading to possible rep loss or suspension. Please Be Nice: Avoid vulgar terms and anything sexually suggestive – CalvT May 16 '17 at 13:51
  • sorry, will keep that in mind in the future :-) – Sickboy May 16 '17 at 15:02
  • 1
    in your script you have "type": "vector" and "tiles":[url], try adding "scheme": "tms". This tells mapbox-gl that geoserver treats the y coordinate of the vector tile the tms way which is different from the default mapbox way. – anneb May 16 '17 at 19:14
  • ah, works like a charm, thanks anneb! :-) I edited my answer so that others hopefully profit from it. – Sickboy May 17 '17 at 6:14
1

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.)

  • the notation {-y} (from OpenLayers) does not work on mapbox-gl... Instead add property "scheme":"tms" to the source at the "type" and "tiles" leve – anneb May 15 '17 at 15:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.