-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
117 lines (100 loc) · 3.9 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Leaflet Map</title>
<!-- External Stylesheets -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<!-- Add the Leaflet JavaScript library -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<style>
/* css to customize Leaflet default styles */
.custom1 .leaflet-popup-tip,
.custom1 .leaflet-popup-content-wrapper {
background: red;
color: #000000;
}
.custom2 .leaflet-popup-tip,
.custom2 .leaflet-popup-content-wrapper {
background: green ;
color: #000000;
}
.leaflet-div-green {
background:green;
border:5px solid rgba(0, 177, 106, 1);
color:blue;
font-weight:bold;
text-align:center;
border-radius:50%;
line-height:30px;
}
.leaflet-div-red {
background:red;
border:5px solid rgba(255,255,255,0.5);
color:blue;
font-weight:bold;
text-align:center;
border-radius:50%;
line-height:30px;
}
</style>
</head>
<body>
<!-- Our web map and content will go here -->
<div id="map5" style="width: 1024px; height: 605px"></div>
<script>
// ////////////////////////////////////
var redIcon = L.divIcon({className: 'leaflet-div-red'});
var greenIcon = L.divIcon({className: 'leaflet-div-green'});
// var redIcon = L.icon({
// //iconUrl: 'markers/dot-Red.png',
// iconSize: [25, 25], // size of the icon
// iconAnchor: [0, 0], // point of the icon which will correspond to marker's location
// popupAnchor: [10, 10] // point from which the popup should open relative to the iconAnchor
// });
// var greenIcon = L.icon({
// iconUrl: 'markers/dot-Green.png',
// iconSize: [25, 25], // size of the icon
// iconAnchor: [0, 0], // point of the icon which will correspond to marker's location
// popupAnchor: [10, 10] // point from which the popup should open relative to the iconAnchor
// });
// specify popup options
var customOptions1 =
{
'maxWidth': '500',
'className' : 'custom1'
}
var customOptions2 =
{
'maxWidth': '500',
'className' : 'custom2'
}
var uk = L.marker([51.5, -0.09], {icon: redIcon}).bindPopup('<b>UK!</b><br>Nice place.</br><iframe width="300" height="169" src="https://www.youtube.com/embed/ghkQoJoipbM?start=2571" frameborder="0" allowfullscreen></iframe>',customOptions1);
var denver = L.marker([39.74, -104.99],{icon: greenIcon}).bindPopup('<b>Denver!</b><br>Nice place.</br><iframe width="300" height="169" src="https://www.youtube.com/embed/ghkQoJoipbM?start=3581" frameborder="0" allowfullscreen></iframe>',customOptions2);
var places1 = L.layerGroup([uk]);
var places2 = L.layerGroup([denver]);
// Create variable to hold map element, give initial settings to map
var GrayMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ',
maxZoom: 16});
var DarkMap = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd',
maxZoom: 19});
var map5 = L.map('map5',{
center: [51.5, -0.09],
zoom: 2,
layers:[GrayMap, DarkMap, places1, places2]
});
var baseMaps = {
"Gray Map": GrayMap,
"Dark Map": DarkMap
};
var overlayMaps = {
"<span style='color: red'>Red Places</span>": places1,
"<span style='color: green'>Green Places</span>": places2
};
L.control.layers(baseMaps, overlayMaps, {collapsed: false}).addTo(map5);
</script>
</body>
</html>