title: How to get coordinates from leaflet polygon
body: <p>I use Leaflet draw from drawing a polygon. I succesfully do this, but when I click edit, I can edit the polygon, but it doesn't fetch me the coordinates into the HTML ,,coordinates" field..how can I do this? Is something messed up? Thanks! I save the coordinates to a MYSQL database as VARCHAR. Thanks! </p>
  
  <pre><code>$(".edit_zona").click(function(){
              var id_zona = $(this).attr("id").substring(10);
              //alert(id_zona);
              $.ajax({
                  type: "POST",
                  url: "ajax/edit_zona.php",
                  data:{
                  id: id_zona
                  },
                     cache:false,
                     dataType: "html"
  
              }).done(function(ms){
                  $("#response").html(ms);
                 var osmUrl = 'https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWVnYTYzODIiLCJhIjoiY2ozbXpsZHgxMDAzNjJxbndweDQ4am5mZyJ9.uHEjtQhnIuva7f6pAfrdTw',
              osmAttrib = '&amp;copy; &lt;a href="http://openstreetmap.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors',
              osm = L.tileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib }),
              map = new L.Map('map', { center: new L.LatLng(44.9323281,26.0306833), zoom: 12.25 }),
              drawnItems = L.featureGroup().addTo(map);
      L.control.layers({
          'osm': osm.addTo(map)
      },).addTo(map);
  
        function stringToGeoPoints( geo ) {
     var linesPin = geo.split(",");
  
     var linesLat = new Array();
     var linesLng = new Array();
  
     for(i=0; i &lt; linesPin.length; i++) {
      if(i % 2) {
       linesLng.push(linesPin[i]);
      }else{
       linesLat.push(linesPin[i]);
      }
     }
  
     var latLngLine = new Array();
  
     for(i=0; i&lt;linesLng.length;i++) {
      latLngLine.push( L.latLng( linesLat[i], linesLng[i]));
     }
  
     return latLngLine;
    }
      var zona = JSON.parse('&lt;?php echo json_encode($arr) ?&gt;');
       for(var i=0; i &lt; zona.length; i++) {
         //console.log(zona[i]['geolocatii']);
      var polygon = L.polygon( stringToGeoPoints(zona[i]['geolocatii']), { color: 'red'}).addTo(map); 
      polygon.editing.enable();
     }
     map.addControl(new L.Control.Draw({
       draw : {
          position : 'topleft',
          polygon : true,
          polyline : false,
          rectangle : false,
          circle : false,
          marker: false,
          circlemarker: false
      },
      edit : {
          featureGroup: drawnItems
      }
  
      }));
     var featureGroup = L.featureGroup().addTo(map);
       function drawArea() {
            var polygon;
            var draggableAreaMarkers = new Array();
     if(polygon != null) {
      map.removeLayer( polygon );
     }
  
     var latLngAreas = new Array();
  
     for(i=0; i&lt;draggableAreaMarkers.length; i++) {
      if(draggableAreaMarkers[i] != "") {
       latLngAreas.push( L.latLng( draggableAreaMarkers[ i ].getLatLng().lat, draggableAreaMarkers[ i ].getLatLng().lng));
      }
     }
  
     if(latLngAreas.length &gt; 1) {
      // create a blue polygon from an array of LatLng points
      polygon = L.polygon( latLngAreas, { color: 'blue' }).addTo(map);
     }
  
     if(polygon != null) {
      // zoom the map to the polygon
      map.fitBounds( polygon.getBounds() );
     }
    }
   map.on('draw:created', function (e) {
          var type = e.layerType,
                  layer = e.layer;
  
          if (type === 'marker') {
              layer.bindPopup('Call Point!');
          }
  
          drawnItems.addLayer(layer);
  
          var shapes = getShapes(drawnItems);
  
          console.log("shapes",shapes);
  
    var points = e.layer.getLatLngs();
    var puncte = JSON.stringify(points);
   // console.log(puncte);
  
      });
  map.on(L.Draw.Event.CREATED, function (e) {
      map.addLayer(e.layer);
      var points = e.layer.getLatLngs();
      puncte1=points.join(',');
    puncte1=puncte1.toString();
    puncte1=points.join(',').match(/([\d\.]+)/g).join(',')
    //console.log(puncte1);
  $('#geo').val(puncte1);
   //console.log(puncte1);
  
  });
  
      var getShapes = function (drawnItems) {
  
          var shapes = [];
          shapes["polyline"] = [];
          shapes["circle"] = [];
          shapes["marker"] = [];
  
          drawnItems.eachLayer(function (layer) {
  
              // Note: Rectangle extends Polygon. Polygon extends Polyline.
              // Therefore, all of them are instances of Polyline
              if (layer instanceof L.Polyline) {
                  shapes["polyline"].push(layer.getLatLngs())
              }
  
              if (layer instanceof L.Circle) {
                  shapes["circle"].push([layer.getLatLng()])
              }
  
              if (layer instanceof L.Marker) {
                  shapes["marker"].push([layer.getLatLng()],layer.getRadius());
              }
  
          });
  
          return shapes;
  
      };
      var arr = JSON.parse( '&lt;?php echo json_encode($arr) ?&gt;' );
      console.log(arr);
              });
          });
  </code></pre>
  
  <p>I can get the old coordinates from database, but when I edit it, it doesn't change the ,,geolocatii" field
    <a href="https://i.stack.imgur.com/tWm0N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tWm0N.png" alt="geolocation field problem"></a></p>