Update public/index.html

ff9291b0 · Alfakhori · 910d5c88 · ff9291b0
Commit ff9291b0 authored 7 months ago by Alfakhori
Hide whitespace changes
Inline Side-by-side

Showing

with 59 additions and 5 deletions
+59 -5
--- a/public/index.html
+++ b/public/index.html
@@ -3,15 +3,69 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Interactive Map</title>
-    <link rel="stylesheet" href="/css/styles.css">
+    <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;
+        }
+
+        .custom-pin .pin {
+            width: 15px;
+            height: 15px;
+            border-radius: 50%;
+        }
+    </style>
 </head>
 <body>
    <div id="map"></div>

-    <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>
-    <script src="/js/script.js"></script>
+    <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);
+
+        // Embedded CSV data as a string (Add pins here manually)
+        const csvData = `lat,lng,name,color
+51.505,-0.09,Sample Pin,#ff0000
+51.515,-0.1,Another Pin,#00ff00`;
+
+        // Function to load pins from CSV and add them to the map
+        function loadPins() {
+            Papa.parse(csvData, {
+                header: true,
+                complete: function(results) {
+                    results.data.forEach(pin => {
+                        if (pin.lat && pin.lng && pin.name && pin.color) {
+                            const marker = L.marker([parseFloat(pin.lat), parseFloat(pin.lng)], {
+                                title: pin.name,
+                                icon: L.divIcon({
+                                    className: 'custom-pin',
+                                    html: `<div style="background-color: ${pin.color};" class="pin"></div>`
+                                })
+                            }).addTo(map);
+
+                            marker.bindPopup(`<b>${pin.name}</b>`);
+                        }
+                    });
+                }
+            });
+        }
+
+        // Call the function to load pins from the CSV
+        loadPins();
+    </script>
 </body>
 </html>