How does Leaflet download tiles? - leaflet

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

Related

Export leaflet map as PDF to server

I use Leaflet to display basemaps, wms layers, multipoints, multipolygons and multilinestrings. Is there a way with JavaScript to directly, upon button click, save screenshot of map as PDF with document header and footer (image in the middle) on the server?
Today I am able to save screenshot as PDF locally on my computer with help of Leaflet plugin browser-print and print-save it as a PDF. I can then upload the file to the server and all is well. However, I want to skip this manual part of printing map as pdf, save it locally and then upload it.
You can try this package works great:
https://github.com/grinat/leaflet-simple-map-screenshoter
I used it with Vue.js and make it a screenshot from WMS and Geo maps as well.
Send the data like base64image on a server and there I use https://github.com/puppeteer/puppeteer to create a PDF.

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.

tileserver on Github pages

Does anyone know how I can have a tile server hosted on Github pages please. I am making my own pyramid of image tiles (using either pyvips or gdal) but instead of having the tile server locally on my machine, I would like to populate a Github with these tiles and then set my application to fetch the appropriate tiles from that repo.
Any pointers highly appreciated.
Yes !
You can check https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames that will explain to you the url convention used for serving tiles.
You can then create folders of images on github with the same structure : zoom level / x_coordinates / y_coordinates.png.
I've created and test github folder.
Here is the demo page
You can see a tile being displayed, and it is served from github.

How to download map tiles for 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.

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.