Skip to content

Commit eeb7726

Browse files
michelaparmamichelaparma
committed
upload maps.html
1 parent c7eff81 commit eeb7726

File tree

1 file changed

+279
-0
lines changed

1 file changed

+279
-0
lines changed

‎maps.html‎

Lines changed: 279 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,279 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml" translate="no" class="notranslate">
3+
<head>
4+
<title>MANO - Maps</title>
5+
<meta name="keywords" content="MANO, Manuscripts Online, About">
6+
<meta name="description" content="">
7+
<meta charset="UTF-8"/>
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0 shrink-to-fit=no"/>
9+
<meta name="google" content="notranslate"/>
10+
<link rel="canonical" href="https://mano-project.github.io/about.html"/>
11+
<link rel="icon" type="image/png" href="images/MANO.png">
12+
13+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
14+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
15+
16+
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
17+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
18+
19+
<!-- Leaflet -->
20+
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
21+
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
22+
23+
<style>
24+
#mapCurrent, #mapOrigin {
25+
height: 500px;
26+
margin-top: 1rem;
27+
width: 100%;
28+
border: 1px solid #dee2e6;
29+
border-radius: 0.5rem;
30+
}
31+
</style>
32+
33+
</head>
34+
<body>
35+
<nav class="navbar bg-body-tertiary ">
36+
<div class="container-fluid d-flex justify-content-between align-items-center position-relative py-2">
37+
38+
<!-- Invisible spacer to balance layout -->
39+
<div style="width: 80px;"></div>
40+
41+
<!-- Centered logo -->
42+
<div class="position-absolute start-50 translate-middle-x text-center">
43+
<a class="navbar-brand" href="index.html">
44+
<img src="images/MANO.png" alt="Logo" width="65" class="d-inline-block align-text-top">
45+
</a>
46+
</div>
47+
48+
<!-- Offcanvas toggle aligned right -->
49+
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"
50+
aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
51+
<span class="navbar-toggler-icon"></span>
52+
</button>
53+
54+
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
55+
<div class="offcanvas-header">
56+
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">&lt;MANO&gt;</h5>
57+
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
58+
</div>
59+
<div class="offcanvas-body">
60+
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
61+
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
62+
<li class="nav-item"><a class="nav-link" href="resources.html">Resources</a></li>
63+
<li class="nav-item"><a class="nav-link" href="editor.html">Metadata Editor</a></li>
64+
<li class="nav-item"><a class="nav-link" href="collection.html">Metadata Collection</a></li>
65+
<li class="nav-item"><a class="nav-link" href="viewer.html">Transcription Viewer</a></li>
66+
<li class="nav-item"><a class="nav-link active" href="about.html">About</a></li>
67+
</ul>
68+
</div>
69+
</div>
70+
</div>
71+
</nav>
72+
73+
<div class="container mt-4">
74+
75+
<button onclick="history.back()" class="btn back-btn btn-sm btn-outline-secondary">Back</button>
76+
77+
<h1 class="page-title">Manuscript Maps</h1>
78+
79+
<div class="row my-4 align-items-end">
80+
<!-- Left column -->
81+
<div class="col-12 col-md-6 d-flex justify-content-start mb-2 mb-md-0">
82+
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#infoMaps">
83+
About Manuscript Maps
84+
</button>
85+
</div>
86+
</div>
87+
88+
<!-- About Maps Modal -->
89+
<div class="modal fade" id="infoMaps" tabindex="-1" aria-labelledby="infoMapsLabel" aria-hidden="true">
90+
<div class="modal-dialog modal-lg">
91+
<div class="modal-content">
92+
<div class="modal-header">
93+
<h5 class="modal-title" id="infoMapsLabel">About Manuscript Maps</h5>
94+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
95+
</div>
96+
<div class="modal-body">
97+
<p>
98+
</p>
99+
</div>
100+
<div class="modal-footer">
101+
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
102+
</div>
103+
</div>
104+
</div>
105+
</div>
106+
107+
<div class="container mb-5">
108+
<div class="row">
109+
<div class="col-12 col-md-6">
110+
<h4 style="color:#eeba2b;" class="text-center">Place of Storage (Current Library)</h4>
111+
<div id="mapCurrent"></div>
112+
</div>
113+
<div class="col-12 col-md-6">
114+
<h4 style="color:#eeba2b;" class="text-center">Places of Origin</h4>
115+
<div id="mapOrigin"></div>
116+
</div>
117+
</div>
118+
</div>
119+
</div>
120+
121+
122+
<footer class="footer bg-body-tertiary text-center py-4">
123+
<div class="container">
124+
125+
<!-- Logo centered -->
126+
<div class="mb-3">
127+
<a class="navbar-brand" href="index.html">
128+
<img src="images/MANO.png" alt="Logo" width="50">
129+
</a>
130+
</div>
131+
132+
<!-- Links centered in one line -->
133+
<div class="mb-3">
134+
<a class="footer-link mx-2" href="index.html">Home</a>
135+
<a class="footer-link mx-2" href="resources.html">Resources</a>
136+
<a class="footer-link mx-2" href="editor.html">Metadata Editor</a>
137+
<a class="footer-link mx-2" href="collection.html">Metadata Collection</a>
138+
<a class="footer-link mx-2" href="viewer.html">Transcription Viewer</a>
139+
<a class="footer-link mx-2" href="about.html">About</a>
140+
</div>
141+
142+
<!-- Copyright centered -->
143+
<div class="text-center mt-2">
144+
<span>© 2025 <span class="mano">&lt;MANO&gt;</span></span>
145+
</div>
146+
147+
</div>
148+
</footer>
149+
150+
<script>
151+
const repoOwner = "mano-project";
152+
const repoName = "mano-metadata";
153+
const folderPath = "data";
154+
155+
let manuscripts = [];
156+
157+
// Fetch file list from GitHub
158+
async function fetchFileList() {
159+
const apiUrl = `https://api.github.com/repos/${repoOwner}/${repoName}/contents/${folderPath}`;
160+
const res = await fetch(apiUrl);
161+
const files = await res.json();
162+
return files.filter(f => f.name.endsWith(".json"));
163+
}
164+
165+
async function fetchJSONFile(url) {
166+
const res = await fetch(url);
167+
return res.json();
168+
}
169+
170+
// Initialize maps
171+
const europeCenter = [44.855656, 9.4841947,5]; //central Europe
172+
const zoomLevel = 4; // zoomed to Europe
173+
174+
const mapCurrent = L.map('mapCurrent').setView(europeCenter, zoomLevel);
175+
const mapOrigin = L.map('mapOrigin').setView(europeCenter, zoomLevel);
176+
177+
178+
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
179+
attribution: '&copy; OpenStreetMap contributors'
180+
}).addTo(mapCurrent);
181+
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
182+
attribution: '&copy; OpenStreetMap contributors'
183+
}).addTo(mapOrigin);
184+
185+
const currentMarkers = L.layerGroup().addTo(mapCurrent);
186+
const originMarkers = L.layerGroup().addTo(mapOrigin);
187+
188+
// Group manuscripts by coordinates
189+
function groupByCoords(entries, fieldGeo, fieldLabel, fieldCountry) {
190+
const groups = {};
191+
entries.forEach(entry => {
192+
const geo = entry[fieldGeo];
193+
if (!geo) return;
194+
if (!groups[geo]) {
195+
groups[geo] = {
196+
label: entry[fieldLabel]?.value || entry[fieldLabel] || "Unknown",
197+
country: entry[fieldCountry]?.value || entry[fieldCountry] || "",
198+
manuscripts: []
199+
};
200+
}
201+
//groups[geo].manuscripts.push(entry.msTitle || "Untitled manuscript");
202+
groups[geo].manuscripts.push({
203+
title: entry.msTitle || "Untitled manuscript",
204+
id: entry.idno || entry.msTitle
205+
});
206+
});
207+
return groups;
208+
}
209+
210+
// Plot grouped markers
211+
function plotMarkers() {
212+
currentMarkers.clearLayers();
213+
originMarkers.clearLayers();
214+
215+
// Current Repositories
216+
const repoGroups = groupByCoords(manuscripts, "geoRepository", "repository", "countryIdent");
217+
for (const geo in repoGroups) {
218+
const [lat, lon] = geo.split(",").map(Number);
219+
const g = repoGroups[geo];
220+
const popupHtml = `
221+
<b>${g.label}</b><br>${g.country}<br>
222+
<ul>
223+
${g.manuscripts.map(m =>
224+
`<li><a href="collection.html#ms-${m.id.replace(/\s+/g,"_")}" target="_blank">${m.title}</a></li>`
225+
).join("")}
226+
</ul>
227+
`;
228+
229+
L.marker([lat, lon]).addTo(currentMarkers).bindPopup(popupHtml);
230+
}
231+
232+
// Places of Origin
233+
const originGroups = groupByCoords(manuscripts, "geoOrigin", "origPlace", "countryOrigin");
234+
for (const geo in originGroups) {
235+
const [lat, lon] = geo.split(",").map(Number);
236+
const g = originGroups[geo];
237+
const popupHtml = `
238+
<b>${g.label}</b><br>${g.country}<br>
239+
<ul>
240+
${g.manuscripts.map(m =>
241+
`<li><a href="collection.html#ms-${m.id.replace(/\s+/g,"_")}" target="_blank">${m.title}</a></li>`
242+
).join("")}
243+
</ul>
244+
`;
245+
L.marker([lat, lon]).addTo(originMarkers).bindPopup(popupHtml);
246+
}
247+
248+
// Fit maps
249+
if (currentMarkers.getLayers().length > 0) {
250+
mapCurrent.fitBounds(currentMarkers.getBounds());
251+
}
252+
if (originMarkers.getLayers().length > 0) {
253+
mapOrigin.fitBounds(originMarkers.getBounds());
254+
}
255+
}
256+
257+
// Load all data
258+
async function loadData() {
259+
const fileList = await fetchFileList();
260+
for (const f of fileList) {
261+
try {
262+
const rec = await fetchJSONFile(f.download_url);
263+
const entries = Array.isArray(rec) ? rec : [rec];
264+
manuscripts.push(...entries);
265+
} catch (err) {
266+
console.error("Error loading", f.name, err);
267+
}
268+
}
269+
plotMarkers();
270+
}
271+
272+
loadData();
273+
</script>
274+
275+
</body>
276+
</html>
277+
278+
279+

0 commit comments

Comments
 (0)