-
Notifications
You must be signed in to change notification settings - Fork 2
/
Draw.html
115 lines (98 loc) · 4.51 KB
/
Draw.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
114
115
<!DOCTYPE html>
<html>
<head>
<title>MapQuest Leaflet plugin with Draw control</title>
<link rel="stylesheet" href="//unpkg.com/[email protected]/dist/leaflet.css" />
<script type="text/javascript" src="//unpkg.com/[email protected]/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;
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);
drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
map.on('draw:created', function (e) {
var type = e.layerType, layer = e.layer, ss = "", lls;
if (type === 'marker') {
layer.bindPopup('A popup!');
document.getElementById('t').innerHTML = "lls: " +
layer.getLatLng().lat + "," +
layer.getLatLng().lng;
} else if (type === 'circle') {
document.getElementById('t').innerHTML = "lls: " +
layer.getLatLng().lat + "," +
layer.getLatLng().lng + ", r: " +
layer.getRadius();
} else if (type === 'rectangle' || type === 'polygon' || type === 'polyline') {
if (type === 'polyline') {
lls = layer.getLatLngs();
} else {
lls = layer.getLatLngs()[0];
}
lls.forEach(function (a, b) {
ss = ss + "[" +a.lat + "," + a.lng + "]";
if (layer.getLatLngs().length !== (b + 1)){
ss = ss + ",";
}
});
document.getElementById('t').innerHTML = "lls = [" + ss + "];";
} else {
console.log(type);
console.log(layer);
}
drawnItems.addLayer(layer);
});
};
</script>
<style>
#map {
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="t"></div>
</body>
</html>