Multiple mbtiles serving on tileserver-gl and display on maplibre-gl-js

Question

I am trying to display some historical buildings on openstreet map as "fill-extrusion".

I created to .mbtiles file from openstreetmap data and succesfully serve it with tileserver-gl in docker.

I generated GEOJSON file from selected layer in QGIS software for example. Here is sample:

{
"type": "FeatureCollection",
"name": "data-point",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "id": 0 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 29.015668875189068, 41.026780641384377 ], [ 29.015790594155771, 41.026870280145893 ], [ 29.01577030766132, 41.026896515857878 ], [ 29.015796390297041, 41.026916192635007 ], [ 29.01576740959068, 41.026957732478543 ], [ 29.015836963285938, 41.02699271337908 ], [ 29.015897822769293, 41.026944614636051 ], [ 29.016060114724898, 41.027049557302824 ], [ 29.016207916327321, 41.026922751559404 ], [ 29.016164445267787, 41.026887770621705 ], [ 29.01627747002258, 41.026756591939808 ], [ 29.015921007334384, 41.026524842296475 ], [ 29.015668875189068, 41.026780641384377 ] ] ] ] } },
{ "type": "Feature", "properties": { "id": 1 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 29.015263145300057, 41.026811249755688 ], [ 29.015338495136586, 41.026885584312488 ], [ 29.015454417962019, 41.026819995002029 ], [ 29.01537617005485, 41.026741287743228 ], [ 29.015263145300057, 41.026811249755688 ] ] ] ] } },
{ "type": "Feature", "properties": { "id": 2 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 29.016080401219345, 41.027202598392073 ], [ 29.01626587774004, 41.027458394847159 ], [ 29.016564379015527, 41.027327217302023 ], [ 29.016387596706743, 41.027069234034229 ], [ 29.016080401219345, 41.027202598392073 ] ] ] ] } },
{ "type": "Feature", "properties": { "id": 3 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 29.014687566669025, 41.024866606412886 ], [ 29.01493116733193, 41.025043701700469 ], [ 29.015400652245884, 41.024689510649033 ], [ 29.015165909788898, 41.024505731522638 ], [ 29.014687566669025, 41.024866606412886 ] ] ] ] } }
]
}

Then I converted this geojson to mbtiles with tippeceone with below command:

tippecanoe -Z4 -z11 -f -F -ps -pf -pk -pc -pt -Bg -d14 -o data-point.mbtiles -l "data-point" data-point.geojson

It generates data-point.mbtiles

I added this file to /data folder and created custom style.json file as:

{
  "version": 8,
  "name": "Data Point",
  "metadata": {},
  "center": [
    0,
    0
  ],
  "zoom": 1,
  "bearing": 0,
  "pitch": 0,
  "sources": {
    "data-point": {
      "type": "vector",
      "url": "mbtiles://{data-point}"
    }
  },
  "layers": [
    {
      "id": "data-point",
      "source": "data-point",
      "source-layer": "data-point",
      "type": "fill-extrusion",
      "paint": {
        "fill-extrusion-color": "#aaa",
        "fill-extrusion-height": 15,
        "fill-extrusion-base": 0
      },
      "layout": {
        "visibility": "visible"
      }
    }
  ]
}

and created config file:

{
  "options": {
    "paths": {
      "root": "/data",
      "fonts": "fonts",
      "styles": "styles",
      "mbtiles": "/data"
    }
  },
  "styles": {
    "osm-bright-gl-style": {
      "style": "openmaptiles/osm-bright-gl-style/style-local.json",
      "tilejson": {
        "bounds": [11.22404, 51.35252, 14.77917, 53.5784]
      }
    },
    "data-point": {
      "style": "data-point/style.json",
      "tilejson": {
        "bounds": [11.22404, 51.35252, 14.77917, 53.5784]
      }
    }
  },
  "data": {
    "v3": {
      "mbtiles": "output.mbtiles"
    },
    "data-point": {
      "mbtiles": "data-point.mbtiles"
    }
  }
}

If I can add tileserver-gl generated style file in my maplibre,

new Map({
    style: `http://localhost:8080/styles/data-point/style.json`,
    center: [initialState.lng, initialState.lat],
    zoom: initialState.zoom,
})

I can see my data successfully in browser.

But if I add my tileserver-gl generated style file as layer,

new Map({
    style: `http://localhost:8080/styles/osm-bright-gl-style/style.json`,  **// this is osm from tileserver-gl**
    center: [initialState.lng, initialState.lat],
    zoom: initialState.zoom,
})


map.on("load", (e) => {
    map.addSource("data-point", {
        type: "vector",
        url: "http://localhost:8080/styles/data-point/style.json",  /**/this is custom mbtiles from tileserver-gl**
    });

    // add an additional layer style for our vector data
    map.addLayer({
        id: "data-point-fill",
        source: "data-point",
        "source-layer": "data-point",
        type: "fill",
        layout: {
            visibility: "visible",
        },
    });
});

I am getting this error. I am not sure this error is cause of maplibre because server data could be wrong.

Thanks for any comments and helps.

Answer 1

I used this url http://localhost:8080/data/data-point.json which is inspected from style file and it worked.