Skip to content
GitLab
Commit a63cee4c authored by Alfakhori's avatar Alfakhori
Browse files

Update public/data/pins.csv 

Deleted public/images/muhammad.png, public/index2.html
parent d3c08fc0
Pipeline #10089 passed with stage
in 6 seconds
Hide whitespace changes
Inline Side-by-side
public/data/pins.csv
View file @ a63cee4c
lat,lng,name,color,marker_type
48.773330,9.181970,Muhammad's first study area,#0000ff,muhammad
48.780000,9.175000,Another study area,#ff0000,type2
lat,lng,name,color
48.773330,9.181970,Muhammad's first study area,#0000ff
48.780000,9.175000,Another study area,#ff0000
public/index2.html deleted 100644 → 0
View file @ d3c08fc0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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;
}
</style>
</head>
<body>
<div id="map"></div>
<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);
// Define custom icons for different marker types
const icons = {
muhammad: L.icon({
iconUrl: 'https://transfer.hft-stuttgart.de/gitlab/hire-promotionskolleg-team/study-areas-maps/-/raw/master/public/images/muhammad.png',
iconSize: [32, 32],
iconAnchor: [16, 32],
popupAnchor: [0, -32]
})
};
// Function to load pins from CSV and add them to the map
function loadPins() {
console.log("Attempting to load CSV file...");
Papa.parse('https://transfer.hft-stuttgart.de/gitlab/hire-promotionskolleg-team/study-areas-maps/-/raw/master/public/data/pins.csv', {
download: true,
header: true,
complete: function(results) {
console.log("CSV file loaded:", results);
results.data.forEach(pin => {
if (pin.lat && pin.lng && pin.name && pin.color) {
const marker = L.marker([parseFloat(pin.lat), parseFloat(pin.lng)], {
icon: customIcon // Use the custom icon here
}).addTo(map);
marker.bindPopup(`<b>${pin.name}</b>`);
} else {
console.warn("Invalid pin data:", pin);
}
});
},
error: function(error) {
console.error("Error loading CSV file:", error);
}
});
}
// Call the function to load pins from the CSV
loadPins();
</script>
</body>
</html>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal