add: map page
Dieser Commit ist enthalten in:
Ursprung
bd057ba427
Commit
32295e7ced
3 geänderte Dateien mit 187 neuen und 7 gelöschten Zeilen
15
index.html
15
index.html
|
|
@ -7,7 +7,14 @@
|
||||||
<script src="tailwind_3.4.16"></script>
|
<script src="tailwind_3.4.16"></script>
|
||||||
<link rel="stylesheet" href="styles.css"> <!-- Import the external CSS file -->
|
<link rel="stylesheet" href="styles.css"> <!-- Import the external CSS file -->
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-gray-100 flex flex-col items-center p-6">
|
<body class="bg-gray-100 flex flex-col items-center p-6 pt-24">
|
||||||
|
<nav class="bg-gray-800 text-white w-full p-6 shadow-lg fixed top-0 left-0 z-50">
|
||||||
|
<div class="container mx-auto flex space-x-8 text-lg font-bold">
|
||||||
|
<a href="index.html" class="hover:text-gray-300">Home</a>
|
||||||
|
<a href="map.html" class="hover:text-gray-300">Map</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
<div class="header-container">
|
<div class="header-container">
|
||||||
<h1 class="header-title">APPN Timer</h1>
|
<h1 class="header-title">APPN Timer</h1>
|
||||||
<p class="header-subtitle">Gérez vos courses facilement pour le cours d'APPN</p>
|
<p class="header-subtitle">Gérez vos courses facilement pour le cours d'APPN</p>
|
||||||
|
|
@ -207,12 +214,6 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-4">
|
|
||||||
<button id="viewResultsButton" class="bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600">
|
|
||||||
Voir les résultats TODO, sort results ?
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const exportToCSV = () => {
|
const exportToCSV = () => {
|
||||||
|
|
|
||||||
131
map.geojson
Normale Datei
131
map.geojson
Normale Datei
|
|
@ -0,0 +1,131 @@
|
||||||
|
{
|
||||||
|
"type": "FeatureCollection",
|
||||||
|
"features": [
|
||||||
|
{
|
||||||
|
"type": "Feature",
|
||||||
|
"properties": {
|
||||||
|
"name": "Penalites"
|
||||||
|
},
|
||||||
|
"geometry": {
|
||||||
|
"coordinates": [
|
||||||
|
[
|
||||||
|
[
|
||||||
|
1.470283045026946,
|
||||||
|
43.568307831967246
|
||||||
|
],
|
||||||
|
[
|
||||||
|
1.4695510764724702,
|
||||||
|
43.5679150022182
|
||||||
|
],
|
||||||
|
[
|
||||||
|
1.469564985315003,
|
||||||
|
43.567901065141
|
||||||
|
],
|
||||||
|
[
|
||||||
|
1.4703038265827502,
|
||||||
|
43.568291617673424
|
||||||
|
],
|
||||||
|
[
|
||||||
|
1.470283045026946,
|
||||||
|
43.568307831967246
|
||||||
|
]
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"type": "Polygon"
|
||||||
|
},
|
||||||
|
"id": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Feature",
|
||||||
|
"properties": {
|
||||||
|
"marker-color": "#17f018",
|
||||||
|
"marker-size": "medium",
|
||||||
|
"marker-symbol": "circle",
|
||||||
|
"name": "Départ"
|
||||||
|
},
|
||||||
|
"geometry": {
|
||||||
|
"coordinates": [
|
||||||
|
1.4702376049740167,
|
||||||
|
43.568169910729836
|
||||||
|
],
|
||||||
|
"type": "Point"
|
||||||
|
},
|
||||||
|
"id": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Feature",
|
||||||
|
"properties": {
|
||||||
|
"name": "Zone de tir"
|
||||||
|
},
|
||||||
|
"geometry": {
|
||||||
|
"coordinates": [
|
||||||
|
[
|
||||||
|
[
|
||||||
|
1.4705504527445612,
|
||||||
|
43.5683976307125
|
||||||
|
],
|
||||||
|
[
|
||||||
|
1.4702363789695312,
|
||||||
|
43.56824595304934
|
||||||
|
],
|
||||||
|
[
|
||||||
|
1.4703516442256728,
|
||||||
|
43.56814280808064
|
||||||
|
],
|
||||||
|
[
|
||||||
|
1.4706915200949595,
|
||||||
|
43.56830931306246
|
||||||
|
],
|
||||||
|
[
|
||||||
|
1.4705504527445612,
|
||||||
|
43.5683976307125
|
||||||
|
]
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"type": "Polygon"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Feature",
|
||||||
|
"properties": {},
|
||||||
|
"geometry": {
|
||||||
|
"coordinates": [
|
||||||
|
[
|
||||||
|
1.4702391813598013,
|
||||||
|
43.56817128121929
|
||||||
|
],
|
||||||
|
[
|
||||||
|
1.4709070963883164,
|
||||||
|
43.56750923180542
|
||||||
|
],
|
||||||
|
[
|
||||||
|
1.4708797838778764,
|
||||||
|
43.56748764311533
|
||||||
|
],
|
||||||
|
[
|
||||||
|
1.4702069029382585,
|
||||||
|
43.56814789372805
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"type": "LineString"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Feature",
|
||||||
|
"properties": {
|
||||||
|
"name": "Arrivee",
|
||||||
|
"marker-color": "#e01b24",
|
||||||
|
"marker-size": "medium",
|
||||||
|
"marker-symbol": "circle"
|
||||||
|
},
|
||||||
|
"geometry": {
|
||||||
|
"coordinates": [
|
||||||
|
1.4702022006711957,
|
||||||
|
43.56814943193618
|
||||||
|
],
|
||||||
|
"type": "Point"
|
||||||
|
},
|
||||||
|
"id": 4
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
48
map.html
Normale Datei
48
map.html
Normale Datei
|
|
@ -0,0 +1,48 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Carte avec GeoJSON</title>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||||||
|
<style>
|
||||||
|
#map {
|
||||||
|
height: 100vh; /* Full height for the map */
|
||||||
|
width: 100%; /* Full width for the map */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="map"></div>
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||||
|
<script>
|
||||||
|
// Initialize the map
|
||||||
|
const map = L.map('map').setView([43.5683, 1.4705], 16); // Centered near the polygon
|
||||||
|
|
||||||
|
// Add a tile layer (OpenStreetMap)
|
||||||
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||||
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||||
|
}).addTo(map);
|
||||||
|
|
||||||
|
// Fetch GeoJSON data from a file or URL
|
||||||
|
fetch('map.geojson') // Replace with your GeoJSON file path or URL
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(geojsonData => {
|
||||||
|
// Add GeoJSON data to the map
|
||||||
|
const geoJsonLayer = L.geoJSON(geojsonData, {
|
||||||
|
onEachFeature: (feature, layer) => {
|
||||||
|
// Add a popup to each feature
|
||||||
|
if (feature.properties && feature.properties.name) {
|
||||||
|
layer.bindPopup(`<strong>${feature.properties.name}</strong>`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}).addTo(map);
|
||||||
|
|
||||||
|
// Fit the map to the bounds of the GeoJSON layer
|
||||||
|
map.fitBounds(geoJsonLayer.getBounds());
|
||||||
|
})
|
||||||
|
.catch(error => console.error('Error loading GeoJSON:', error));
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Laden …
In neuem Issue referenzieren