javascripthtmlleafletcoordinatesleaflet-draw

Get the coordinates of a rectangle on Leaflet

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 !

Solution

  • 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];
}