Open Street Map (OSM) est une alternative puissante et open-source aux solutions de cartographie propriétaires comme Google Maps. Dans ce tutoriel, nous allons découvrir comment intégrer OSM à votre site web de manière simple et efficace. En quelques étapes, vous serez en mesure d’afficher une carte interactive sur votre site, entièrement personnalisable.
Pourquoi choisir Open Street Map ?
OSM offre plusieurs avantages parmis lesquels figurent :
- Gratuité : Il n’exige aucun coût d’utilisation.
- Personnalisable : Vous pouvez adapter le style et le contenu de la carte à vos besoins.
- Communauté active : Les contributions sont régulières assurant des données à jour.
- Open-source : Il est utilisable sans restriction commerciale.
Les differentes étapes à suivre
1. Préparer votre fichier HTML
La première étape consiste à créer une structure HTML de base où votre carte sera affichée. Voici comment configurer votre fichier :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Intégrer Open Street Map</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
/* Style du conteneur de la carte */
#map {
height: 500px; /* Hauteur de la carte */
width: 100%; /* Largeur de la carte */
}
</style>
</head>
<body>
<h1>Carte interactive Open Street Map</h1>
<!-- Conteneur de la carte -->
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="script.js"></script>
</body>
</html>
Une petite explication s’impose :
- L’élément
<link>pour Leaflet CSS : Nous importons la feuille de style de Leaflet pour définir les styles par défaut des cartes. - Le conteneur
<div id="map">: Ce div agit comme une fenêtre où la carte sera rendue. - Les styles CSS pour
#map: La hauteur et la largeur sont essentielles pour que la carte s’affiche correctement. - Les scripts JavaScript : La bibliothèque Leaflet et le fichier
script.jssont inclus pour gérer les cartes et ajouter des fonctionnalités.
2. Ajouter un script JavaScript
Dans cette étape, vous allez créer un fichier JavaScript appelé script.js. Ce fichier contiendra le code nécessaire pour afficher et personnaliser votre carte.
Ci-dessous un exemple de fichier script.js :
// Initialisation de la carte et définition de sa vue initiale
const map = L.map('map').setView([48.8566, 2.3522], 13); // Coordonnées pour Paris, France
// Charger les tuiles depuis OpenStreetMap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Ajouter un marqueur sur la carte
const marker = L.marker([48.8566, 2.3522]).addTo(map)
.bindPopup('Bienvenue à Paris !')
.openPopup();
Au niveau du fichier javascript,
L.map('map'): Initialise une carte dans le conteneur avec l’IDmap.- Vue initiale : Les coordonnées
[48.8566, 2.3522]pointent vers Paris. Le second paramètre13spécifie le niveau de zoom. - Tuiles OSM : Les tuiles sont chargées via l’URL
https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png. - Marqueur et popup : Un marqueur
L.marker([48.8566, 2.3522])ainsi qu’une fenêtre popup “Bienvenue à Paris” sont ajoutés au centre de la carte.
Ce qui nous donne au final le visuel ci-dessous :
Et voilà ! Avec Open Street Map et Leaflet.js, vous pouvez intégrer des cartes interactives et personnalisées en quelques minutes. Ce outil puissant et gratuit est idéal pour les développeurs cherchant une solution flexible et surtout open-source. Vous pouvez également aller plus loin en intégrant des styles personnalisés avec des services comme Mapbox. Profitez de cette technologie pour enrichir vos projets web !
Rendez-vous dans le prochain article pour plus de tutos pratiques. ✌️
