From b24ed0e933b61ad8d21cea197eb02f3a1b82d1be Mon Sep 17 00:00:00 2001
From: ANSHU-SACHDEV <anshu.sachdev.st@gmail.com>
Date: Tue, 2 Jun 2026 22:25:17 +0530
Subject: [PATCH] fix: migrate cultural map from Leaflet to MapLibre

---
 public/map.html       |   8 +-
 public/scripts/map.js | 375 +++++++++++++++++++++++++-----------------
 routes/map.config.js  |   7 +
 server.js             |  25 ++-
 4 files changed, 259 insertions(+), 156 deletions(-)
 create mode 100644 routes/map.config.js
diff --git a/public/map.html b/public/map.html
index 731805c..af0b8f4 100644
--- a/public/map.html
+++ b/public/map.html
@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="styles/map.css">
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
 </head>
+
 <body>
     <nav class="navbar">
         <div class="nav-container">
@@ -64,9 +65,14 @@ <h3 id="village-name">Select a Village</h3>
         </div>
     </footer>
 
-    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    <!-- <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> -->
     <script src="scripts/translations.js"></script>
+    <link href="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css" rel="stylesheet" />
+<script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
 <script src="scripts/map.js"></script>
+<button id="backToTopBtn" class="back-to-top">
+    ↑
+</button>
 </body>
 </html>
 
diff --git a/public/scripts/map.js b/public/scripts/map.js
index 9d7d39c..f3093b9 100644
--- a/public/scripts/map.js
+++ b/public/scripts/map.js
@@ -6,12 +6,44 @@ let heatmapLayer = null;
 let ambientSoundEnabled = true;
 let currentSound = null;
 let currentTileLayer;
-
+let heatmapMarkers = [];
 
 let currentLanguage =
     localStorage.getItem("language") || "en";
 
