A propos de l'auteur

Shajia Abidi est un développeur Web complet avec un accent sur le développement frontal. Lorsqu'elle ne code pas, elle écrit ou lit des livres.
Plus à propos
Shajia

Leaflet est un outil très puissant et nous pouvons créer de nombreux types de cartes. Ce didacticiel vous aidera à comprendre comment créer une carte avancée avec l'aide de React et Vanilla JS.

La saisie d'informations à partir d'un fichier CSV ou JSON n'est pas seulement compliquée, elle est également fastidieuse. Représenter les mêmes données sous forme d'aide visuelle est plus simple. Dans cet article, nous allons représenter les emplacements des incidents d'incendie non médicaux auxquels le service d'incendie de SF a répondu sur une carte.

Pour ce didacticiel, nous utiliserons les outils suivants:

  • Brochure
    Une bibliothèque JavaScript pour des cartes interactives
  • Réagir
    Une bibliothèque JavaScript pour créer des interfaces utilisateur
  • React-Leaflet
    Composants React pour les cartes Leaflet

Qu'est-ce que Leaflet?

Avec environ 27 000 étoiles, Leaflet.js est l'une des principales bibliothèques JavaScript open source pour les cartes interactives adaptées aux mobiles. Il tire parti de HTML5 et CSS3 sur les navigateurs modernes tout en étant également accessible sur les plus anciens. Dans l'ensemble, il prend en charge toutes les plates-formes de bureau et mobiles principales.

La brochure pèse environ 38 Ko et fonctionne parfaitement pour les choses de base. Pour des extensions supplémentaires, il peut être étendu avec une grande quantité de plugins.

De nombreux journaux, dont NPR, Washington Post, Boston Globe, entre autres, et d'autres organisations utilisent Leaflet pour leurs projets de données approfondis.

Le San Francisco Chronicle, par exemple, a réalisé un projet appelé California Fire tracker – une carte interactive qui fournit des informations sur les incendies de forêt qui brûlent à travers la Californie, à l'aide de Leaflet. Non seulement ils ont identifié l'origine de l'incendie, mais ils nous ont également montré la trajectoire de celui-ci.

Comme il s'agit d'un didacticiel d'introduction, nous ne marquerons que les emplacements des incidents d'incendie et afficherons quelques détails à ce sujet.

Avant de vous lancer dans React, comprenons les bases de Leaflet. Pour cela, nous allons créer un exemple simple où nous allons mettre en place une carte Leaflet, travailler avec des marqueurs et des popups.

Commençons par créer index.html et app.js fichiers dans notre /projet dossier et lier ce dernier à notre index.html fichier.

Pour commencer à utiliser Leaflet, nous devons lier Leaflet CSS et Leaflet JS dans nos balises head. Une chose à garder à l'esprit est que Leaflet CSS précède Leaflet JS. C’est tout pour Leaflet.

Il y a encore une chose que nous devons ajouter à notre index.html fichier – un conteneur qui contiendra notre carte.

Avant d'oublier, donnons de la hauteur à notre div.

#mapid {height: 1000px; }

Maintenant vient la partie amusante. Que vous décidiez de créer un nouveau fichier JavaScript ou de continuer dans des balises de script, assurez-vous

est ajouté au dom avant d'appeler L.map ('mapid').

Vous demandez probablement "Mais, pourquoi?" Eh bien, c'est parce que cela vous donnera une erreur si vous liez la carte à un conteneur qui n'existe pas encore.

Erreur non détectée: conteneur de carte introuvable

Création d'une carte

Maintenant sur la partie amusante. Pour initialiser la carte, on passe dans notre div à L.map () avec quelques options.

const myMap = L.map ('mapid', {
 centre: [37.7749, -122.4194],
  zoom: 13
})

Allons-y étape par étape pour comprendre ce qui vient de se passer. Nous utilisons la classe Map de l'API Leaflet pour créer une carte sur la page. Nous passons deux paramètres à cette classe:

  1. Nous avons passé une variable chaîne représentant le DOM Identifiant
  2. Un littéral d'objet facultatif avec des options de carte

Il existe de nombreuses options que nous pourrions passer à notre classe, mais les deux principales options sont le centre et le zoom. Le centre définit un centre géographique initial de la carte tandis que le zoom spécifie un niveau de zoom initial de la carte. Ils sont tous deux indéfinis par défaut.

Pour le centre, nous sommes passés dans les coordonnées de San Francisco. Il existe de nombreux endroits où nous pouvons effectuer un géocodage avant et arrière, mais pour une recherche de base comme celle-ci, nous pouvons le rechercher sur Google.

Habituellement, la valeur du zoom dépendra de ce que vous souhaitez afficher. Voulez-vous montrer une ville ou un état? Pays ou continent? Allez-y et jouez avec la valeur du zoom pour avoir une meilleure idée. Pour cet exemple, nous avons choisi 13 car il montre la ville entière.

