-
Notifications
You must be signed in to change notification settings - Fork 2
/
DrawExisting.html
113 lines (96 loc) · 4.49 KB
/
DrawExisting.html
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
110
111
112
113
<!DOCTYPE html>
<html>
<head>
<title>MapQuest Leaflet plugin with Draw control</title>
<link rel="stylesheet" href="//unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
<script type="text/javascript" src="//unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
<script src="//leaflet.github.io/Leaflet.draw/src/Leaflet.draw.js"></script>
<script src="//leaflet.github.io/Leaflet.draw/src/Leaflet.Draw.Event.js"></script>
<link rel="stylesheet" href="//leaflet.github.io/Leaflet.draw/src/leaflet.draw.css" />
<script src="//leaflet.github.io/Leaflet.draw/src/Toolbar.js"></script>
<script src="//leaflet.github.io/Leaflet.draw/src/Tooltip.js"></script>
<script src="//leaflet.github.io/Leaflet.draw/src/ext/GeometryUtil.js"></script>
<script src="//leaflet.github.io/Leaflet.draw/src/ext/LatLngUtil.js"></script>
<script src="//leaflet.github.io/Leaflet.draw/src/ext/LineUtil.Intersect.js"></script>
<script src="//leaflet.github.io/Leaflet.draw/src/ext/Polygon.Intersect.js"></script>
<script src="//leaflet.github.io/Leaflet.draw/src/ext/Polyline.Intersect.js"></script>
<script src="//leaflet.github.io/Leaflet.draw/src/ext/TouchEvents.js"></script>
<script src="//leaflet.github.io/Leaflet.draw/src/draw/DrawToolbar.js"></script>
<script src="//leaflet.github.io/Leaflet.draw/src/draw/handler/Draw.Feature.js"></script>
<script src="//leaflet.github.io/Leaflet.draw/src/draw/handler/Draw.SimpleShape.js"></script>
<script src="//leaflet.github.io/Leaflet.draw/src/draw/handler/Draw.Polyline.js"></script>
<script src="//leaflet.github.io/Leaflet.draw/src/draw/handler/Draw.Circle.js"></script>
<script src="//leaflet.github.io/Leaflet.draw/src/draw/handler/Draw.Marker.js"></script>
<script src="//leaflet.github.io/Leaflet.draw/src/draw/handler/Draw.Polygon.js"></script>
<script src="//leaflet.github.io/Leaflet.draw/src/draw/handler/Draw.Rectangle.js"></script>
<script src="//leaflet.github.io/Leaflet.draw/src/edit/EditToolbar.js"></script>
<script src="//leaflet.github.io/Leaflet.draw/src/edit/handler/EditToolbar.Edit.js"></script>
<script src="//leaflet.github.io/Leaflet.draw/src/edit/handler/EditToolbar.Delete.js"></script>
<script src="//leaflet.github.io/Leaflet.draw/src/Control.Draw.js"></script>
<script src="//leaflet.github.io/Leaflet.draw/src/edit/handler/Edit.Poly.js"></script>
<script src="//leaflet.github.io/Leaflet.draw/src/edit/handler/Edit.SimpleShape.js"></script>
<script src="//leaflet.github.io/Leaflet.draw/src/edit/handler/Edit.Circle.js"></script>
<script src="//leaflet.github.io/Leaflet.draw/src/edit/handler/Edit.Rectangle.js"></script>
<script src="//leaflet.github.io/Leaflet.draw/src/edit/handler/Edit.Marker.js"></script>
<script src="//www.mapquestapi.com/sdk/leaflet/v2.s/mq-map.js?key=KEY"></script>
<script type="text/javascript">
"use strict";
var L, MQ, duh;
window.onload = function() {
var map, drawnItems, drawControl;
map = L.map('map', {
layers: MQ.mapLayer(),
center: [ 40.731701, -73.993411 ],
zoom: 12
});
drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
drawnItems.addLayer(L.rectangle(
[[40.718118,-74.037894],[40.7480365,-73.958243]],
{color: "#8bc63f", weight: 1}
));
/* forum https://developer.mapquest.com/comment/reply/347414/4262
drawnItems.addLayer(L.polygon(
[[33.3194760, -97.6438880],[32.9716600, -97.7382300],[32.7647320, -97.9102650],[32.1879750, -97.9435620],[32.1571560, -96.8503080],[32.4389300, -96.3675000],[33.3194760, -96.4285450],[33.3194760, -97.6438880]],
{color: "#8bc63f", weight: 1}
));
*/
drawControl = new L.Control.Draw({
draw:{
polygon:false,
polyline:false,
rectangle:false,
marker:false,
circle:false
},
edit: {
featureGroup: drawnItems
}
});
map.on('draw:edited', function (e) {
var layers = e.layers, ss = "";
layers.eachLayer(function (layer) {
layer.getLatLngs()[0].forEach( function (a, b) {
ss = ss + "[" +a.lat + "," + a.lng + "]";
if (layer.getLatLngs().length !== (b + 1)){
ss = ss + ",";
}
});
document.getElementById('t').innerHTML = "lls = [" + ss + "];";
});
});
map.addControl(drawControl);
};
</script>
<style>
#map {
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="t"></div>
</body>
</html>