CODEWITHSUNDEEP
javascriptleaflet
L. Boegli
L. Boegli

Reputation: 43

Leaflet: Image Overlay and zoom levels

I added an image to my map (image overlay). Can I "adjust" the zoom levels due to the image?

At zoomlevel 17, the resolution of the raster map is too low compared to the screen resolution. At zoomlevel 16, the raster map isn't readable anymore.

Is it possible to define something like "zoomlevel 17: 1px of the image = 1px of the screen"?

Please excuse my bumpy English. Thank you very much!

var map = L.map('image-map', {
		minZoom: 16,
		maxZoom: 18,
		}).setView([46.975768, 7.436308], 17);


var imageUrl = '../Bilder/Karten/Normalansicht.png',
    imageBounds = [[46.966635, 7.415942], [46.998849, 7.470108]];

L.imageOverlay(imageUrl, imageBounds).addTo(map);

map.setMaxBounds(imageBounds);

Upvotes: 4

Views: 10312

Answers (1)

IvanSanchez
IvanSanchez

Reputation: 19069

Is it possible to define something like "zoomlevel 17: 1px of the image = 1px of the screen"?

No.

What you can do, however, is use CRS.Simple. In this coordinate system, 1 map unit = 1px at zoom level 0. You'll have to adjust the image overlay coordinates to achieve the screen resolution/image resolution ratio you want.

Check the tutorial on CRS.Simple at http://leafletjs.com/examples/crs-simple/crs-simple.html

Another option is to use fractional zoom controls (available only in Leaflet 1.0.0-beta, not in the 0.7.x series). By setting the zoomSnap and zoomDelta options, the user will be able to set zoom levels e.g. 16.25, 16.5 and 16.75.

There is no tutorial for this, but you can check some test code at https://github.com/Leaflet/Leaflet/blob/master/debug/map/zoom-delta.html

Upvotes: 3

Related Questions