Skip to content

Commit dc92923

Browse files
ZenvieZenvie
committed
feat(map.html): enhance features
- Follow the prettier, stylelint-config-standard, stylelint-config-recess-order and javascript-standard-style rules - Change the page title; Add favicon.ico and page description - Upgrade the dependencies to the latest versions - Change the legend and popup style - Set the zoom level of the map; Avoid showing the coverage area on mouse hover - Remove scale bar and sorting mirror sites function - Improve the color of the mirror site markers
1 parent ee2b830 commit dc92923

File tree

1 file changed

+45
-39
lines changed

1 file changed

+45
-39
lines changed

‎map.html‎

Lines changed: 45 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -3,45 +3,65 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>[archlinuxcn] mirror locations</title>
7-
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
6+
<link
7+
rel="icon"
8+
href="https://build.archlinuxcn.org/favicon.ico"
9+
type="image/ico"
10+
/>
11+
<title>ArchLinuxCN Mirrors Map</title>
12+
<meta
13+
name="description"
14+
content="Here is a list of public mirrors of Arch Linux CN Community Repository"
15+
/>
16+
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
817
<link
918
rel="stylesheet"
10-
href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
19+
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
1120
/>
12-
<script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
21+
<script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
1322
<link
1423
rel="stylesheet"
15-
href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css"
24+
href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css"
1625
/>
1726
<link
1827
rel="stylesheet"
19-
href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css"
28+
href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css"
2029
/>
2130
<style>
2231
html,
2332
body {
33+
width: 100%;
2434
height: 100%;
25-
padding: 0;
2635
margin: 0;
2736
}
37+
2838
#map {
2939
/* configure the size of the map */
3040
width: 100%;
3141
height: 100%;
3242
}
3343

3444
.circle {
45+
display: inline-block;
3546
width: 1em;
3647
height: 1em;
37-
display: inline-block;
3848
border-radius: 1em;
3949
}
50+
4051
.legend {
41-
background-color: rgba(238, 238, 238, 0.5);
52+
padding: 5px;
53+
background-color: hsl(0deg 0% 100% / 70%);
54+
border-radius: 5px;
55+
}
56+
57+
.leaflet-popup-content-wrapper {
58+
background-color: hsl(0deg 0% 100% / 90%);
59+
border-radius: 5px;
60+
box-shadow: none;
4261
}
4362
</style>
4463
</head>
64+
4565
<body>
4666
<div id="map"></div>
4767
<script>
@@ -50,50 +70,36 @@
5070

5171
// add the OpenStreetMap tiles
5272
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
53-
maxZoom: 19,
73+
minZoom: 2,
74+
maxZoom: 12,
5475
attribution:
5576
'&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>',
5677
}).addTo(map);
5778

58-
// show the scale bar on the lower left corner
59-
L.control.scale({ imperial: true, metric: true }).addTo(map);
60-
61-
const load_data = async function () {
79+
const loadData = async function () {
6280
const res = await fetch(
63-
"https://raw.githubusercontent.com/archlinuxcn/mirrorlist-repo/master/geolocs.json"
81+
"https://raw.githubusercontent.com/archlinuxcn/mirrorlist-repo/master/mirrors.geojson"
6482
);
6583
const data = await res.json();
66-
// sort by mirror
67-
data.features.sort((a, b) => {
68-
const ma = a.properties.mirror;
69-
const mb = b.properties.mirror;
70-
if (ma < mb) {
71-
return -1;
72-
} else if (ma === mb) {
73-
return 0;
74-
} else {
75-
return 1;
76-
}
77-
});
78-
const state = [0, data.features[0].properties.mirror];
84+
const state = [0, data.features[0].properties.provider];
7985
const colors = new Map();
8086
for (const d of data.features) {
81-
if (state[1] !== d.properties.mirror) {
87+
if (state[1] !== d.properties.provider) {
8288
state[0] += 1;
83-
state[1] = d.properties.mirror;
89+
state[1] = d.properties.provider;
8490
}
85-
const color = `hsl(${137.508 * state[0]}, 90%, 50%)`;
91+
const color = `oklch(61.8033% 61.8033% ${state[0] * 360 * 0.618033})`;
8692
d.properties.color = color;
87-
colors.set(color, d.properties.mirror);
93+
colors.set(color, d.properties.provider);
8894
}
8995

9096
const legend = L.control({ position: "topright" });
9197
legend.onAdd = function (map) {
9298
const div = L.DomUtil.create("div", "info legend");
9399
const labels = [];
94-
for (const [color, mirror] of colors) {
100+
for (const [color, provider] of colors) {
95101
labels.push(
96-
`<i class="circle" style="background: ${color}"></i> ${mirror}`
102+
`<i class="circle" style="background: ${color}"></i> ${provider}`
97103
);
98104
}
99105
div.innerHTML = labels.join("<br>");
@@ -102,31 +108,31 @@
102108
legend.addTo(map);
103109

104110
const markers = L.markerClusterGroup({
111+
showCoverageOnHover: false,
105112
zoomToBoundsOnClick: false,
106113
maxClusterRadius: 30,
107114
});
108115
L.geoJSON(data, {
109116
onEachFeature: function (feature, layer) {
110117
const p = feature.properties;
111-
// console.log(feature.geometry.coordinates, feature.properties.name)
112118
layer.bindPopup(
113-
`<p>${p.name}<br/><small><a href="${p.url}">${p.mirror}</a></small></p>`
119+
`<a href="${p.url}" style="text-decoration: none">${p.provider}</a> (${p.location})`,
120+
{ maxWidth: 500 }
114121
);
115122
},
116123
pointToLayer: function (feature, latlng) {
117124
return L.circleMarker(latlng, {
118125
radius: 7,
119-
fillColor: feature.properties.color,
120126
color: feature.properties.color,
121127
weight: 1,
122-
opacity: 0.9,
128+
fillColor: feature.properties.color,
123129
fillOpacity: 0.5,
124130
});
125131
},
126132
}).addTo(markers);
127133
map.addLayer(markers);
128134
};
129-
load_data();
135+
loadData();
130136
</script>
131137
</body>
132138
</html>

0 commit comments

Comments
 (0)