Get the coordinates of a rectangle on Leaflet
Question
I will want to get the coordinates of each corner of a rectangle that the user will draw on a map (leaflet).
The goal is to extract the max/min latitude and the max/min longitude.
Here is the code under which I display my map and I draw my rectangle with Leaflet-Draw :
// center of the map var center = [46.5, 3]; // Create the map var map = L.map('map').setView(center, 6); // Set up the OSM layer L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Data © <a href="http://osm.org/copyright">OpenStreetMap</a>', maxZoom: 18 }).addTo(map); // add a marker in the given location //L.marker(center).addTo(map); // Initialise the FeatureGroup to store editable layers var editableLayers = new L.FeatureGroup(); map.addLayer(editableLayers); var drawPluginOptions = { position: 'topleft', draw: { // disable toolbar item by setting it to false polygon:false, polyline: false, circle: false, // Turns off this drawing tool rectangle: true, marker: false, }, edit: { featureGroup: editableLayers, //REQUIRED!! remove: true } }; // Initialise the draw control and pass it the FeatureGroup of editable layers var drawControl = new L.Control.Draw(drawPluginOptions); map.addControl(drawControl); var editableLayers = new L.FeatureGroup(); map.addLayer(editableLayers); map.on('draw:created', function(e) { var type = e.layerType, layer = e.layer; if (type === 'rectangle') { layer.on('mouseover', function() { var tmp = document.getElementById('ID'); tmp.textContent = layer.getLatLngs(); var sud = document.getElementById('SUD'); sud.textContent = tmp.substring(7, 9); var est = document.getElementById('EST'); est.textContent = tmp.substring(18, 9); }); } editableLayers.addLayer(layer); });
html, body { height: 100% }
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"> <link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css" /> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet-src.js"></script> <script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js"></script> </head> <body> <div id="map" style="width:100%; height:300px"></div> <span id="ID"></span> <span id="SUD"></span> <span id="EST"></span> </body> </html>
I get the coordinates of the four angles ( .getLatLngs() ), but I cannot sequence this series.
For example here is the result : LatLng(45.644768, -0.175781),LatLng(47.428087, -0.175781),LatLng(47.428087, 5.844727),LatLng(45.644768, 5.844727)
I would like to store each latitude / longitude in a variable that I will display in my web page :
latN : 47.428087
latS : 45.644768
lonE : 5.844727
lonW : -0.175781
Do you have any advice for me? Or information?
Thanks in advance !
2 answers
solution1
1 ACCPTED 2020-10-26 21:10:26
You can use this function:
function getCorners(layer) {
const corners = layer.getBounds();
const northwest = corners.getNorthWest();
const northeast = corners.getNorthEast();
const southeast = corners.getSouthEast();
const southwest = corners.getSouthWest();
return [northwest, northeast, southeast, southwest];
}
Add the Func to the script
map.on('draw:created', function(e) {
var type = e.layerType,
layer = e.layer;
if (type === 'rectangle') {
layer.on('mouseover', function() {
var tmp = document.getElementById('ID');
var c= getCorners(layer);
tmp.textContent = "NW:"+c[0].toString()+" NE:"+c[1].toString()+" SE:"+c[2].toString()+" SW:"+c[3].toString();
var sud = document.getElementById('SUD');
sud.textContent = tmp.substring(7, 9);
var est = document.getElementById('EST');
est.textContent = tmp.substring(18, 9);
});
}
function getCorners(layer) {
const corners = layer.getBounds();
const northwest = corners.getNorthWest();
const northeast = corners.getNorthEast();
const southeast = corners.getSouthEast();
const southwest = corners.getSouthWest();
return [northwest, northeast, southeast, southwest];
}
solution2
0 2020-10-26 20:54:55
Use getCenter() instead of getLatLng()
EDIT: I see the issue you need each corner of the rectangle, getCenter does not solve that
Also I recommend leaflet-geoman for editing instead of leaflet draw. (But thats just my opinion :) )
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.