2

I'm currently coding a simple HTML page with embedded Javascript to visualise a local mbtiles, including local glyphs and sprites.

The html index.html is :

...
<script src="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.css" rel="stylesheet" />
...
<body>
<div id="map"></div>
</body>
<script type="module" src="./index.js" async defer></script>

The javascript index.js is :

var map = new maplibregl.Map({
    container: 'map',
    style:
        'styles/style.json',
    center: [174.746344, -36.8899343],
    zoom: 11.15
});

and the goal is to load a style.json file that would define the mbtiles, sprites and glyphs local location.

I'm currently using the OSM Bright style, copied over locally on my machine, within the style.json file and the goal is to swap any connection to remote files by local files:

glyphs

"glyphs": "./glyphs/{fontstack}/{range}.pbf",

It works well for the glyphs

sprites

"sprite": "./sprites/sprite",

I have the following error : Unable to parse URL "./sprites/sprite"

mbtiles

"sources": {
    "openmaptiles": {
      "type": "vector",
      "url": "./mbtiles/country.mbtiles"
    }
  },

I got the following error : Error: Unexpected token 'S', "SQLite for"... is not valid JSON

I'm definitely missing some protocols here, and I can't find any answer to my question so far, knowing :

asset://sprites/sprite
or
mbtiles://country.mbtiles

but that doesn't work (neither for the glyphs, but it doesn't look like it's necessary any way)

  • this Load local .mbtiles with maplibre-gl-js looks like the closest to my need, but again the answer focus on application and not html, plus the question has not yet been fully resolved neither

So any help would be appreciated, especially I would be interested to know if this is even possible with the maplibre-gl.js library that I'm using as this might just not be possible. If that's the case, I would appreciate a similar answer with mapbox-gl.js if necessary, but still using local (offline) files.

In other words the main objective is to run a website (not an app) with maplibre (not mapbox - at least if possible) and only including local files.

Thanks for any feedback.

Ben On Track
  • 81
  • 7

1 Answers1

2

I know it's may be late, but nevertheless:
mbtiles:// protocol only works with maplibre-gl not with maplibre-gl-js as I know.
So I used pbf files. You can get them from mbtiles file with mbutil or from osm.pbf file with tilemaker.
Before converting from osm.pbf with tilemaker you should modify field "compress" to "none" in config-openmaptiles.json, or map won't be rendered.

For me only "glyphs" worked with relative path, but "sprite" and "tiles" with full path, like http://... (But I only tried python3 embedded http.server and uvicorn) This is my excerpt from style.json:

  "sources": {
    "openmaptiles": {
      "type": "vector",
      "tiles": ["http://localhost:8000/data/tiles/{z}/{x}/{y}.pbf"],
      "minzoom": 0,
      "maxzoom": 14
    }
  },
  "sprite": "http://localhost:8000/data/sprites/bright-v8",
  "glyphs": "data/glyphs/{fontstack}/{range}.pbf",

"tiles" path should be in square brackets and you should provide "maxzoom" of your map (14 is a default for many maps, as I know) if you want overzoom to work.

m7w
  • 36
  • 3
  • Hi, thanks for your feedback. A few questions : - what is maplibre-gl ? - I thought the process was the other way around : mbtiles are generated based on .pbf, and not the opposite. So I'm a bit confused with your process – Ben On Track Nov 07 '22 at 03:15
  • Maplibre project have two libs: native - [c++ for android, ios and others](https://github.com/maplibre/maplibre-gl-native) and [ts for web](https://github.com/maplibre/maplibre-gl-js). Searching for offline implementation I found your post, then I followed your links and as I understood only native lib: [issue](https://github.com/maplibre/maplibre-gl-native/issues/17) have mbtiles:// implementation. Followed answer in second link, I understood mbtiles files are sqlite database, so it's your responsibility to process them. So I picked simpler path, just use .pbf files. – m7w Nov 16 '22 at 14:53
  • I've managed to make it work with tile-server.php. I'm curious how you're making it work without serving your tiles, directly from http://localhost:8000/data/tiles while I need http://localhost:8000/tile-server.php?/index.json?/data/tiles – Ben On Track Dec 13 '22 at 03:47
  • As I wrote, I served my files also, but with uvicorn, as I also have a simple python backend in my app to save and delete markers on map. And didn't want to run both: one for back, second for map. – m7w Dec 16 '22 at 09:46
  • That sounds great, unfortunately I have way less background that you seem to have and if you don't mind being a bit more specific on how you serve your tiles with python? Thanks in advance – Ben On Track Dec 17 '22 at 11:25