Tutoriel OpenStreetMap & JavaScript : Présentation "à la Airbnb" avec OpenStreetMap

Dans une précédente vidéo nous avons vu comment mettre en place une disposition "à la Airbnb" en utilisant Google Maps. Comme certains l'ont souligné, le changement de tarification de Google Maps risque de poser des problèmes dans un futur assez proche. Il est donc intéressant de s'intéresser à des alternatives pour mettre en place des cartes dynamiques, et c'est pourquoi je vous propose aujourd'hui de découvrir ensemble comment créer ce même système en utilisant la librairie leaflet et OpenStreetMap.

Fournisseur de tuiles

Avec la librairie leaflet il va être possible de créer des cartes dynamiques en se basant sur plusieurs calques. Un de ces calques sera un système de tuiles permettant d'afficher les différentes cases qui composent notre carte. La première étape va donc être de trouver un fournisseur pour les différentes tuiles que l'on souhaite mettre en place. Il est possible de se reposer sur les données provenant de open Street map mais aussi de services tiers.

Et c'est là le gros avantage de cette librairie. Nous ne sommes pas dépendant spécifiquement d'un service mais nous pouvons choisir n'importe quelle carte suivant la situation (on pourra par exemple prendre une carte plus adaptée au circuit cyclable pour un site en lien avec le vélo).

Voici quelques exemples des tuiles.

Leaflet

Une fois ce fournisseur choisi, on peut commencer à créer notre carte en utilisant la librairie leaflet

let map = L.map('map', {scrollWheelZoom: false})
L.tileLayer('//{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
}).addTo(map)

Ensuite, on souhaite rajouter des petites bulles d'information affichant le prix de chacun de nos biens. Avec leaflet, comme avec d'autres librairies, nous avons la possibilité d'ajouter des marqueurs au niveau de notre carte. Cependant, c'est une solution qui est plus adaptée lorsque l'on souhaite rajouter une petite icône sur notre carte. Dans notre cas le système de pop-up semble plus adapté.

let popup = L.popup({
    autoClose: false,
    closeOnEscapeKey: false,
    closeOnClick: false,
    closeButton: false,
    className: 'marker',
    maxWidth: 400
})
    .setLatLng(point)
    .setContent(text)
    .openOn(map)

On pourra ensuite détecter le clic sur une de ces pop-ups en récupérant l'élément correspondant à notre pop-up. Il faudra en revanche faire attention à bien attendre l'ajout du pop-up sur notre carte avant de greffer les différents événements.

popup.addEventListener('add', () => {
    popup.getElement().addEventListener('click', () => {
        // Le code à éxécuter au clic
        // on peut modifier le contenu avec popup.setContent(text)
        // et mettre à jour la position avec popup.update()
    })
})

On peut aussi utiliser l'élément pour modifier la classe correspondant au marqueur afin de rajouter un effet d'animation ou de transition pour signifier que le marqueur est actuellement actif.

Au final, leaflet est une librairie qui s'avère plus facile à utiliser que l'API de Google Maps et qui permet de résoudre notre cas assez simplement en offrant en plus l'avantage de pouvoir changer facilement de fournisseurs de tuiles. Aussi, la prochaine fois que vous devez créer une carte sur votre site n'hésitez pas à envisager d'autres solutions que celle proposée par Google.