Document / add way to use local tiles

[filiph]

I imagine many Flutter apps will want to use Leaflet with custom maps (e.g. indoor map of a mall, map of a campus, map of a recreational park).

These could benefit from being stored on device (as assets of the app). You'd get immediate load times and offline capability.

AFAIK, Leaflet currently only supports providing tiles through a web URL scheme (https://example.com/path/{id}/{z}/{x}/{y}.png) and I assume the JS version of leaflet doesn't really have a need for anything else. But I could be wrong.

In any case, I think this could be a really neat feature for a mobile app mapping solution.

cc @wmleler

[wmleler]

We actually have an example of this. We have a potential Flutter client that is a very large NGO that needs offline maps in remote areas of the world.

Leaflet itself does support arbitrary basemap layers, so it is very easy to support locally stored offline maps. But remember that this repository is only inspired by Leaflet, and we have to add features as we need them. Shouldn't be too hard to add this though. At the very least, you can use a URL with a "file:" transport prefix.

[filiph]

Wait, file:// will work? I though the library is using a network request, which I think will not know what to do with the file scheme.

If file:// already works, then we're basically done. I could just figure out how exactly Flutter assets get transformed into file:// urls, whether this is platform-independent, and we're done.

[johnpryan]

We are currently using NetworkImage, but we could add an option to use FileImage and I think this would work as expected.

Would anyone with said map data like to publish some map data as a Dart package? e.g.

# pubspec.yaml
dependencies:
  awesome_map_data:
    git:
      url: git://github.com/awesome_map_data/awesome_map_data.git
      ref: master

Then our tile layer could have an option to use FileImage and just use the same urlTemplate specified by the user (file://path/to/package/{z}/{x}/{y}.png instead of https://tile.openstreetmap.org/{z}/{x}/{y}.png)