+document.addEventListener('DOMContentLoaded', () => {
+
+    const selector = document.getElementById("language-selector");
+    selector.value = currentLanguage;
+
+    // selector.addEventListener("change", (e) => {
+    //     currentLanguage = e.target.value;
+    //     localStorage.setItem("language", currentLanguage);
+
+    //     // Re-apply language labels on existing style
+    //     setMapLanguage(currentLanguage);
+    //     addVillageMarkers(); // re-render markers with new language
+    //     translatePage();
+    // });
+    selector.addEventListener("change", (e) => {
+
+    currentLanguage = e.target.value;
+
+    localStorage.setItem("language", currentLanguage);
 
+    if (map && map.isStyleLoaded()) {
+        setMapLanguage(currentLanguage);
+    }
+
+    addVillageMarkers();
+    translatePage();
+});
+
+    initializeMap();       // map must come first
+    setupEventListeners();
+    loadCulturalItems();
+    translatePage();
+});
 
 const sampleVillages = [
 {
@@ -172,138 +204,124 @@ function translatePage() {
             : t.soundOff;
 }
 
-// document.addEventListener('DOMContentLoaded', () => {
-//     initializeMap();
-//     setupEventListeners();
-//     loadCulturalItems();
-// });
-
-document.addEventListener('DOMContentLoaded', () => {
-
-    const selector =
-        document.getElementById("language-selector");
-
-    selector.value = currentLanguage;
-
-    // selector.addEventListener("change", (e) => {
-
-    //     currentLanguage = e.target.value;
-
-    //     localStorage.setItem(
-    //         "language",
-    //         currentLanguage
-    //     );
-
-    //     translatePage();
-    // });
-    selector.addEventListener("change", (e) => {
-
-    currentLanguage = e.target.value;
-
-    localStorage.setItem(
-        "language",
-        currentLanguage
-    );
-
-    loadMapLayer(currentLanguage);
-
-    translatePage();
-    map.eachLayer((layer) => {
-    if (layer instanceof L.Marker) {
-        map.removeLayer(layer);
-    }
-});
-
-markers = [];
-
-sampleVillages.forEach(village => {
-    addVillageMarker(village);
-});
-});
-
-    initializeMap();
-    setupEventListeners();
-    loadCulturalItems();
-    translatePage();
-});
 
 
 function initializeMap() {
-    map = L.map('map').setView([23.0225, 72.5714], 5);
+    map = new maplibregl.Map({
+        container: 'map',
+        style: getMapStyle(currentLanguage),
+        center: [78.9629, 22.5937], // centre of India [lng, lat]
+        zoom: 5
+    });
+    window.map = map;
 
-    loadMapLayer(currentLanguage);
+    map.addControl(new maplibregl.NavigationControl());
 
-    sampleVillages.forEach(village => {
-        addVillageMarker(village);
+    // Only add markers AFTER the map style has fully loaded
+    map.on('load', () => {
+        console.log("MAP LOADED");
+        setMapLanguage(currentLanguage);
+        addVillageMarkers();
     });
 }
+// function getMapStyle(language) {
+  
+   
+    function getMapStyle() {
+    return "/api/map-style";
+}
 
 
-function loadMapLayer(language) {
-
-    if (currentTileLayer) {
-        map.removeLayer(currentTileLayer);
-    }
-
-    // English
-    if (language === "en") {
+function setMapLanguage(lang) {
 
-        currentTileLayer = L.tileLayer(
-            'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',
-            {
-                attribution:
-                    '&copy; OpenStreetMap contributors &copy; CARTO',
-                subdomains: 'abcd',
-                maxZoom: 20
-            }
-        );
+    const style = map.getStyle();
 
+    if (!style || !style.layers) {
+        console.warn("Style not loaded yet");
+        return;
     }
-    // Hindi / Marathi
-    else {
-
-        currentTileLayer = L.tileLayer(
-            'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
-            {
-                attribution: '© OpenStreetMap contributors',
-                maxZoom: 18
-            }
-        );
 
-    }
+    style.layers.forEach(layer => {
+
+        if (
+            layer.type === "symbol" &&
+            layer.layout &&
+            layer.layout["text-field"]
+        ) {
+
+            if (lang === "hi") {
+
+                map.setLayoutProperty(
+                    layer.id,
+                    "text-field",
+                    [
+                        "coalesce",
+                        ["get", "name:hi"],
+                        ["get", "name"]
+                    ]
+                );
+
+            } else if (lang === "mr") {
+
+                map.setLayoutProperty(
+                    layer.id,
+                    "text-field",
+                    [
+                        "coalesce",
+                        ["get", "name:mr"],
+                        ["get", "name:hi"],
+                        ["get", "name"]
+                    ]
+                );
+
+            } else {
+
+                map.setLayoutProperty(
+                    layer.id,
+                    "text-field",
+                    ["get", "name"]
+                );
 
-    currentTileLayer.addTo(map);
+            }
+        }
+    });
 }
 
 
 function addVillageMarker(village) {
-
-    const marker = L.marker(village.coordinates).addTo(map);
-
-    marker.bindPopup(`
-        <div style="color:#1a1a2e;">
-            <h3 style="color:#f4a261;">
-                ${village.name[currentLanguage]}
-            </h3>
-
-            <p>
-                ${village.description[currentLanguage]}
-            </p>
-
-            <strong>
-                ${getTranslation().festivals}:
-            </strong>
-
-            ${village.festivals[currentLanguage].join(", ")}
-        </div>
-    `);
-
-    marker.on('click', () => {
+    const el = document.createElement('div');
+
+    el.className = 'marker';
+
+    // IMPORTANT: make it clickable
+    el.style.width = "20px";
+    el.style.height = "20px";
+    el.style.borderRadius = "50%";
+    el.style.background = "#f4a261";
+    el.style.border = "2px solid white";
+    el.style.cursor = "pointer";
+    el.style.pointerEvents = "auto";
+
+    const marker = new maplibregl.Marker(el)
+        .setLngLat([village.coordinates[1], village.coordinates[0]])
+        .addTo(map);
+
+    // safer: attach via marker element
+    marker.getElement().addEventListener('click', (e) => {
+        e.stopPropagation(); // important
         showVillageInfo(village);
         playAmbientSound(village.ambientSound);
     });
 
-    markers.push({ marker, village });
+    markers.push(marker);
+}
+
+function addVillageMarkers() {
+    // Remove existing markers
+    markers.forEach(m => m.remove());
+    markers = [];
+
+    sampleVillages.forEach(village => addVillageMarker(village));
 }
 
 function showVillageInfo(village) {
@@ -376,54 +394,71 @@ function playAmbientSound(type) {
 }
 
 function setupEventListeners() {
-    document.getElementById('close-info').addEventListener('click', () => {
+
+    const closeBtn = document.getElementById('close-info');
+    const heatmapBtn = document.getElementById('toggle-heatmap');
+    const soundBtn = document.getElementById('toggle-sound');
+
+    if (!closeBtn || !heatmapBtn || !soundBtn) {
+        console.error("❌ Missing DOM elements:", {
+            closeBtn,
+            heatmapBtn,
+            soundBtn
+        });
+        return;
+    }
+
+    closeBtn.addEventListener('click', () => {
         document.getElementById('village-info').classList.remove('active');
         if (currentSound) {
             currentSound.pause();
             currentSound = null;
         }
     });
-    
-    document.getElementById('toggle-heatmap').addEventListener('click', toggleHeatmap);
-    document.getElementById('toggle-sound').addEventListener('click', toggleSound);
+
+    heatmapBtn.addEventListener('click', toggleHeatmap);
+    soundBtn.addEventListener('click', toggleSound);
 }
 
+
+
 function toggleHeatmap() {
-    // Simple heatmap visualization using marker intensity
-    // In production, use a proper heatmap library
+    const t = getTranslation();
+
     if (heatmapLayer) {
-        map.removeLayer(heatmapLayer);
+        // Remove heatmap overlay divs
+        heatmapMarkers.forEach(m => m.remove());
+        heatmapMarkers = [];
         heatmapLayer = null;
-        document.getElementById('toggle-heatmap')
-.textContent =
-getTranslation().toggleHeatmap;
+        document.getElementById('toggle-heatmap').textContent = t.toggleHeatmap;
     } else {
-        // Create a simple visual heatmap effect
-        markers.forEach(({ marker, village }) => {
-            const intensity = Math.random() * 0.5 + 0.5; // Simulated activity
-            const circle = L.circle(village.coordinates, {
-                radius: 50000 * intensity,
-                fillColor: '#f4a261',
-                fillOpacity: 0.3 * intensity,
-                color: '#f4a261',
-                weight: 1
-            }).addTo(map);
-            
-            if (!heatmapLayer) {
-                heatmapLayer = L.layerGroup();
-            }
-            heatmapLayer.addLayer(circle);
+        heatmapLayer = true; // flag
+
+        sampleVillages.forEach(village => {
+            const intensity = Math.random() * 0.5 + 0.5;
+            const size = Math.round(60 * intensity);
+
+            const el = document.createElement('div');
+            el.style.cssText = `
+                width:${size}px; height:${size}px;
+                border-radius:50%;
+                background:rgba(244,162,97,${0.35 * intensity});
+                border:1px solid rgba(244,162,97,0.6);
+                pointer-events:none;
+            `;
+
+            const hm = new maplibregl.Marker({ element: el, anchor: 'center' })
+                .setLngLat([village.coordinates[1], village.coordinates[0]])
+                .addTo(map);
+
+            heatmapMarkers.push(hm);
         });
-        
-        if (heatmapLayer) {
-            map.addLayer(heatmapLayer);
-        }
-      document.getElementById('toggle-heatmap')
-.textContent =
-getTranslation().hideHeatmap;
+
+        document.getElementById('toggle-heatmap').textContent = t.hideHeatmap;
     }
 }
 
+
 function toggleSound() {
     ambientSoundEnabled = !ambientSoundEnabled;
   const t = getTranslation();
@@ -440,26 +475,58 @@ ambientSoundEnabled
     }
 }
 
+
+
 async function loadCulturalItems() {
     try {
         const response = await fetch('/api/items');
+
+        if (!response.ok) {
+            throw new Error("Failed to load cultural items");
+        }
+
         const items = await response.json();
-        
-        // Add markers for cultural items with coordinates
+
         items.forEach(item => {
             if (item.coordinates && item.coordinates.length === 2) {
-                const marker = L.marker(item.coordinates).addTo(map);
-                marker.bindPopup(`
-                    <div style="color: #1a1a2e;">
-                        <h4 style="color: #f4a261;">${item.title}</h4>
-                        <p>${item.description}</p>
-                        <small>Type: ${item.type}</small>
-                    </div>
-                `);
+
+                const el = document.createElement('div');
+                el.className = 'cultural-marker';
+
+                const marker = new maplibregl.Marker(el)
+                    .setLngLat([item.coordinates[1], item.coordinates[0]])
+                    .addTo(map);
+
+                el.addEventListener("click", () => {
+                    showPopup(item); // better than alert
+                });
             }
         });
+
     } catch (error) {
-        console.error('Error loading cultural items:', error);
+        console.error("Error loading cultural items:", error);
     }
 }
 
+// const backToTopBtn = document.getElementById("backToTopBtn");
+const backToTopBtn = document.getElementById("backToTopBtn");
+
+if (backToTopBtn) {
+
+    window.addEventListener("scroll", () => {
+        if (window.scrollY > 300) {
+            backToTopBtn.classList.add("show");
+        } else {
+            backToTopBtn.classList.remove("show");
+        }
+    });
+
+    backToTopBtn.addEventListener("click", () => {
+        window.scrollTo({
+            top: 0,
+            behavior: "smooth"
+        });
+    });
+
+}
+
diff --git a/routes/map.config.js b/routes/map.config.js
new file mode 100644
index 0000000..ae3d75f
--- /dev/null
+++ b/routes/map.config.js
@@ -0,0 +1,7 @@
+const MAP_STYLES = {
+  en: "https://api.maptiler.com/maps/streets/style.json?key=process.env.MAP_KEY",
+
+  hi: "https://api.maptiler.com/maps/streets/style.json?key=process.env.MAP_KEY&language=hi",
+
+  mr: "https://api.maptiler.com/maps/streets/style.json?key=process.env.MAP_KEY&language=mr"
+};
\ No newline at end of file
diff --git a/server.js b/server.js
index 776dedb..e87f316 100644
--- a/server.js
+++ b/server.js
@@ -1,4 +1,5 @@
-
+// import dotenv from "dotenv";
+require("dotenv").config();
 const express = require("express");
 const cors = require("cors");
 const path = require("path");
@@ -61,6 +62,25 @@ app.use("/api/posts", postRoutes);
 app.use("/api/chat", chatRoutes);
 
 app.use("/api/checkin", checkinRoutes);
+const MAPTILER_KEY = process.env.MAPTILER_KEY;
+console.log(process.env.MAPTILER_KEY);
+
+app.get("/api/map-style", async (req, res) => {
+
+    const response = await fetch(
+        `https://api.maptiler.com/maps/streets/style.json?key=${process.env.MAPTILER_KEY}`
+    );
+     console.log("MapTiler status:", response.status);
+
+    const style = await response.json();
+      console.log(style.version);
+    console.log(style.sources);
+    console.log(style.layers?.length);
+
+    // res.json(style);
+
+    res.json(style);
+});
 
 // 404 Middleware
 app.use(notFound);
@@ -68,6 +88,9 @@ app.use(notFound);
 // Error Middleware
 app.use(errorHandler);
 
+//map key
+
+
 // Start Server
 app.listen(PORT, () => {
     console.log(
