Leaflet: How to save various marker position in db and load later

Question

i am just forking with leaflet because in future i may have to work.

see few url

http://justinmanley.github.io/Leaflet.Illustrate/examples/0.0.2/simple/ http://leaflet.github.io/Leaflet.toolbar/examples/control.html#

if anyone go to that url then must realize user can place marker on map or place square or circle on map. so my question how to save those marker position in db as a result when i will show that map then i can place those marker again on map from db if i could know their position and saving into db.

if i need to save various marker position in db then how the table structure would look like for sql server.

please discuss my two points or redirect me to relevant article which help me to achieve this.

thanks

Answer 1

I would do something like this:

var map = L.map('mapcanvas').setView([51.505, -0.09], 13);

map.on('click', function(e){
    // Place marker
    var marker = new L.marker(e.latlng).addTo(map);

    // Ajax query to save the values:
    var data = {
        lat: e.latlng.lat,
        lng: e.latlng.lng
    }

    var request = new XMLHttpRequest();
        request.open('POST', '/my/url', true);
        request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
        request.send(data);
});

Although it is probably better to use jQuery.

You would then obtain your saved values from the database, store them in a js object, like

var positions = [
    {
        lat: 123.45
        lng: 123.45
    },
    {
        lat: 123.45
        lng: 123.45
    }
]

Iterate over them and add markers:

for (var i in positions) {
    new L.marker([positions[i].lat, positions[i].lng]).addTo(map);
}