-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmap.html
127 lines (107 loc) · 4.42 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
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html>
<head>
<title>Heatmap</title>
<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" />
</head>
<body>
<div id="map" style="height: 100vh; width: 100vw;"></div>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet-heat.js"></script>
<script src="./map-data.js"></script>
<script>
if (typeof exifData === 'undefined' || typeof mediaSettings === 'undefined') {
alert("Failed to load map-data.js, please ensure the correct data format!");
}
const map = L.map('map').setView([0, 0], 2);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Create heatmap layer
const heat = L.heatLayer(exifData.map(p => [p[0], p[1], 1]), { // Set heatmap intensity is 1 for all points
radius: getRadius(map.getZoom()),
blur: 15,
max: 1.0,
minOpacity: 0.3
}).addTo(map);
var mediaMarkers;
if (mediaSettings.displayAtMaxZoom) {
mediaMarkers = L.layerGroup();
}
map.on('zoomend', function () {
if (mediaSettings.displayAtMaxZoom && map.getZoom() === map.getMaxZoom()) {
map.removeLayer(heat);
// Remove all existing media markers first
mediaMarkers.clearLayers();
// Filter the exifData based on the map's current bounds and add them to the mediaMarkers layer
exifData.forEach(media => {
var mediaLatLng = new L.LatLng(media[0], media[1]);
if (map.getBounds().contains(mediaLatLng)) {
var marker = L.marker([media[0], media[1]]);
const popupContent = generatePopupContent(media[2]);
marker.bindPopup(popupContent, {minWidth: '300'}).openPopup();
mediaMarkers.addLayer(marker);
}
});
mediaMarkers.addTo(map);
} else {
if (!map.hasLayer(heat)) {
map.removeLayer(mediaMarkers);
heat.addTo(map);
}
}
// Update heatmap radius on zoom change
heat.setOptions({radius: getRadius(map.getZoom())});
});
function getFileName(mediaUrl) {
return mediaUrl.split('/').pop();
}
function generatePopupContent(mediaUrl) {
const fileExtension = mediaUrl.split('.').pop().toLowerCase();
const fileName = getFileName(mediaUrl);
let mediaContent = "";
switch (fileExtension) {
case 'jpg':
case 'jpeg':
case 'jxl':
case 'avif':
case 'png':
case 'gif':
case 'bmp':
case 'webp':
mediaContent = `<img src="${mediaUrl}" alt="${fileName}" style="max-width:300px;">`;
break;
case 'mp4':
case 'webm':
case 'ogg':
case 'mkv':
case 'mov':
mediaContent = `<video controls style="max-width:300px;"><source src="${mediaUrl}" type="video/${fileExtension}"></video>`;
break;
case 'mp3':
case 'wav':
case 'aac':
case 'flac':
case 'oga':
case 'opus':
mediaContent = `<audio controls><source src="${mediaUrl}" type="audio/${fileExtension}"></audio>`;
break;
default:
mediaContent = 'Unsupported media type';
break;
}
return `<a href="${mediaUrl}" target="_blank">${mediaContent}<br><span style="font-size:0.8em">${fileName}</span></a>`;
}
function getRadius(zoom) {
if (zoom === 2) {
return 20;
}
if (zoom < 6) return 25;
if (zoom < 13) return 20;
return 15;
}
</script>
</body>
</html>