MapBox client is beauty and easy to use.

But it seems only support their own protocols (GeoJSON & KML & TileJSON).

GeoServer Only support WCS & WFS & WMS & TMS & WMS-C & WMTS

I am using GeoServer as a map server.

How can I make GeoServer and MapBox works together?

2 Answers 2


You can render sources from GeoServer into Mapbox.js as well as Mapbox-GL.js.

Mapbox.js is simply a leaflet plugin, so you have access to all the leaflet goodness at your disposal. If you want to render a GeoServer layer via WMS (for example) simply use: TileLayer.WMS

If you are using Mapbox-GL.js, you can create a new map source of type 'geojson', see this implementation example


I come cross this problem and I find a solution.Since you publish a vector tile map service by geoservice vector tile plugin;the source you set in mapbox-gl is enter image description here

You can see more datails on http://docs.geoserver.org/stable/en/user/styling/mbstyle/source.html

I first find some quzz about using pbf in mapbox-gl;I tried again and again; but the damn geomotery doesn't show up;I trie reset the gridset and it doesn't work either;

My final code is like this:

 var simple = {
        "version": 8,
        "sources": {
            "osm": {
                "type": "vector",
                "tiles": ["http://localhost:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=putian:buildings&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/x-protobuf;type=mapbox-vector&TILECOL={x}&TILEROW={y}"]
                //"tiles": ["http://TegolaServerHost:8082/maps/zoning/{z}/{x}/{y}.vector.pbf"]
        "layers": [
                "id": "background",
                "type": "background",
                "paint": {
                    "background-color": "#ffffff"
            }, {
                "id": "buildings",
                "type": "fill",
                "source": "osm",
                "source-layer": "buildings",
                "filter": ["==", "$type", "Polygon"],
                "paint": {
                    "fill-color": "#444443"

    var map = new mapboxgl.Map({
        container: 'map',
        style: simple,
        zoom: 13,
        center: [119.30603, 26.03024]

since I spent lot of time on it,I think this may be helpful for somebody else.

  • thats actually useful!
    – Sanctus
    Aug 8, 2018 at 16:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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