Skip to content

Commit 4701f39

Browse files
nalsainalsai
committed
Improve seichi maps
Improve and add missing entries Allow multiple images for one map entry Allow changing map icon Add image popup modal
1 parent fdbd61b commit 4701f39

File tree

16 files changed

+295
-199
lines changed

16 files changed

+295
-199
lines changed

‎assets/js/map.js‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
import Modal from 'js/bootstrap/src/modal.js'
2+
3+
document.addEventListener('DOMContentLoaded', function () {
4+
const map = L.map('leafletmap').setView([35.6735, 139.7565], 16);
5+
6+
L.tileLayer('https://tileproxy.nils.moe/{z}/{x}/{y}.png', {
7+
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
8+
}).addTo(map);
9+
10+
const markers = {};
11+
const features = {};
12+
let geoJSONLayer;
13+
14+
function loadLocations() {
15+
fetch('locations.geojson')
16+
.then(response => response.json())
17+
.then(data => {
18+
data.features.forEach(feature => {
19+
if (!feature.id) {
20+
feature.id = feature.properties.name.replace(/\s+/g, '-').toLowerCase();
21+
}
22+
features[feature.id] = feature;
23+
});
24+
25+
geoJSONLayer = L.geoJSON(data, {
26+
pointToLayer: function (feature, latlng) {
27+
28+
const iconOptions = {
29+
black: L.icon({
30+
iconUrl: '/img/map-icons/black.png',
31+
iconSize: [25, 41],
32+
iconAnchor: [12, 41],
33+
popupAnchor: [1, -34]
34+
}),
35+
blue: L.icon({
36+
iconUrl: '/img/map-icons/blue.png',
37+
iconSize: [25, 41],
38+
iconAnchor: [12, 41],
39+
popupAnchor: [1, -34]
40+
}),
41+
green: L.icon({
42+
iconUrl: '/img/map-icons/green.png',
43+
iconSize: [25, 41],
44+
iconAnchor: [12, 41],
45+
popupAnchor: [1, -34]
46+
}),
47+
orange: L.icon({
48+
iconUrl: '/img/map-icons/orange.png',
49+
iconSize: [25, 41],
50+
iconAnchor: [12, 41],
51+
popupAnchor: [1, -34]
52+
}),
53+
purple: L.icon({
54+
iconUrl: '/img/map-icons/purple.png',
55+
iconSize: [25, 41],
56+
iconAnchor: [12, 41],
57+
popupAnchor: [1, -34]
58+
}),
59+
red: L.icon({
60+
iconUrl: '/img/map-icons/red.png',
61+
iconSize: [25, 41],
62+
iconAnchor: [12, 41],
63+
popupAnchor: [1, -34]
64+
}),
65+
};
66+
67+
if (feature.properties.hidden === "true") {
68+
return null;
69+
}
70+
71+
const marker = L.marker(latlng, { icon: iconOptions[feature.properties.icon] || iconOptions.blue });
72+
markers[feature.id] = marker;
73+
return marker;
74+
},
75+
onEachFeature: function (feature, layer) {
76+
const popupContent = document.createElement('div');
77+
popupContent.className = 'text-center';
78+
popupContent.style.width = '200px';
79+
80+
const nameElement = document.createElement('div');
81+
nameElement.className = 'fw-bold';
82+
nameElement.textContent = feature.properties.name;
83+
popupContent.appendChild(nameElement);
84+
85+
const images = getImagesArray(feature.properties);
86+
87+
if (images.length > 0) {
88+
const imagesContainer = document.createElement('div');
89+
90+
images.forEach((imageSrc, index) => {
91+
const imgContainer = document.createElement('div');
92+
imgContainer.style.cursor = 'pointer';
93+
94+
const img = document.createElement('img');
95+
img.src = imageSrc;
96+
img.alt = `${feature.properties.name} Image ${index + 1}`;
97+
img.className = 'img-fluid';
98+
img.onclick = function () {
99+
openFullScreenImage(imageSrc, feature.properties.name);
100+
};
101+
imgContainer.appendChild(img);
102+
imagesContainer.appendChild(imgContainer);
103+
});
104+
105+
popupContent.appendChild(imagesContainer);
106+
}
107+
108+
if (feature.properties.description) {
109+
const descElement = document.createElement('div');
110+
descElement.className = 'text-start mb-2';
111+
descElement.innerHTML = feature.properties.description;
112+
popupContent.appendChild(descElement);
113+
}
114+
115+
layer.bindPopup(popupContent);
116+
}
117+
}).addTo(map);
118+
119+
const bounds = geoJSONLayer.getBounds();
120+
if (bounds.isValid()) {
121+
map.fitBounds(bounds, {
122+
padding: [40, 40],
123+
maxZoom: 16
124+
});
125+
}
126+
})
127+
.catch(error => {
128+
console.error('Error loading GeoJSON:', error);
129+
document.getElementById('error').innerHTML = '<div class="alert alert-danger mb-0 mt-3">Error loading locations data.</div>';
130+
});
131+
}
132+
133+
function getImagesArray(properties) {
134+
if (properties.images && Array.isArray(properties.images)) {
135+
return properties.images;
136+
}
137+
if (properties.image) {
138+
return [properties.image];
139+
}
140+
return [];
141+
}
142+
143+
function openFullScreenImage(imageSrc, title) {
144+
const modal = new Modal(document.getElementById('imageModal'));
145+
document.getElementById('imageModalLabel').textContent = title || 'Location Image';
146+
document.getElementById('fullscreen-image').src = imageSrc;
147+
modal.show();
148+
}
149+
150+
loadLocations();
151+
});

