Leaflet

Utilisation

<!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: '&copy; <a href="https://www.openstreetmap.fr/copyright">OpenStreetMap France</a> contributors'
}).addTo(mymap);
</script> 
 
</body>
</html>