-
Notifications
You must be signed in to change notification settings - Fork 48
/
map.html
115 lines (109 loc) · 3.8 KB
/
map.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 lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[archlinuxcn] mirror locations</title>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#map {
/* configure the size of the map */
width: 100%;
height: 100%;
}
.circle {
width: 1em;
height: 1em;
display: inline-block;
border-radius: 1em;
}
.legend {
background-color: rgba(238, 238, 238, 0.5);
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// initialize Leaflet
const map = L.map('map').setView({lon: 0, lat: 0}, 2)
// add the OpenStreetMap tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>',
}).addTo(map)
// show the scale bar on the lower left corner
L.control.scale({imperial: true, metric: true}).addTo(map)
const load_data = async function() {
const res = await fetch('https://raw.githubusercontent.com/archlinuxcn/mirrorlist-repo/master/geolocs.json')
const data = await res.json()
// sort by mirror
data.features.sort((a, b) => {
const ma = a.properties.mirror
const mb = b.properties.mirror
if(ma < mb) {
return -1
}else if(ma === mb) {
return 0
}else{
return 1
}
})
const state = [0, data.features[0].properties.mirror]
const colors = new Map()
for(const d of data.features) {
if(state[1] !== d.properties.mirror) {
state[0] += 1
state[1] = d.properties.mirror
}
const color = `hsl(${137.508 * state[0]}, 90%, 50%)`
d.properties.color = color
colors.set(color, d.properties.mirror)
}
const legend = L.control({position: 'topright'})
legend.onAdd = function (map) {
const div = L.DomUtil.create('div', 'info legend');
const labels = []
for(const [color, mirror] of colors) {
labels.push(`<i class="circle" style="background: ${color}"></i> ${mirror}`)
}
div.innerHTML = labels.join('<br>')
return div
}
legend.addTo(map)
const markers = L.markerClusterGroup({
zoomToBoundsOnClick: false,
maxClusterRadius: 30,
})
L.geoJSON(data, {
onEachFeature: function(feature, layer) {
const p = feature.properties
// console.log(feature.geometry.coordinates, feature.properties.name)
layer.bindPopup(`<p>${p.name}<br/><small><a href="${p.url}">${p.mirror}</a></small></p>`)
},
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: 7,
fillColor: feature.properties.color,
color: feature.properties.color,
weight: 1,
opacity: 0.9,
fillOpacity: 0.5,
})
},
}).addTo(markers)
map.addLayer(markers)
}
load_data()
</script>
</body>
</html>