Update public/index.html

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

Showing

with 4 additions and 92 deletions
+4 -92
--- a/public/index.html
+++ b/public/index.html
@@ -4,102 +4,14 @@
    <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>
-        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>
+    <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>
 </body>
 </html>