<!DOCTYPE html> <html> <head> <title>Essai d'inclusion de carte</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Inclusion du CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" /> <!-- Assurez-vous d'inclure le Javascript après le CSS --> <!-- js de Leaflet --> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script> <!-- js du plugin --> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/master/gpx.js"></script> </head> <body> <h1>Ma page</h1> <p>Le bla bla habituel</p> <div id="maCarte" style="width: 600px; height: 400px;"></div> <script> // Insertion de la carte var mymap = L.map('maCarte').setView([44.13767, 3.03818], 14); // Ajout du GPX var gpx = './LavoirdeBarbade.gpx'; // URL to your GPX file or the GPX itself new L.GPX(gpx, {async: true}).on('loaded', function(e) { map.fitBounds(e.target.getBounds()); }).addTo(mymap); // Ajout des copyright L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.fr/copyright">OpenStreetMap France</a> contributors' }).addTo(mymap); </script> </body> </html>