Localisation GPS (géolocalisation) sur une carte OpenStreetMap avec Leaflet
Carte et géolocalisation avec Leaflet et OpenStreetMap
Cette carte sera accessible via JavaScript dans votre site web via l'API Leaflet.
Dans cet exemple, je vous montre comment localiser l'utilisateur et afficher les alentours sur la carte.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carte</title>
<!-- leafletjs CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.css" />
<!-- leafletjs JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.js"></script>
<style>
/* Carte plein écran */
html,
body {
margin: 0;
height: 100%;
}
#map {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- L'endroit ou la carte va s'afficher -->
<div id="map"></div>
<script>
/* Les options pour afficher la France */
const mapOptions = {
center: [46.225, 0.132],
zoom: 5
}
/* Les options pour affiner la localisation */
const locationOptions = {
maximumAge: 10000,
timeout: 5000,
enableHighAccuracy: true
};
/* Création de la carte */
var map = new L.map("map", mapOptions);
/* Création de la couche OpenStreetMap */
var layer = new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{ attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' });
/* Ajoute la couche de la carte */
map.addLayer(layer);
/* Verifie que le navigateur est compatible avec la géolocalisation */
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(handleLocation, handleLocationError, locationOptions);
} else {
/* Le navigateur n'est pas compatible */
alert("Géolocalisation indisponible");
}
function handleLocation(position) {
/* Zoom avant de trouver la localisation */
map.setZoom(16);
/* Centre la carte sur la latitude et la longitude de la localisation de l'utilisateur */
map.panTo(new L.LatLng(position.coords.latitude, position.coords.longitude));
}
function handleLocationError(msg) {
alert("Erreur lors de la géolocalisation");
}
</script>
</body>
</html>Exemple bonus : OpenStreetMap dans une iframe
La carte OpenStreetMap peut être affichée dans une iframe sans librairie.
En revanche, la carte sera statique (aucune localisation, aucune modification sans recharger l'iframe)
Naviguez vers la localisation que vous voulez afficher sur votre site web.
À droite, cliquez sur Partager.
Cliquez sur HTML.
Copier/coller le code (balise iframe) dans votre page web.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carte</title>
<style>
/* Carte plein écran */
html,
body {
margin: 0;
height: 100%;
}
#map {
width: 100%;
height: 100%;
/* Supprime la bordure de l'iframe */
border: none;
}
</style>
</head>
<body>
<iframe id="map"
src="https://www.openstreetmap.org/export/embed.html?bbox=2.1203613281250004%2C48.75550973660054%2C2.5735473632812504%2C48.961961958462446&layer=mapnik"></iframe>
</body>
</html>
Sehr interessant! J'aimerais vous remercier pour les informations précieuses que vous avez donnés.
RépondreSupprimer🤗🤓😉