Testing out Leaflet.Draw.Drag
HTML
<script src="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.css">
<script src="//cdn.rawgit.com/w8r/Leaflet.draw.drag/master/dist/Leaflet.draw.drag.js"></script>
<div id="map"></div>
CSS
html, body, #map {
height: 100%;
width:100%;
padding:0px;
margin:0px;
}
JavaScript
/////////////////////////////////////////////////////////////////////////////////////////////
//setting up the map//
/////////////////////////////////////////////////////////////////////////////////////////////
var map = L.map('map').setView([34.05,-118.25], 11);
ATTR = '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a> | ' +
'© <a href="http://cartodb.com/attributions">CartoDB</a>';
CDB_URL = 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
L.tileLayer(CDB_URL, {attribution: ATTR}).addTo(map);
/////////////////////////////////////////////////////////////////////////////////////////////
//creating GeoJSON objects//
/////////////////////////////////////////////////////////////////////////////////////////////
var myJson = getJson();
var polyLayer = L.geoJson(myJson).addTo(map);
map.fitBounds(polyLayer.getBounds());
var drawControl = new L.Control.Draw({
edit: {
featureGroup: polyLayer,
edit: {
selectedPathOptions: {
maintainColor: true,
moveMarkers: true
}
},
remove: false
},
draw: { // turning off all draw options for this example
polyline: false,
polygon: false,
rectangle: false,
circle: false,
marker: false
}
});
map.addControl(drawControl);
/////////////////////////////////////////////////////////////////////////////////////////////
//GeoJSON goes here//
/////////////////////////////////////////////////////////////////////////////////////////////
function getJson() {
/*return {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-118.28417301177979,
34.044943339775706
],
[
-118.27032208442688,
34.066667470321896
],
...