javascript - Leaflet maxBounds with custom projection -

javascript - Leaflet maxBounds with custom projection -

i have made simple leaflet example. renders procedural tiles position , zoom displayed on each one. projection , crs configured map lat , lng straight x , y without transformation @ zoom=20. can check clicking on map , viewing popup coordinates.

var naturalzoom = 20; l.projection.direct = { project: function (latlng) { homecoming new l.point(latlng.lat, -latlng.lng); }, unproject: function (point) { homecoming new l.latlng(point.x, -point.y); } }; l.crs.wall = l.extend({}, l.crs, { projection: l.projection.direct, transformation: new l.transformation(1, 0, -1, 0), scale: function (zoom) { homecoming math.pow(2, zoom-naturalzoom); } }); var map = l.map('map', { crs: l.crs.wall, maxbounds: new l.latlngbounds([0,0], [4096, 4096]) }); map.setview([0,0], naturalzoom);

i trying restrict bounds of map (uncomment line #26 of code in jsfiddle example) breaks dragging of whole layer. have similar problem custom crs , maxbounds? can bug in leaflet library?

thank help.

i think problem project/unproject broken? anyway, don't have of manually, leaflet.js provides crs convert between px , latlng, set map this:

var map = l.map('map', { maxzoom: 20, minzoom: 20, crs: l.crs.simple }).setview([0, 0], 20);

and set map bounds (where image 1024x6145):

var southwest = map.unproject([0, 6145], map.getmaxzoom()); var northeast = map.unproject([1024, 0], map.getmaxzoom()); map.setmaxbounds(new l.latlngbounds(southwest, northeast));

you can add together markers by:

var m = { x: 102, // px coordinates on total sized image y: 404 } var marker = l.marker(map.unproject([m.x, m.y], map.getmaxzoom())).addto(map);

note using map.unproject go px latlng.

i wrote how in more detail, including how split image above gives basic gist.

javascript leaflet