3

I downloaded some tiles from ArcGIS.Imagery with SAS Planet The tiles is in folders like

ArcGIS.Imagery/z2/0/x1/0/y2.jpg
ArcGIS.Imagery/z13/2/x2624/1/y1750.jpg

And I use this TileLayer to display it on Leaflet.

  L.TileLayer.customTiles = L.TileLayer.extend({
            getTileUrl: function (t) {
                console.log('coords', t);
                z = t.z,
                    x = t.x,
                    y = t.y,
                    z0 = t.z,
                    x0 = Math.floor(t.x / 1024),
                    x1 = Math.floor(t.x % 1024),
                    y0 = Math.floor(t.y / 1024),
                    y1 = Math.floor(t.y % 1024)

                const d = `ArcGIS.Imagery/z${z0}/${x0}/x${x1}/${y0}/y${y1}.jpg`;
                console.log('d', d);
                return d;
            }
        });
        L.tileLayer.customTiles = function () {
            return new L.TileLayer.customTiles();
        }
        L.tileLayer.customTiles().addTo(map);

But it looks like there is wrong coordinates. Here is what I got as a result.

Any ideas how to fix it?

enter image description here

2
  • 1
    Which cache type are you using? It looks like rather complex one. Why don't you go for something simpler, like TMS or or GMT?
    – TomazicM
    Nov 7, 2019 at 18:19
  • @TomazicM I am not sure that it is possible to set the cache type with SAS Planet
    – SERG
    Nov 7, 2019 at 18:42

3 Answers 3

4

Probably the simplest solution for this is to use TMS tiling schema in SAS Planet, since it's natively supported in Leaflet.

In SAS Planet you go to Settings > Options > Cache. Then in the Default cache type field select "Tile Map service (TMS)" (CacheType=45).

The you can declare your TMS layer simply with:

var tmsLayer = L.tileLayer('path to cache files/{z}/{x}/{y}.jpg', {
    tms: true
}).addTo(map);
0

Get it to work this way:

Using "GlobalMapper Tiles"

L.tileLayer('path to cache files/**z{z}/{y}/{x}**.jpg')
0

I checked, your code works. enter image description here

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Leaflet offline map</title>
        <link rel="stylesheet" charset="utf-8" href="leaflet.css" />
    <script type="text/javascript" charset="utf-8" src="leaflet.js"></script>
        <script>
            function onLoad() {

                var mymap = L.map('mapid').setView([55.74458, 37.60543], 16);

                  L.TileLayer.customTiles = L.TileLayer.extend({
                            getTileUrl: function (t) {
                                console.log('coords', t);
                                    z = t.z,
                                    x = t.x,
                                    y = t.y,
                                    z0 = t.z + 1,
                                    x0 = Math.floor(t.x / 1024),
                                    x1 = Math.floor(t.x % 1024),
                                    y0 = Math.floor(t.y / 1024),
                                    y1 = Math.floor(t.y % 1024)

                                const d = `moscow_osm_20221124/z${z0}/${x0}/x${x}/${y0}/y${y}.png`;
                                console.log('d', d);
                                return d;
                            }
                        });
                        L.tileLayer.customTiles = function () {
                            return new L.TileLayer.customTiles();
                        }
                        L.tileLayer.customTiles().addTo(mymap);
            }
        </script>   
    </head>
    <body onload="onLoad();"> 
        <div id="mapid" style="height: 500px;"></div>
    </body>
</html>
1
  • 1
    Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Oct 27, 2022 at 8:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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