Une autre façon d'initialiser la carte est d'utiliser setView (). Il prend le dans un tableau de coordonnées et un entier pour le niveau de zoom.

const myMap = L.map ('map'). setView ([37.7749, -122.4194], 13);

Par défaut, toutes les interactions avec la souris et le toucher sur la carte sont activées et elle dispose de contrôles de zoom et d'attribution.

Création d'un calque

Ensuite, nous allons ajouter une couche de tuiles à notre carte; dans notre cas, il s'agit d'une couche de tuiles Mapbox Streets. Nous pouvons ajouter différents types de couches de tuiles en instanciant la classe TileLayer.

Pour créer une couche de tuiles, nous devons définir le modèle d'URL pour l'image de tuile, le texte d'attribution et le niveau de zoom maximal de la couche. Le modèle d'URL est ce qui nous donne accès à la couche de tuiles souhaitée à partir du fournisseur de services. Étant donné que nous utilisons l'API Static Tiles de Mapbox, nous devrons demander un jeton d'accès.

L.tileLayer ('https://api.mapbox.com/styles/v1/ {id} / tiles / {z} / {x} / {y}? Access_token = {accessToken}', {
attribution: «Données cartographiques © contributeurs OpenStreetMap, CC-BY-SA, Imagerie (c) Mapbox»,
maxZoom: 18,
id: 'mapbox / rues-v11',
accessToken: 'your.mapbox.access.token'}). addTo (mymap);

À ce stade, si nous ouvrons notre index.html dans un navigateur, nous devrions pouvoir voir une carte de San Francisco. Jetons une épingle sur la carte.

Marqueurs et cercles

Nous avons la carte et la couche, mais cela ne nous indique rien de spécifique. Pour pointer vers un emplacement particulier sur la carte, Leaflet nous fournit des marqueurs.

Pour épingler un emplacement, nous instancions le marqueur à l'aide de la classe Marker, passons les coordonnées et l'ajoutons à la carte. Ici, nous utilisons les coordonnées de Twin Peaks dans la ville.

const marqueur = L.marker ([37.7544, -122.4477]) .addTo (mymap);

De même, nous pouvons lier un cercle à la carte en utilisant un Cercle classe. Nous proposons quelques options facultatives, telles que le rayon, la couleur, etc. Pour le cercle marqueur, nous passons dans les coordonnées du phare de Point Bonita.

cercle constant = cercle L ([37.8157, -122.5295], {
 couleur: «or»,
 fillColor: '# f03',
 fillOpacity: 0,5,
 rayon: 200
}). addTo (mymap);

Tout cela est génial, mais que se passe-t-il si nous voulons transmettre plus d'informations sur l'emplacement. Nous le faisons en utilisant popup.

circle.bindPopup ("Je montre le phare de Point Bonita");

marker.bindPopup ("Je pointe vers Twin Peaks");

La méthode bindPopup prend un contenu HTML spécifié et l'ajoute au marqueur, de sorte que la fenêtre contextuelle apparaît lorsque vous cliquez sur le marqueur.

React-Leaflet

Nous savons maintenant comment créer une carte et ajouter des marqueurs à l'aide de Leaflet et vanilla JavaScript. Voyons comment nous pouvons obtenir les mêmes résultats avec React. Nous n'allons pas créer la même application mais créer une application avancée.

La première tâche pour nous est d'obtenir un jeton d'accès à partir du portail de données ouvertes de San Francisco. Il s'agit d'un portail en ligne où nous pouvons trouver des centaines d'ensembles de données de la ville et du comté de San Francisco. J'ai décidé d'utiliser cette ressource, mais il existe de nombreuses autres ressources que nous pouvons utiliser à la place.

Accéder à la clé API

  1. Créez un compte et connectez-vous au portail.
  2. Cliquez sur le lien de gestion en bas à droite.
  3. Cliquez sur Créer une nouvelle clé API et donnez-lui un nom.
  4. Copiez votre ID de clé et votre secret de clé. Vous en aurez besoin pour accéder aux données.

Pour cela, nous utiliserons React-Leaflet – composants React pour les cartes Leaflet. Créons une application React.

npx create-react-app react-fire-incidents
cd react-fire-incidents

Ensuite, installons feuillet réactifet Leaflet en exécutant la commande suivante dans notre terminal:

npm install react-leaflet brochure

App.js

Créons un dossier /Composants à l'intérieur src. À l'intérieur des composants, créons un fichier nommé Map.js. C'est là que notre carte vivra. Maintenant, éditons App.js en supprimant le code inutile et en important des modules foliole réactif axios et le nouvellement créé Map.js.

