Fit map to bounds exactly - leaflet

Is there a way to fit the map exactly to bounds? (or as close a possible).
For example, in this jsfiddle, even without padding the map leaves a lot of padding above and below the points:
http://jsfiddle.net/BC7q4/444/
map.fitBounds(bounds);
$('#fit1').click(function(){ map.fitBounds(bounds); });
$('#fit2').click(function(){ map.fitBounds(bounds, {padding: [50, 50]}); });
I'm trying to fit a map as precisely as possible to a set of bounds that closely match the map shape without all the extra padding.
Setting a map's ne corner and sw corner would work as well, but I don't think that functionality exists.

You are very probably looking for the map zoomSnap option:
Forces the map's zoom level to always be a multiple of this, particularly right after a fitBounds() or a pinch-zoom. By default, the zoom level snaps to the nearest integer; lower values (e.g. 0.5 or 0.1) allow for greater granularity. A value of 0 means the zoom level will not be snapped after fitBounds or a pinch-zoom.
Because its default value is 1, after your fitBounds the map will floor down the zoom value to the closest available integer value, hence possibly introducing more padding around your bounds.
By specifiying zoomSnap: 0, you ask the map not to snap the zoom value:
var map = L.map('map', {
zoomSnap: 0 // http://leafletjs.com/reference.html#map-zoomsnap
}).setView([51.505, -0.09], 5);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
var southWest = new L.LatLng(40.712, -74.227),
northEast = new L.LatLng(40.774, -74.125),
bounds = new L.LatLngBounds(southWest, northEast);
L.marker([40.712, -74.227]).addTo(map);
L.marker([40.774, -74.125]).addTo(map);
map.fitBounds(bounds);
$('#fit1').click(function() {
map.fitBounds(bounds);
});
$('#fit2').click(function() {
map.fitBounds(bounds, {
padding: [50, 50]
});
});
body {
padding: 0;
margin: 0;
}
#map {
height: 300px;
margin-top: 10px;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.2.0/dist/leaflet.css">
<script src="https://unpkg.com/leaflet#1.2.0/dist/leaflet-src.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<button id="fit1">fit without bounds</button>
<button id="fit2">fit with bounds</button>
<div id="map"></div>

Related

react-leaflet _ "Invalid LatLng object: (NaN, NaN)" with valid coordinates on Polyline

Invalid LatLng object: (NaN, NaN) appears with react-leaflet, and comes from leaflet itself, as it seems to come from the core library, even if coordinates are actually valid.
Code:
const plottedPoints: LatLong[] = [
[29.69937, -95.32803],
[30, 30],
[29.69937, -95.32803]
]
const polylineTraveledOptions: PathOptions = {lineCap: 'square', lineJoin: 'miter', color: blue50, weight: 4}
return(
<div id="map" style={{height: '400px', width: '555px'}}>
<MapContainer
// Won't let the user zoom out too much and see outside the world's layout
zoomSnap={0.5}
zoomDelta={0.5}
// We have a custom positioned zoom control
zoomControl={false}
scrollWheelZoom={false}
// Fixes the map's drag to its bounds
maxBoundsViscosity={1}
style={{height: '100%', width: '100%'}}>
<TileLayer
attribution='© Stadia Maps, © OpenMapTiles © OpenStreetMap contributors'
url="https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png"
/>
<ZoomControl position="bottomright" />
<Polyline pathOptions={polylineTraveledOptions} positions={plottedPoints} />
</MapContainer>
</div>
)
I'm also setting the mapBounds:
const map = useMap()
// Zooms in the correct size for the polyline we've set
const mapBounds = [[29.69937, -95.32803], [29.69937, -95.32803]]
map.fitBounds(mapBounds, {padding: [30, 30]})
// Won't let the user zoom to a world's map that's duplicated
map.setMinZoom(2)
// Won't let the user drag outside of the world's map
map.setMaxBounds([
[-90, -300],
[90, 300],
])
May it because it doesn't support overlapping of vectors on Polylines, as two of the coords are on the same location?
Or is it because the mapBounds() function would be on the same point, instead of something that can be calculated as a square?
Or else...?
There's also not much out there on how to fix it, a part of this link: https://github.com/IvanSanchez/Leaflet.Polyline.SnakeAnim/issues/29 which is about the snake animation - and I don't think it's related.
Please, enlighten me.

Leaflet lowest zoom level is still too high with L.CRS.Simple

