javascript - How to draw circle or rectangle on tile images leaflet.js -

i know possible draw circle or rectangle on tile images when using leaflet.js. here 1 link http://jsfiddle.net/tridip/p6ssbvqj/

leaflet has function called circle() polygon() etc

my interface have 4 button 1 circle,rectangle,load image, save image.

when page load first time show image leaflet.js , when user click on circle or rectangle button have allow user draw circle or rectangle on image. the question jquery or javascript library should use allow draw circle or rectangle on image ?

next need store coordinate of circle or rectangle @ client side because later save info in db.

3rd 1 when reload images again need show drawn circle or rectangle on same image , in same location user has drawn.

please guide me how achieve it. have never done before no idea have. please me. thanks

edit 1

var drawnitems = new l.featuregroup(); map.addlayer(drawnitems); 

1) meaning of l.featuregroup()? l.featuregroup() do?

2) code below do?

var drawcontrol = new l.control.draw({     draw: {         position: 'topleft',         polygon: {             allowintersection: false,             drawerror: {                 color: '#b00b00',                 timeout: 1000             },             shapeoptions: {                 color: '#bada55'             },             showarea: true         },         polyline: {             metric: false         },         circle: {             shapeoptions: {                 color: '#662d91'             }         }     },     edit: {         featuregroup: drawnitems     } });  map.addcontrol(drawcontrol); 

what above code doing. seems above code trying draw control on map programmatically. may not right. because if above line related draw control on map programmatically there should coordinate or relavent should there have not found in above code. please tell me above code doing ?

3) if need draw shape on map need first add layer on map because per code first add layer line map.addlayer(drawnitems);

4) below code clear

if (type === 'marker') {    coords = json.stringify(layer._latlng); } 

the above code storing lat , lang coordinate in variable have missded show set of code provide lat , lang details coordinate code draw same shape in right position per lat & lang value.

please read 4 point , please write answer drive out confusion. specially point 1 & 2 related code not clear me , next give me code pass shape name , latlang leaflet api draw shape accordingly.

thanks

as gusper noted, leaflet.draw ready-made library interactive drawing on leaflet maps. here's demo modified display coordinates of shapes drawn on map.

if necessary, can store these coordinates in db, , use native leaflet functions re-draw these shapes list of coordinates.

var osmurl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',    osmattrib = '&copy; <a href="http://openstreetmap.org/copyright">openstreetmap</a> contributors',    osm = l.tilelayer(osmurl, {      maxzoom: 18,      attribution: osmattrib    }),    map = new l.map('map', {      layers: [osm],      center: new l.latlng(-37.7772, 175.2756),      zoom: 15    });    var drawnitems = new l.featuregroup();  map.addlayer(drawnitems);    var drawcontrol = new l.control.draw({    draw: {      position: 'topleft',      polygon: {        allowintersection: false,        drawerror: {          color: '#b00b00',          timeout: 1000        },        shapeoptions: {          color: '#bada55'        },        showarea: true      },      polyline: {        metric: false      },      circle: {        shapeoptions: {          color: '#662d91'        }      }    },    edit: {      featuregroup: drawnitems    }  });  map.addcontrol(drawcontrol);    map.on('draw:created', function(e) {    var type = e.layertype;    var layer = e.layer;    var coords;    console.log(e);    if (type === 'marker') {      coords = json.stringify(layer._latlng);    }    if (type === 'circle') {      coords = json.stringify(layer._latlng) + " " + layer._mradius;    }    if (type === 'rectangle') {      coords = json.stringify(layer._latlngs);    }    if (type === 'polygon') {      coords = json.stringify(layer._latlngs);    }    if (type === 'polyline') {      coords = json.stringify(layer._latlngs);    }    document.getelementbyid("coords").innerhtml = coords;    drawnitems.addlayer(layer);  });

<head>    <title>leaflet draw</title>      <link rel="stylesheet" href="http://leaflet.github.io/leaflet.draw/lib/leaflet/leaflet.css" />    <link rel="stylesheet" href="http://leaflet.github.io/leaflet.draw/leaflet.draw.css" />      <!--[if lte ie 8]>  		<link rel="stylesheet" href="lib/leaflet/leaflet.ie.css" />  		<link rel="stylesheet" href="leaflet.draw.ie.css" />  	<![endif]-->      <script src="http://leaflet.github.io/leaflet.draw/lib/leaflet/leaflet.js"></script>    <script src="http://leaflet.github.io/leaflet.draw/leaflet.draw.js"></script>  </head>    <body>    <div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>    <div id="coords" style="position: fixed; bottom: 0; right: 0; width: 50%; height: 20%; z-index: 99; background-color: white; text-wrap: "></div>