Is there a way to make leaflet not repeat the world map and make the map stay within the world bounds when dragging? and also disable zoom out when the size of the world reaches the size of the window
To stop the tiles from repeating, use the noWrap option of L.TileLayer
If set to true, the tiles just won't load outside the world width (-180 to 180 longitude) instead of repeating.
http://leafletjs.com/reference.html#tilelayer-nowrap
If you want to stop panning beyond defined bounds, use the maxBounds option of L.Map or call the setMaxBounds method:
Restricts the view to the given geographical bounds, bouncing the user back when he tries to pan outside the view.
http://leafletjs.com/reference.html#map-maxbounds
http://leafletjs.com/reference.html#map-setmaxbounds
If you want to disable zoom beyond a certain level use L.Map's minZoom and maxZoom options. What you want to do is set a minimum zoom level and use that as initial zoom. What factor depends on your map's elementsize and your tilelayer's tilesize. Most tileproviders use 256px². At zoom 0 the world is 1 tile, at zoom 1, 2x2 tiles, at 3 it's 4x4 etc. So if your map's elements is 512px² your minZoom would be 1.
http://leafletjs.com/reference.html#map-minzoom
Here's a demonstration on Plunker: http://embed.plnkr.co/rP5NLQ/preview
By Setting minimum zoom level :
map._layersMinZoom=1 (which sets the minimum zoom level to 1)
OR
map.options.minZoom = 1;
Read more here
Related
I am creating a non-geographical map with leaflet, which shows a ski resort.
JSFiddle: https://jsfiddle.net/exophunk/ruzgeqL4/
I am using map.fitBounds(bounds) to fit the map to the container and map.setMaxBounds(bounds) to make sure you can't pan outside the map.
This works perfect when zooming in, but as long as the map is smaller than the viewport height, I would like to "align" the whole thing to the bottom of the container, so the map never moves away from the bottom of the container. As it is a mountain, it is pretty obvious.
I achieved this by adding an offset to the maxBounds, as you can see in this example (blue box = max bounds):
https://jsfiddle.net/exophunk/05cq3rzt/
The problem with this approach is, that you can now pan into the "empty sky" when zooming in, while I would actually like to keep the maxBounds as in the first example, so it also restricts movement upwards.
I think this would mean I would need to resize the max bounds while zooming in maybe? But there, I messed up coordinate systems and containers and wasn't able to do this properly.
How can I make sure the map always sticks to the container bottom while keeping the original max bounds, if possible?
You can overwrite the default wheel zoom and check if the zoom mousepoint is in the bounds, else zoom to the center of the bounds/map:
map.scrollWheelZoom._performZoomOrg = map.scrollWheelZoom._performZoom;
map.scrollWheelZoom._performZoom = function(e){
var mouse = map.scrollWheelZoom._lastMousePos;
var llpixel = map.containerPointToLatLng(mouse)
if(!bounds.contains(llpixel)){
map.scrollWheelZoom._lastMousePos = map.unproject([container.clientWidth/2, mapHeight]);
}
map.scrollWheelZoom._performZoomOrg();
}
https://jsfiddle.net/falkedesign/c04ngftj/
It appears to me that Leaflet.ImageOverlay does not have a minZoom and a maxZoom option like Leaflet.TileLayer has. But I have a map image that I only want to be visible at two or three zoom leves. Is there a cunning way to circumvent this issue?
I guess, I can use gdal2tiles.py or gdal_retile.py to create a file for a tile layer, but as I'm using UTM projection (Mercator gives a horrible distortion in Norway), I'm not sure what tile numbers makes my map image fit in with the background map.
Use the zoomend event to conditionally hide/show your L.ImageOverlay.
When we reduce the map size to lowest possible size by scrolling down or clicking zoom(-) sign, a square is shown which does not exactly fit in the map area on my web page.
i implemented bing map over openlayer.
cant attach image due to repo constraint on stackoverflow.
as of now my implementation looks like current look but i want map should look like desired look
if you mean that your map is too small for the DIV area, but the DIV area itself is OK, you can tell your map what is the last zoom level you want to use by setting the map options at the map init:
map = new OpenLayers.Map("map",{ numZoomLevels: 5, minZoomLevel: 3, maxZoomLevel: 5 } );
plus/minus zoom makes only your zoom change, not the area of the map, the area stays the same within the page. so how do you want the area of the map to be affected by zooming?
the area of the map is dependent only upon the size of the DIV that the map is placed in.
this is the DIV in your first exapmle: <div id="map" class="smallmap"></div>. If you change the proportions of the DIV element, the area of the map is changed too.
So basically I have an application which zooms in by scaling every layer and adjusting the position of the layers. However I have a bunch of circles (and images) on some layers which I need to keep the size the same regardless of the zoom level (ie regardless of the scale of the layer).
Is there a way to set the scale of every shape/image in a layer without iteration? I've looked at using a Group but there is no universal way to set a universal scale.
If not, would there be an efficient way to do this without iteration?
Put the non-scaling objects in a separate group and then rescale (and optionally reposition) that group based on the scaling factor of the groups layer.
Demo: http://jsfiddle.net/m1erickson/2X7eK/
var scaleFactor=2;
// scale the entire layer by 2X
layer.setScale(scaleFactor);
// unscale just the noGroup back to original size
noGroup.setScale(1/scaleFactor);
// reposition just the noGroup back to it's original position
// before the layer was resized
noGroup.setPosition(noGroup.getX()/scaleFactor,noGroup.getY()/scaleFactor);
I'm using Polymaps.js library for making maps.
It would be very useful to be able to observe zoom level changes on layers. I'm trying to keep a layer of points scaled by values in meters, so I need to recalculate the radii whenever the zoom level changes.
I'm using the on "move" function, which I think is triggered on zooms, too. There may be on on "zoom" function, too. I think that there is.
For example:
// whenever the map moves...
map.on("move", function() {
// get the current zoom
var z = map.zoom();
// show/hide parcels
parcels.visible(z >= 16);
});