Trying to retrieve part of a district, however for some reason cannot see the whole area, even if zoom level is at 0, where (supposedly) we should see the whole world.
I am using L.CRS.Simple because this uses the EPSG:3763 and cannot see that one on the CRS list. I am retrieving the data in JSON cause when tying with geoJSON, was not able to transform the 3D coordinates data into 2D planes ones.
const queryRegionText = "where=OBJECTID > 0"
const geoJsonURL2 = "https://sig.cm-figfoz.pt/arcgis/rest/services/Internet/MunisigWeb_DadosContexto/MapServer/2/query?f=json&returnGeometry=true&geometryType=esriGeometryPolyline&spatialRel=esriSpatialRelIntersects&outFields=*&outSR=3763&" + queryRegionText
var map = L.map('mapid', {
crs: L.CRS.Simple
}).setView([-58216.458338, 42768.347232], 0);
L.control.scale({ metric: true }).addTo(map);
fetch(geoJsonURL2).then(function (response) {
response.json().then(function (data) {
data.features.forEach(element => {
if (element.geometry.rings) {
element.geometry.rings.forEach(point => {
L.polyline(point, { color: 'red' }).addTo(map);
})
}
});
});
});
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(map);
}
map.on('click', onMapClick);
<html>
<head>
<title>Leaflet - testing</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
</head>
<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
</body>
</html>
TL;DR: When creating the map, set the minimum zoom below zero. This should work:
var map = L.map('mapid', {
crs: L.CRS.Simple, minZoom: -6
}).setView([-57728, 55296], -6);
Explanation
Normally, Leaflet translates from a latitude/longitude coordinate system to screen pixels using an assumption that the world is 256 pixels high at Zoom level 0. At each higher Zoom Level, the number of pixels doubles (explained nicely in the Zoom levels tutorial). With this assumption, the options for the map default to {minZoom: 0, maxZoom: Infinity} (as you are not adding any Layer that sets these values to anything different).
When you use L.CRS.Simple, at Zoom level 0 it maps 1 coordinate unit to 1 screen pixel. Your data looks like it is about 18000 coordinate units tall, so it doesn't fit in your 400 pixel high map. To make it fit, we need each screen pixel to map to about 45 coordinate units. 2^5 is 32, and 2^6 is 64, so we need to zoom out between 5 and 6 times. Luckily, Leaflet accepts negative Zoom Levels, so setting zoom to -6 does the trick. But to make it work properly, you need to set {minZoom: -6}, so the map doesn't get stuck at zoom level 0. There's a good worked example in the Non-geographical Maps tutorial.
Using L.CRS.Simple should work for you, so long as the approximation holds that each latitude unit is the same length as each longitude unit (a square world). Since this isn't generally true in the real world, using the Simple projection will cause some distortion. If the distortion is significant for the features you are interested in, then you will need to look up how to use EPSG:3763 properly, using L.CRS and Proj4Leaflet, as suggested by #IvanSanchez.
So, after some reading on the proj4leaflet, come up with this code. Thanks in advance for the comments and the reply above.
const queryRegionText = "where=OBJECTID > 0"
const geoJsonURL2 = "https://sig.cm-figfoz.pt/arcgis/rest/services/Internet/MunisigWeb_DadosContexto/MapServer/2/query?f=geojson&returnGeometry=true&geometryType=esriGeometryPolyline&spatialRel=esriSpatialRelIntersects&outFields=*&outSR=3763&" + queryRegionText
const map = L.map('map', {
center: [40.14791, -8.87009],
zoom: 13
});
proj4.defs("EPSG:3763", "+proj=tmerc +lat_0=39.66825833333333 +lon_0=-8.133108333333334 +k=1 +x_0=0 +y_0=0 +ellps=GRS80 +units=m +no_defs");
fetch(geoJsonURL2).then(function (response) {
response.json().then(function (data) {
L.Proj.geoJson(data).addTo(map);
});
});
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(map);
}
map.on('click', onMapClick);
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css" />
<link rel="stylesheet" href="main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.7.4/proj4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4leaflet/1.0.2/proj4leaflet.js"></script>
</head>
<body class="">
<div id="map" style="width: 600px; height: 400px;"></div>
</div>
<script src="main.js"></script>
</body>

How to distinguish leaflet zoom triggered by map.fitBounds from user mousewheel?

I have a map which is refreshed every 30 seconds and on each refresh I fit bounds to the new data. I would like to change the way I fit bounds if a user has manipulated the map, e.g. changed zoom level. My problem is that zoom triggered from fitBounds is indistinguishable from user action.
How do I capture/extend mousewheel on the map?
Basically there are multiple ways todo same, but you can go with following simple way to distinguish user zoom triggered.
The onwheel event occurs when the mouse wheel is rolled up or down over an element.
var map = L.map('map', {
// Set latitude and longitude of the map center (required)
center: [12.99766, -84.90838],
// Set the initial zoom level, values 0-18, where 0 is most zoomed-out (required)
zoom: 5,
// scrollWheelZoom: false
});
// Create a Tile Layer and add it to the map
var tiles = new L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png').addTo(map);
document.getElementById("map").addEventListener("wheel", myFunction);
function myFunction() {
alert("Mouse wheel Scrolled by user.")
}
#map {
width: 500px;
height: 400px;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.0.3/dist/leaflet.js"></script>
<div id="map"></div>
Hope this will helps you.