importer React, {Component, Fragment} depuis 'react';
importer des axios depuis «axios»;
importer la carte depuis './components/Map'

Dans notre classe App, nous allons définir un tableau dans notre état appelé incidents – lorsque la page se charge, nous allons pousser nos données dans ce tableau.

classe App étend Component {
 état = {
   incidents: [],
 }
 render () {
   revenir (
     
);  } } exporter l'application par défaut;

Ensuite, nous ferons une demande GET lorsque le composant sera monté. Nous avons le jeton d'application, mais nous avons toujours besoin d'un point de terminaison. Où trouvons-nous le point final?

Dirigeons-nous vers le portail et cliquez sur Parcourir les données. Dans la barre de recherche, recherchons les incendies. Le premier résultat qui apparaît est ce que nous recherchons. Une fois que nous avons cliqué sur le lien, nous pouvons obtenir l'URL en cliquant sur le bouton API en haut à droite.

Nous passerons le point de terminaison à notre demande GET, et passerons une limite et notre jeton d'application en tant que paramètres. Les données d'origine ont des milliers d'enregistrements, mais dans un souci de simplicité, nous les avons limitées à 500. Nous mettons à jour notre tableau d'incidents avec nos résultats.

Une fois que nous obtenons les données, nous mettons à jour notre état.

composant asyncDidMount () {
   const res = attendre axios.get ('https://data.sfgov.org/resource/wr8u-xric.json', {
     params: {
       "$ limit": 500,
       "$$ app_token": YOUR_APP_TOKEN
     }
   })
   const incidents = res.data;
   this.setState ({incidents: incidents});
 };

Voici à quoi devrait ressembler notre App.js.

classe App étend Component {
état = {
  incidents: [],
}

composant asyncDidMount () {
 const res = attendre axios.get ('https://data.sfgov.org/resource/wr8u-xric.json', {
   params: {
     "$ limit": 500,
     "$$ app_token": YOUR_APP_TOKEN
   }
 })
 const incidents = res.data;
 this.setState ({incidents: incidents});
};
render () {
 revenir (

 );
}
}
exporter l'application par défaut;

Map.js

Puisque nous savons déjà comment créer une carte Leaflet, cette partie sera relativement facile. Nous importons Carte, TileLayer, Marqueur, Apparaitre composants de feuillet réactif.

importer React, {Component} depuis 'react'
importer {Map, TileLayer, Marker, Popup} depuis 'react-leaflet'

Si nous nous souvenons de l'exemple précédent, nous avons besoin de coordonnées et d'un niveau de zoom pour initialiser la carte. Dans notre Carte classe, nous les définissons dans notre état en utilisant lat, lng et Zoom variables.

exporter la classe par défaut Map étend Component {
   état = {
       lat: 37.7749,
       lng: -122.4194,
       zoom: 13,
   }
   render () {
       revenir (
     
)     } }

Ensuite, nous vérifierons si notre tableau d'incidents est vide. S'il est vide, nous renverrons un message disant «Les données sont en cours de chargement»; sinon, nous retournerons une carte.

Dans notre feuillet réactif’S Carte composant, nous passerons les coordonnées du centre et un niveau de zoom avec un certain style. Dans notre TileLayer , nous transmettrons l'attribution et l'URL comme dans notre exemple précédent.

render () {
       revenir (
          this.props.incidents?
              
              
             
               
               :
               'Les données se chargent ...'
       )
   }
}

Ensuite, nous bouclons sur notre accessoires. et transmettre les coordonnées de chaque incident au composant Marqueur. Puisque React nous avertit de transmettre une clé à chaque élément d'un tableau, nous transmettrons également une clé à Marker.

À l'intérieur de Marqueur composant, nous passons dans un Apparaitre composant. J'ai ajouté des informations sur l'incident dans la fenêtre contextuelle.


       
        
        {
          this.props.incidents.map (incident => {
               point const = [incident['point']['coordinates'][1],                 incident['point']['coordinates'][0]]revenir (
    
         
            ADRESSE: {incident['address']}, {incident['city']} - {incident['zip_code']}
          
BATAILLE: {incident['battalion']}
)  }) }

Et c'est tout. Si nous exécutons notre application et que tout se passe bien, nous devrions pouvoir voir une carte de San Francisco avec 500 marqueurs nous indiquant les emplacements des incendies. Si nous cliquons sur l'un de ces marqueurs, une fenêtre contextuelle apparaîtra avec plus d'informations sur l'incident.

Emballer

Même si nous avons beaucoup couvert, ce ne sont que les bases. Leaflet est un outil très puissant et nous pouvons créer de nombreux types de cartes. Si vous voulez jouer, essayez d'ajouter un autre calque ou une icône personnalisée. Ou peut-être que vous souhaitez créer une carte interactive de choroplèthes.

Smashing Editorial
(dm, il)