EPSG:3857, Custom Resolutions / Zoom Levels

1,075 views
Skip to first unread message

Daniel Bradshaw

unread,
Aug 14, 2013, 7:48:06 PM8/14/13
to leafl...@googlegroups.com
This seems like it should be easier than it is, but I've banged my head up against this problem for too long already.

I'm trying to create a TileLayer that was built on EPSG:3857, but has custom resolutions ([36112,18056,9028,4514,2257,1128,564,282]).  Is this possible without using a plugin like proj4leaflet?  Is this possible with proj4leaflet?

Thanks,

DB

Diego Guidi

unread,
Aug 15, 2013, 4:21:57 AM8/15/13
to leafl...@googlegroups.com
you should extend L.CRS.EPSG3857 and override scale function to
provide your custom resolutions.
the use your custom crs as base for map crs.

var mycrs = L.extend({}, L.CRS.EPSG3857, {
scale: function() { ...}
});
var map = L.map('map', {
crs: mycrs
});

see leaflet source code for the details


Diego Guidi
> --
>
> ---
> You received this message because you are subscribed to the Google Groups
> "Leaflet" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to leaflet-js+...@googlegroups.com.
> For more options, visit https://groups.google.com/groups/opt_out.

Daniel Bradshaw

unread,
Aug 15, 2013, 10:50:51 AM8/15/13
to leafl...@googlegroups.com
Thanks for the suggestion!

Here's what I've got (it doesn't work), but it seems like it should.  Any suggestions on the logic?

var maxResolution = 9.554652442638218;
var scales = [36112.0, 18056.0, 9028.0, 4514.0, 2257.0, 1128.0, 564.0, 282.0];
var resolutions = [
    9.554652442638218, 4.777326221319109, 2.3886631106595546, 1.1943315553297773, 
    0.5971657776648887, 0.2984505969011938, 0.1492252984505969, 0.07461264922529845
];

var originX = -22041258.62706707;
var originY = 33265068.604224823;
var mycrs = L.extend({}, L.CRS.EPSG3857, {
    transformation: new L.Transformation(1, -1 * originX, -1, originY),
    scale: function(zoom) {
        return 1 / resolutions[zoom];
    }
});


Using this same logic with a proj4js projection *almost get's me to the right row/column (but almost doesn't count unfortunately):
var crs = L.CRS.proj4js(
    'EPSG:102100', 
    '+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +a=6378137 +b=6378137 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs', 
    new L.Transformation(1, -1 * originX, -1, originY)
)

Diego Guidi

unread,
Aug 15, 2013, 12:48:36 PM8/15/13
to leafl...@googlegroups.com
try to use simply the scale function, and not the transformation

Diego Guidi

Daniel Bradshaw

unread,
Aug 15, 2013, 4:31:06 PM8/15/13
to leafl...@googlegroups.com
Removing the transformation does not solve the problem (incorrect row/column).  I believe it's because the tile origin isn't consistent with the standard commercial tiles, but this is a complete guess.  Does the scale function I provided previously seem correct?

I have found a work-around since I do have control of the original tiles, but I'd be interested in solving this for posterity's sake.
Reply all
Reply to author
Forward
0 new messages