Update public/index2.html

86776c27 · Alfakhori · b773d2e0 · 86776c27
Commit 86776c27 authored Aug 29, 2024 by Alfakhori
--- a/public/index2.html
+++ b/public/index2.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Study Areas Map</title>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
+    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
+    <style>
+        html, body {
+            height: 100%;
+            margin: 0;
+            padding: 0;
+        }
+        #map {
+            height: 100vh;
+            width: 100vw;
+        }
+    </style>
+</head>
+<body>
+    <div id="map"></div>
+    <script>
+        const map = L.map('map').setView([48.78039307145523, 9.172929033104959], 13);
+        // Add OSM base map
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            maxZoom: 19,
+        }).addTo(map);
+        // Define custom icon
+        const customIcon = L.icon({
+            iconUrl: 'images/marker-icon.png', // Path to your custom marker image
+            iconSize: [32, 32], // Size of the icon
+            iconAnchor: [16, 32], // Point of the icon which will correspond to marker's location
+            popupAnchor: [0, -32] // Point from which the popup should open relative to the iconAnchor
+        });
+        // Function to load pins from CSV and add them to the map
+        function loadPins() {
+            console.log("Attempting to load CSV file...");
+            Papa.parse('pins.csv', {
+                download: true,
+                header: true,
+                complete: function(results) {
+                    console.log("CSV file loaded:", results);
+                    results.data.forEach(pin => {
+                        if (pin.lat && pin.lng && pin.name && pin.color) {
+                            const marker = L.marker([parseFloat(pin.lat), parseFloat(pin.lng)], {
+                                icon: customIcon // Use the custom icon here
+                            }).addTo(map);
+                            marker.bindPopup(`<b>${pin.name}</b>`);
+                        } else {
+                            console.warn("Invalid pin data:", pin);
+                        }
+                    });
+                },
+                error: function(error) {
+                    console.error("Error loading CSV file:", error);
+                }
+            });
+        }
+        // Call the function to load pins from the CSV
+        loadPins();
+    </script>
+</body>
+</html>