Mapbox-gl-js: How to add vector data from Geoserver to maobox?

Created on 17 Jan 2017  路  6Comments  路  Source: mapbox/mapbox-gl-js

Main Questions

  1. I want to know how can we add WFS layers to mapbox from geoserver. I've worked with WMS layers and they working fine but there is no documentation of WFS source in mapbox?

  2. Do I need to make vector tiles of that data just like we do in tangram through tilestache etc?

  3. I've not worked so much on mapbox so the answer should be a little basic

Expected Behavior

I want to see the WFS layer from geoserver on my map

Example:

The example given below show get the data from mapbox server or somewhere else:
`map.on('load', function () {

map.addLayer({
    "id": "terrain-data",
    "type": "line",
    "source": {
        type: 'vector',
        url: 'mapbox://mapbox.mapbox-terrain-v2'
    },
    "source-layer": "contour",
    "layout": {
        "line-join": "round",
        "line-cap": "round"
    },
    "paint": {
        "line-color": "#ff69b4",
        "line-width": 1
    }
});

`

I want to know how will be the code to get data from geoserver vectors

Most helpful comment

@imran50 im: You can just use the code below, please change the name layer

map.addLayer({
         'id': 'wms-test-layer',
         'type': 'raster',
         'source': {
            'type': 'raster',
             'tiles': [
                 'http://159.89.203.165:8080/geoserver/tiger/wms?'+
                 'bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&'+
                 'request=GetMap&srs=EPSG:900913&width=256&height=256&'+
                 'layers=tiger:tiger_roads'
             ],
            'tileSize': 256
         },
        'paint': {}
    });

All 6 comments

Mapbox only supports Mapbox vector tiles and GeoJSON as input formats. If you need to display data from WFS, you need to convert to either of those.

Just for the record, Geoserver _can_ output GeoJSON from WFS service out of the box, so it can be integrated (just make sure to request features in EPSG:4326)

Hi Shahid Nawaz Khan.. can you help me out to publish wms service using GeoServer to Mapbox gl I have tried many ways but none of them working

@imran50 im: You can just use the code below, please change the name layer

map.addLayer({
         'id': 'wms-test-layer',
         'type': 'raster',
         'source': {
            'type': 'raster',
             'tiles': [
                 'http://159.89.203.165:8080/geoserver/tiger/wms?'+
                 'bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&'+
                 'request=GetMap&srs=EPSG:900913&width=256&height=256&'+
                 'layers=tiger:tiger_roads'
             ],
            'tileSize': 256
         },
        'paint': {}
    });

Can this code above used to call GeoJSON format file from Geoserver?

I mean, after changing few things such as "type" or anythings........?

GeoServer also supports now vector tiles as pbf in same format as mapbox use.
https://docs.geoserver.org/latest/en/user/extensions/vectortiles/tutorial.html

Was this page helpful?
0 / 5 - 0 ratings