-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
123 lines (103 loc) · 3.79 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
118
119
120
121
122
123
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<style>
html {
height: 100%;
width: 100%;
}
body {
padding: 0;
margin: 0;
}
#map {
height: 100vh;
}
.my-layer-item {
color: red;
}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
width: 60%;
}
.leaflet-control-layers-base {
font-size: 1em;
text-align: center;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id='map'></div>
<script src="100.js" type="text/javascript"></script>
<script>
var map = L.map('map').setView([42.73356, 25.4437248], 7.25);
//https://leaflet-extras.github.io/leaflet-providers/preview/
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
minZoom: 1,
maxZoom: 18
}).addTo(map);
let visited = L.layerGroup().addTo(map);
let plans = L.layerGroup().addTo(map);
let other = L.layerGroup().addTo(map);
function onEachFeature(feature, layer) {
var title = "<b>" + feature.properties.number + "</b> " + feature.properties.title;
layer.bindPopup(title, {
maxWidth: 760
});
if (feature.properties.category == 'yes') {
// console.log(feature.properties.title)
visited.addLayer(layer);
} else if (feature.properties.category == 'maybe') {
// console.log(feature.properties.title)
plans.addLayer(layer);
} else {
// console.log(feature.properties.title)
other.addLayer(layer);
}
}
L.geoJSON(bulgaria, {
style: function(feature) {
switch (feature.properties.category) {
case 'yes':
return {
fillColor: "#009933",
};
case 'maybe':
return {
fillColor: "#ffc34d",
};
case 'no':
return {
fillColor: "#ff0000",
};
}
return feature.properties && feature.properties.style;
},
onEachFeature: onEachFeature,
pointToLayer: function(feature, latlng) {
return L.circleMarker(latlng, {
radius: 8,
fillColor: "#000000",
color: "#000",
weight: 1,
opacity: 0.7,
fillOpacity: 0.8
});
}
});
var overlays = {
"Посетил": visited,
"Планирано": plans,
"Други": other,
};
L.control.layers(null, overlays, {
collapsed: false
}).addTo(map);
document.querySelector(".leaflet-control-layers-base").innerHTML = "<b>Карта на 100-те туристически обекта на България</b>";
</script>
</body></html>