This repository has been archived by the owner on Apr 27, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathdemo4.html
147 lines (122 loc) · 4.95 KB
/
demo4.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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js?2"></script>
</head>
<body>
<style>
body { background: #d2d1d0; }
#map {
background: #f4f4f4;
border: 1px solid #bbbbbb;
width: 100%;
height: 360px;
}
</style>
<div id="map">
<style><br>
#map {<br>
width: 100%;<br>
height: 375px;<br>
}<br>
</style>
<br>
<div id="map"></div>
</div>
<script>
var mapbox = L.tileLayer('http://a.tiles.mapbox.com/v3/eevol.h0194mcj/{z}/{x}/{y}.png'),
osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});
var map = L.map('map', {
center: new L.LatLng(49.72, 6.13),
zoom: 10,
layers: [mapbox, osm]
});
var maps = {
"MapBox.com": mapbox,
"OSM": osm
};
var controlLayers = L.control.layers(maps).addTo(map);
var amazon = L.marker([49.72, 6.134]).bindPopup('YOU ARE HERE'),
skype = L.marker([49.74, 6.137]).bindPopup('The app next door');
var markers = L.layerGroup([amazon, skype]);
controlLayers.addOverlay(markers, "Markers");
map.removeLayer(osm);
function onClickMap(e){
console.log(e);
}
map.on('click', onClickMap); // Listen to Click on Map
//map.off('click', onClickMap); // Remove event Listener
var popup = L.popup();
function onMapDblClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(map);
}
map.on('dblclick', onMapDblClick);
// L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
// attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
// }).addTo(map);
// Example 2 - Basic Elements
// var marker = L.marker([49, 5.49]).addTo(map);
// var polygon = L.polygon([
// [51.509, -0.08],
// [51.503, -0.06],
// [51.51, -0.047]
// ]).addTo(map);
// marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
// polygon.bindPopup("I am a polygon.");
// Example 3 - Give me that Info
// map.getCenter();
// map.getBounds();
// map.getZoom();
// map.getPixelBounds();
// var map = L.map('map', {
// watch:true
// }).setView([51.505, -0.09], 13);
// // L.tileLayer('http://a.tiles.mapbox.com/v3/eevol.h0194mcj/{z}/{x}/{y}.png', {
// // maxZoom: 18
// // }).addTo(map);
// L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
// attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
// }).addTo(map);
// // Get current position
// map.locate({setView: true, maxZoom: 16});
// function onLocationFound(e) {
// var radius = e.accuracy / 2;
// L.marker(e.latlng).addTo(map)
// .bindPopup("You are within " + radius + " meters from this point").openPopup();
// L.circle(e.latlng, radius).addTo(map);
// }
// map.on('locationfound', onLocationFound);
// // var popup = L.popup();
// // function onMapClick(e) {
// // popup
// // .setLatLng(e.latlng)
// // .setContent("You clicked the map at " + e.latlng.toString())
// // .openOn(map);
// // }
// // map.on('click', onMapClick);
// var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
// imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];
// L.imageOverlay(imageUrl, imageBounds).addTo(map);
// var myLines = [{
// "type": "LineString",
// "coordinates": [[-100, 40], [-105, 45], [-110, 55]]
// }, {
// "type": "LineString",
// "coordinates": [[-105, 40], [-110, 45], [-115, 55]]
// }];
// var myStyle = {
// "color": "#ff7800",
// "weight": 5,
// "opacity": 0.65
// };
// L.geoJson(myLines, {
// style: myStyle
// }).addTo(map);
</script>
</body>
</html>