Viewing maps without connection

[Stanisla]

Hi everybody.
I'm trying to build a map server locally,without internet connection.
I've copied the html from https://maplibre.org/maplibre-gl-js/docs/examples/simple-map/
replacing the links to local files.
I'm getting this error:
Object { message: "NetworkError when attempting to fetch resource.", stack: "" }
What i'm doing wrong? Is not posible to serve maps locally?
Thanks.

[HarelM]

You need tiles, fonts and glyphs locally, did you add those?

[Stanisla]

Thank you so much for pointing in right direction.
I have set in style.json:
"glyphs": "http://127.0.0.1/mapbox-gl-js-offline/demotiles/font/{fontstack}/{range}.pbf"
"url": "http://127.0.0.1/mapbox-gl-js-offline/demotiles/tiles/tiles.json"
Both are valid URLs.
Anything else i should do?

[HarelM]

The tiles themselves and the sprite.

[Stanisla]

The tiles are already set,in tiles.json:
"tiles": [ "http://127.0.0.1/mapbox-gl-js-offline/demotiles/tiles/{z}/{x}/{y}.pbf" ]
Where must I set the sprite?

[HarelM]

In the style.json file, it should point to an image with all the icons you need for the map, assuming you have icons.

[Stanisla]

HareIM thank you so much for being so kind helping a noob like me.
I don't have any icon (i think)
When i'm conected to internet i get this:

As i see everithing is from 127.0.0.1,so i don't understand what is wrong.

[HarelM]

You need to make sure the header of the tiles are correct, the same as you would receive from a backend server.
Also there might be an indication of the error in the console.
If you get 200 for everything you fetch, then the problem is probably with the data.
Can you use the same style with a regular backend server and see the map?
I would recommend starting with something that works, and slowly replace parts of it until you are fully local.

[Stanisla]

Sorry for the delay,yesterday i was overwhelmed.
For surpass the CORS problem i run a python server with:
python3 -m http.server
I have prepare a minimal map that works when i'm connected to internet.If i'm disconected i get a bunch of erros,like in the image:

Here is the zipped version of the map,if it helps:

test.tar.gz

[HarelM]

I recommend using a tile server like tileserver-gl or martin instead of writing your own.
Render tests for example are able to present map without using an internet connection.
What you are referring to is not offline, but locally, which is tested to work very good.
I can't tell you what's wrong with your code, but you can dig into the render tests to see how to achieve what you want.

[Stanisla]

I've resolved my problem this way:

There are several places trying to get data from internet,that must be replaced with local files:

• In index.html from style: 'https://demotiles.maplibre.org/style.json'
• In style.json from "glyphs": "https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf" and "url": "https://demotiles.maplibre.org/tiles/tiles.json"
• In tiles.json from "tiles": [ "https://demotiles.maplibre.org/tiles/{z}/{x}/{y}.pbf" ] This last part it's what I had not taken into account.Once replaced everything goes fine.
• If i disconnect from internet,and refresh the page,errors arise.My solution is restart web browser while disconnected.

And this is the way i solved my problem,in case it serves to someone.