Fermer

mai 8, 2022

Guide du débutant pour créer une carte à l’aide de Leaflet.js

Guide du débutant pour créer une carte à l’aide de Leaflet.js


Leaflet.js est actuellement l’un des plus bibliothèques de cartographie populaires. Il s’agit d’une bibliothèque JavaScript flexible, légère et open source pour créer des cartes interactives.

Leaflet est un cadre de présentation des données cartographiques. Les données, ainsi que la couche cartographique de base, doivent être fournies par les développeurs. Les cartes sont composées de couches de tuiles avec la prise en charge du navigateur, l’interactivité par défaut, les capacités de panoramique et de zoom. Vous pouvez également ajouter plus de couches et de plug-ins personnalisés, ainsi que tout le mappage dans Leaflet. Cette bibliothèque de cartographie convertit vos données en couches de carte et offre un excellent support, ce qui en fait le premier choix pour la plupart des développeurs. Il fonctionne très bien sur les principales plates-formes de bureau et mobiles, ce qui en fait une bibliothèque JavaScript parfaite pour les cartes d’écran mobiles et plus grandes également.

Dans ce tutoriel, je vais vous montrer comment créer une belle carte interactive du Pacifique Sud avec HTML, CSS et Leaflet qui mettra en évidence les plages les plus populaires. J’ai collecté les données du site Web de TripAdvisor et rassemblé les dix meilleures plages du Pacifique Sud telles qu’évaluées par le Sondage Travellers’ Choice 2021.

Avez-vous vu des cartes en ligne intéressantes et souhaitez-vous en créer une vous-même ? Suivez ce voyage passionnant en vous montrant comment tracer une carte sympa et mettre en évidence les dix meilleures plages à l’aide de Leaflet.

Leaflet carte gif montrant les différentes couches

Création d’une carte dépliante de base en quatre étapes

Le processus de construction d’une carte simple avec dépliant est simple. Une certaine connaissance de base de HTML et JavaScript est bénéfique, mais ne vous inquiétez pas si vous êtes un débutant complet. C’est assez facile avec cette bibliothèque JavaScript, et je vais vous guider à travers chaque ligne de code pendant que je crée cette carte étonnante et perspicace.

Créer une page HTML de base

