I am working on a custom map with leaflet. So far everything worked fine, but unfortunately the program I am using to split my image into tiles dont start the count with 0 but instead with 1, so my tiles start with "1_1.jpg" and so my whole map is shifted by one tile on y- and x-axis. To rename the tiles is not an option, cuz there to many, so I was looking for a possibility to change the {x} and {y} value in

L.tileLayer('images/map/{z}/C{x}_R{y}.jpg',

to something like x=x+1 and y=y+1, that would be my logic. I've read that it would be possible with getTileUrl but I didn't understand how. I am still quite new to Javascript and this problem starts to drive me mad!

If anyone can help I would be very thankful.

Tile names are like "Cx_Ry.jpg" (for example first image "C1_R1.jpg") And here is the code.

var w = 16384, h = 16384; //Größe innerhalb Box

var map = L.map('image-map', {
        minZoom: 0,
        maxZoom: 5,
        crs: L.CRS.Simple,
        attributionControl: false,
}).setView([0, 0], 0);

var southWest = map.unproject([0, h], map.getMaxZoom());
var northEast = map.unproject([w, 0], map.getMaxZoom());
var bounds = new L.LatLngBounds(southWest, northEast);

map.setMaxBounds(bounds);

L.tileLayer('images/map/{z}/C{x}_R{y}.jpg', {
    minZoom: 0,
    maxZoom: 5,
    tms: false,
    continuousWorld: 'false',
    noWrap: false,
    defaultRadius:1,
}).addTo(map);

I am working on a custom map with leaflet. So far everything worked fine, but unfortunately the program I am using to split my image into tiles dont start the count with 0 but instead with 1, so my tiles start with "1_1.jpg" and so my whole map is shifted by one tile on y- and x-axis. To rename the tiles is not an option, cuz there to many, so I was looking for a possibility to change the {x} and {y} value in

L.tileLayer('images/map/{z}/C{x}_R{y}.jpg',

to something like x=x+1 and y=y+1, that would be my logic. I've read that it would be possible with getTileUrl but I didn't understand how. I am still quite new to Javascript and this problem starts to drive me mad!

If anyone can help I would be very thankful.

Tile names are like "Cx_Ry.jpg" (for example first image "C1_R1.jpg") And here is the code.

var w = 16384, h = 16384; //Größe innerhalb Box

var map = L.map('image-map', {
        minZoom: 0,
        maxZoom: 5,
        crs: L.CRS.Simple,
        attributionControl: false,
}).setView([0, 0], 0);

var southWest = map.unproject([0, h], map.getMaxZoom());
var northEast = map.unproject([w, 0], map.getMaxZoom());
var bounds = new L.LatLngBounds(southWest, northEast);

map.setMaxBounds(bounds);

L.tileLayer('images/map/{z}/C{x}_R{y}.jpg', {
    minZoom: 0,
    maxZoom: 5,
    tms: false,
    continuousWorld: 'false',
    noWrap: false,
    defaultRadius:1,
}).addTo(map);

• javascript
• dictionary
• leaflet
• tiles

Share Improve this question Follow edited May 7, 2017 at 2:56 Peter Hall 59.1k1515 gold badges165165 silver badges227227 bronze badges asked May 6, 2017 at 23:26 John OutsiderJohn Outsider 3311 silver badge33 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You can extend Leaflet's TileLayer class to provide your own getTileUrl method: http://leafletjs./examples/extending/extending-2-layers.html.

In this case, it would probably look something like this:

L.TileLayer.MyCustomLayer = L.TileLayer.extend({
    getTileUrl: function(coords) {
        // increment our x/y coords by 1 so they match our tile naming scheme
        coords.x = coords.x + 1;
        coords.y = coords.y + 1;

        // pass the new coords on through the original getTileUrl
        // see http://leafletjs./examples/extending/extending-1-classes.html 
        // for calling parent methods
        return L.TileLayer.prototype.getTileUrl.call(this, coords);
    }
});

// static factory as remended by http://leafletjs./reference-1.0.3.html#class
L.tileLayer.myCustomLayer = function(templateUrl, options) {
    return new L.TileLayer.MyCustomLayer(templateUrl, options);
}

// create the layer and add it to the map
L.tileLayer.myCustomLayer('images/map/{z}/C{x}_R{y}.jpg', {
    minZoom: 0,
    maxZoom: 5,
    tms: false,
    continuousWorld: 'false',
    noWrap: false,
    defaultRadius:1,
}).addTo(map);

Code is untested, but should get you moving in the right direction.