Carte GPX avec Ic\u00f4ne de Recherche<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.css\" \/>\n <style>\n #map {\n height: 600px;\n width: 100%;\n }\n #elevationChart {\n width: 100%;\n height: 300px;\n margin: 20px auto;\n }\n .download-btn {\n margin-top: 10px;\n display: inline-block;\n padding: 10px;\n background-color: #4CAF50;\n color: white;\n text-decoration: none;\n border-radius: 5px;\n }\n .download-btn:hover {\n background-color: #45a049;\n }\n .action-buttons {\n position: absolute;\n top: 140px;\n right: 10px;\n z-index: 1000;\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n .action-buttons button {\n background-color: #4CAF50;\n border: none;\n padding: 10px;\n border-radius: 50%;\n cursor: pointer;\n color: white;\n font-size: 20px;\n width: 40px;\n height: 40px;\n text-align: center;\n }\n .action-buttons button:hover {\n background-color: #45a049;\n }\n .search-icon {\n position: absolute;\n top: 70px;\n right: 10px;\n z-index: 1000;\n background: #4CAF50;\n padding: 10px;\n border-radius: 50%;\n cursor: pointer;\n font-size: 20px;\n color: white;\n text-align: center;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n transition: background-color 0.3s, transform 0.3s;\n }\n .search-icon:hover {\n background-color: #45a049;\n transform: scale(1.1);\n }\n <\/style>\n<\/head>\n<body data-rsssl=1 data-rsssl=1>\n <div id=\"map\"><\/div>\n <div class=\"search-icon\" id=\"searchIcon\">\ud83d\udd0d<\/div>\n <div class=\"action-buttons\">\n <button id=\"viewTrace\" title=\"Visualiser la trace\">\ud83d\udc41\ufe0f<\/button>\n <button id=\"clearTrace\" title=\"Effacer la trace\">\ud83e\uddf9<\/button>\n <button id=\"printTrace\" title=\"Imprimer la carte\">\ud83d\udda8\ufe0f<\/button>\n <button id=\"shareTrace\" title=\"Partager la trace\">\ud83d\udd17<\/button>\n <\/div>\n <canvas id=\"elevationChart\"><\/canvas>\n\n <script src=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet-gpx\/1.4.0\/gpx.min.js\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <script>\n var map = L.map('map').setView([49.0261, 2.2350], 13);\n\n \/\/ Couches de carte\n var osmLayer = L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n attribution: '\u00a9 OpenStreetMap contributors',\n maxZoom: 18\n }).addTo(map);\n\n var satelliteLayer = L.tileLayer('https:\/\/{s}.tile.opentopomap.org\/{z}\/{x}\/{y}.png', {\n attribution: '\u00a9 OpenTopoMap contributors'\n });\n\n var terrainLayer = L.tileLayer('https:\/\/{s}.tile.thunderforest.com\/landscape\/{z}\/{x}\/{y}.png?apikey=b0360a1954ec4389be8ca55bd0bae48b', {\n attribution: '\u00a9 Thunderforest, OpenStreetMap contributors'\n });\n\n \/\/ Contr\u00f4le pour basculer entre les couches de carte\n var baseLayers = {\n \"OpenStreetMap\": osmLayer,\n \"Satellite\": satelliteLayer,\n \"Terrain\": terrainLayer\n };\n L.control.layers(baseLayers).addTo(map);\n\n \/\/ Ic\u00f4nes personnalis\u00e9es pour les points de d\u00e9part et d'arriv\u00e9e\n var startIcon = L.icon({\n iconUrl: 'https:\/\/action-form.com\/wp-content\/uploads\/epingle.png',\n iconSize: [25, 41],\n iconAnchor: [12, 41]\n });\n var endIcon = L.icon({\n iconUrl: 'https:\/\/action-form.com\/wp-content\/uploads\/embarquement.png',\n iconSize: [25, 41],\n iconAnchor: [12, 41]\n });\n var gpxDataList = [\n { name: \"Avernes-95-Villers-vermont-60-98 km\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Avernes-95-Villers-vermont-60-98-km.gpx\", coords: [49.05, 2.25], distance: \"98 km\", elevation: \"1000 m\", difficulty: \"Difficile\" },\n { name: \"Cergy le haut - Guiry - Cergy le haut 36 km\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Cergy-le-Haut-Guiry-Cergy-le-Haut-36-km.gpx\", coords: [49.04, 2.05], distance: \"36 km\", elevation: \"500 m\", difficulty: \"Mod\u00e9r\u00e9\" },\n { name: \"Presles for\u00eat de Carnelle (95) 20 km\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Presles-foret-de-Carnelle-95-20-kms.gpx\", coords: [49.12, 2.3], distance: \"20 km\", elevation: \"300 m\", difficulty: \"Difficile\" },\n { name: \"Villers Vermont (60) - Gerberoy (60) - Avernes (95) 100 km\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Villers-Vermont-60-Gerberoy-60-Avernes-95-100KM.gpx\", coords: [49.08, 2.4], distance: \"100 km\", elevation: \"1100 m\", difficulty: \"Difficile\" },\n { name: \"Cyclo route Auvers-Auvers 47 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Cyclo-route-Auvers-Auvers-47-kms-OK.gpx\", coords: [49.08, 2.4], distance: \"47 km\", elevation: \"500 m\", difficulty: \"Mod\u00e9r\u00e9\", address: \"Au d\u00e9part du 31 rue Fran\u00e7ois Mitterrand (gendarmerie). Possibilit\u00e9 de se garer rue Pierre B\u00e9r\u00e9govoy \u00e0 Auvers sur Oise\"},\n { name: \"Villers Vermont (60) - Gerberoy (60) - Avernes (95) 100 km\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Villers-Vermont-60-Gerberoy-60-Avernes-95-100KM.gpx\", coords: [49.08, 2.4], distance: \"100 km\", elevation: \"1100 m\", difficulty: \"Difficile\" },\n { name: \"Cyclo route Auvers-Auvers 92 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Cyclo-route-Auvers-Auvers-92-kms-OK.gpx\", coords: [49.09, 2.4], distance: \"92 km\", elevation: \"800 m\", difficulty: \"Difficile\" },\n { name: \"Cyclo route Auvers-Auvers 38 kms (Auversoise)\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Cyclo-route-Auvers-Auvers-38-kms-Auversoise-OK.gpx\", coords: [49.1, 2.35], distance: \"38 km\",address: \"Au d\u00e9part de la rue des Ponceaux \u00e0 Auvers sur Oise\", elevation: \"300 m\", difficulty: \"Facile\" },\n { name: \"Cyclo route Auvers-Auvers 75 kms (Auversoise)\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Cyclo-route-Auvers-Auvers-75-kms-Auversoise-OK.gpx\", coords: [49.1, 2.38], distance: \"75 km\", elevation: \"700 m\", difficulty: \"Mod\u00e9r\u00e9\" },\n { name: \"Cyclo route Auvers-Auvers 88 kms (Auversosie)\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Cyclo-route-Auvers-Auvers-88-kms-Auversosie-OK.gpx\", coords: [49.12, 2.4], distance: \"88 km\", elevation: \"900 m\", difficulty: \"Difficile\" },\n { name: \"Cyclo route Auvers-Pierrefond 81 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Cyclo-route-Auvers-Pierrefond-81-kms-OK.gpx\", coords: [49.14, 2.32], distance: \"81 km\", elevation: \"750 m\", difficulty: \"Mod\u00e9r\u00e9\" },\n { name: \"Cyclo route Isle Adam-Isle Adam 56 kms (Adamoise)\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Cyclo-route-Isle-Adam-Isle-Adam-56-kms-Adamoise-OK.gpx\", coords: [49.1, 2.22], distance: \"56 km\", elevation: \"400 m\", difficulty: \"Facile\" },\n { name: \"Cyclo route Isle Adam-Isle Adam 75 kms (Adamoise)\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Cyclo-route-Isle-Adam-Isle-Adam-75-kms-Adamoise-OK.gpx\", coords: [49.13, 2.23], distance: \"75 km\", elevation: \"700 m\", difficulty: \"Mod\u00e9r\u00e9\" },\n { name: \"Cyclo route Isle Adam-Isle Adam 93 kms (Adamoise)\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Cyclo-route-Isle-Adam-Isle-Adam-93-kms-Adamoise.gpx\", coords: [49.14, 2.25], distance: \"93 km\", elevation: \"850 m\", difficulty: \"Difficile\" },\n { name: \"Cyclo route Isle Adam-Isle Adam 114 kms (Adamoise)\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Cyclo-route-Isle-Adam-Isle-Adam-114-kms-Adamoise-OK.gpx\", coords: [49.15, 2.26], distance: \"114 km\", elevation: \"1000 m\", difficulty: \"Difficile\" },\n { name: \"Cyclo route M\u00e9riel-M\u00e9riel 48 kms (M\u00e9rielloise)\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Cyclo-route-Meriel-Meriel-48-kms-Merielloise.gpx\", coords: [49.12, 2.28], distance: \"48 km\", elevation: \"300 m\", difficulty: \"Facile\" },\n { name: \"Cyclo route M\u00e9riel-M\u00e9riel 75 kms (M\u00e9rielloise)\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/cyclo-route-Meriel-Meriel-75-kms-Merielloise.gpx\", coords: [49.13, 2.29], distance: \"75 km\", elevation: \"600 m\", difficulty: \"Mod\u00e9r\u00e9\" },\n { name: \"Cyclo route M\u00e9riel-M\u00e9riel 91 kms (M\u00e9rielloise)\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Cyclo-route-Meriel-Meriel-91-kms-Merielloise.gpx\", coords: [49.14, 2.3], distance: \"91 km\", elevation: \"850 m\", difficulty: \"Difficile\" },\n \/\/ Ajoutez les autres traces ici...\n ];\n var gpxPolyline, chart;\n function displayGPXOnMap(gpxData) {\n if (gpxPolyline) {\n map.removeLayer(gpxPolyline);\n }\n gpxPolyline = new L.GPX(gpxData.url, {\n async: true,\n marker_options: {\n startIcon: startIcon,\n endIcon: endIcon\n },\n polyline_options: { color: 'blue', weight: 5 }\n }).on('loaded', function(e) {\n map.fitBounds(e.target.getBounds());\n \/\/ Charger les donn\u00e9es d'\u00e9l\u00e9vation et mettre \u00e0 jour le graphique\n extractElevationData(e.target);\n }).addTo(map);\n }\n\n function extractElevationData(gpxLayer) {\n var elevationData = [];\n var totalDistance = 0;\n\n gpxLayer.getLayers()[0].getLatLngs().forEach(function(point, index, points) {\n if (index > 0) {\n totalDistance += point.distanceTo(points[index - 1]);\n }\n elevationData.push(point.alt);\n });\n\n displayElevationChart(elevationData);\n }\n\n function displayElevationChart(elevationData) {\n if (chart) chart.destroy();\n var ctx = document.getElementById('elevationChart').getContext('2d');\n chart = new Chart(ctx, {\n type: 'line',\n data: {\n labels: Array.from({ length: elevationData.length }, (_, i) => `${(i * 1).toFixed(1)} km`),\n datasets: [{\n label: \"\u00c9l\u00e9vation (m)\",\n data: elevationData,\n borderColor: \"blue\",\n fill: false\n }]\n }\n });\n }\n \/\/ Ajout de l'\u00e9chelle\n L.control.scale().addTo(map);\n\n \/\/ Ajout des marqueurs pour chaque GPX\n gpxDataList.forEach(function(gpxData) {\n var marker = L.marker(gpxData.coords).addTo(map);\n marker.bindPopup(`\n <strong>${gpxData.name}<\/strong><br>\n Distance: ${gpxData.distance}<br>\n \u00c9l\u00e9vation: ${gpxData.elevation}<br>\n Difficult\u00e9: ${gpxData.difficulty}<br>\n <button class=\"download-btn\" onclick=\"downloadGPX('${gpxData.url}')\">T\u00e9l\u00e9charger GPX<\/button>\n `);\n marker.on('click', function() {\n displayGPXOnMap(gpxData);\n });\n });\n \/\/ Ajout des marqueurs pour chaque GPX avec des num\u00e9ros fixes\ngpxDataList.forEach(function(gpxData, index) {\n var marker = L.marker(gpxData.coords, {\n icon: L.divIcon({\n className: 'custom-marker-icon',\n html: `<div style=\"background: white; border-radius: 50%; border: 2px solid black; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-weight: bold;\">${index + 1}<\/div>`,\n iconSize: [30, 30], \/\/ Ajustez si n\u00e9cessaire\n iconAnchor: [15, 15] \/\/ Centr\u00e9 sur le point\n })\n }).addTo(map);\n\n marker.bindPopup(`\n <strong>${gpxData.name}<\/strong><br>\n Distance: ${gpxData.distance}<br>\n \u00c9l\u00e9vation: ${gpxData.elevation}<br>\n Difficult\u00e9: ${gpxData.difficulty}<br>\n <button class=\"download-btn\" onclick=\"downloadGPX('${gpxData.url}')\">T\u00e9l\u00e9charger GPX<\/button>\n `);\n marker.on('click', function() {\n displayGPXOnMap(gpxData);\n });\n });\n \/\/ T\u00e9l\u00e9charger le GPX\n function downloadGPX(gpxUrl) {\n var link = document.createElement('a');\n link.href = gpxUrl;\n link.download = gpxUrl.split('\/').pop();\n link.click();\n }\n\n \/\/ \u00c9v\u00e9nements des boutons d'action\n document.getElementById('viewTrace').addEventListener('click', function() {\n if (gpxPolyline) {\n map.fitBounds(gpxPolyline.getBounds());\n }\n });\n\n document.getElementById('clearTrace').addEventListener('click', function() {\n if (gpxPolyline) {\n map.removeLayer(gpxPolyline);\n }\n });\n\n document.getElementById('printTrace').addEventListener('click', function() {\n window.print();\n });\n\n document.getElementById('shareTrace').addEventListener('click', function() {\n alert('Partager la trace via un lien');\n });\n\n \/\/ Fonction de recherche (actuellement juste un texte)\n document.getElementById('searchIcon').addEventListener('click', function() {\n alert('Fonction de recherche');\n });\n \n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-47f560e5 elementor-widget elementor-widget-html\" data-id=\"47f560e5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Fichiers GPX et Graphique de D\u00e9nivel\u00e9<\/title>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <style>\n \/* Style pour le menu d\u00e9roulant *\/\n .dropdown {\n position: relative;\n display: inline-block;\n margin: 10px;\n font-family: Arial, sans-serif;\n }\n .dropbtn {\n background-color: #4CAF50;\n color: white;\n padding: 14px 20px;\n font-size: 16px;\n border: none;\n cursor: pointer;\n border-radius: 8px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n transition: background-color 0.3s, box-shadow 0.3s;\n }\n .dropbtn:hover {\n background-color: #388E3C;\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);\n }\n\n .dropdown-content {\n display: none;\n position: absolute;\n background-color: #f9f9f9;\n min-width: 280px;\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);\n z-index: 1;\n border-radius: 8px;\n padding: 10px;\n overflow: hidden;\n }\n\n .dropdown:hover .dropdown-content {\n display: block;\n }\n\n .dropdown-content a {\n color: #2e7d32;\n padding: 12px 16px;\n text-decoration: none;\n display: flex;\n align-items: center;\n border-bottom: 1px solid #e0e0e0;\n transition: background-color 0.2s, color 0.2s;\n }\n\n .dropdown-content a:hover {\n background-color: #e8f5e9;\n color: #1b5e20;\n }\n\n .dropdown-content a:last-child {\n border-bottom: none;\n }\n\n .dropdown-content img {\n width: 28px;\n height: 28px;\n margin-right: 10px;\n }\n\n \/* Style pour le graphique *\/\n #elevationChart {\n margin-top: 20px;\n }\n <\/style>\n<\/head>\n<body data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1>\n \n <div class=\"dropdown\">\n <button class=\"dropbtn\">FICHIERS GPX VTT<\/button>\n <div class=\"dropdown-content\">\n <a href=\"https:\/\/action-form.com\/wp-content\/uploads\/Cergy-le-Haut-Guiry-Cergy-le-Haut-36-km.gpx\" download=\"Cergy-le-Haut-Guiry-Cergy-le-Haut-36-km.gpx\">\n <img decoding=\"async\" src=\"https:\/\/img.icons8.com\/ios-filled\/50\/4CAF50\/mountain-bike.png\" alt=\"Ic\u00f4ne VTT\">\n Cergy le haut - Guiry - Cergy le Haut 36 km\n <\/a>\n <a href=\"https:\/\/action-form.com\/wp-content\/uploads\/Presles-foret-de-Carnelle-95-20-kms.gpx\" download=\"Presles-foret-de-Carnelle-95-20-kms.gpx\">\n <img decoding=\"async\" src=\"https:\/\/img.icons8.com\/ios-filled\/50\/4CAF50\/mountain-bike.png\" alt=\"Ic\u00f4ne VTT\">\n Presles for\u00eat de Carnelle (95) 20 km\n <\/a>\n <a href=\"https:\/\/action-form.com\/wp-content\/uploads\/Villers-Vermont-60-Gerberoy-60-Avernes-95-100KM.gpx\" download=\"Villers-Vermont-60-Gerberoy-60-Avernes-95-100KM.gpx\">\n <img decoding=\"async\" src=\"https:\/\/img.icons8.com\/ios-filled\/50\/4CAF50\/mountain-bike.png\" alt=\"Ic\u00f4ne VTT\">\n Villers Vermont (60) - Gerberoy (60) - Avernes (95) 100 km\n <\/a>\n <a href=\"https:\/\/action-form.com\/wp-content\/uploads\/Avernes-95-Villers-vermont-60-98-km.gpx\" download=\"Avernes-95-Villers-vermont-60-98-km.gpx\">\n <img decoding=\"async\" src=\"https:\/\/img.icons8.com\/ios-filled\/50\/4CAF50\/mountain-bike.png\" alt=\"Ic\u00f4ne VTT\">\n Avernes (95) - Villers - Vermont (60) - 98 km\n <\/a>\n <\/div>\n <\/div>\n \n <div class=\"dropdown\">\n <button class=\"dropbtn\">FICHIERS GPX RANDONN\u00c9ES P\u00c9DESTRES<\/button>\n <div class=\"dropdown-content\">\n <a href=\"https:\/\/action-form.com\/wp-content\/uploads\/Auvers-Auvers-9-kms.gpx\" download=\"Auvers-Auvers-9-kms.gpx\">\n <img decoding=\"async\" src=\"https:\/\/img.icons8.com\/ios-filled\/50\/8D6E63\/hiking.png\" alt=\"Ic\u00f4ne Randonn\u00e9e\">\n Auvers - Auvers 9 kms\n <\/a>\n <\/div>\n <\/div>\n\n \n <canvas id=\"elevationChart\" width=\"600\" height=\"400\"><\/canvas>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-62e7f5aa elementor-widget elementor-widget-html\" data-id=\"62e7f5aa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Graphique D\u00e9nivel\u00e9 - GPX<\/title>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/togeojson\/0.16.0\/togeojson.min.js\"><\/script>\n <style>\n \/* Styles pour le graphique *\/\n #elevationChart {\n margin-top: 20px;\n }\n <\/style>\n<\/head>\n<body data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1>\n\n \n <canvas id=\"elevationChart\" width=\"600\" height=\"400\"><\/canvas>\n\n <script>\n \/\/ Fonction pour calculer la distance entre deux points GPS (en km)\n function haversine(lat1, lon1, lat2, lon2) {\n const R = 6371; \/\/ Rayon de la Terre en km\n const toRad = deg => deg * Math.PI \/ 180;\n const dLat = toRad(lat2 - lat1);\n const dLon = toRad(lon2 - lon1);\n const a = Math.sin(dLat \/ 2) * Math.sin(dLat \/ 2) +\n Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) *\n Math.sin(dLon \/ 2) * Math.sin(dLon \/ 2);\n const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));\n return R * c;\n }\n\n \/\/ Lecture et extraction des donn\u00e9es du fichier GPX\n async function loadGPXData(url) {\n const response = await fetch(url);\n const text = await response.text();\n const parser = new DOMParser();\n const xmlDoc = parser.parseFromString(text, \"application\/xml\");\n const trackPoints = xmlDoc.getElementsByTagName(\"trkpt\");\n\n const distances = [];\n const elevations = [];\n let cumulativeDistance = 0;\n\n for (let i = 0; i < trackPoints.length; i++) {\n const lat = parseFloat(trackPoints[i].getAttribute(\"lat\"));\n const lon = parseFloat(trackPoints[i].getAttribute(\"lon\"));\n const elevation = parseFloat(trackPoints[i].getElementsByTagName(\"ele\")[0].textContent);\n\n if (i > 0) {\n const prevLat = parseFloat(trackPoints[i - 1].getAttribute(\"lat\"));\n const prevLon = parseFloat(trackPoints[i - 1].getAttribute(\"lon\"));\n cumulativeDistance += haversine(prevLat, prevLon, lat, lon);\n }\n\n distances.push(cumulativeDistance.toFixed(2)); \/\/ Limiter \u00e0 2 d\u00e9cimales\n elevations.push(elevation);\n }\n\n return { distances, elevations };\n }\n\n \/\/ Charger les donn\u00e9es et afficher le graphique\n async function renderChart() {\n const gpxUrl = \"https:\/\/action-form.com\/wp-content\/uploads\/Cergy-le-Haut-Guiry-Cergy-le-Haut-36-km.gpx\";\n const { distances, elevations } = await loadGPXData(gpxUrl);\n\n const ctx = document.getElementById('elevationChart').getContext('2d');\n new Chart(ctx, {\n type: 'line',\n data: {\n labels: distances, \/\/ Distances cumul\u00e9es\n datasets: [{\n label: 'Altitude (m)',\n data: elevations, \/\/ Altitudes\n borderColor: 'blue',\n backgroundColor: 'rgba(0, 0, 255, 0.2)',\n fill: true,\n tension: 0.4,\n }]\n },\n options: {\n responsive: true,\n plugins: {\n legend: {\n position: 'top',\n },\n title: {\n display: true,\n text: 'D\u00e9nivel\u00e9 - Cergy le Haut - Guiry'\n }\n },\n scales: {\n x: {\n title: {\n display: true,\n text: 'Distance (km)'\n }\n },\n y: {\n title: {\n display: true,\n text: 'Altitude (m)'\n }\n }\n }\n }\n });\n }\n\n \/\/ Initialisation\n renderChart();\n <\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Parcours GPS Visualisation de traces GPX Carte GPX avec Ic\u00f4ne de Recherche \ud83d\udd0d \ud83d\udc41\ufe0f \ud83e\uddf9 \ud83d\udda8\ufe0f \ud83d\udd17 Fichiers GPX et Graphique de D\u00e9nivel\u00e9 FICHIERS GPX VTT Cergy le haut – Guiry – Cergy le Haut 36 km Presles for\u00eat de Carnelle (95) 20 km Villers Vermont (60) – Gerberoy (60) – Avernes (95) 100 km […]<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7694","page","type-page","status-publish","hentry","wpbf-post"],"_links":{"self":[{"href":"https:\/\/action-form.com\/index.php\/wp-json\/wp\/v2\/pages\/7694","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/action-form.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/action-form.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/action-form.com\/index.php\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/action-form.com\/index.php\/wp-json\/wp\/v2\/comments?post=7694"}],"version-history":[{"count":8,"href":"https:\/\/action-form.com\/index.php\/wp-json\/wp\/v2\/pages\/7694\/revisions"}],"predecessor-version":[{"id":7781,"href":"https:\/\/action-form.com\/index.php\/wp-json\/wp\/v2\/pages\/7694\/revisions\/7781"}],"wp:attachment":[{"href":"https:\/\/action-form.com\/index.php\/wp-json\/wp\/v2\/media?parent=7694"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}