Leaflet demo

For update marker position

by Bretto

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css">
<script src="https://github.com/Leaflet/Leaflet.draw/blob/master/dist/images/spritesheet.png"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.draw.css">
<div id="map"></div>

CSS

#map {
    height: 500px;
    width: 80%;
}
.leaflet-draw-toolbar .leaflet-draw-draw-polygon-siteProperty  {
	background-position: -31px -2px;
    background-color: #82b1e0;
}

.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-polygon-siteProperty {
	background-position: -29px -1px;
    background-color: #82b1e0;
}

.leaflet-draw-toolbar .leaflet-draw-draw-polygon-building {
	background-position: -31px -2px;
    background-color: #b7e3c7;
}

.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-polygon-building {
	background-position: -29px -1px;
    background-color: #b7e3c7;
}
.leaflet-draw-toolbar .leaflet-draw-draw-polygon-structure {
	background-position: -31px -2px;
    background-color: #d8acac;
}

.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-polygon-structure {
	background-position: -29px -1px;
    background-color: #d8acac;
}

.leaflet-draw-toolbar .leaflet-draw-draw-rectangle-siteBoundary {
	background-position: -62px -2px;
    background-color: #e9db21;
}

.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-rectangle-siteBoundary {
	background-position: -60px -1px;
    background-color: #e9db21;
}

JavaScript

// initialize the map on the "map" div with a given center and zoom
	 	var map = L.map('map').setView([19.04469, 72.9258], 12);
    
    /*change the draw created event to pass in a featureTypeCode.
    This makes it so that when the draw created is triggered, I can fetch the type shape made and
    append that as a property in the generated GeoJSON*/
    L.Draw.Feature.prototype._fireCreatedEvent = function (layer) {
        if (this.featureTypeCode) {
            this._map.fire('draw:created', { layer: layer, layerType: this.type, featureTypeCode: this.featureTypeCode });
        } else {
            this._map.fire('draw:created', { layer: layer, layerType: this.type });
        }

    }
    /*rewrites some of the tooltip text when drawing polygons*/
    L.Draw.Polygon.prototype._getTooltipText = function () {
        var text, subtext, tooltipObj;
        switch (this.featureTypeCode) {
            case 'siteProperty':
                tooltipObj = L.drawLocal.draw.handlers.polygon.siteProperty.tooltip;
                break;
            case 'building':
                tooltipObj = L.drawLocal.draw.handlers.polygon.building.tooltip;
                break;
            case 'structure':
                tooltipObj = L.drawLocal.draw.handlers.polygon.structure.tooltip;
                break;
            default:
                tooltipObj = L.drawLocal.draw.handlers.polygon.tooltip;
        }
        if (this._markers.length === 0) {
            text = tooltipObj.start;
        } else if (this._markers.length < 3) {
            text = tooltipObj.cont;
        } else {
            text = tooltipObj.end;
            subtext = this._getMeasurementString();
        }

        return {
            text: text,
            subtext: subtext
        };
    }
    /*Class for new polygon shape */
    L.Draw.PolygonSiteProperty = L.Draw.Polygon.extend({
        options: {
            repeatMode: true
        },
        initialize: function (map, options) {
           ...