4

I'm using file:///C:/path/tiles/{z}/{x}/{y}.png like url of tileLayer but it doesn't work and no error is shown.

var layer = new L.tileLayer("file:///C:/OSM/tiles/{z}/{x}/{y}.png", {
      minZoom: 1,
      maxZoom: 15
}).addTo(map);

Any idea?

  • Welcome to GSE! Please, can you edit your question adding further details, like the code that doesn't work? – Antonio Falciano Jan 14 '14 at 15:40
2

Try using a path relative to your HTML file:

L.tileLayer('/map-tiles/{z}/map_{x}_{y}.png', {
  attribution: 'Map data © ???',
}).addTo(map);
  • I've used relative path and it works but I want to use absolute path. – Jose Jan 15 '14 at 8:44
2

I got it running with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="en" />

    <script src=jquery.min.js" type="text/javascript"></script>

    <title>Buslinien</title>

    <script type="text/javascript" src="leaflet.js"></script>
    <link rel="stylesheet" href="leaflet.css" />

    <script type="text/javascript">
    function initialize() {

        var map = new L.Map("map", {
            center: new L.LatLng(51.45,8),
            zoom: 9,
        });

        var TopoLayer = L.tileLayer('file:///D:/Tiles/Topo/{z}/{x}/{y}.png', { maxZoom: 16 });    
        map.addLayer(TopoLayer);    
    }
    </script>

 <link href="my.css" rel="stylesheet" type="text/css" />

</head>
<body onload="initialize()">
    <div id="map" class="map"></div>

</body>
</html>

Not sure why it works this way. I guess the map variable has to be defined first.

  • Do you think it's possible on mobile phone browser? – bertrandg Nov 9 '16 at 11:06
  • I have no phone to try with, so you have to test it yourself. It might depend on the operating system too. – AndreJ Nov 9 '16 at 12:08
  • My guess is that you are going to run into issues on a web server if you ever publish this as Javascript access to local file systems like that are prohibited. – Kristopher Dec 7 '16 at 14:33
  • @Kristopher surely not, but it is meant to run totally local. – AndreJ Dec 7 '16 at 15:04
  • Tried it on Android 7.0 mobile and it works. HTML file was referenced as file:///sdcard/maps/LeafletExamples/Example.html. Data files were referenced relative to HTML but I suppose it would work also with absolute path. – TomazicM Nov 6 '17 at 21:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.