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

Question

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

leaflet has function called circle() polygon() etc

my interface is like that i have 4 button one is circle,rectangle,load image, save image.

when page will load first time then i will show a image by leaflet.js and when user click on circle or rectangle button then i have to allow user to draw a circle or rectangle on image. the question which jquery or any javascript library i should use which will allow to draw a circle or rectangle on image ?

next i need to store those coordinate of circle or rectangle at client side because later i could save those info in db.

3rd one when i will reload images again i need to show drawn circle or rectangle on same image and in same location where user has drawn.

please guide me how to achieve it. i have never done before so no idea i have. please help me. thanks

EDIT 1

var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

1) What is the meaning of L.FeatureGroup() ? What does L.FeatureGroup() do?

2) What does the 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 the above code is doing. it seems that the above code is trying to draw control on map programmatically. may be i am not right. because if the above line is related to draw control on map programmatically then there should be coordinate or something relavent should be there but i have not found anything in the above code. so please tell me what the above code is doing ?

3) if i need to draw any shape on map then do i need to first add any layer on map because as per your code you first add layer by this line map.addLayer(drawnItems);

4) the below code is clear

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

the above code storing lat and lang as coordinate in variable but you have missded to show another set of code where i will provide lat and lang details as coordinate then code will draw same shape in right position as per lat & lang value.

please read my all 4 point and please write answer to drive out my confusion. specially point 1 & 2 related code is not clear to me and next give me code where i will pass shape name and latlang then leaflet api will draw shape accordingly.

thanks

Answer 1

As gusper noted, Leaflet.draw is a ready-made library for interactive drawing on Leaflet maps. Here's their demo slightly modified to display the coordinates of shapes drawn on the map.

If necessary, you can store these coordinates in a DB, and then use the native Leaflet functions to re-draw these shapes from the 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>