‎content/en/blog/seichi/ef/locations.geojson‎

Lines changed: 23 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,11 @@
2020
"type": "Feature",
2121
"properties": {
2222
"name": "Peterskirche",
23-
"image": "https://en.nalsai.de/blog/seichi/ef/bg-hd-church-1.avif",
23+
"images": [
24+
"https://en.nalsai.de/blog/seichi/ef/bg-hd-church-1.avif",
25+
"https://en.nalsai.de/blog/seichi/ef/bg-hd-church-2.avif",
26+
"https://en.nalsai.de/blog/seichi/ef/bg19.avif"
27+
],
2428
"link": "https://en.nalsai.de/blog/seichi/ef/#church"
2529
},
2630
"geometry": {
@@ -34,38 +38,12 @@
3438
{
3539
"type": "Feature",
3640
"properties": {
37-
"name": "Providenzkirche - inside (1)",
38-
"image": "https://en.nalsai.de/blog/seichi/ef/bg-hd-church-inside-1.avif",
39-
"link": "https://en.nalsai.de/blog/seichi/ef/#inside-providenzkirche"
40-
},
41-
"geometry": {
42-
"coordinates": [
43-
8.701980307346135,
44-
49.411010417863416
41+
"name": "Providenzkirche",
42+
"images": [
43+
"https://en.nalsai.de/blog/seichi/ef/bg-hd-church-inside-3.avif",
44+
"https://en.nalsai.de/blog/seichi/ef/bg-hd-church-inside-1.avif",
45+
"https://en.nalsai.de/blog/seichi/ef/bg-hd-church-inside-2.avif"
4546
],
46-
"type": "Point"
47-
}
48-
},
49-
{
50-
"type": "Feature",
51-
"properties": {
52-
"name": "Providenzkirche - inside (2)",
53-
"image": "https://en.nalsai.de/blog/seichi/ef/bg-hd-church-inside-2.avif",
54-
"link": "https://en.nalsai.de/blog/seichi/ef/#inside-providenzkirche"
55-
},
56-
"geometry": {
57-
"coordinates": [
58-
8.702016674247208,
59-
49.41086852972298
60-
],
61-
"type": "Point"
62-
}
63-
},
64-
{
65-
"type": "Feature",
66-
"properties": {
67-
"name": "Providenzkirche - inside (3)",
68-
"image": "https://en.nalsai.de/blog/seichi/ef/bg-hd-church-inside-3.avif",
6947
"link": "https://en.nalsai.de/blog/seichi/ef/#inside-providenzkirche"
7048
},
7149
"geometry": {
@@ -112,7 +90,7 @@
11290
"name": "Hauptstraße (middle)",
11391
"image": "https://en.nalsai.de/blog/seichi/ef/bg-hd-hauptstr-middle.avif",
11492
"link": "https://en.nalsai.de/blog/seichi/ef/#hauptstraße",
115-
"description":"Only roughly similar"
93+
"description": "Only roughly similar"
11694
},
11795
"geometry": {
11896
"coordinates": [
@@ -126,7 +104,11 @@
126104
"type": "Feature",
127105
"properties": {
128106
"name": "Intersection of Mönchgasse and Heiliggeiststraße",
129-
"image": "https://en.nalsai.de/blog/seichi/ef/bg-hd-monchg-1.avif",
107+
"images": [
108+
"https://en.nalsai.de/blog/seichi/ef/bg-hd-monchg-1.avif",
109+
"https://en.nalsai.de/blog/seichi/ef/bg-hd-monchg-2.avif",
110+
"https://en.nalsai.de/blog/seichi/ef/bg27.avif"
111+
],
130112
"link": "https://en.nalsai.de/blog/seichi/ef/#mönchgasse"
131113
},
132114
"geometry": {
@@ -137,41 +119,11 @@
137119
"type": "Point"
138120
}
139121
},
140-
{
141-
"type": "Feature",
142-
"properties": {
143-
"name": "Intersection of Mönchgasse and Heiliggeiststraße - curb",
144-
"image": "https://en.nalsai.de/blog/seichi/ef/bg27.avif",
145-
"link": "https://en.nalsai.de/blog/seichi/ef/#mönchgasse"
146-
},
147-
"geometry": {
148-
"coordinates": [
149-
8.711845251792397,
150-
49.41258858217357
151-
],
152-
"type": "Point"
153-
}
154-
},
155-
{
156-
"type": "Feature",
157-
"properties": {
158-
"name": "Intersection of Mönchgasse and Heiliggeiststraße (2)",
159-
"image": "https://en.nalsai.de/blog/seichi/ef/bg-hd-monchg-2.avif",
160-
"link": "https://en.nalsai.de/blog/seichi/ef/#mönchgasse"
161-
},
162-
"geometry": {
163-
"coordinates": [
164-
8.711922936789154,
165-
49.41242669258783
166-
],
167-
"type": "Point"
168-
}
169-
},
170122
{
171123
"type": "Feature",
172124
"properties": {
173125
"name": "Hauptstraße 236",
174-
"image": "https://en.nalsai.de/blog/seichi/ef/bg-hd-hauptstr-236.avif",
126+
"image": "https://en.nalsai.de/blog/seichi/ef/bg-hd-hauptstr-236_night.avif",
175127
"link": "https://en.nalsai.de/blog/seichi/ef/#hauptstraße"
176128
},
177129
"geometry": {
@@ -188,7 +140,7 @@
188140
"name": "Königstuhl",
189141
"image": "https://en.nalsai.de/blog/seichi/ef/bg18.avif",
190142
"link": "https://en.nalsai.de/blog/seichi/ef/#königstuhl",
191-
"description":"Not very similar"
143+
"description": "Not very similar"
192144
},
193145
"geometry": {
194146
"coordinates": [
@@ -202,7 +154,11 @@
202154
"type": "Feature",
203155
"properties": {
204156
"name": "Rothenburg ob der Tauber Station",
205-
"image": "https://en.nalsai.de/blog/seichi/ef/bg-rothenburg-station-1.avif",
157+
"images": [
158+
"https://en.nalsai.de/blog/seichi/ef/bg-rothenburg-station-1.avif",
159+
"https://en.nalsai.de/blog/seichi/ef/bg-rothenburg-station-2.avif",
160+
"https://en.nalsai.de/blog/seichi/ef/bg-rothenburg-station-3.avif"
161+
],
206162
"link": "https://en.nalsai.de/blog/seichi/ef/#station"
207163
},
208164
"geometry": {
@@ -213,36 +169,6 @@
213169
"type": "Point"
214170
}
215171
},
216-
{
217-
"type": "Feature",
218-
"properties": {
219-
"name": "Rothenburg ob der Tauber Station (2)",
220-
"image": "https://en.nalsai.de/blog/seichi/ef/bg-rothenburg-station-2.avif",
221-
"link": "https://en.nalsai.de/blog/seichi/ef/#station"
222-
},
223-
"geometry": {
224-
"coordinates": [
225-
10.190723693779749,
226-
49.37677688172771
227-
],
228-
"type": "Point"
229-
}
230-
},
231-
{
232-
"type": "Feature",
233-
"properties": {
234-
"name": "Rothenburg ob der Tauber Station (3)",
235-
"image": "https://en.nalsai.de/blog/seichi/ef/bg-rothenburg-station-3.avif",
236-
"link": "https://en.nalsai.de/blog/seichi/ef/#station"
237-
},
238-
"geometry": {
239-
"coordinates": [
240-
10.19066423911499,
241-
49.37675929619333
242-
],
243-
"type": "Point"
244-
}
245-
},
246172
{
247173
"type": "Feature",
248174
"properties": {

0 commit comments

Comments
 (0)