Unable to combine two different mbtiles

Question

I am trying to combine my vector tiles (generated by a shapefile) based on this tutorial with another mbtile file of a specific country, which I downloaded from openmaptiles. I host the mbtiles in a local tileserver, which lives in a vagrant machine. And I display them on a mapping client using OL3. I am able to display without any issues the second mbtile (the one with the country) by using the below parameters for defining the source:

"data_vector":{
    "type": "vector",
    "tiles": [
      "http://localhost:8080/data/v3/{z}/{x}/{y}.pbf"]
  }

I want to add another source with the other mbtile file. According to this tutorial, I can combine the mbtile files by adding one more source. I tried that by doing the following:

"mymaptiles": {
      "type": "vector",
      "url": "mbtiles:///Users/dkar/workspaces/other/workshops/osmfoundation_workshop/opt/maps/wld_poi_warehouses_wfp.mbtiles"
  }

But then when I try to access the map from the browser I get the following error:

TileJSON.js:85 Failed to load mbtiles:///Users/dkar/workspaces/other/workshops/osmfoundation_workshop/opt/maps/wld_poi_warehouses_wfp.mbtiles: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Is this the correct way to make it work? If yes, how do I make the mbtile appear on the map?

Answer 1

As far as I can see, your problem is that you need to make your custom mbtiles at: ///Users/dkar/workspaces/other/workshops/osmfoundation_workshop/opt/maps/wld_poi_warehouses_wfp.mbtiles available on a webserver. Your browser does not allow you to access your local file storage.