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
|
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<link rel="stylesheet" href="../css/screen.css" />
<script>
L_PREFER_CANVAS = true; // experimental
</script>
<script type="text/javascript" src="../../build/deps.js"></script>
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
<button onclick="group.removeLayer(path)">Remove path</button>
<button onclick="group.removeLayer(circle)">Remove circle</button>
<button onclick="group.clearLayers()">Remove all layers</button>
<script src="route.js"></script>
<script>
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/d4fc77ea4a63471cab2423e66626cbb6/997/256/{z}/{x}/{y}.png',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18});
for (var i = 0, latlngs = [], len = route.length; i < len; i++) {
latlngs.push(new L.LatLng(route[i][0], route[i][1]));
}
var path = new L.Polyline(latlngs);
var map = new L.Map('map', {layers: [cloudmade]});
var group = new L.LayerGroup();
map.fitBounds(new L.LatLngBounds(latlngs));
var circleLocation = new L.LatLng(51.508, -0.11),
circleOptions = {
color: 'red',
fillColor: 'yellow',
fillOpacity: 0.7
};
var circle = new L.Circle(circleLocation, 500000, circleOptions),
circleMarker = new L.CircleMarker(circleLocation, {fillColor: 'blue', fillOpacity: 1, stroke: false});
group.addLayer(circle).addLayer(circleMarker);
circle.bindPopup('I am a circle');
circleMarker.bindPopup('I am a circle marker');
group.addLayer(path);
path.bindPopup('I am a polyline');
var p1 = latlngs[0],
p2 = latlngs[parseInt(len/4)],
p3 = latlngs[parseInt(len/3)],
p4 = latlngs[parseInt(len/2)],
p5 = latlngs[len - 1],
polygonPoints = [p1, p2, p3, p4, p5];
var h1 = new L.LatLng(p1.lat, p1.lng),
h2 = new L.LatLng(p2.lat, p2.lng),
h3 = new L.LatLng(p3.lat, p3.lng),
h4 = new L.LatLng(p4.lat, p4.lng),
h5 = new L.LatLng(p5.lat, p5.lng);
h1.lng += 20;
h2.lat -= 5;
h3.lat -= 5;
h4.lng -= 10;
h5.lng -= 8;
h5.lat += 10;
var holePoints = [h5, h4, h3, h2, h1];
var polygon = new L.Polygon([polygonPoints, holePoints], {
fillColor: "#333",
color: 'green'
});
group.addLayer(polygon);
polygon.bindPopup('I am a polygon');
map.addLayer(group);
</script>
</body>
</html>
|
