1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Leaflet example</title>
<link href='http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css' rel='stylesheet' type='text/css' title='default' />
<script type='text/javascript' src='http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js'></script>
<link href='css/leaflet.draw.css' rel='stylesheet' type='text/css' title='default' />
<script type='text/javascript' src='js/leaflet.draw.js'></script>
</head>
<body>
<script>
$(function() {
var map = L.map('div#map').setView([47.5, 8.3], 12);
L.tileLayer('http://{s}.tile.cloudmade.com/de7796f726fb415a87ec97b5e4ee7db3/997/256/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '+
' <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>,'+
' Imagery © <a href="http://cloudmade.com">CloudMade</a>',
maxZoom: 18
}).addTo(map);
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
draw: {
position: 'topleft',
polygon: {
shapeOptions: {
color: 'red',
opacity: 0.8
},
showArea: true
},
polyline: {
shapeOptions: {
color: 'green',
opacity: 0.8
},
},
rectangle: {
shapeOptions: {
color: 'blue',
opacity: 0.8
},
},
circle: {
shapeOptions: {
color: 'orange',
opacity: 0.8
}
}
},
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
function exportFeatures(featureGroup){
var mapdata = { center: map.getCenter(),
zoom:map.getZoom(),
geojson: }
for(item in featureGroup._layers) {
var feature = featureGroup._layers[item];
geoJsonFeature = feature.toGeoJSON()
if(feature.hasOwnProperty("_radius")) {
geoJsonFeature.geometry.radius = feature.getRadius();
}
geoJsonFeature.properties.color = feature.options.color;
mapdata.geojson[feature._leaflet_id] = geoJsonFeature;
}
$("input#mapdata").val(JSON.stringify(mapdata));
}
map.on('draw:created', function (e) {
var layer = e.layer;
drawnItems.addLayer(layer);
exportFeatures(drawnItems);
});
map.on('draw:edited', function (e) {
exportFeatures(drawnItems);
});
map.on('draw:deleted', function (e) {
exportFeatures(drawnItems);
});
map.on('dragend', function (e) {
exportFeatures(drawnItems);
});
map.on('zoomend', function (e) {
exportFeatures(drawnItems);
});
});
</script>
<form method="POST" action="/">
<div id="map"></div>
<input type="hidden" id="mapdata">
<input type="submit">
</form>
</body>
</html>
|