CODEWITHSUNDEEP
javascriptleaflet
sparklos
sparklos

Reputation: 462

Leaflet Simple CRS

I've got problem with leaflet map plugin and simple crs. When I was starting to play with it, I used default CRS and zoom levels 0-6, it worked fine. But I need to use pixel coordinates, not geographical, so I switched to Simple CRS which is exactly for that kind of situation, but then my map wouldn't show up and it would be just blank page. I googled something, didn't find a solution, but noticed, that others are using max zoom = 20 instead of min zoom = 0 as their starting point. So I switched my map to zoom levels 16-20 (I scrached some lowest zoom levels at that point). This got my map working until i zoomed in. Zoom levels 16, 17 and 18 work just fine, but level 19 is just blured 18 and 20 is blank. When inspecting network traffic, I found out that tiles for zoom levels 19 and 20 are not being requested. Moving two levels up gives me just blank map as with zoom levels 0-6. Also, when using zoom level 0-20, zoom levels 0-10 are not being requested too.

Secondary problem I have, is that the map won't let me zoom in on its right side, it keeps bouncing to the left.

I tested this in chrome and firefox, didn't bother with IE because its private pet project and I'm never gonna use it in IE.

Whole map can be seen here http://312raf.com/maptest/

'use strict';
var map = L.map('map', {
    minZoom: 16,
    maxZoom: 20,
    maxNativeZoom: 20,
    continuousWorld: true,
    reuseTiles: true,
//  noWrap: false,
    crs: L.CRS.Simple,
    });
    map.setView([0, 0], 18);

var southWest = map.unproject([0, 16384], map.getMaxZoom());
var northEast = map.unproject([12288, 0], map.getMaxZoom());
map.setMaxBounds(new L.LatLngBounds(southWest, northEast));

L.tileLayer('?img&z={z}&x={x}&y={y}', {
    attribution: 'Map data © ???',
}).addTo(map);

var m = {
    x: 200,
    y: 400
}
var m2 = {
    x: 16000,
    y: 12000
}
var marker = L.marker(map.unproject([m.x, m.y], map.getMaxZoom())).addTo(map);
var marker = L.marker(map.unproject([m2.x, m2.y], map.getMaxZoom())).addTo(map);

map.on('click', function(event) {
    console.log(event.latlng);
});

Can anyone please help me with this? Thx in advance.

Upvotes: 5

Views: 3503

Answers (1)

sparklos
sparklos

Reputation: 462

Ok, so apparently you need to provide minZoom, maxZoom and other params (continuousWorld, noWrap) to tile layer as well, then it works fine

Upvotes: 6

Related Questions