Correct method to save and restore leaftlet drawing into mysql database

Question

I have the following code for saving my coordinates of what I draw. So what I do on drawing created I have the following function.

 map.on(L.Draw.Event.CREATED, function (e) {

        var type = e.layerType,
                layer = e.layer;
        var points = JSON.stringify(e.layer.toGeoJSON());

        console.log("coord : "+e.layer.toGeoJSON().geometry.coordinates);
        var latlngs = [];
          latlngs = LatLngsToCoords(e.layer._latlngs, 1);

        if (type === 'marker') {
            layer.bindPopup('A popup!');
        }
        if (type === 'polygon'){

        console.log("coord : "+e.layer.toGeoJSON().geometry.coordinates);


        }

        drawnItems.addLayer(layer);
    });

This output e.layer.toGeoJSON().geometry.coordinates gives me example so I will then transfer it into 175.28162956237796,-37.77007019461929,175.28506278991702,-37.77271618103962,175.27849674224854,-37.77458188377217,175.27781009674072,-37.77376776473304,175.28162956237796,-37.77007019461929

into POLYGON(( 175.28162956237796 -37.77007019461929,175.28506278991702 -37.77271618103962,175.27849674224854 -37.77458188377217,175.27781009674072 -37.77376776473304,175.28162956237796 -37.77007019461929 ))

I know I could do this and save into the MySQL database.

For the reverse when I need to restore the polygon I will need to extract the POLYGON and now reverse the latitude and longitude back.

I find there is a lot of steps. Is there any direct method ?

Answer 1

I would recommend looking into this approach:

L.GeoJson layer and pointing Leaflet.draw at it.

You can iterate over drawn objects with drawnItems.eachLayer() method and add any objects to the layer.