Skip to content

Commit f7858e5

Browse files
tomvanarmantomvanarman
authored
Refactor HTML and JavaScript for map display
1 parent cec537f commit f7858e5

1 file changed

Lines changed: 133 additions & 5 deletions

File tree

‎index.html‎

Lines changed: 133 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,126 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width,initial-scale=1" />
6+
<title>Camera Spotting Tour Map</title>
7+
8+
<!-- Leaflet CSS -->
9+
<link
10+
rel="stylesheet"
11+
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
12+
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
13+
crossorigin=""
14+
/>
15+
16+
<style>
17+
html, body {
18+
height: 100%;
19+
margin: 0;
20+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
21+
background: #fff;
22+
}
23+
24+
#map {
25+
width: 100%;
26+
height: 100%;
27+
}
28+
29+
.legend {
30+
position: absolute;
31+
top: 12px;
32+
left: 12px;
33+
background: rgba(255,255,255,0.95);
34+
border-radius: 10px;
35+
padding: 10px 12px;
36+
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
37+
font-size: 13px;
38+
line-height: 1.4;
39+
z-index: 1000;
40+
}
41+
42+
.legend-row {
43+
display: flex;
44+
align-items: center;
45+
margin-bottom: 6px;
46+
}
47+
.legend-row:last-child {
48+
margin-bottom: 0;
49+
}
50+
51+
.legend-swatch-point {
52+
width: 12px;
53+
height: 12px;
54+
background: #1d4ed8;
55+
border-radius: 50%;
56+
border: 2px solid white;
57+
box-shadow: 0 0 0 1px #1d4ed8;
58+
margin-right: 6px;
59+
}
60+
61+
.legend-swatch-radius {
62+
width: 12px;
63+
height: 12px;
64+
background: rgba(29,78,216,0.15);
65+
border-radius: 50%;
66+
border: 1px solid #1d4ed8;
67+
margin-right: 6px;
68+
}
69+
70+
/* Popup styling */
71+
.popup-wrapper {
72+
max-width: 240px;
73+
line-height: 1.4;
74+
font-size: 14px;
75+
}
76+
77+
.popup-title {
78+
font-weight: 600;
79+
font-size: 15px;
80+
margin-bottom: 6px;
81+
}
82+
83+
.popup-thumb {
84+
width: 100%;
85+
height: auto;
86+
border-radius: 8px;
87+
display: block;
88+
margin-bottom: 8px;
89+
object-fit: cover;
90+
background: #ddd;
91+
}
92+
93+
.popup-line {
94+
background: #f5f5f5;
95+
border-radius: 6px;
96+
padding: 6px 8px;
97+
margin-bottom: 4px;
98+
word-break: break-word;
99+
}
100+
</style>
101+
</head>
102+
103+
<body>
104+
<div id="map"></div>
105+
106+
<div class="legend">
107+
<div class="legend-row">
108+
<div class="legend-swatch-point"></div>
109+
<div>Camera location</div>
110+
</div>
111+
<div class="legend-row">
112+
<div class="legend-swatch-radius"></div>
113+
<div>50 m radius</div>
114+
</div>
115+
</div>
116+
117+
<!-- Leaflet JS -->
118+
<script
119+
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
120+
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
121+
crossorigin="">
122+
</script>
123+
1124
<script>
2125
(function(){
3126
var GEOJSON_URL = 'cameras-new.geojson';
@@ -7,9 +130,10 @@
7130
zoomControl: true
8131
});
9132

10-
// 2. Light grey basemap (Carto light_all on OSM data)
133+
// 2. Monochrome-ish basemap (Carto light_all, OSM data)
134+
// This is a widely used neutral/grey tile set.
11135
L.tileLayer(
12-
'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',
136+
'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png',
13137
{
14138
maxZoom: 20,
15139
attribution: '&copy; OpenStreetMap contributors &copy; CARTO'
@@ -65,23 +189,24 @@
65189
// main visible marker
66190
var marker = L.circleMarker(latlng, {
67191
radius: 6,
68-
color: '#ffffff',
192+
color: '#ffffff', // stroke color
69193
weight: 2,
70-
fillColor: '#1d4ed8',
194+
fillColor: '#1d4ed8', // fill color
71195
fillOpacity: 0.8
72196
});
73197

74198
// attach popup
75199
marker.bindPopup(buildPopupHTML(props));
76200

77-
// 50m radius circle
201+
// buffer circle ~50m
78202
var circle = L.circle(latlng, {
79203
radius: 50,
80204
color: '#1d4ed8',
81205
weight: 1,
82206
fillColor: '#1d4ed8',
83207
fillOpacity: 0.15
84208
});
209+
85210
circle.addTo(map);
86211

87212
// collect for fitBounds
@@ -107,3 +232,6 @@
107232

108233
})();
109234
</script>
235+
236+
</body>
237+
</html>

0 commit comments

Comments
 (0)