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