diff --git a/backend/app.py b/backend/app.py
index 701c5fa..a41617c 100644
--- a/backend/app.py
+++ b/backend/app.py
@@ -349,6 +349,10 @@ async def get_school_details(request: Request, urn: int):
"local_authority": latest.get("local_authority", ""),
"school_type": latest.get("school_type", ""),
"address": latest.get("address", ""),
+ "religious_denomination": latest.get("religious_denomination", ""),
+ "age_range": latest.get("age_range", ""),
+ "latitude": latest.get("latitude"),
+ "longitude": latest.get("longitude"),
"phase": "Primary",
},
"yearly_data": clean_for_json(school_data),
diff --git a/frontend/app.js b/frontend/app.js
index 52cfb87..01b30b2 100644
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -35,6 +35,7 @@ const state = {
// Charts
let comparisonChart = null;
let schoolDetailChart = null;
+let modalMap = null;
// Chart colors
const CHART_COLORS = [
@@ -94,7 +95,10 @@ const elements = {
modalClose: document.getElementById("modal-close"),
modalSchoolName: document.getElementById("modal-school-name"),
modalMeta: document.getElementById("modal-meta"),
+ modalDetails: document.getElementById("modal-details"),
modalStats: document.getElementById("modal-stats"),
+ modalMapContainer: document.getElementById("modal-map-container"),
+ modalMap: document.getElementById("modal-map"),
schoolDetailChart: document.getElementById("school-detail-chart"),
addToCompare: document.getElementById("add-to-compare"),
};
@@ -1174,12 +1178,35 @@ async function openSchoolModal(urn) {
state.currentSchoolData = data;
elements.modalSchoolName.textContent = data.school_info.school_name;
+
+ // Build meta tags including faith if applicable
+ const faithDenom = data.school_info.religious_denomination;
+ const showFaith = faithDenom &&
+ faithDenom !== "None" &&
+ faithDenom !== "Does not apply" &&
+ faithDenom !== "";
+ const faithTag = showFaith
+ ? `${escapeHtml(faithDenom)}`
+ : "";
+
elements.modalMeta.innerHTML = `
${escapeHtml(data.school_info.local_authority || "")}
${escapeHtml(data.school_info.school_type || "")}
- Primary
+ ${faithTag}
`;
+ // Build details section (address and age range)
+ const ageRange = data.school_info.age_range;
+ const address = data.school_info.address;
+ let detailsHtml = "";
+ if (address) {
+ detailsHtml += `${escapeHtml(address)}
`;
+ }
+ if (ageRange) {
+ detailsHtml += `Ages ${escapeHtml(ageRange)}
`;
+ }
+ elements.modalDetails.innerHTML = detailsHtml;
+
// Get latest year data with actual results
const sortedData = data.yearly_data.sort((a, b) => b.year - a.year);
const latest =
@@ -1327,6 +1354,46 @@ async function openSchoolModal(urn) {
? "Remove from Compare"
: "Add to Compare";
elements.addToCompare.dataset.urn = data.school_info.urn;
+
+ // Initialize modal map if coordinates available
+ const lat = data.school_info.latitude;
+ const lng = data.school_info.longitude;
+
+ if (lat && lng && typeof L !== "undefined") {
+ elements.modalMapContainer.style.display = "block";
+
+ // Destroy existing map if any
+ if (modalMap) {
+ modalMap.remove();
+ modalMap = null;
+ }
+
+ // Create map after a brief delay to ensure container is visible
+ setTimeout(() => {
+ try {
+ modalMap = L.map(elements.modalMap, {
+ scrollWheelZoom: false,
+ }).setView([lat, lng], 15);
+
+ L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+ attribution: "© OpenStreetMap contributors",
+ maxZoom: 19,
+ }).addTo(modalMap);
+
+ L.marker([lat, lng]).addTo(modalMap);
+
+ // Handle click to open fullscreen map
+ elements.modalMap.addEventListener("click", () => {
+ openMapModal(lat, lng, data.school_info.school_name);
+ });
+ } catch (err) {
+ console.error("Error initializing modal map:", err);
+ elements.modalMapContainer.style.display = "none";
+ }
+ }, 100);
+ } else {
+ elements.modalMapContainer.style.display = "none";
+ }
}
function closeModal() {
@@ -1334,6 +1401,12 @@ function closeModal() {
document.body.style.overflow = "";
state.currentSchoolData = null;
+ // Clean up modal map
+ if (modalMap) {
+ modalMap.remove();
+ modalMap = null;
+ }
+
// Restore visibility of school maps
document.querySelectorAll('.school-map').forEach(el => {
el.style.visibility = 'visible';
diff --git a/frontend/index.html b/frontend/index.html
index b845976..8736784 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -329,12 +329,17 @@