Comment créer des cartes avec React et Leaflet

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 interceptée: conteneur de carte introuvable

Création d'une carte

Maintenant, passons à la partie amusante. Pour initialiser la carte, nous passons notre div à L.map () avec quelques options.

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

Allons-y pas à pas 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 de chaîne représentant le DOM ID
2. Un littéral d'objet optionnel avec des options de carte

Il y a beaucoup d'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. Les deux ne sont pas dé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 voulez 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 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 il dispose de contrôles de zoom et d'attribution.

Création d'une couche

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. Puisque 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. Laissons tomber 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 marker = L.marker ([37.7544, -122.4477]). AddTo (mymap);

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

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

Tout cela est super, 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 marqueurs utilisant 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 San Francisco Open Data . 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 vers le 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 react-leaflet et Leaflet en exécutant la commande suivante dans notre terminal:

 npm install react-leaflet leaflet

App.js

Créons un dossier / components dans src . À l'intérieur des composants, créons un fichier nommé Map.js . C'est là que notre carte vivra. Modifions maintenant App.js en supprimant le code inutile et en important des modules de react-leaflet axios et du nouveau Map.js .

 import React, {Composant, Fragment} de '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.

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

Ensuite, nous ferons une demande GET lors du montage du composant. Nous avons le jeton d'application, mais nous avons toujours besoin d'un point de terminaison. Où trouve-t-on le point de terminaison?

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 contiennent des milliers d'enregistrements, mais pour simplifier les choses, nous l'avons limité à 500. Nous mettons à jour notre tableau d'incidents avec nos résultats.

Une fois que nous avons obtenu 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.

 La classe App étend le composant {
é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 (

Map.js

Puisque nous savons déjà comment créer une carte Leaflet, cette partie sera relativement facile. Nous importerons Map TileLayer Marker Popup composants de react-leaflet .

 import React, {Component} de '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 classe Map nous les définissons dans notre état en utilisant les variables lat lng et zoom .

 export par défaut Map Map étend le composant {
   é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 composant react-leaflet Map nous transmettrons les coordonnées du centre et un niveau de zoom avec un certain style. Dans notre composant TileLayer nous transmettrons l'attribution et l'URL similaires à notre exemple précédent.

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

Ensuite, nous faisons une boucle sur nos accessoires.incident et passons 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 du composant Marker nous transmettons un Popup composant. J'ai ajouté des informations sur l'incident dans la fenêtre contextuelle.

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.

Conclusion

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 aimeriez créer une carte interactive de choroplèth .

(dm, il)