diff --git a/public/index.html b/public/index.html
index 2a51433bb72d6d5c123a02f23c79c3d7a090c301..55b9d0eed57feff2a739b0f8dfc85858bc714ae9 100644
--- 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>