L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Cartes en réaction
Connaître les similitudes et les différences entre Google Maps et MapBox dans une application React vous aidera à choisir le bon outil pour le travail. Cet article compare et fait la différence entre ces deux bibliothèques populaires et vous permet de démarrer avec celui que vous choisissez.
Airbnb, Uber, Realtor et de nombreux autres sites Web fournissent une vue cartographique de leurs données. Sans surprise, c'est le moyen le plus simple de visualiser des données géographiques, que possèdent de nombreuses applications. Un problème se pose cependant lorsque vous lisez la documentation des deux bibliothèques de cartographie les plus populaires: Google Maps et MapBox. Vous ne trouverez pas de documentation sur la façon de les utiliser facilement dans React, le framework frontal le plus populaire.
Dans cet article, nous verrons comment afficher des données sur une carte dans React, en montrant des exemples à la fois avec Google Maps et MapBox. La version finale de Google Maps et de la version MapBox peut être trouvée ici. Si vous souhaitez suivre une vidéo, consultez les vidéos de Google Maps et MapBox que j'ai postées.
Nous avons besoin de données
Ottawa, la capitale de Le Canada possède un grand ensemble de données ouvertes pour leur ville. Dans cet exemple, nous allons travailler avec des données montrant où se trouvent tous les skateparks de la ville. Le fichier JSON entier peut être ici mais j'ai effacé les champs que nous n'utilisons pas pour montrer un petit échantillon de ce à quoi il ressemble.
La chose la plus importante, et l'obligation de placer quoi que ce soit sur une carte, est la latitude et la longitude d'un lieu. Dans l'exemple ci-dessous, la propriété Coordinates possède un tableau dont la longitude est le premier élément et la latitude le second.
{
"caractéristiques": [{
"properties": {
"PARK_ID": 960,
"NAME": "Bearbrook Skateboard Park",
"DESCRIPTION": "Flat asphalt surface, 5 components"
},
"geometry": {
"coordinates": [-75.3372987731628, 45.383321536272049]
}
}, {
"Propriétés": {
"PARK_ID": 1219,
"NAME": "Parc de planche à roulettes Bob MacQuarrie (SK8 Extreme Park)",
"DESCRIPTION": "Surface asphaltée plate, 10 composants, City Run apprend les programmes de skateboard, Camps de skateboard City Run en été"
},
"géométrie": {
"coordonnées": [-75.546518086577947, 45.467134581917357]
}
}, {
"Propriétés": {
"PARK_ID": 1157,
"NAME": "Walter Baker Skateboard Park",
"DESCRIPTION": "Bol en béton, 7 000 pieds carrés"
},
"géométrie": {
"coordonnées": [-75.898610599532319, 45.295014379864874]
}
}]
} React et Google Maps
Nous utiliserons une bibliothèque React appelée react-google-maps pour nous aider à intégrer React à Google Maps. Après l’avoir installé, nous devons maintenant saisir une clé API. Cela peut être fait dans la console de développeur Google . Vous devriez pouvoir utiliser un compte gratuit, à condition qu'il s'agisse d'un projet personnel ou d'une démo. Assurez-vous d'activer l'API JavaScript de Google Maps pour votre projet.
Plutôt que de placer notre clé API dans notre code, utilisons une variable d'environnement pour la rendre disponible. Dans create-react-app, les variables d'environnement commençant par REACT_APP_ sont automatiquement mises à disposition. Nous le placerons dans un fichier nommé .env.local en veillant à l'inclure dans le fichier .gitignore .
REACT_APP_GOOGLE_KEY = "your-api-code-here "Nous reviendrons plus tard sur cette clé API. Pour l'instant, commençons à construire notre carte!
Prise en main de Google Maps
Le premier composant que nous allons construire est le composant de la Carte . Son but est de restituer les données à l'intérieur du composant GoogleMap qui provient du package que nous avons installé. Cela ne nécessite aucun accessoire initial, mais il est assez typique de passer au niveau de zoom et de centrer la carte.
import {GoogleMap} from "react-google-maps";
fonction Map () {
revenir (
{/ * Nous allons rendre nos données ici * /}
)
} Ajout de données à Google Maps
Avec le composant Carte qui rend le GoogleMap il est temps d'y insérer des données. Nous importons nos données à partir d'un fichier JSON local, mais vous pouvez tout aussi facilement les charger à partir d'une API distante via un crochet useEffect lorsque le composant est monté. L'idée est de parcourir en boucle chacun des skateparks, ce qui donne un marqueur pour chacun d'eux.
importer {GoogleMap, Marker} à partir de "react-google-maps";
import * en tant que parkData à partir de "./data/skateboard-parks.json";
fonction Map () {
revenir (
{parkData.features.map (park => (
)
} La clé est toujours nécessaire lorsque vous mappez un tableau dans React, tandis que la position indique où le placer. Le support icon n'est pas nécessaire, mais il vous permet de remplacer le marqueur rouge typique par quelque chose de personnalisé.
Gérer les clics dans Google Maps
Tous nos marqueurs étant affichés, nous peut maintenant gérer lorsque l'utilisateur clique sur l'un d'eux. Ce que nous allons faire, c'est utiliser un état (avec useState ) pour savoir quel marqueur a été cliqué, montrant ses détails à l'intérieur d'un InfoWindow popup.
Un onClick prop a été ajouté à chaque marqueur (19459015), ce qui permet à ce parc de devenir le selectedPark . Sous les balises, nous vérifions s’il existe un sélectionnéParc et, si tel est le cas, affiche une InfoWindow avec tous les détails du parc sélectionné. Ce composant nécessite également une position et un accessoire onCloseClick pour savoir quoi faire lorsque l'utilisateur le ferme.
import React, {useState} from "react";
importer {GoogleMap, Marker, InfoWindow} de "react-google-maps";
import * en tant que parkData à partir de "./data/skateboard-parks.json";
fonction Map () {
const [selectedPark, setSelectedPark] = useState (null);
revenir (
{parkData.features.map (park => (
{setSelectedPark (parc); }}
icon = {{
url: `/ skateboarding.svg`,
scaledSize: nouvelle fenêtre.google.maps.Size (25, 25)
}}
/>
))}
{selectedPark && (
{setSelectedPark (null); }}
position = {{
lat: selectedPark.geometry.coordinates [1],
lng: selectedPark.geometry.coordinates [0]
}}
>
{selectedPark.properties.NAME}
{selectedPark.properties.DESCRIPTION}
)}
)
} Affichage de la carte
Nous y sommes presque! La dernière étape consiste à utiliser ce composant Map . Pour cela, nous devons utiliser deux composants HOC (Higher Order Components) qui relient notre Map aux scripts JavaScript de Google Maps.
import {
// importations existantes
avecGoogleMap,
avecScriptjs
} de "réagir-google-maps";
// Composant de la carte ici
const MapWrapped = withScriptjs (avecGoogleMap (Map));
fonction d'exportation par défaut App () {
revenir (
<MapWrapped
googleMapURL = {`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=$ {
process.env.REACT_APP_GOOGLE_KEY
} `}
loadingElement = {}
containerElement = {}
mapElement = {}
/>
)
} Le composant de MapWrapped doit se trouver à l'intérieur d'un div comportant certaines dimensions. Le mien occupe tout l'écran (100vh et 100vw). googleMapURL qui inclut la clé API susmentionnée, ainsi que trois éléments utilisés en interne par le package.
Application de styles à Google Maps
Si le Les styles standard sont trop ennuyeux pour vous, rendez-vous sur Snazzy Maps et prenez le JS pour votre style préféré. Cela peut être transmis au composant de GoogleMap à l'aide de defaultOptions prop. J'ai placé tous ces styles dans un fichier appelé mapStyles.js qui les exporte par défaut.
import mapStyles depuis "./mapStyles";
fonction Map () {
revenir (
{/ * Marqueurs et InfoWindow ici * /}
)
} React et MapBox
Pour MapBox, nous allons utiliser le package react-map-gl créé par l'équipe d'Uber. MapBox nécessite également un jeton d'accès, qui peut être créé gratuitement sur le site Web de MapBox . Nous allons placer le jeton d'accès à l'intérieur du fichier .env.local :
REACT_APP_MAPBOX_TOKEN = "your-token-here" Bien démarrer avec MapBox
Après avoir fini de montrer comment Google Maps fonctionne dans React, je pense que vous constaterez que MapBox est légèrement plus facile. Cependant, ils ont un certain nombre de différences, l'une d'elles étant que Google Maps contrôle sa propre position (où l'utilisateur a fait glisser la carte vers, effectué un zoom avant ou arrière, etc.), alors qu'avec MapBox, il nous appartient de suivre toutes ces informations. Détails à l'intérieur de certains états que nous appellerons la vue .
Après avoir fourni à la fenêtre quelques valeurs initiales telles que la latitude, la longitude et le zoom, MapBox dispose d'un accessoire appelé onViewportChange qui est appelé avec la nouvelle fenêtre, en fonction des actions de l'utilisateur. C’est à nous de mettre à jour l’état, ce qui entraînera le repositionnement de la carte, puisque nous passons viewport {... viewport} sur la carte.
Veuillez noter que nous devait fournir la mapboxApiAccessToken . Vous pouvez également remarquer qu’il existe un mapStyle prop. Vous pouvez trouver les styles en saisissant l'URL Style dans l'un des styles ici .
import React, {useState, useEffect} à partir de "react";
importer ReactMapGL, {Marker, Popup} de "react-map-gl";
import * as parkDate from "./data/skateboard-parks.json";
fonction d'exportation par défaut App () {
const [viewport, setViewport] = useState ({
latitude: 45,4211,
longitude: -75,6903,
largeur: "100vw",
hauteur: "100vh",
zoom: 10
});
revenir (
{setViewport (viewport); }}
>
{/ * Les marqueurs et Popup iront ici * /}
);
} Affichage des données dans MapBox
Une fois la carte configurée, il est temps d'afficher certaines données. Ceci est très similaire à la façon dont nous l'avons traité dans l'exemple de Google Maps. Nous allons cartographier (sans jeu de mots) les skateparks, en créant un Marker pour chacun. Vous remarquerez qu'avec MapBox, vous devez fournir toute l'interface utilisateur du Marker en créant un style pour un bouton, en ajoutant une image à l'intérieur de celui-ci ou en effectuant le rendu dans votre propre application. MapBox est très flexible de cette façon.
Notez qu’il existe un gestionnaire de clics sur le bouton. Ceci sera utilisé pour déterminer quel skatepark afficher les détails dans la section ci-dessous. Le code suivant se trouve dans le composant ReactMapGL :
{parkDate.features.map (park => (
)}} Gestion des clics dans MapBox
Nous avons déjà rendu la carte avec tous ses marqueurs. Il est maintenant temps de gérer l'affichage des détails d'un skatepark lorsque son Marker a été cliqué. Nous allons créer un état appelé selectedPark qui sera défini dans l'appui onClick de chaque marqueur .
Il y a d'abord un contrôle pour voir si selectedPark a une valeur et, si c'est le cas, un composant Popup est restitué. Popup requiert la latitude et la longitude comme accessoires, avec un gestionnaire de clics onClose qui définit l'état sur null . À l'intérieur d'un Popup vous pouvez placer le code HTML que vous souhaitez afficher pour l'utilisateur.
import React, {useState, useEffect} de "react";
importer ReactMapGL, {Marker, Popup} de "react-map-gl";
import * as parkDate from "./data/skateboard-parks.json";
fonction d'exportation par défaut App () {
const [viewport, setViewport] = useState ({
latitude: 45,4211,
longitude: -75,6903,
largeur: "100vw",
hauteur: "100vh",
zoom: 10
});
const [selectedPark, setSelectedPark] = useState (null);
revenir (
{setViewport (viewport); }}
>
{/ * Marqueurs ici * /}
{selectedPark? (
{setSelectedPark (null); }}
>
{selectedPark.properties.NAME}
{selectedPark.properties.DESCRIPTION}
): null}
);
} Conclusion
Dans cet article, nous avons expliqué comment intégrer les deux bibliothèques de cartes les plus populaires dans notre application React. Avec ces compétences, nous sommes maintenant prêts à être le prochain démarrage de licorne! OK OK, sans vous laisser emporter, de nombreuses applications doivent afficher leurs données sur une carte, et savoir comment le faire dans l'une de ces bibliothèques est une grande compétence. Même si Google Maps et MapBox présentent des différences, les idées principales sont les mêmes: restituez les marqueurs pour chaque emplacement et gérez les événements liés aux clics afin d'afficher les détails de l'emplacement sur lequel l'utilisateur a cliqué.
Source link