Longitudes range from -180 to 180. But sometimes, Leaflet returns longitudes like 474.2578215, which then of course nothing gets returned in my database. I say sometimes, because oddly enough, some days the code works just fine on all parts of the map. Should I not be using the google code hosted Leaflet?
Here is my basic code, on a drag event ending, I do this:
var bounds = map.getBounds();
console.log(bounds);
var min = bounds.getSouthWest();
var max = bounds.getNorthEast();
Here is my output from console (on bad results):
o.LatLngBounds {_southWest: o.LatLng, _northEast: o.LatLng, extend: function, pad: function, getCenter: function…}
_northEast: o.LatLng
lat: 21.542511366159946
lng: 474.7384643554688
__proto__: Object
_southWest: o.LatLng
lat: 20.00174140284379
lng: 472.2335815429687
__proto__: Object
proto: Object
This isn't an issue of grabbing bounds beyond the zoom, but bounds that don't exist. That latitudes are correct. I tested to see if it was a decimal point moved over by one, and that doesn't seem to be the issue either. Any ideas on how to fix this bug, or what is causing it?
It's intended behavior. That happens when you zoom too far out and/or drag the map to another copies of the world, and getBounds longitudes are not wrapped by default. You can use LatLng wrap method to get what you want though — e.g. bounds.getSouthWest().wrap().
I'm not sure that zooming or dragging is the cause of the issue. The problem persists when refreshing the page, where the user does no zooming or dragging events have occurred.
What do you mean by "drag the map to another copies of the world"? Adding wrap to getSouthWest returns the correct values, as it returns the data I want, but now the pins don't show on the map, because I suspect it doesn't think those plots are within the original bounds. I have the zoom limited in the init with: minZoom: 6, maxZoom: 13, so how could I be zooming too far out? I would like to know how I can set it up to not cause these issues. I would not think it was intended behavior to return invalid longitudes because I dragged the map.
Here is the code I am using:
On ready, initmap is called, slat and slng are starting positions...
function initmap(){
// set up the map
map = new L.Map('map');
//get our map
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contrib';
var osm = new L.TileLayer(osmUrl, {minZoom: 6, maxZoom: 13, attribution: osmAttrib});
map.setView(new L.LatLng(slat, slng), 9);
map.attributionControl.setPrefix('');
map.addLayer(osm);
getGameMarkers();
map.on('moveend', onMapMove);
}
function getGameMarkers(){
var center = map.getCenter();
var zoo = map.getZoom();
var bounds = map.getBounds();
var min = bounds.getSouthWest().wrap();
var max = bounds.getNorthEast().wrap();
* console.log(bounds);
//ajax calls and return marker locations
//loop through markers
}
After it inits, no drag or zoom has occurred, but bounds still returns invalid longitudes. Because the bounds are still off the map, the returned markers don't show on the map, because I imagine their coordinates don't fit in the invalid bounds.
I have the same problem when getting coordinates from a MouseEvent. Should I have access to .wrap()?
e.g.
map.on('mousemove',function (event) {
control.getContainer().innerHTML = "lat: " + event.latlng.lat + ", long: " + event.latlng.lng;
});
Edit: it's event.latlng.wrap() - for future searchers. Maybe this should be in the docs somewhere?
Ah thanks for pointing that out @mourner @voltagex
why closed this issue? i have this problem. what is solution?
is this pull for this issue?
Hi @uxitten,
No, the PR you link to has nothing to do with this.
why closed this issue?
As explained by mourner 5 years ago:
It's intended behavior
Unfortunately there is not enough code provided by OP to reproduce the issue, in case there were actually a bug at that time.
Now you may be in a different situation, in which case I invite you to ask for help on how to use Leaflet on Stack Overflow or GIS Stack Exchange, instead of commenting an old and closed thread.
If you are _really_ sure that there is a bug in Leaflet, please open a new issue and provide an effective bug report, and in particular all the information requested in the issue template (provided when you create a new issue), so that we can effectively investigate and hopefully resolve it.
Most helpful comment
I have the same problem when getting coordinates from a MouseEvent. Should I have access to .wrap()?
e.g.
Edit: it's
event.latlng.wrap()- for future searchers. Maybe this should be in the docs somewhere?