Update public/index.html

d21746fe · Alfakhori · f02d7a60 · d21746fe
Commit d21746fe authored 8 months ago by Alfakhori
Hide whitespace changes
Inline Side-by-side

Showing

with 92 additions and 4 deletions
+92 -4
--- a/public/index.html
+++ b/public/index.html
@@ -4,14 +4,102 @@
    <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">
    <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([51.505, -0.09], 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
+        const csvData = `lat,lng,name,color
+51.505,-0.09,Sample Pin,#ff0000`;
+
+        // 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();
+
+        // Add click event to the map to add new pins
+        map.on('click', function(e) {
+            const name = prompt("Enter pin name:");
+            const color = prompt("Enter pin color (e.g., red, #ff0000):");
+
+            if (name && color) {
+                const newPin = {
+                    lat: e.latlng.lat,
+                    lng: e.latlng.lng,
+                    name: name,
+                    color: color
+                };
+
+                // Display the new pin on the map
+                const marker = L.marker([newPin.lat, newPin.lng], {
+                    title: newPin.name,
+                    icon: L.divIcon({
+                        className: 'custom-pin',
+                        html: `<div style="background-color: ${newPin.color};" class="pin"></div>`
+                    })
+                }).addTo(map);
+
+                marker.bindPopup(`<b>${newPin.name}</b>`);
+
+                // Simulate saving the pin by logging it to the console
+                addPinToCSV(newPin);
+            }
+        });
+
+        // Function to simulate adding a pin to the CSV (logs to the console)
+        function addPinToCSV(pin) {
+            const csvLine = `${pin.lat},${pin.lng},${pin.name},${pin.color}\n`;
+            console.log("Pin to add to CSV:", csvLine);
+        }
+    </script>
 </body>
 </html>