Pour commencer, je crée une page HTML pour afficher l’objet de la carte. J’ajoute ensuite un </div> pour tenir la carte et lui donner un identifiant comme map pour référence plus tard. Ensuite, j’ajoute quelques détails de style où je spécifie la largeur et la hauteur comme 100vw et 100vh. Cela fera que la carte occupera toute la page :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Leaflet Map</title>
    <style type="text/css">
      body{
        margin: 0;
        padding: 0;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

Référencez les fichiers de la bibliothèque open-source Leaflet JavaScript

Puisque j’utilise la bibliothèque Leaflet, je dois inclure les fichiers JavaScript et CSS nécessaires de cette bibliothèque. Tu peux téléchargez les fichiers directement, utilisez le gestionnaire de packages JavaScript (npm) pour installer les fichiers localement ou utilisez la version hébergée depuis leur CDN :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Leaflet Map</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
    <style type="text/css">
      body{
        margin: 0;
        padding: 0;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
    <script>
      
    </script>
  </body>
</html>

Noter la integrity L’attribut permet à un navigateur de vérifier le script récupéré pour s’assurer que le code n’est pas chargé si la source a été manipulée.

Préparer les données

Pour tracer n’importe quelle carte, j’ai besoin de valeurs de coordonnées comme la latitude et la longitude. Je rassemble la latitude et la longitude pour chacun des points de données de ce site ici. De plus, pour le développement de Leaflet, j’ai également besoin de la couche de base, que j’obtiens d’un site appelé OpenStreetMap.

Configurer la carte Leaflet

Vient maintenant la partie intéressante de la création de la carte en écrivant quelques lignes de code. Vous n’en croirez pas le peu de lignes de code nécessaires pour créer des cartes entièrement fonctionnelles avec Leaflet. Cette facilité de développement, associée au fait que Leaflet est une bibliothèque JavaScript open source, la place en tête de liste des bibliothèques de cartographie.

Donc, pour commencer, rappelez-vous que tout dans cette bibliothèque JavaScript est accessible par la lettre « L », et toutes les fonctions sont étendues à travers elle.

Initialiser la carte

La première chose que je fais est de déclarer la variable map et de l’initialiser avec la carte Leaflet. Le premier paramètre est l’ID du <div> défini précédemment. La seconde est l’endroit où vous voulez que le centre de la carte soit. Le dernier est le niveau de zoom. J’ai réglé le zoom sur 3,5, mais vous pouvez le régler sur ce que vous voulez.

J’utilise ces paramètres pour ma carte, mais de nombreuses options sont disponibles pour définir l’état de la carte, l’interaction, l’animation et les événements que vous pouvez consulter. ici:

const map = L.map('map', {
  center: [-29.50, 145],
  zoom: 3.5
});

Ajouter la couche de base

Ensuite, j’ai ajouté la couche de tuiles, qui sera la couche de base de la carte Leaflet. Une couche de tuiles est un ensemble de tuiles accessible sur un serveur par une requête URL directe. Cette couche de tuiles ajoute les limites géographiques à la carte.

Assurez-vous d’inclure le texte d’attribution pour cela, car la plupart des développeurs oublient de le faire :

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map);

Ajouter les marqueurs par défaut

Pour indiquer les plages, j’ajoute des balises. Leaflet fournit cette fonctionnalité par défaut. Puisque j’ai besoin de montrer dix plages, j’ajouterai un marqueur chacune avec les valeurs de latitude et de longitude de la plage respective :

const marker1 = L.marker([-37.699450, 176.279420]).addTo(map);
const marker2 = L.marker([-27.643310, 153.305140]).addTo(map);
const marker3 = L.marker([-33.956330, 122.150270]).addTo(map);
const marker4 = L.marker([-34.962390, 117.391220]).addTo(map);
const marker5 = L.marker([-17.961210, 122.214820]).addTo(map);
const marker6 = L.marker([-16.505960, 151.751520]).addTo(map);
const marker7 = L.marker([-22.594400, 167.484440]).addTo(map);
const marker8 = L.marker([-37.977000, 177.057000]).addTo(map);
const marker9 = L.marker([-41.037600, 173.017000]).addTo(map);
const marker10 = L.marker([-37.670300, 176.212000]).addTo(map);

Voila ! Une carte Leaflet absolument ravissante et fonctionnelle est configurée et prête. Le développement de ce Leaflet n’a-t-il pas été un jeu d’enfant ?

L’image ci-dessous montre à quoi tout cela ressemble jusqu’à présent.

Dépliant carte version initiale

Vous pouvez trouver le code entier dans ce stylo:

Voir le stylo
Dépliant Top South Pacific Beaches-Initial par SitePoint (@SitePoint)
sur CodePen.

Personnalisation de la carte des dépliants

L’une des fonctionnalités utiles de la bibliothèque Leaflet JavaScript est sa capacité à créer rapidement des cartes de base et à disposer d’une multitude d’options pour personnaliser les cartes. Alors, laissez-moi vous montrer quatre façons de rendre cette carte Leaflet plus informative et esthétiquement meilleure.

1. Désactiver le zoom avec le défilement de la souris

L’un des principaux problèmes de bureau est le défilement accidentel de la carte lorsque vous essayez de naviguer dans une page. Pour gérer cela, je modifie le code où j’avais déclaré la carte dans la phase de configuration. je vais ajouter le scrollWheelZoom attribut et réglez-le sur false, qui garantit que la carte ne peut être agrandie qu’à l’aide des boutons de zoom. J’utiliserai également une méthode différente pour définir le centre et le niveau de zoom qui fonctionne efficacement et est plus lisible :

const map = L.map('map', {scrollWheelZoom:false}).setView([-29.50, 145], 3.5);

2. Ajouter des couches à la carte

Une autre fonctionnalité intéressante et utile de Leaflet est la possibilité d’ajouter plusieurs couches vectorielles. En gardant la vue sur la rue comme l’une des couches, j’ajouterai deux autres couches de tuiles à partir d’un site qui fournit un service de carte Web gratuit (WMS). Je vais ajouter une couche de topographie et une couche de lieux :

const basemaps = {
  StreetView: L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',   {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}),
  Topography: L.tileLayer.wms('http://ows.mundialis.de/services/service?',   {layers: 'TOPO-WMS'}),
  Places: L.tileLayer.wms('http://ows.mundialis.de/services/service?', {layers: 'OSM-Overlay-WMS'})
};

Leaflet fournit également la fonctionnalité permettant à l’utilisateur de contrôler le calque à rendre. À l’aide de cette fonctionnalité, j’ajouterai un bouton de menu d’options en haut à droite de la page qui vous permet de sélectionner laquelle des trois couches vous souhaitez superposer sur la carte :

L.control.layers(basemaps).addTo(map);

Enfin, je définirai le calque Topographie comme calque par défaut à rendre. Dans la version finale, je reviendrai à Streetview comme option par défaut :

basemaps.Topography.addTo(map);

3. Personnalisez les marqueurs

Le marqueur par défaut est idéal pour indiquer un emplacement, mais les marqueurs personnalisés donnent un aspect personnalisé à la carte, et il est assez facile de le configurer à l’aide de la bibliothèque Leaflet.

Pour définir une icône, je dois spécifier l’URL et la taille de l’icône. Je vais télécharger une icône SVG gratuite et l’héberger sur mon compte GitHub, qui fournit l’URL. Je vais mettre la taille à 40, mais vous pouvez la garder plus ou moins.

Maintenant, je vais simplement ajouter cette icône à chaque marqueur défini précédemment, et c’est tout. Tous les marqueurs indiquant la plage sont désormais des icônes de plage :

const basicBeachIcon = L.icon({
  iconUrl: 'https://raw.githubusercontent.com/shacheeswadia/leaflet-map/main/beach-icon-chair.svg',
  iconSize: [40, 40],
});

const marker1 = L.marker([-37.699450, 176.279420], {icon: basicBeachIcon}).addTo(map);
const marker2 = L.marker([-27.643310, 153.305140], {icon: basicBeachIcon}).addTo(map);
const marker3 = L.marker([-33.956330, 122.150270], {icon: basicBeachIcon}).addTo(map);
const marker4 = L.marker([-34.962390, 117.391220], {icon: basicBeachIcon}).addTo(map);
const marker5 = L.marker([-17.961210, 122.214820], {icon: basicBeachIcon}).addTo(map);
const marker6 = L.marker([-16.505960, 151.751520], {icon: basicBeachIcon}).addTo(map);
const marker7 = L.marker([-22.594400, 167.484440], {icon: basicBeachIcon}).addTo(map);
const marker8 = L.marker([-37.977000, 177.057000], {icon: basicBeachIcon}).addTo(map);
const marker9 = L.marker([-41.037600, 173.017000], {icon: basicBeachIcon}).addTo(map);
const marker10 = L.marker([-37.670300, 176.212000], {icon: basicBeachIcon}).addTo(map);

Découvrez à quoi ressemble cette version personnalisée ici et jouez avec le code sur CodePen.

Voir le stylo
Brochure Top Plages du Pacifique Sud-Intermédiaire par SitePoint (@SitePoint)
sur CodePen.

Dépliant carte version intermédiaire

Cette icône n’était qu’un exemple, alors gardez un œil sur une icône plus funky lorsque je change le marqueur personnalisé dans la version finale de la visualisation.

Comme les info-bulles, les fenêtres contextuelles peuvent contenir plus d’informations sur les données. Une fenêtre contextuelle dans les cartes s’affiche en cliquant et peut être personnalisée selon vos préférences. Avec Leaflet, la fonction popup peut être très facilement ajoutée avec une fonction appelée bindPopup.

Puisque nous affichons des plages sur notre objet cartographique, je décide d’afficher le nom de chaque plage dans la fenêtre contextuelle. J’ajoute simplement le texte à la fonction et le lie à chacun des marqueurs :

const marker1 = L.marker([-37.699450, 176.279420], {icon: basicBeachIcon})
    .bindPopup('Whitehaven Beach, Whitsunday Island')
    .addTo(map);
const marker2 = L.marker([-27.643310, 153.305140], {icon: basicBeachIcon})
    .bindPopup('Turquoise Bay Exmouth, Australia')
    .addTo(map);
const marker3 = L.marker([-33.956330, 122.150270], {icon: basicBeachIcon})
    .bindPopup('Cape Le Grand National Park Esperance, Australia')
    .addTo(map);
const marker4 = L.marker([-34.962390, 117.391220], {icon: basicBeachIcon})
    .bindPopup('Greens Pool Denmark, Australia')
    .addTo(map);
const marker5 = L.marker([-17.961210, 122.214820], {icon: basicBeachIcon})
    .bindPopup('Cable Beach Broome, Australia')
    .addTo(map);
const marker6 = L.marker([-16.505960, 151.751520], {icon: basicBeachIcon})
    .bindPopup('Matira Beach, Society Islands')
    .addTo(map);
const marker7 = L.marker([-22.594400, 167.484440], {icon: basicBeachIcon})
    .bindPopup('Piscine Naturelle Ile Des Pins, New Caledonia')
    .addTo(map);
const marker8 = L.marker([-37.977000, 177.057000], {icon: basicBeachIcon})
    .bindPopup('Ohope Beach Whakatane, New Zealand')
    .addTo(map);
const marker9 = L.marker([-41.037600, 173.017000], {icon: basicBeachIcon})
    .bindPopup('Kaiteriteri Beach, New Zealand')
    .addTo(map);
const marker10 = L.marker([-37.670300, 176.212000], {icon: basicBeachIcon})
    .bindPopup('Mt Maunganui Main Beach, New Zealand')
    .addTo(map);

Et c’est un enveloppement! Vous pouvez trouver tout le code sur CodePen.

Voir le stylo
Brochure Top South Pacific Beaches-Finale par SitePoint (@SitePoint)
sur CodePen.

Carte dépliante version finale

Autres personnalisations avec les cartes Leaflet

Outre ce que je vous ai montré dans ce didacticiel, il existe une pléthore d’options de personnalisation avec Leaflet, telles que l’ajout de formes telles que des cercles ou des polygones, la personnalisation de la fenêtre contextuelle et l’ajout d’événements. Vous pouvez consulter les instructions dans l’officiel Documentation et les nombreux exemples fourni par Leaflet.

Un plugin ouvre tout un univers de personnalisations, et Leaflet, étant open-source, possède de nombreux plugins tiers qui fournissent des fonctionnalités étendues à la carte d’origine. Vous pouvez rechercher n’importe quel plugin développé par la communauté Leaflet ici. Vous pouvez ajouter plus de tuiles de carte, de pages, de modèles d’URL, d’images PNG, d’images de tuiles, d’options de zoom avancées et d’interactions de tuiles améliorées avec les plugins Leaflet. Il existe également la possibilité d’utiliser l’API de Google pour la localisation et la recherche.

Conclusion

Comme vous pouvez le voir, il est super facile et rapide de créer des cartes interactives avec une bibliothèque JS comme Leaflet. L’installation est simple, fonctionne efficacement, le code est lisible et tout le mappage est géré de manière pratique par la bibliothèque. C’est également un excellent choix pour créer des cartes interactives adaptées aux mobiles, car il fonctionne bien avec toutes les plates-formes mobiles. En plus d’une grande convivialité, Leaflet propose de nombreuses options de personnalisation. S’il vous plaît laissez-moi savoir si vous avez toute question ou suggestion.

Alors, promenez-vous sur la plage ou commencez à tracer des cartes. Les deux options constituent une activité relaxante et amusante !



Le meilleur outil 2023 pour ta croissance Instagram !



Source link