Rendering Google Maps tiles in Leaflet (offline)

Question

I have Google Maps tiles on my computer in a folder. I want to use it offline in Leaflet. Actually, Leaflet use by a link to load the map like below:

      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
      }).addTo(map);

When I replace the local link on my computer file:///D:/Map/{z}/{x}/{y}.png instead of https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png, the map does not load. But this link file:///D:/Map/5/5/5.png load correctly a tile on my browser and also it is same as this link on OpenStreetMap https://{s}.tile.openstreetmap.org/5/5/5.png How can I do this?

Answer 1

For security reasons browser won't allow you to access files in an arbitrary folder on file system of your computer. Your tiles have to be in a subfolder of the folder where your map html file is.

For example, if your map.html file is in folder D:/map, then create subfolder D:/map/tiles and put your tiles there. Your tile layer creation should then look like this:

L.tileLayer('tiles/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);