Using minZoom with map.fitBounds without getting error

I have a Leaflet map that I am trying to plot multiple points using map.fitbounds() but I would like the set a minZoom so the user cant zoom all the way out past a zoom level of 9. I currently use the below to add pins to a map except sometimes when a map as multiple points where the map would need to fitbounds at a wider zoom it causes the map to fail. When the map fitbounds is set higher than 9 then it works fine but below 9 it doesnt plot.
I was wondering if someone would know how to both safeguard a map from failing with a minZoom and using fitBounds in certain instances and to also stop a user from zooming so far out.
map.options.minZoom = 9;
map.options.maxZoom = 15;
var fg = L.featureGroup().addTo(map);
for ( var i=0; i < markersArray.length; ++i )
{
var linkid = (markersArray[i]['linkid']);
var linkurl = (markersArray[i]['linkurl']);
L.marker( [markersArray[i].lat, markersArray[i].lng], {icon: myIcon} )
.bindPopup( '<div id="mapPinDetails"><h3>' + markersArray[i].name + '</h3>' + markersArray[i].address + '<br /></div>' )
.addTo(fg);
}
map.fitBounds(fg.getBounds());
below 9 it doesnt plot
It does, but since you do not allow your map to zoom out below 9, it remains at zoom level 9 and you may not see your outer markers. But if you pan you can see them. The view center is the same that would have been achieved with a lower zoom:
var map = L.map('map', {
minZoom: 9,
maxZoom: 15,
}).setView([48.86, 2.35], 11);
var fg = L.featureGroup().addTo(map);
L.marker([49, 2.35]).addTo(fg);
L.marker([48.5, 2.35]).addTo(fg);
map.fitBounds(fg.getBounds());
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<div id="map" style="height: 180px"></div>
If you need further help, you will have to explain what you mean by "it causes the map to fail" and if possible share a reproducible example.

LeafletJS: How to make layer not movable?

I'd like to make a simple canvas layer (not tiled canvases, but one big canvas), but I can not find how can I put layer outside mapPane to make it non-draggable in a documented way.
Should I use 'non-documented' methods or should I use 'reverse-tranform' hack ?
If I understand correctly, you would like to overlay your own canvas onto a Leaflet map, but so that it does not pan (is being dragged) with the rest of the map like the Tile Layers or Markers.
Therefore it would be like a Control (like the Zoom, Layers switching and attribution Controls) that remains at the same position relative to the map container, except that it would cover the entire map view port.
As you seem to have figured out, as soon as you insert your element into the map pane, it will move with the rest of the map elements as user drags / pans around.
Therefore you could simply append it into the map container, as a sibling of the map pane:
// http://leafletjs.com/reference-1.3.0.html#map-getcontainer
map.getContainer().appendChild(myCanvasElement);
Then you need to adjust the CSS of your canvas element:
position it absolutely
above the other siblings (the map pane has a z-index of 400, but you probably want to remain below other controls, which have a z-index of 1000)
let mouse events go through (so that user can still use map objects like clicking on Markers, etc.)
#myCanvasElement {
position: absolute;
/* Let mouse events go through to reach the map underneath */
pointer-events: none;
/* Make sure to be above the map pane (.leaflet-pane) */
z-index: 450;
}
A working code snippet example:
var map = L.map('map').setView([48.86, 2.35], 11);
var myCanvasElement = document.getElementById('myCanvasElement');
// Adjust the canvas size, assuming we want to cover the entire map.
var mapSize = map.getSize(); // http://leafletjs.com/reference-1.3.0.html#map-getsize
myCanvasElement.width = mapSize.x;
myCanvasElement.height = mapSize.y;
// Move the canvas inside the map container.
var mapContainer = map.getContainer(); // http://leafletjs.com/reference-1.3.0.html#map-getcontainer
mapContainer.appendChild(myCanvasElement);
// Draw on the canvas...
var context = myCanvasElement.getContext('2d');
context.strokeStyle = 'rgb(0, 0, 200)';
var w = 200;
var h = 100;
var x = (mapSize.x - w) / 2;
var y = (mapSize.y - h) / 2;
context.strokeRect(x, y, w, h);
L.marker([48.86, 2.35]).bindPopup('Paris').addTo(map);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
#myCanvasElement {
position: absolute;
/* Let mouse events go through to reach the map underneath */
pointer-events: none;
/* Make sure to be above the map pane (.leaflet-pane) */
z-index: 450;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<div id="map" style="height: 180px"></div>
<canvas id="myCanvasElement"></canvas>