Working offline with maplibre-gl and mbtiles

[muazshahid]

I am trying to to live location tracking using like in one of the example here :
https://maplibre.org/maplibre-gl-js-docs/example/live-update-feature/

I am looking to draw a line on the map using coordinates received from a GPS sensor and I want to be able to draw the line as the location updates in real time in order to keep track, all this will happen on localhost on my computer using an html page.

Is it possible to use this library offline, as in not having to fetch the requirements using api calls? Is it possible that I take this completely offline (I am to use it in areas without internet connectivity) and use the "mbtiles" files for the location I am working with and use that to update the location from the sensor and plot accordingly?
I have tried searching for such examples but I failed to find any. If there's any direction someone could point me to regarding this, it will be greatly appreciated.

[HarelM]

addProtocol is the way to active it.
But if you are aiming for desktop application it might be better to do it using electron.
For mobile you can use Capacitor or Cordova.
I'm doing this in my app: israelhiking.osm.org.il.
The code is available in github.

[muazshahid]

Thanks for the response!
I looked up the addProtocol, If I am not wrong, I guess this is what you are referring to:
https://maplibre.org/maplibre-gl-js-docs/api/properties/#addprotocol
I am aiming to develop a simple desktop application which just gets the values from a source, the lat and long coordinates and simple plots them on the map, basically just draw a line and keep a track of where the person has walked or the path they moved along.
I looked at the app you mentioned too but I wasn't able to find exactly where this took place in your app. I am actually new to JavaScript that is why I am having a hard time making this.

[HarelM]

There are two unrelated things here.

1. Plot a line - this you can find in the examples - you need to update a geojson source and draw it using the relevant layer
2. Offline tiles rendering, this is more complicated and this requires the addProtocol to be able to interject the ajax calls and replace them with file manipulation. This isn't possible using just an html file, you need some kind of backend. The simplest solution for desktop is electron I believe.

[muazshahid]

Yes they are unrelated, I am trying to achieve the same functionality as in the example I mentioned in the first post, I will update the GeoJSON source in it manually. But everything else I wanted to host locally. Will look into electron to make sense of this.
The application I want to develop is for an area without internet connectivity.

[wipfli]

PMTiles is also good for offline usage I think. @bdon do you have an example with MapLibre GL JS and PMTiles on the local file system?

[wipfli]

https://github.com/protomaps/PMTiles

[wipfli]

Here is a small example how to serve a PMTiles file locally together with a MapLibre map:

https://github.com/wipfli/declarative-powerlines-switzerland#serve-website-locally

Note that this needs some sort of web serve because without a web server, you get a CORS error when you try to access a different file in your directory...

[bdon]

the inspector https://protomaps.github.io/PMTiles/ works with local files, but it's a security limitation of browsers that opening a local file requires user interaction. So you won't be able to "hotlink" a local file path like you can with a URL on the internet.

If you're working inside a web-based mobile framework like Cordova or Capacitor the security policies may be different.