Carte GPX avec Altitude<\/title>\n \n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.css\" \/>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n \/* Custom styles for responsiveness and appearance that Tailwind doesn't cover directly *\/\n body {\n font-family: 'Inter', sans-serif;\n \/* Using overflow-hidden on body to prevent overall scrolling due to flexbox layout on mobile.\n Individual sections will scroll if content exceeds their height. *\/\n overflow: hidden;\n }\n\n \/* Mobile-first approach: By default, panel and map\/chart take proportional height *\/\n #main-container {\n height: 100vh; \/* Ensure the main container takes full viewport height *\/\n display: flex;\n flex-direction: column; \/* Stack vertically on small screens *\/\n }\n\n #info-panel {\n \/* On small screens, take a fixed proportion of the viewport height *\/\n height: 45vh; \/* Info panel takes 45% of viewport height on mobile *\/\n flex-shrink: 0; \/* Prevent it from shrinking *\/\n overflow-y: auto; \/* Allow scrolling within the panel if content overflows *\/\n }\n\n #map-and-chart {\n \/* On small screens, map and chart take the remaining height *\/\n height: 55vh; \/* Map\/chart section takes 55% of viewport height on mobile *\/\n display: flex;\n flex-direction: column;\n flex-grow: 1; \/* Allow it to grow and fill remaining space *\/\n }\n\n #map {\n height: 60%; \/* Map takes 60% of map-and-chart container *\/\n width: 100%;\n }\n\n #elevationChartContainer {\n height: 40%; \/* Chart takes 40% of map-and-chart container *\/\n width: 100%;\n padding: 10px;\n background: white;\n box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);\n }\n\n canvas {\n width: 100% !important;\n height: 100% !important;\n }\n\n \/* Hide scrollbar for info panel but allow scrolling *\/\n #info-panel::-webkit-scrollbar {\n display: none;\n }\n #info-panel {\n -ms-overflow-style: none; \/* IE and Edge *\/\n scrollbar-width: none; \/* Firefox *\/\n }\n\n \/* Responsive styles for larger screens (lg breakpoint) *\/\n @media (min-width: 1024px) {\n #main-container {\n flex-direction: row; \/* Layout horizontally on large screens *\/\n }\n #info-panel {\n height: 70%; \/* Full height on large screens *\/\n width: 25%; \/* 1\/4 width on large screens *\/\n }\n #map-and-chart {\n height: 70%; \/* Full height on large screens *\/\n width: 75%; \/* 3\/4 width on large screens *\/\n }\n }\n <\/style>\n<\/head>\n<body data-rsssl=1 data-rsssl=1 data-rsssl=1 class=\"bg-gray-50 text-gray-800\">\n <div id=\"main-container\" class=\"m-0 p-0\">\n \n <div id=\"info-panel\" class=\"w-full bg-white p-4 shadow-lg rounded-lg m-2\">\n <h2 class=\"text-2xl font-bold mb-4 text-gray-700\">Les Parcours<\/h2>\n <div class=\"info bg-blue-50 border border-blue-200 text-blue-800 p-3 rounded-md mb-3 shadow-sm\">\n <strong class=\"font-semibold\">D\u00e9part:<\/strong> <span id=\"depart\">S\u00e9lectionnez une trace<\/span>\n <\/div>\n <div class=\"info bg-green-50 border border-green-200 text-green-800 p-3 rounded-md mb-3 shadow-sm\">\n <strong class=\"font-semibold\">Distance:<\/strong> <span id=\"distance\">-<\/span>\n <\/div>\n <div class=\"info bg-yellow-50 border border-yellow-200 text-yellow-800 p-3 rounded-md mb-3 shadow-sm\">\n <strong class=\"font-semibold\">D\u00e9nivel\u00e9:<\/strong> <span id=\"denivele\">-<\/span>\n <\/div>\n <div class=\"info bg-red-50 border border-red-200 text-red-800 p-3 rounded-md mb-3 shadow-sm\">\n <strong class=\"font-semibold\">Difficult\u00e9:<\/strong> <span id=\"difficulty\">-<\/span>\n <\/div>\n\n <label for=\"gpxSelectVTT\" class=\"block text-sm font-medium text-gray-700 mb-1 mt-4\">Traces VTT :<\/label>\n <select id=\"gpxSelectVTT\" class=\"block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 mb-4\">\n <option value=\"\">-- Choisir une trace --<\/option>\n <\/select>\n\n <label for=\"gpxSelectCyclo\" class=\"block text-sm font-medium text-gray-700 mb-1\">Traces Cyclo :<\/label>\n <select id=\"gpxSelectCyclo\" class=\"block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 mb-4\">\n <option value=\"\">-- Choisir une trace --<\/option>\n <\/select>\n\n <label for=\"gpxSelectPedestre\" class=\"block text-sm font-medium text-gray-700 mb-1\">Traces P\u00e9destre :<\/label>\n <select id=\"gpxSelectPedestre\" class=\"block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 mb-4\">\n <option value=\"\">-- Choisir une trace --<\/option>\n <\/select>\n\n <button id=\"downloadButton\" class=\"w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-md shadow-lg transition duration-300 ease-in-out transform hover:scale-105 mb-4\">\n T\u00e9l\u00e9charger la Trace GPX\n <\/button>\n <div id=\"messageBox\" class=\"mt-4 p-3 bg-yellow-100 border border-yellow-400 text-yellow-700 rounded-md hidden\"><\/div>\n <\/div>\n\n \n <div id=\"map-and-chart\" class=\"w-full m-2\">\n \n <div id=\"map-2d-container\" class=\"w-full h-full rounded-lg shadow-lg\">\n <div id=\"map\" class=\"w-full rounded-lg mb-2\"><\/div>\n <div id=\"elevationChartContainer\" class=\"w-full rounded-lg\">\n <canvas id=\"elevationChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <script src=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.js\"><\/script>\n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet-gpx\/1.5.0\/gpx.min.js\"><\/script>\n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n\n <script>\n \/\/ --- Leaflet (2D Map) Initialization ---\n const map = L.map('map').setView([48.8566, 2.3522], 12); \/\/ Centered on Paris\n\n const osm = L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n attribution: '© <a href=\"https:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a> contributors'\n });\n const esriTopo = L.tileLayer('https:\/\/server.arcgisonline.com\/ArcGIS\/rest\/services\/World_Topo_Map\/MapServer\/tile\/{z}\/{y}\/{x}', {\n attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community'\n });\n const esriImagery = L.tileLayer('https:\/\/server.arcgisonline.com\/ArcGIS\/rest\/services\/World_Imagery\/MapServer\/tile\/{z}\/{y}\/{x}', {\n attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'\n });\n const openTopoMap = L.tileLayer('https:\/\/{s}.tile.opentopomap.org\/{z}\/{x}\/{y}.png', {\n maxZoom: 17,\n attribution: 'Map data: © <a href=\"https:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a> contributors, <a href=\"http:\/\/viewfinderpanoramas.org\">SRTM<\/a> | Map style: © <a href=\"https:\/\/opentopomap.org\">OpenTopoMap<\/a> (<a href=\"https:\/\/creativecommons.org\/licenses\/by-sa\/3.0\/\">CC-BY-SA<\/a>)'\n });\n\n const baseMaps = {\n \"Standard (OpenStreetMap)\": osm,\n \"Topographique (Esri)\": esriTopo,\n \"Satellite (Esri)\": esriImagery,\n \"Topographique (OpenTopoMap)\": openTopoMap\n };\n osm.addTo(map); \/\/ Default base map\n L.control.layers(baseMaps).addTo(map); \/\/ Layer control for 2D map\n\n \/\/ Add map scale control\n L.control.scale().addTo(map);\n\n const startIcon = L.icon({ iconUrl: \"https:\/\/action-form.com\/wp-content\/uploads\/embarquement.png\", iconSize: [32, 32], iconAnchor: [16, 32] });\n const endIcon = L.icon({ iconUrl: \"https:\/\/action-form.com\/wp-content\/uploads\/pin-icon-start.png\", iconSize: [32, 32], iconAnchor: [16, 32] });\n\n let currentGpxLayer = null;\n let chart = null;\n\n \/\/ --- Data Lists ---\n const gpxDataListVTT = [\n { name: \"VTT Auvers sur Oise 25 km\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/6-VTT-25-kms-auversoise-ok.gpx\", distance: \"25 km\", elevation: \"254 m\", difficulty: \"FACILE\", departure: \"Rue des Ponceaux, Auvers sur Oise\" },\n { name: \"VTT Auvers sur Oise-Auvers sur Oise 40 Kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/8-VTT-40-kms-auversoise-ok.gpx\", distance: \"40 kms\", elevation: \"380 m\", difficulty: \"INTERMEDIAIRES\", departure: \"Au d\u00e9part de la rue des Ponceaux \u00e0 Auvers sur Oise, 40 kms dans le Vexin (L\u2019Auversoise)\" },\n { name: \"VTT Auvers sur Oise-Auvers sur Oise 50 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/10-VTT-50-kms-auversoise-ok.gpx\", distance: \"50 kms\", elevation: \"564 m\", difficulty: \"AVERTIS\", departure:\"Au d\u00e9part de la rue des Ponceaux \u00e0 Auvers sur Oise, 50 kms dans le Vexin(L\u2019Auversoise)\"},\n { name: \"VTT Auvers sur Oise-Auvers sur Oise 22 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/12-VTT-auvers-foret-isle-adam-auvers-22-km-OK.gpx\", distance: \"22 kms\", elevation: \"354 m\", difficulty: \"FACILE\", departure:\"Au d\u00e9part Auvers sur Oise, rue B\u00e9r\u00e9govoy ou centre-ville 22 kms le long des berges et dans la for\u00eat de l\u2019Isle Adam.\"},\n { name: \"VTT Auvers sur Oise-Giverny 79 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/13-VTT-auvers-giverny-79-kms-OK.gpx\", distance: \"79 kms\", elevation: \"626 m\", difficulty: \"INTERMEDIAIRE\", departure:\"Au d\u00e9part de Auvers sur Oise jusqu\u2019\u00e0 Giverny, 79 kms sur la Paris Londres.\"},\n { name: \"VTT Auvers sur Oise-Auvers sur Oise 35 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/14-vtt-auvers-par-chemin-pierres-35-kms-OK.gpx\", distance: \"35 kms\", elevation: \"500 m\", difficulty: \"INTERMEDIAIRE\", departure:\"Au d\u00e9part de Auvers sur Oise, rue B\u00e9r\u00e9govoy, 35 kms un peu techniques par endroit.\"},\n { name: \"VTT Auvers sur Oise-Auvers sur Oise 34 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/15-vtt-auvers-par-tour-du-laye-33-kms-super-OK.gpx\", distance: \"34 kms\", elevation: \"784 m\", difficulty: \"INTERMEDIAIRE\", departure:\"Au d\u00e9part de Auvers sur Oise, rue B\u00e9r\u00e9govoy ou centre-ville 34 kms en direction de la Tour du Laye.(for\u00eat de l\u2019Isle Adam)\"},\n { name: \"VTT Avernes-95-Villers-vermont-60-98 km\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Avernes-95-Villers-vermont-60-98-km.gpx\", distance: \"98 kms\", elevation: \"1000 m\", difficulty: \"Difficile\", departure: \"Au d\u00e9part de la route foresti\u00e8re du Bois Franc (en haut de la rue des Bonshommes)\" },\n { name: \"VTT 4 C\u00e8dres-4 C\u00e8dres 17 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/VTT-17-Kms-Villers-en-Arthies-Villers-en-Arthies.gpx\", distance: \"13 km\", elevation: \"100 m\", difficulty: \"FACILE\", departure: \"Au d\u00e9part du parking des 4 c\u00e8dres \u00e0 Saint Leu la For\u00eat.Un parcours pas trop exigent mais bon choix pour d\u00e9couvrir la for\u00eat.\" },\n { name: \"VTT Cergy le haut - Guiry - Cergy le haut 36 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Cergy-le-Haut-Guiry-Cergy-le-Haut-36-km.gpx\", distance: \"36 km\", elevation: \"290 m\", difficulty: \"FACILE\", departure: \"Au d\u00e9part de Cergy le Haut au 8 place des 3 Gares, un parcours qui sort de la ville pour une belle balade dans le Vexin\" },\n { name: \"VTT Cimeti\u00e8re de Bouff\u00e9mont-Cimeti\u00e8re de Bouff\u00e9mont 16 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/4-VTT-16-kms-cimetiere-de-bouffemont-OK.gpx\", distance: \"16 kms\", elevation: \"584 m\", difficulty: \"FACILE\", departure: \"Au d\u00e9part du cimeti\u00e8re de Bouff\u00e9mont, rue Sainte Radogonde.Au c\u0153ur de la for\u00eat de Montmorency et sur les hauteurs pour d\u00e9couvrir ce magnifique massif forestier.\" },\n { name: \"VTT Fr\u00e9pillon-Fr\u00e9pillon 30 Kms (la Fr\u00e9pillonnaise)\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/7-VTT-30-kms-frepillonnaise-OK.gpx\", distance: \"30 kms\", elevation: \"254 m\", difficulty: \"INTERMEDIAIRES\", departure: \"Au d\u00e9part de Fr\u00e9pillon, rue du Coudray pour une belle vir\u00e9e de 30 kms dans la for\u00eat de Montmorency, et de l\u2019Isle Adam. Beaucoup de singles.(la Fr\u00e9pillonnaise)\" },\n { name: \"VTT Fr\u00e9pillon-Fr\u00e9pillon 20 kms (la Fr\u00e9pillonnaise)\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/5-VTT-20-kms-Frepillonnaise-OK.gpx\", distance: \"20 kms\", elevation: \"241 m\", difficulty: \"FACILE\", departure: \"Au d\u00e9part de Fr\u00e9pillon, rue du Coudray pour une belle vir\u00e9e de 20 kms dans la for\u00eat de Montmorency. (la Fr\u00e9pillonnaise)\" },\n { name: \"VTT Fr\u00e9pillon-Fr\u00e9pillon 40 Kms (la Fr\u00e9pillonnaise)\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/9-VTT-40-kms-frepillonnaise-OK.gpx\", distance: \"40 kms\", elevation: \"380 m\", difficulty: \"AVERTIS\", departure: \"Au d\u00e9part de Fr\u00e9pillon, rue du Coudray pour une belle vir\u00e9e de 40 kms dans la for\u00eat de Montmorency et de l\u2019Isle Adam. Beaucoup de singles. (La Fr\u00e9pillonnaise)\" },\n { name: \"VTT Pierre Turquaise-Pierre Turquaise 20 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Presles-foret-de-Carnelle-95-20-kms.gpx\", distance: \"20 kms\", elevation: \"245 m\", difficulty: \"INTERMEDIAIRE\", departure:\"Au d\u00e9part de la Pierre Turquaise (Presles) ou du lac Bleue (Saint Martin du Tertre) dans la for\u00eat de Carnelle\"},\n { name: \"VTT Route foresti\u00e8re du Bois Franc-route foresti\u00e8re du Bois Franc \/ Foret Isle Adam 13 Kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/1-VTT-route-forestiere-du-Bois-Franc-route-forestiere-du-Bois-Franc-Foret-Isle-Adam-13-kms-OK.gpx\", distance: \"13 km\", elevation: \"254 m\", difficulty: \"FACILE\", departure: \"Au d\u00e9part de la route foresti\u00e8re du Bois Franc (en haut de la rue des Bonshommes) pour d\u00e9couvrir en toute s\u00e9r\u00e9nit\u00e9 ce parcours tr\u00e8s accessible.\" },\n { name: \"VTT Santeuil-Santeuil 15 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/17-vtt-santeuil-15-kms-OK.gpx\", distance: \"15 kms\", elevation: \"100 m\", difficulty: \"FACILE\", departure:\"Au d\u00e9part des \u00e9tangs du Moulin de la Valli\u00e8re Hameau de Santeuil, 15 kms tr\u00e8s facile pour de beaux paysages.\"},\n { name: \"VTT Villers Vermont (60) - Gerberoy (60) - Avernes (95) 100 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Villers-Vermont-60-Gerberoy-60-Avernes-95-100KM.gpx\", distance: \"100 kms\", elevation: \"1100 m\", difficulty: \"AVERTIS\", departure: \"Au d\u00e9part de Villers Vermont (60)\" },\n ];\n const gpxDataListCyclo = [\n { name: \"Cyclo route Auvers-Auvers 65 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Cyclo-route-Auvers-Auvers-65-kms-OK.gpx\", distance: \"65 kms\", elevation: \"500 m\", difficulty: \"INTERMEDIAIRE\", departure: \"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: \"Cyclo route Auvers-Auvers 38 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Cyclo-route-Auvers-Auvers-38-kms-Auversoise-OK.gpx\", distance: \"38 kms\", elevation: \"500 m\", difficulty: \"FACILE\", departure: \"Au d\u00e9part de la rue des Ponceaux \u00e0 Auvers sur Oise\" },\n { name: \"Cyclo route Auvers-Auvers 47 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Cyclo-route-Auvers-Auvers-47-kms-OK.gpx\", distance: \"47 kms\", elevation: \"500 m\", difficulty: \"FACILE\", departure: \"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: \"Cyclo route Auvers-Auvers 92 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Cyclo-route-Auvers-Auvers-92-kms-OK.gpx\", distance: \"92 kms\", elevation: \"800 m\", difficulty: \"Difficile\", departure: \"Au d\u00e9part du centre-ville d'Auvers\" },\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\", distance: \"75 kms\", elevation: \"700 m\", difficulty: \"INTERMEDIAIRE\", departure: \"Au d\u00e9part de la rue des Ponceaux \u00e0 Auvers sur Oise\" },\n { name: \"Cyclo route Auvers-Pierrefond 81 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Cyclo-route-Auvers-Pierrefond-81-kms-OK.gpx\", distance: \"81 kms\", elevation: \"750 m\", difficulty: \"AVERTIS\", departure: \"Au d\u00e9part du 31 rue Fran\u00e7ois Mitterrand (gendarmerie).\" },\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\", distance: \"56 kms\", elevation: \"400 m\", difficulty: \"FACILE\", departure: \"Au d\u00e9part au 1 all\u00e9e du Dr Jean Cayeux Isle Adam\"},\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\", distance: \"75 kms\", elevation: \"700 m\", difficulty: \"INTERMEDIAIRE\", departure: \"Au d\u00e9part au 1 all\u00e9e du Dr Jean Cayeux Isle Adam\" },\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\", distance: \"93 kms\", elevation: \"850 m\", difficulty: \"AVERTIS\", departure: \"Au d\u00e9part au 1 all\u00e9e du Dr Jean Cayeux Isle Adam\"},\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\", distance: \"114 kms\", elevation: \"1000 m\", difficulty: \"Difficile\", departure: \"Au d\u00e9part du centre-ville d'Auvers\" },\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\", distance: \"48 kms\", elevation: \"300 m\", difficulty: \"FACILE\", departure: \"Au d\u00e9part Espace Rive Gauche Parc du Ch\u00e2teau Blanc \u00e0 M\u00e9riel\"},\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\", distance: \"75 kms\", elevation: \"600 m\", difficulty: \"AVERTIS\", departure: \"Au d\u00e9part Espace Rive Gauche Parc du Ch\u00e2teau Blanc \u00e0 M\u00e9riel\"},\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\", distance: \"91 kms\", elevation: \"850 m\", difficulty: \"AVERTIS\", departure: \"Au d\u00e9part Espace Rive Gauche Parc du Ch\u00e2teau Blanc \u00e0 M\u00e9riel\"},\n ];\n const gpxDataListPedestre = [\n { name: \"Rando p\u00e9destre Auvers\/Auvers 9 kms \", url:\"https:\/\/action-form.com\/wp-content\/uploads\/Auvers-Auvers-9-kms.gpx\", distance: \"9 kms\", elevation: \"111 m\", difficulty: \"FACILE\", departure: \"Au d\u00e9part du centre-ville d'Auvers (Une randonn\u00e9e tr\u00e8s facile dans la campagne Auversoise au d\u00e9part de n\u2019importe o\u00f9 en centre-ville.)\"},\n { name: \"Rando p\u00e9destre Montlignon-Montlignon 6 kms (For\u00eat de Montmorency)\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Rando-pedestre-chateau-de-la-chasse-chateau-de-la-chasse-par-route-des-fonds-foret-de-Montmorency-Montlignon-6-kms-OK.gpx\", distance: \"6 km\", elevation: \"147 m\", difficulty: \"Facile\", departure: \" D\u00e9part au 177 rue de Paris \u00e0 Montlignon (Une incursion un peu plus profonde au c\u0153ur de la for\u00eat de Montmorency. Ch\u00e2teau de la chasse et \u00e9tangs magnifiques.)\"},\n { name: \"Rando p\u00e9destre Bouff\u00e9mont-Bouff\u00e9mont 7 kms (For\u00eat de Montmorency)\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Rando-pedestre-cimetiere-de-Bouffemont-cimetiere-de-Bouffemont-7-kms-OK.gpx\", distance: \"7 km\", elevation: \"189 m\", difficulty: \"Facile\", departure: \" D\u00e9part au 9 rue Saint Radogonde .(Une autre vision de la for\u00eat de Montmorency depuis les hauteurs.)\"},\n { name: \"Rando p\u00e9destre Champagne-Champagne 12 kms (For\u00eat de l\u2019Isle Adam)\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Rando-pedestre-gare-de-Champagne-gare-de-Champagne-foret-de-lIsle-Adam12-kms-OK.gpx\", distance: \"12 km\", elevation: \"190 m\", difficulty: \"Facile\", departure: \" D\u00e9part de la gare de Champagne sur Oise, rue Pasteur.(D\u00e9couverte int\u00e9ressante d\u2019une partie de la for\u00eat de l\u2019Isle Adam \u00e0 travers cette randonn\u00e9e tr\u00e8s facile.)\"},\n { name: \"Rando p\u00e9destre Les Andelys-Les Andelys 14 kms (Hopital)\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Rando-pedestre-les-Andelys-les-Andelys-14-kms-OK.gpx\", distance: \"14 km\", elevation: \"433 m\", difficulty: \"Difficile\", departure: \" Au d\u00e9part de la rue Guynemer.( Sujets aux vertiges s\u2019abstenir ! Un chemin a\u00e9rien tr\u00e8s escarp\u00e9 pour surplomber les Andelys.Id\u00e9al pour randonneurs avertis.)\"},\n { name: \"Rando p\u00e9destre Pierre Tuquaise-Pierre Turquaise 14 kms (For\u00eat de Carnelle)\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Rando-pedestre-pierre-Turquaise-pierre-Turquaise-foret-de-Carnelle-14-kms-OK.gpx\", distance: \"14 km\", elevation: \"185 m\", difficulty: \"Interm\u00e9diaire\", departure: \"Pierre Turquaise Saint Martin du Tertre ( Une randonn\u00e9e pour d\u00e9couvrir la for\u00eat de Carnelle tranquillement et voir les all\u00e9es couvertes qui jalonneront le parcours.)\"},\n { name: \"Rando p\u00e9destre V\u00e9theuil-V\u00e9theuil 8 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Rando-pedestre-Vetheuil-Vetheuil-Bois-de-la-Chesnaie-8-km-OK.gpx\", distance: \"8 km\", elevation: \"192 m\", difficulty: \"Facile\", departure: \"Au d\u00e9part rue du Port V\u00e9theuil. (Ne pas se fier au nombre de kilom\u00e8tres ! De belles grimpettes d\u00e8s le d\u00e9part.Au d\u00e9part du bac de V\u00e9theuil, rue du Port (une vue sur la Seine \u00e0 couper le souffle).Possibilit\u00e9 selon la saison de prendre le bac pour aller faire un tour de l\u2019autre c\u00f4t\u00e9 du fleuve.\"},\n ];\n\n \/\/ Get references to the select elements and message box\n const gpxSelectVTT = document.getElementById(\"gpxSelectVTT\");\n const gpxSelectCyclo = document.getElementById(\"gpxSelectCyclo\");\n const gpxSelectPedestre = document.getElementById(\"gpxSelectPedestre\");\n const messageBox = document.getElementById(\"messageBox\");\n\n \/\/ Function to populate a select dropdown with GPX data\n function populateSelect(selectElement, dataList) {\n dataList.forEach((gpx, index) => {\n const option = document.createElement(\"option\");\n option.value = index; \/\/ Store index to easily retrieve full data object\n option.textContent = gpx.name;\n selectElement.appendChild(option);\n });\n }\n\n \/\/ Populate all three select dropdowns\n populateSelect(gpxSelectVTT, gpxDataListVTT);\n populateSelect(gpxSelectCyclo, gpxDataListCyclo);\n populateSelect(gpxSelectPedestre, gpxDataListPedestre);\n\n \/\/ Function to display a GPX trace on the map and update info\/chart\n function displayGPXOnMap(gpxUrl, data) {\n \/\/ Remove existing GPX layer if any\n if (currentGpxLayer) {\n map.removeLayer(currentGpxLayer);\n }\n\n \/\/ Update info panel with trace details\n document.getElementById(\"depart\").textContent = data.departure || \"N\/A\";\n document.getElementById(\"distance\").textContent = data.distance || \"N\/A\";\n document.getElementById(\"denivele\").textContent = data.elevation || \"N\/A\";\n document.getElementById(\"difficulty\").textContent = data.difficulty || \"N\/A\";\n\n \/\/ Create a new GPX layer and add it to the map\n currentGpxLayer = new L.GPX(gpxUrl, {\n async: true, \/\/ Load GPX asynchronously\n marker_options: {\n startIcon: startIcon, \/\/ Custom start marker icon\n endIcon: endIcon, \/\/ Custom end marker icon\n shadowUrl: '' \/\/ No shadow for markers\n },\n polyline_options: {\n color: 'blue', \/\/ Color of the GPX track line\n opacity: 0.75,\n weight: 5,\n lineCap: 'round'\n }\n }).on(\"loaded\", function(e) {\n \/\/ Fit map bounds to the loaded GPX trace\n map.fitBounds(e.target.getBounds());\n }).on(\"addline\", function(e) {\n \/\/ When the GPX line is added, extract elevation data for the chart\n const elevations = e.line._latlngs.map(p => p.meta?.ele).filter(ele => ele !== undefined);\n \/\/ Create labels for chart (simple index for now, could be distance)\n const distances = Array.from({ length: elevations.length }, (_, i) => i);\n updateChart(distances, elevations); \/\/ Update the elevation chart\n }).addTo(map);\n }\n\n \/\/ Function to update the Chart.js elevation chart\n function updateChart(labels, data) {\n \/\/ Destroy existing chart instance if it exists\n if (chart) chart.destroy();\n\n \/\/ Get the 2D rendering context of the canvas\n const ctx = document.getElementById(\"elevationChart\").getContext(\"2d\");\n\n \/\/ Create a new Chart.js instance\n chart = new Chart(ctx, {\n type: \"line\", \/\/ Line chart type\n data: {\n labels: labels, \/\/ X-axis labels (distances\/points)\n datasets: [{\n label: \"Altitude (m)\", \/\/ Dataset label\n data: data, \/\/ Y-axis data (elevations)\n borderColor: \"rgba(75, 192, 192, 1)\", \/\/ Line color\n backgroundColor: \"rgba(75, 192, 192, 0.2)\", \/\/ Area fill color\n tension: 0.3, \/\/ Curve tension for smooth lines\n fill: true\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n x: {\n display: false\n },\n y: {\n title: {\n display: true,\n text: \"Altitude (m)\"\n }\n }\n },\n plugins: {\n legend: { display: false },\n tooltip: { enabled: true }\n }\n }\n });\n }\n\n \/\/ Function to display messages in the message box\n function showMessage(message, type = 'info') {\n messageBox.textContent = message;\n messageBox.classList.remove('hidden', 'bg-yellow-100', 'border-yellow-400', 'text-yellow-700', 'bg-red-100', 'border-red-400', 'text-red-700');\n if (type === 'error') {\n messageBox.classList.add('bg-red-100', 'border-red-400', 'text-red-700');\n } else {\n messageBox.classList.add('bg-yellow-100', 'border-yellow-400', 'text-yellow-700');\n }\n messageBox.style.display = 'block';\n setTimeout(() => {\n messageBox.style.display = 'none';\n }, 3000);\n }\n\n \/\/ Event listener for VTT select dropdown\n gpxSelectVTT.addEventListener(\"change\", () => {\n \/\/ Clear other select dropdowns\n gpxSelectCyclo.value = \"\";\n gpxSelectPedestre.value = \"\";\n const selectedIndex = gpxSelectVTT.value;\n if (selectedIndex !== \"\") {\n const selected = gpxDataListVTT[selectedIndex];\n displayGPXOnMap(selected.url, selected);\n } else {\n \/\/ If no trace is selected, clear map and info\n if (currentGpxLayer) map.removeLayer(currentGpxLayer);\n if (chart) chart.destroy();\n document.getElementById(\"depart\").textContent = \"S\u00e9lectionnez une trace\";\n document.getElementById(\"distance\").textContent = \"-\";\n document.getElementById(\"denivele\").textContent = \"-\";\n document.getElementById(\"difficulty\").textContent = \"-\";\n }\n });\n\n \/\/ Event listener for Cyclo select dropdown\n gpxSelectCyclo.addEventListener(\"change\", () => {\n \/\/ Clear other select dropdowns\n gpxSelectVTT.value = \"\";\n gpxSelectPedestre.value = \"\";\n const selectedIndex = gpxSelectCyclo.value;\n if (selectedIndex !== \"\") {\n const selected = gpxDataListCyclo[selectedIndex];\n displayGPXOnMap(selected.url, selected);\n } else {\n if (currentGpxLayer) map.removeLayer(currentGpxLayer);\n if (chart) chart.destroy();\n document.getElementById(\"depart\").textContent = \"S\u00e9lectionnez une trace\";\n document.getElementById(\"distance\").textContent = \"-\";\n document.getElementById(\"denivele\").textContent = \"-\";\n document.getElementById(\"difficulty\").textContent = \"-\";\n }\n });\n\n \/\/ Event listener for Pedestre select dropdown\n gpxSelectPedestre.addEventListener(\"change\", () => {\n \/\/ Clear other select dropdowns\n gpxSelectVTT.value = \"\";\n gpxSelectCyclo.value = \"\";\n const selectedIndex = gpxSelectPedestre.value;\n if (selectedIndex !== \"\") {\n const selected = gpxDataListPedestre[selectedIndex];\n displayGPXOnMap(selected.url, selected);\n } else {\n if (currentGpxLayer) map.removeLayer(currentGpxLayer);\n if (chart) chart.destroy();\n document.getElementById(\"depart\").textContent = \"S\u00e9lectionnez une trace\";\n document.getElementById(\"distance\").textContent = \"-\";\n document.getElementById(\"denivele\").textContent = \"-\";\n document.getElementById(\"difficulty\").textContent = \"-\";\n }\n });\n\n \/\/ Event listener for the download button\n document.getElementById(\"downloadButton\").addEventListener(\"click\", function () {\n let selectedGpxUrl = \"\";\n let selectedGpxName = \"\";\n\n \/\/ Determine which category is currently selected\n if (gpxSelectVTT.value !== \"\") {\n const selected = gpxDataListVTT[gpxSelectVTT.value];\n selectedGpxUrl = selected.url;\n selectedGpxName = selected.name;\n } else if (gpxSelectCyclo.value !== \"\") {\n const selected = gpxDataListCyclo[gpxSelectCyclo.value];\n selectedGpxUrl = selected.url;\n selectedGpxName = selected.name;\n } else if (gpxSelectPedestre.value !== \"\") {\n const selected = gpxDataListPedestre[gpxSelectPedestre.value];\n selectedGpxUrl = selected.url;\n selectedGpxName = selected.name;\n }\n\n if (selectedGpxUrl) {\n \/\/ Create a temporary anchor element to trigger download\n const link = document.createElement('a');\n link.href = selectedGpxUrl;\n link.download = selectedGpxName.replace(\/[^a-z0-9]\/gi, '_').toLowerCase() + '.gpx'; \/\/ Sanitize name for filename\n document.body.appendChild(link); \/\/ Append to body (required for Firefox)\n link.click(); \/\/ Programmatically click the link to start download\n document.body.removeChild(link); \/\/ Clean up the temporary link\n } else {\n showMessage(\"Veuillez s\u00e9lectionner une trace GPX \u00e0 t\u00e9l\u00e9charger.\", 'error');\n }\n });\n <\/script>\n<\/body>\n<\/html>\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>Carte GPX avec Altitude Les Parcours D\u00e9part: S\u00e9lectionnez une trace Distance: – D\u00e9nivel\u00e9: – Difficult\u00e9: – Traces VTT : — Choisir une trace — Traces Cyclo : — Choisir une trace — Traces P\u00e9destre : — Choisir une trace — T\u00e9l\u00e9charger la Trace GPX<\/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-3653","page","type-page","status-publish","hentry","wpbf-post"],"_links":{"self":[{"href":"https:\/\/action-form.com\/index.php\/wp-json\/wp\/v2\/pages\/3653","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=3653"}],"version-history":[{"count":3469,"href":"https:\/\/action-form.com\/index.php\/wp-json\/wp\/v2\/pages\/3653\/revisions"}],"predecessor-version":[{"id":8425,"href":"https:\/\/action-form.com\/index.php\/wp-json\/wp\/v2\/pages\/3653\/revisions\/8425"}],"wp:attachment":[{"href":"https:\/\/action-form.com\/index.php\/wp-json\/wp\/v2\/media?parent=3653"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Carte GPX avec Altitude<\/title>\n \n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.css\" \/>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n \/* Custom styles for responsiveness and appearance that Tailwind doesn't cover directly *\/\n body {\n font-family: 'Inter', sans-serif;\n \/* Using overflow-hidden on body to prevent overall scrolling due to flexbox layout on mobile.\n Individual sections will scroll if content exceeds their height. *\/\n overflow: hidden;\n }\n\n \/* Mobile-first approach: By default, panel and map\/chart take proportional height *\/\n #main-container {\n height: 100vh; \/* Ensure the main container takes full viewport height *\/\n display: flex;\n flex-direction: column; \/* Stack vertically on small screens *\/\n }\n\n #info-panel {\n \/* On small screens, take a fixed proportion of the viewport height *\/\n height: 45vh; \/* Info panel takes 45% of viewport height on mobile *\/\n flex-shrink: 0; \/* Prevent it from shrinking *\/\n overflow-y: auto; \/* Allow scrolling within the panel if content overflows *\/\n }\n\n #map-and-chart {\n \/* On small screens, map and chart take the remaining height *\/\n height: 55vh; \/* Map\/chart section takes 55% of viewport height on mobile *\/\n display: flex;\n flex-direction: column;\n flex-grow: 1; \/* Allow it to grow and fill remaining space *\/\n }\n\n #map {\n height: 60%; \/* Map takes 60% of map-and-chart container *\/\n width: 100%;\n }\n\n #elevationChartContainer {\n height: 40%; \/* Chart takes 40% of map-and-chart container *\/\n width: 100%;\n padding: 10px;\n background: white;\n box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);\n }\n\n canvas {\n width: 100% !important;\n height: 100% !important;\n }\n\n \/* Hide scrollbar for info panel but allow scrolling *\/\n #info-panel::-webkit-scrollbar {\n display: none;\n }\n #info-panel {\n -ms-overflow-style: none; \/* IE and Edge *\/\n scrollbar-width: none; \/* Firefox *\/\n }\n\n \/* Responsive styles for larger screens (lg breakpoint) *\/\n @media (min-width: 1024px) {\n #main-container {\n flex-direction: row; \/* Layout horizontally on large screens *\/\n }\n #info-panel {\n height: 70%; \/* Full height on large screens *\/\n width: 25%; \/* 1\/4 width on large screens *\/\n }\n #map-and-chart {\n height: 70%; \/* Full height on large screens *\/\n width: 75%; \/* 3\/4 width on large screens *\/\n }\n }\n <\/style>\n<\/head>\n<body data-rsssl=1 data-rsssl=1 data-rsssl=1 class=\"bg-gray-50 text-gray-800\">\n <div id=\"main-container\" class=\"m-0 p-0\">\n \n <div id=\"info-panel\" class=\"w-full bg-white p-4 shadow-lg rounded-lg m-2\">\n <h2 class=\"text-2xl font-bold mb-4 text-gray-700\">Les Parcours<\/h2>\n <div class=\"info bg-blue-50 border border-blue-200 text-blue-800 p-3 rounded-md mb-3 shadow-sm\">\n <strong class=\"font-semibold\">D\u00e9part:<\/strong> <span id=\"depart\">S\u00e9lectionnez une trace<\/span>\n <\/div>\n <div class=\"info bg-green-50 border border-green-200 text-green-800 p-3 rounded-md mb-3 shadow-sm\">\n <strong class=\"font-semibold\">Distance:<\/strong> <span id=\"distance\">-<\/span>\n <\/div>\n <div class=\"info bg-yellow-50 border border-yellow-200 text-yellow-800 p-3 rounded-md mb-3 shadow-sm\">\n <strong class=\"font-semibold\">D\u00e9nivel\u00e9:<\/strong> <span id=\"denivele\">-<\/span>\n <\/div>\n <div class=\"info bg-red-50 border border-red-200 text-red-800 p-3 rounded-md mb-3 shadow-sm\">\n <strong class=\"font-semibold\">Difficult\u00e9:<\/strong> <span id=\"difficulty\">-<\/span>\n <\/div>\n\n <label for=\"gpxSelectVTT\" class=\"block text-sm font-medium text-gray-700 mb-1 mt-4\">Traces VTT :<\/label>\n <select id=\"gpxSelectVTT\" class=\"block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 mb-4\">\n <option value=\"\">-- Choisir une trace --<\/option>\n <\/select>\n\n <label for=\"gpxSelectCyclo\" class=\"block text-sm font-medium text-gray-700 mb-1\">Traces Cyclo :<\/label>\n <select id=\"gpxSelectCyclo\" class=\"block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 mb-4\">\n <option value=\"\">-- Choisir une trace --<\/option>\n <\/select>\n\n <label for=\"gpxSelectPedestre\" class=\"block text-sm font-medium text-gray-700 mb-1\">Traces P\u00e9destre :<\/label>\n <select id=\"gpxSelectPedestre\" class=\"block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 mb-4\">\n <option value=\"\">-- Choisir une trace --<\/option>\n <\/select>\n\n <button id=\"downloadButton\" class=\"w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-md shadow-lg transition duration-300 ease-in-out transform hover:scale-105 mb-4\">\n T\u00e9l\u00e9charger la Trace GPX\n <\/button>\n <div id=\"messageBox\" class=\"mt-4 p-3 bg-yellow-100 border border-yellow-400 text-yellow-700 rounded-md hidden\"><\/div>\n <\/div>\n\n \n <div id=\"map-and-chart\" class=\"w-full m-2\">\n \n <div id=\"map-2d-container\" class=\"w-full h-full rounded-lg shadow-lg\">\n <div id=\"map\" class=\"w-full rounded-lg mb-2\"><\/div>\n <div id=\"elevationChartContainer\" class=\"w-full rounded-lg\">\n <canvas id=\"elevationChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <script src=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.js\"><\/script>\n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet-gpx\/1.5.0\/gpx.min.js\"><\/script>\n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n\n <script>\n \/\/ --- Leaflet (2D Map) Initialization ---\n const map = L.map('map').setView([48.8566, 2.3522], 12); \/\/ Centered on Paris\n\n const osm = L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n attribution: '© <a href=\"https:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a> contributors'\n });\n const esriTopo = L.tileLayer('https:\/\/server.arcgisonline.com\/ArcGIS\/rest\/services\/World_Topo_Map\/MapServer\/tile\/{z}\/{y}\/{x}', {\n attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community'\n });\n const esriImagery = L.tileLayer('https:\/\/server.arcgisonline.com\/ArcGIS\/rest\/services\/World_Imagery\/MapServer\/tile\/{z}\/{y}\/{x}', {\n attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'\n });\n const openTopoMap = L.tileLayer('https:\/\/{s}.tile.opentopomap.org\/{z}\/{x}\/{y}.png', {\n maxZoom: 17,\n attribution: 'Map data: © <a href=\"https:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a> contributors, <a href=\"http:\/\/viewfinderpanoramas.org\">SRTM<\/a> | Map style: © <a href=\"https:\/\/opentopomap.org\">OpenTopoMap<\/a> (<a href=\"https:\/\/creativecommons.org\/licenses\/by-sa\/3.0\/\">CC-BY-SA<\/a>)'\n });\n\n const baseMaps = {\n \"Standard (OpenStreetMap)\": osm,\n \"Topographique (Esri)\": esriTopo,\n \"Satellite (Esri)\": esriImagery,\n \"Topographique (OpenTopoMap)\": openTopoMap\n };\n osm.addTo(map); \/\/ Default base map\n L.control.layers(baseMaps).addTo(map); \/\/ Layer control for 2D map\n\n \/\/ Add map scale control\n L.control.scale().addTo(map);\n\n const startIcon = L.icon({ iconUrl: \"https:\/\/action-form.com\/wp-content\/uploads\/embarquement.png\", iconSize: [32, 32], iconAnchor: [16, 32] });\n const endIcon = L.icon({ iconUrl: \"https:\/\/action-form.com\/wp-content\/uploads\/pin-icon-start.png\", iconSize: [32, 32], iconAnchor: [16, 32] });\n\n let currentGpxLayer = null;\n let chart = null;\n\n \/\/ --- Data Lists ---\n const gpxDataListVTT = [\n { name: \"VTT Auvers sur Oise 25 km\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/6-VTT-25-kms-auversoise-ok.gpx\", distance: \"25 km\", elevation: \"254 m\", difficulty: \"FACILE\", departure: \"Rue des Ponceaux, Auvers sur Oise\" },\n { name: \"VTT Auvers sur Oise-Auvers sur Oise 40 Kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/8-VTT-40-kms-auversoise-ok.gpx\", distance: \"40 kms\", elevation: \"380 m\", difficulty: \"INTERMEDIAIRES\", departure: \"Au d\u00e9part de la rue des Ponceaux \u00e0 Auvers sur Oise, 40 kms dans le Vexin (L\u2019Auversoise)\" },\n { name: \"VTT Auvers sur Oise-Auvers sur Oise 50 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/10-VTT-50-kms-auversoise-ok.gpx\", distance: \"50 kms\", elevation: \"564 m\", difficulty: \"AVERTIS\", departure:\"Au d\u00e9part de la rue des Ponceaux \u00e0 Auvers sur Oise, 50 kms dans le Vexin(L\u2019Auversoise)\"},\n { name: \"VTT Auvers sur Oise-Auvers sur Oise 22 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/12-VTT-auvers-foret-isle-adam-auvers-22-km-OK.gpx\", distance: \"22 kms\", elevation: \"354 m\", difficulty: \"FACILE\", departure:\"Au d\u00e9part Auvers sur Oise, rue B\u00e9r\u00e9govoy ou centre-ville 22 kms le long des berges et dans la for\u00eat de l\u2019Isle Adam.\"},\n { name: \"VTT Auvers sur Oise-Giverny 79 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/13-VTT-auvers-giverny-79-kms-OK.gpx\", distance: \"79 kms\", elevation: \"626 m\", difficulty: \"INTERMEDIAIRE\", departure:\"Au d\u00e9part de Auvers sur Oise jusqu\u2019\u00e0 Giverny, 79 kms sur la Paris Londres.\"},\n { name: \"VTT Auvers sur Oise-Auvers sur Oise 35 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/14-vtt-auvers-par-chemin-pierres-35-kms-OK.gpx\", distance: \"35 kms\", elevation: \"500 m\", difficulty: \"INTERMEDIAIRE\", departure:\"Au d\u00e9part de Auvers sur Oise, rue B\u00e9r\u00e9govoy, 35 kms un peu techniques par endroit.\"},\n { name: \"VTT Auvers sur Oise-Auvers sur Oise 34 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/15-vtt-auvers-par-tour-du-laye-33-kms-super-OK.gpx\", distance: \"34 kms\", elevation: \"784 m\", difficulty: \"INTERMEDIAIRE\", departure:\"Au d\u00e9part de Auvers sur Oise, rue B\u00e9r\u00e9govoy ou centre-ville 34 kms en direction de la Tour du Laye.(for\u00eat de l\u2019Isle Adam)\"},\n { name: \"VTT Avernes-95-Villers-vermont-60-98 km\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Avernes-95-Villers-vermont-60-98-km.gpx\", distance: \"98 kms\", elevation: \"1000 m\", difficulty: \"Difficile\", departure: \"Au d\u00e9part de la route foresti\u00e8re du Bois Franc (en haut de la rue des Bonshommes)\" },\n { name: \"VTT 4 C\u00e8dres-4 C\u00e8dres 17 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/VTT-17-Kms-Villers-en-Arthies-Villers-en-Arthies.gpx\", distance: \"13 km\", elevation: \"100 m\", difficulty: \"FACILE\", departure: \"Au d\u00e9part du parking des 4 c\u00e8dres \u00e0 Saint Leu la For\u00eat.Un parcours pas trop exigent mais bon choix pour d\u00e9couvrir la for\u00eat.\" },\n { name: \"VTT Cergy le haut - Guiry - Cergy le haut 36 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Cergy-le-Haut-Guiry-Cergy-le-Haut-36-km.gpx\", distance: \"36 km\", elevation: \"290 m\", difficulty: \"FACILE\", departure: \"Au d\u00e9part de Cergy le Haut au 8 place des 3 Gares, un parcours qui sort de la ville pour une belle balade dans le Vexin\" },\n { name: \"VTT Cimeti\u00e8re de Bouff\u00e9mont-Cimeti\u00e8re de Bouff\u00e9mont 16 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/4-VTT-16-kms-cimetiere-de-bouffemont-OK.gpx\", distance: \"16 kms\", elevation: \"584 m\", difficulty: \"FACILE\", departure: \"Au d\u00e9part du cimeti\u00e8re de Bouff\u00e9mont, rue Sainte Radogonde.Au c\u0153ur de la for\u00eat de Montmorency et sur les hauteurs pour d\u00e9couvrir ce magnifique massif forestier.\" },\n { name: \"VTT Fr\u00e9pillon-Fr\u00e9pillon 30 Kms (la Fr\u00e9pillonnaise)\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/7-VTT-30-kms-frepillonnaise-OK.gpx\", distance: \"30 kms\", elevation: \"254 m\", difficulty: \"INTERMEDIAIRES\", departure: \"Au d\u00e9part de Fr\u00e9pillon, rue du Coudray pour une belle vir\u00e9e de 30 kms dans la for\u00eat de Montmorency, et de l\u2019Isle Adam. Beaucoup de singles.(la Fr\u00e9pillonnaise)\" },\n { name: \"VTT Fr\u00e9pillon-Fr\u00e9pillon 20 kms (la Fr\u00e9pillonnaise)\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/5-VTT-20-kms-Frepillonnaise-OK.gpx\", distance: \"20 kms\", elevation: \"241 m\", difficulty: \"FACILE\", departure: \"Au d\u00e9part de Fr\u00e9pillon, rue du Coudray pour une belle vir\u00e9e de 20 kms dans la for\u00eat de Montmorency. (la Fr\u00e9pillonnaise)\" },\n { name: \"VTT Fr\u00e9pillon-Fr\u00e9pillon 40 Kms (la Fr\u00e9pillonnaise)\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/9-VTT-40-kms-frepillonnaise-OK.gpx\", distance: \"40 kms\", elevation: \"380 m\", difficulty: \"AVERTIS\", departure: \"Au d\u00e9part de Fr\u00e9pillon, rue du Coudray pour une belle vir\u00e9e de 40 kms dans la for\u00eat de Montmorency et de l\u2019Isle Adam. Beaucoup de singles. (La Fr\u00e9pillonnaise)\" },\n { name: \"VTT Pierre Turquaise-Pierre Turquaise 20 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Presles-foret-de-Carnelle-95-20-kms.gpx\", distance: \"20 kms\", elevation: \"245 m\", difficulty: \"INTERMEDIAIRE\", departure:\"Au d\u00e9part de la Pierre Turquaise (Presles) ou du lac Bleue (Saint Martin du Tertre) dans la for\u00eat de Carnelle\"},\n { name: \"VTT Route foresti\u00e8re du Bois Franc-route foresti\u00e8re du Bois Franc \/ Foret Isle Adam 13 Kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/1-VTT-route-forestiere-du-Bois-Franc-route-forestiere-du-Bois-Franc-Foret-Isle-Adam-13-kms-OK.gpx\", distance: \"13 km\", elevation: \"254 m\", difficulty: \"FACILE\", departure: \"Au d\u00e9part de la route foresti\u00e8re du Bois Franc (en haut de la rue des Bonshommes) pour d\u00e9couvrir en toute s\u00e9r\u00e9nit\u00e9 ce parcours tr\u00e8s accessible.\" },\n { name: \"VTT Santeuil-Santeuil 15 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/17-vtt-santeuil-15-kms-OK.gpx\", distance: \"15 kms\", elevation: \"100 m\", difficulty: \"FACILE\", departure:\"Au d\u00e9part des \u00e9tangs du Moulin de la Valli\u00e8re Hameau de Santeuil, 15 kms tr\u00e8s facile pour de beaux paysages.\"},\n { name: \"VTT Villers Vermont (60) - Gerberoy (60) - Avernes (95) 100 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Villers-Vermont-60-Gerberoy-60-Avernes-95-100KM.gpx\", distance: \"100 kms\", elevation: \"1100 m\", difficulty: \"AVERTIS\", departure: \"Au d\u00e9part de Villers Vermont (60)\" },\n ];\n const gpxDataListCyclo = [\n { name: \"Cyclo route Auvers-Auvers 65 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Cyclo-route-Auvers-Auvers-65-kms-OK.gpx\", distance: \"65 kms\", elevation: \"500 m\", difficulty: \"INTERMEDIAIRE\", departure: \"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: \"Cyclo route Auvers-Auvers 38 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Cyclo-route-Auvers-Auvers-38-kms-Auversoise-OK.gpx\", distance: \"38 kms\", elevation: \"500 m\", difficulty: \"FACILE\", departure: \"Au d\u00e9part de la rue des Ponceaux \u00e0 Auvers sur Oise\" },\n { name: \"Cyclo route Auvers-Auvers 47 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Cyclo-route-Auvers-Auvers-47-kms-OK.gpx\", distance: \"47 kms\", elevation: \"500 m\", difficulty: \"FACILE\", departure: \"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: \"Cyclo route Auvers-Auvers 92 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Cyclo-route-Auvers-Auvers-92-kms-OK.gpx\", distance: \"92 kms\", elevation: \"800 m\", difficulty: \"Difficile\", departure: \"Au d\u00e9part du centre-ville d'Auvers\" },\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\", distance: \"75 kms\", elevation: \"700 m\", difficulty: \"INTERMEDIAIRE\", departure: \"Au d\u00e9part de la rue des Ponceaux \u00e0 Auvers sur Oise\" },\n { name: \"Cyclo route Auvers-Pierrefond 81 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Cyclo-route-Auvers-Pierrefond-81-kms-OK.gpx\", distance: \"81 kms\", elevation: \"750 m\", difficulty: \"AVERTIS\", departure: \"Au d\u00e9part du 31 rue Fran\u00e7ois Mitterrand (gendarmerie).\" },\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\", distance: \"56 kms\", elevation: \"400 m\", difficulty: \"FACILE\", departure: \"Au d\u00e9part au 1 all\u00e9e du Dr Jean Cayeux Isle Adam\"},\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\", distance: \"75 kms\", elevation: \"700 m\", difficulty: \"INTERMEDIAIRE\", departure: \"Au d\u00e9part au 1 all\u00e9e du Dr Jean Cayeux Isle Adam\" },\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\", distance: \"93 kms\", elevation: \"850 m\", difficulty: \"AVERTIS\", departure: \"Au d\u00e9part au 1 all\u00e9e du Dr Jean Cayeux Isle Adam\"},\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\", distance: \"114 kms\", elevation: \"1000 m\", difficulty: \"Difficile\", departure: \"Au d\u00e9part du centre-ville d'Auvers\" },\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\", distance: \"48 kms\", elevation: \"300 m\", difficulty: \"FACILE\", departure: \"Au d\u00e9part Espace Rive Gauche Parc du Ch\u00e2teau Blanc \u00e0 M\u00e9riel\"},\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\", distance: \"75 kms\", elevation: \"600 m\", difficulty: \"AVERTIS\", departure: \"Au d\u00e9part Espace Rive Gauche Parc du Ch\u00e2teau Blanc \u00e0 M\u00e9riel\"},\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\", distance: \"91 kms\", elevation: \"850 m\", difficulty: \"AVERTIS\", departure: \"Au d\u00e9part Espace Rive Gauche Parc du Ch\u00e2teau Blanc \u00e0 M\u00e9riel\"},\n ];\n const gpxDataListPedestre = [\n { name: \"Rando p\u00e9destre Auvers\/Auvers 9 kms \", url:\"https:\/\/action-form.com\/wp-content\/uploads\/Auvers-Auvers-9-kms.gpx\", distance: \"9 kms\", elevation: \"111 m\", difficulty: \"FACILE\", departure: \"Au d\u00e9part du centre-ville d'Auvers (Une randonn\u00e9e tr\u00e8s facile dans la campagne Auversoise au d\u00e9part de n\u2019importe o\u00f9 en centre-ville.)\"},\n { name: \"Rando p\u00e9destre Montlignon-Montlignon 6 kms (For\u00eat de Montmorency)\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Rando-pedestre-chateau-de-la-chasse-chateau-de-la-chasse-par-route-des-fonds-foret-de-Montmorency-Montlignon-6-kms-OK.gpx\", distance: \"6 km\", elevation: \"147 m\", difficulty: \"Facile\", departure: \" D\u00e9part au 177 rue de Paris \u00e0 Montlignon (Une incursion un peu plus profonde au c\u0153ur de la for\u00eat de Montmorency. Ch\u00e2teau de la chasse et \u00e9tangs magnifiques.)\"},\n { name: \"Rando p\u00e9destre Bouff\u00e9mont-Bouff\u00e9mont 7 kms (For\u00eat de Montmorency)\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Rando-pedestre-cimetiere-de-Bouffemont-cimetiere-de-Bouffemont-7-kms-OK.gpx\", distance: \"7 km\", elevation: \"189 m\", difficulty: \"Facile\", departure: \" D\u00e9part au 9 rue Saint Radogonde .(Une autre vision de la for\u00eat de Montmorency depuis les hauteurs.)\"},\n { name: \"Rando p\u00e9destre Champagne-Champagne 12 kms (For\u00eat de l\u2019Isle Adam)\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Rando-pedestre-gare-de-Champagne-gare-de-Champagne-foret-de-lIsle-Adam12-kms-OK.gpx\", distance: \"12 km\", elevation: \"190 m\", difficulty: \"Facile\", departure: \" D\u00e9part de la gare de Champagne sur Oise, rue Pasteur.(D\u00e9couverte int\u00e9ressante d\u2019une partie de la for\u00eat de l\u2019Isle Adam \u00e0 travers cette randonn\u00e9e tr\u00e8s facile.)\"},\n { name: \"Rando p\u00e9destre Les Andelys-Les Andelys 14 kms (Hopital)\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Rando-pedestre-les-Andelys-les-Andelys-14-kms-OK.gpx\", distance: \"14 km\", elevation: \"433 m\", difficulty: \"Difficile\", departure: \" Au d\u00e9part de la rue Guynemer.( Sujets aux vertiges s\u2019abstenir ! Un chemin a\u00e9rien tr\u00e8s escarp\u00e9 pour surplomber les Andelys.Id\u00e9al pour randonneurs avertis.)\"},\n { name: \"Rando p\u00e9destre Pierre Tuquaise-Pierre Turquaise 14 kms (For\u00eat de Carnelle)\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Rando-pedestre-pierre-Turquaise-pierre-Turquaise-foret-de-Carnelle-14-kms-OK.gpx\", distance: \"14 km\", elevation: \"185 m\", difficulty: \"Interm\u00e9diaire\", departure: \"Pierre Turquaise Saint Martin du Tertre ( Une randonn\u00e9e pour d\u00e9couvrir la for\u00eat de Carnelle tranquillement et voir les all\u00e9es couvertes qui jalonneront le parcours.)\"},\n { name: \"Rando p\u00e9destre V\u00e9theuil-V\u00e9theuil 8 kms\", url: \"https:\/\/action-form.com\/wp-content\/uploads\/Rando-pedestre-Vetheuil-Vetheuil-Bois-de-la-Chesnaie-8-km-OK.gpx\", distance: \"8 km\", elevation: \"192 m\", difficulty: \"Facile\", departure: \"Au d\u00e9part rue du Port V\u00e9theuil. (Ne pas se fier au nombre de kilom\u00e8tres ! De belles grimpettes d\u00e8s le d\u00e9part.Au d\u00e9part du bac de V\u00e9theuil, rue du Port (une vue sur la Seine \u00e0 couper le souffle).Possibilit\u00e9 selon la saison de prendre le bac pour aller faire un tour de l\u2019autre c\u00f4t\u00e9 du fleuve.\"},\n ];\n\n \/\/ Get references to the select elements and message box\n const gpxSelectVTT = document.getElementById(\"gpxSelectVTT\");\n const gpxSelectCyclo = document.getElementById(\"gpxSelectCyclo\");\n const gpxSelectPedestre = document.getElementById(\"gpxSelectPedestre\");\n const messageBox = document.getElementById(\"messageBox\");\n\n \/\/ Function to populate a select dropdown with GPX data\n function populateSelect(selectElement, dataList) {\n dataList.forEach((gpx, index) => {\n const option = document.createElement(\"option\");\n option.value = index; \/\/ Store index to easily retrieve full data object\n option.textContent = gpx.name;\n selectElement.appendChild(option);\n });\n }\n\n \/\/ Populate all three select dropdowns\n populateSelect(gpxSelectVTT, gpxDataListVTT);\n populateSelect(gpxSelectCyclo, gpxDataListCyclo);\n populateSelect(gpxSelectPedestre, gpxDataListPedestre);\n\n \/\/ Function to display a GPX trace on the map and update info\/chart\n function displayGPXOnMap(gpxUrl, data) {\n \/\/ Remove existing GPX layer if any\n if (currentGpxLayer) {\n map.removeLayer(currentGpxLayer);\n }\n\n \/\/ Update info panel with trace details\n document.getElementById(\"depart\").textContent = data.departure || \"N\/A\";\n document.getElementById(\"distance\").textContent = data.distance || \"N\/A\";\n document.getElementById(\"denivele\").textContent = data.elevation || \"N\/A\";\n document.getElementById(\"difficulty\").textContent = data.difficulty || \"N\/A\";\n\n \/\/ Create a new GPX layer and add it to the map\n currentGpxLayer = new L.GPX(gpxUrl, {\n async: true, \/\/ Load GPX asynchronously\n marker_options: {\n startIcon: startIcon, \/\/ Custom start marker icon\n endIcon: endIcon, \/\/ Custom end marker icon\n shadowUrl: '' \/\/ No shadow for markers\n },\n polyline_options: {\n color: 'blue', \/\/ Color of the GPX track line\n opacity: 0.75,\n weight: 5,\n lineCap: 'round'\n }\n }).on(\"loaded\", function(e) {\n \/\/ Fit map bounds to the loaded GPX trace\n map.fitBounds(e.target.getBounds());\n }).on(\"addline\", function(e) {\n \/\/ When the GPX line is added, extract elevation data for the chart\n const elevations = e.line._latlngs.map(p => p.meta?.ele).filter(ele => ele !== undefined);\n \/\/ Create labels for chart (simple index for now, could be distance)\n const distances = Array.from({ length: elevations.length }, (_, i) => i);\n updateChart(distances, elevations); \/\/ Update the elevation chart\n }).addTo(map);\n }\n\n \/\/ Function to update the Chart.js elevation chart\n function updateChart(labels, data) {\n \/\/ Destroy existing chart instance if it exists\n if (chart) chart.destroy();\n\n \/\/ Get the 2D rendering context of the canvas\n const ctx = document.getElementById(\"elevationChart\").getContext(\"2d\");\n\n \/\/ Create a new Chart.js instance\n chart = new Chart(ctx, {\n type: \"line\", \/\/ Line chart type\n data: {\n labels: labels, \/\/ X-axis labels (distances\/points)\n datasets: [{\n label: \"Altitude (m)\", \/\/ Dataset label\n data: data, \/\/ Y-axis data (elevations)\n borderColor: \"rgba(75, 192, 192, 1)\", \/\/ Line color\n backgroundColor: \"rgba(75, 192, 192, 0.2)\", \/\/ Area fill color\n tension: 0.3, \/\/ Curve tension for smooth lines\n fill: true\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n x: {\n display: false\n },\n y: {\n title: {\n display: true,\n text: \"Altitude (m)\"\n }\n }\n },\n plugins: {\n legend: { display: false },\n tooltip: { enabled: true }\n }\n }\n });\n }\n\n \/\/ Function to display messages in the message box\n function showMessage(message, type = 'info') {\n messageBox.textContent = message;\n messageBox.classList.remove('hidden', 'bg-yellow-100', 'border-yellow-400', 'text-yellow-700', 'bg-red-100', 'border-red-400', 'text-red-700');\n if (type === 'error') {\n messageBox.classList.add('bg-red-100', 'border-red-400', 'text-red-700');\n } else {\n messageBox.classList.add('bg-yellow-100', 'border-yellow-400', 'text-yellow-700');\n }\n messageBox.style.display = 'block';\n setTimeout(() => {\n messageBox.style.display = 'none';\n }, 3000);\n }\n\n \/\/ Event listener for VTT select dropdown\n gpxSelectVTT.addEventListener(\"change\", () => {\n \/\/ Clear other select dropdowns\n gpxSelectCyclo.value = \"\";\n gpxSelectPedestre.value = \"\";\n const selectedIndex = gpxSelectVTT.value;\n if (selectedIndex !== \"\") {\n const selected = gpxDataListVTT[selectedIndex];\n displayGPXOnMap(selected.url, selected);\n } else {\n \/\/ If no trace is selected, clear map and info\n if (currentGpxLayer) map.removeLayer(currentGpxLayer);\n if (chart) chart.destroy();\n document.getElementById(\"depart\").textContent = \"S\u00e9lectionnez une trace\";\n document.getElementById(\"distance\").textContent = \"-\";\n document.getElementById(\"denivele\").textContent = \"-\";\n document.getElementById(\"difficulty\").textContent = \"-\";\n }\n });\n\n \/\/ Event listener for Cyclo select dropdown\n gpxSelectCyclo.addEventListener(\"change\", () => {\n \/\/ Clear other select dropdowns\n gpxSelectVTT.value = \"\";\n gpxSelectPedestre.value = \"\";\n const selectedIndex = gpxSelectCyclo.value;\n if (selectedIndex !== \"\") {\n const selected = gpxDataListCyclo[selectedIndex];\n displayGPXOnMap(selected.url, selected);\n } else {\n if (currentGpxLayer) map.removeLayer(currentGpxLayer);\n if (chart) chart.destroy();\n document.getElementById(\"depart\").textContent = \"S\u00e9lectionnez une trace\";\n document.getElementById(\"distance\").textContent = \"-\";\n document.getElementById(\"denivele\").textContent = \"-\";\n document.getElementById(\"difficulty\").textContent = \"-\";\n }\n });\n\n \/\/ Event listener for Pedestre select dropdown\n gpxSelectPedestre.addEventListener(\"change\", () => {\n \/\/ Clear other select dropdowns\n gpxSelectVTT.value = \"\";\n gpxSelectCyclo.value = \"\";\n const selectedIndex = gpxSelectPedestre.value;\n if (selectedIndex !== \"\") {\n const selected = gpxDataListPedestre[selectedIndex];\n displayGPXOnMap(selected.url, selected);\n } else {\n if (currentGpxLayer) map.removeLayer(currentGpxLayer);\n if (chart) chart.destroy();\n document.getElementById(\"depart\").textContent = \"S\u00e9lectionnez une trace\";\n document.getElementById(\"distance\").textContent = \"-\";\n document.getElementById(\"denivele\").textContent = \"-\";\n document.getElementById(\"difficulty\").textContent = \"-\";\n }\n });\n\n \/\/ Event listener for the download button\n document.getElementById(\"downloadButton\").addEventListener(\"click\", function () {\n let selectedGpxUrl = \"\";\n let selectedGpxName = \"\";\n\n \/\/ Determine which category is currently selected\n if (gpxSelectVTT.value !== \"\") {\n const selected = gpxDataListVTT[gpxSelectVTT.value];\n selectedGpxUrl = selected.url;\n selectedGpxName = selected.name;\n } else if (gpxSelectCyclo.value !== \"\") {\n const selected = gpxDataListCyclo[gpxSelectCyclo.value];\n selectedGpxUrl = selected.url;\n selectedGpxName = selected.name;\n } else if (gpxSelectPedestre.value !== \"\") {\n const selected = gpxDataListPedestre[gpxSelectPedestre.value];\n selectedGpxUrl = selected.url;\n selectedGpxName = selected.name;\n }\n\n if (selectedGpxUrl) {\n \/\/ Create a temporary anchor element to trigger download\n const link = document.createElement('a');\n link.href = selectedGpxUrl;\n link.download = selectedGpxName.replace(\/[^a-z0-9]\/gi, '_').toLowerCase() + '.gpx'; \/\/ Sanitize name for filename\n document.body.appendChild(link); \/\/ Append to body (required for Firefox)\n link.click(); \/\/ Programmatically click the link to start download\n document.body.removeChild(link); \/\/ Clean up the temporary link\n } else {\n showMessage(\"Veuillez s\u00e9lectionner une trace GPX \u00e0 t\u00e9l\u00e9charger.\", 'error');\n }\n });\n <\/script>\n<\/body>\n<\/html>\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>Carte GPX avec Altitude Les Parcours D\u00e9part: S\u00e9lectionnez une trace Distance: – D\u00e9nivel\u00e9: – Difficult\u00e9: – Traces VTT : — Choisir une trace — Traces Cyclo : — Choisir une trace — Traces P\u00e9destre : — Choisir une trace — T\u00e9l\u00e9charger la Trace GPX<\/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-3653","page","type-page","status-publish","hentry","wpbf-post"],"_links":{"self":[{"href":"https:\/\/action-form.com\/index.php\/wp-json\/wp\/v2\/pages\/3653","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=3653"}],"version-history":[{"count":3469,"href":"https:\/\/action-form.com\/index.php\/wp-json\/wp\/v2\/pages\/3653\/revisions"}],"predecessor-version":[{"id":8425,"href":"https:\/\/action-form.com\/index.php\/wp-json\/wp\/v2\/pages\/3653\/revisions\/8425"}],"wp:attachment":[{"href":"https:\/\/action-form.com\/index.php\/wp-json\/wp\/v2\/media?parent=3653"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}