Leaflet draw

by garnwraly

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js?2"></script>
<script src="http://leaflet.github.io/Leaflet.draw/leaflet.draw.js"></script>
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.draw/leaflet.draw.css">
<div id="map" style=""></div>

CSS

#map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

JavaScript

/*
var map = L.map('map', {drawControl: true}).setView([43.7, -79.4], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
*/

// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([43.7, -79.4], 13);

// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// Initialise the FeatureGroup to store editable layers
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

// Initialise the draw control and pass it the FeatureGroup of editable layers
var drawControl = new L.Control.Draw({
    draw: {
        polyline: false,
        marker: false
    },
    edit: {
        featureGroup: drawnItems
    }
});
map.addControl(drawControl);

map.on('draw:created', function (e) {
    var type = e.layerType,
        layer = e.layer;
    //drawnItems.addLayer(layer);
    console.log(layer);
});

var layerStates = (function () {
    var history = [];
    var cursor = 0;
    var push = function () {
        if (cursor != history.length) {
            //chop off hisotry past current point
            history = history.slice(0, cursor + 1);
            history.push();
        }
    };
    return {
        push: push
    };
})();