Menu
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/[email protected]/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/[email protected]/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)
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.
992
asked Sep 03 '25 17:09
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.
65
answered Sep 06 '25 12:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With