From 910d5c881e52eeae30daa2456d5a37d9df45742f Mon Sep 17 00:00:00 2001
From: Alfakhori <muhammad.alfakhori@hft-stuttgart.de>
Date: Thu, 29 Aug 2024 09:43:29 +0000
Subject: [PATCH] Update public/index.html
---
public/index.html | 96 ++---------------------------------------------
1 file changed, 4 insertions(+), 92 deletions(-)
diff --git a/public/index.html b/public/index.html
index 55b9d0e..2a51433 100644
--- 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>
--
GitLab