How to download map tiles for Leaflet? - leaflet

I understand that this is a basic question; however, I've spent hours googling and have yet to find an answer that works.
I have a javascript webapp that uses Leaflet to display a map. I can get it to work when the tile source URL is some online repository like mapbox, but I want my application to work offline. How/where can I download tiles and save them in a folder structure that I can then set the tile source URL to point to?
Thanks

You can generate tiles by yourself using same engine as OSM's : Mapnik and OSM database.

Related

Get/list source-layers from Mapbox GL JS vector source

In Mapbox GL JS I am adding a vector tile source from a locally hosted mbtiles file. Adding this source to my map instance is easy like below.
map.addSource("polylinesSource",{
"type":"vector",
"tiles": [
"http://localhost:8000/polylinesJoined/{z}/{x}/{y}.pbf"
]
})
The source-layers from this service will be dynamic and I am hoping for a way to reference all those layers once the source is loaded. Is it possible to list all the layers in a source once loaded?
This is surprisingly fiddly to do. Mapbox-GL-JS doesn't expose any methods to list the vector tile source layers available within a tileset.
I built vector inspector to solve this exact problem. The code here shows you the process for extracting that information from a .pbf: https://github.com/stevage/vector-inspector-api/blob/master/server.js
Alternatively, since you have the local mbtiles file, another option is to extract it locally. Using another tool I built, tileinfo.
Also, if you serve the tiles using something like tessera you can access the layers info directly at the TileJSON endpoint.

Use existing offline raster mbtiles to display on mapbox map

I'd like to transition the map in my app from currently Apple-Maps-SDK to Mapbox. My users already downloaded a lot of offline maps into several .mbtiles tiles containing raster data.
My question now is if it's possible to still use those while the user will be transitioning to the new maps? I just don't simply want to delete all offline maps and tell the user that he needs to download everything again right now, but rather give them a time-window to do that...
I was looking at MGLRasterTileSource/MGLSource and thought that I can create a subclass and somehow provide my own data to the map, but this does not seem to be supported. There are no datasource methods on it for that purpose...
Would be great if somebody could point me into the direction on how to archive what I want.
EDIT:
So I thought it might work that way... I migrate my existing raster tiles into a downloaded pack inside the mapbox offline database. So I had a look at the caches.db but at least the data in there is not just a plain png/jpg (tried with the mapbox satellite images, which should be raster).
Cause there is no public interface for getting existing raster-tiles in there, is there?
I've seen an other solution where somebody is hosting a webserver inside the app... but that somehow looks like quite an overkill to me?!?
https://gist.github.com/namannik/3b7c8b69c2d0768d0c2b48d2ed5ff71c

How does Leaflet download tiles?

I've checked the source of Leaflet and have not found any usage of XMLHttpRequest. How does it download tiles from remote HTTP servers? What mechanism does it use? Where is it in the source?
Leaflet creates img element in the document with the url of the tile as a source.
It happends here: https://github.com/Leaflet/Leaflet/blob/master/src/layer/tile/TileLayer.js#L60

TMS tile source in routeme/mapbox

Using the MapBox iOS SDK (routeme) is it possible to point to an offline TMS directory structure of tiles?
I know that I can point to an online TMS source like OpenStreetMap but I would like to just store a TMS directory structure on the device for offline use.
It doesn't out of the box, but you can create your own RMTileSource to easily do this. You want to go straight up to RMTileSource as opposed to modeling after something like RMOpenStreetMapSource since this is a subclass of the general web tile handling class.

How to use download openstreetmap file to serve a local map app?

I have download a partial area data file (OSM format) to local. I have a local server which not connect to internet. So I want to build a local map app only with local OSM file (I use OpenLayer js).
I searched openstreetmap.org wiki, but find no solution.
Is there any way or documentaton to solve this?
By "local" you mean local on your machine or a local web server?
First you need to generate map tiles. Then you prepare the map HTML, including the OpenLayers code. The tile URL should point to your tiles (in case of a local machine, just use the "file://" protocol for URLs).
Here's one way how you can generate tiles (you can skip some of the steps): http://braincrunch.tumblr.com/post/9921938947/maperitive-tutorial-a-hiking-web-map-in-ten-easy-steps
1) i have to create an API that connects to a locally downloaded openstreet map and does to following:
2) Given a GPS location display the location on the map.
3) Be able to display the route to the location and update while the individual is on the move.
Numbers 2) and 3) are not yet my problem. number 1) is my problem for now. i don't even know where to start. i have been searching but still saw nothing i can understand.
what i want to know is: where to download OSM that i would be able to use locally? an example or a tutorial on an API that connects to the map locally and able to display it(and maybe able to zoom in, zoom out)?
the API can be in java, c#, or c++. but any other language is welcome as i have no choice.