Cartes sur le Web à l'aide de React et Mapbox

Les applications Web ont grandement bénéficié de l'inclusion de cartes, fournissant aux utilisateurs de précieuses informations de localisation. Les cartes ont transformé notre interaction avec le monde, de la navigation dans des lieux inconnus à la découverte de restaurants à proximité. En conséquence, l’intégration de cartes dans des sites Web est devenue de plus en plus populaire ces derniers temps. Néanmoins, concevoir des cartes à la fois fonctionnelles et conviviales peut présenter un défi, en particulier pour ceux qui manquent d’expérience dans ce domaine. Dans cet article, je partagerai des conseils utiles sur la façon de créer des cartes efficaces dans votre navigateur.

Pile technologique

Parlons des technologies. Lorsque nous travaillons avec des cartes, nous utilisons généralement trois couches :

• Rendu de l'interface utilisateur, qui comprend des boutons et des formulaires. Dans notre stack, React remplit ce rôle ;

• Rendu de la carte et activation de l'interaction de l'utilisateur. Nous utilisons Mapbox pour cela ;

• Récupérer des données depuis le serveur, telles que des informations sur des marqueurs ou des polygones. Pour récupérer des données, nous utilisons la fonction de récupération intégrée du navigateur.

  
  

Passons en revue chaque élément pour mieux comprendre notre pile technologique lorsque nous travaillons avec des cartes.

Réagir

Le Réagir La bibliothèque vous permet de travailler avec des éléments de page de manière pratique et efficace. Il a été développé par Facebook pour son propre usage et comprend de nombreux composants tels que des boutons, des formulaires et d'autres éléments interactifs sur les pages. Par exemple, Facebook a créé un algorithme de rapprochement pour comparer rapidement différents états.

La modification d'éléments sur une page étant l'opération la plus coûteuse pour un navigateur, il est essentiel de le faire le plus efficacement possible. Pour résoudre ce problème, les ingénieurs de Facebook ont développé la bibliothèque React, qui permet des modifications rapides et simples des éléments d'une page. En plus de fournir des changements d'état rapides sur une page, React nous permet de le faire de manière déclarative sans travailler directement avec les éléments DOM. Au lieu de cela, nous utilisons une abstraction, généralement JSX , qui ressemble à du HTML. Prenons un exemple :

 // It's our state. Is the user our friend or not? // false by default const [isFriend, setIsFriend] = useState(false) // Depending on the state, we show the text on the button const buttonText = isFriend ? 'Your my Friend' : 'Add as Friend' // There is JSX, syntax for UI // In this case, we display a button, when clicked, we change the state return ( <button onClick={() => setIsFriend(true)}>{buttonText}</button> )

Il est possible d'imbriquer des composants avec des éléments DOM ordinaires comme des formulaires, des boutons et des entrées au bas de la hiérarchie. En assemblant ces éléments simples, nous pouvons en créer des plus complexes, comme un formulaire complet :

 const Form = () => ( <form> <input name="Email"/> <input name="Password"/> </form> ) const App = () => ( <main> <h1>My form!</h1> <Form /> </main> )

Comment React nous aide-t-il dans le contexte des cartes ? La carte sur la page étant interactive, semblable à un bouton ou un formulaire, nous visons à optimiser son rendu et son interaction via des événements comme les clics sur la carte. React peut aider à réaliser cette optimisation. Voici un exemple de la façon dont cela fonctionne :

 // Use React to render the map with different event handlers // and render markers return ( <BaseMap onInitMap={() => console.log('I am alive!')} onClickMap={() => console.log('Click!')} onDestroyMap={() => console.log('Oh no!')} > <ClustersMarkers /> <PostsMarkers /> <ListingsMarkers /> </BaseMap> )

Lorsque vous travaillez avec React, il est essentiel de se rappeler qu'il permet une manipulation efficace des éléments de la page, des changements rapides et une interaction avec eux via des événements. Ceci est réalisé grâce à une abstraction qui ressemble à HTML, ce qui facilite la création de composants complexes à partir de composants plus simples.

Boîte à cartes

Parlons maintenant de la carte elle-même. La création et l'utilisation de cartes peuvent s'avérer difficiles, et seules quelques sociétés de produits peuvent concevoir des cartes à partir de zéro. En règle générale, la plupart des gens s'appuient sur des bibliothèques prédéfinies dotées d'une API conviviale qui a été éprouvée et testée.

De nombreux fournisseurs de cartes dynamiques sont disponibles, notamment Google Maps, Leaflet, Bing Maps, Mapbox, etc. Cependant, nous nous concentrerons sur Boîte à cartes en raison de ses fonctionnalités étendues et de sa politique de prix équitable. Par exemple, Google Maps facture 700 $ pour 100 000 vues de carte par mois, alors que Mapbox ne facture que 250 $ . De plus, Mapbox offre un accès gratuit jusqu'à 50 000 vues de cartes par mois.

Offres Mapbox Mapbox Studio , un outil souvent comparé à Photoshop pour les cartes. Avec cet outil, les concepteurs peuvent créer des styles personnalisés, masquer les éléments cartographiques inutiles et supprimer les affichages de la maison. L'un de ses avantages est la capacité d'améliorer la visibilité de Points d'interêts . Un autre avantage est la possibilité d’expérimenter le style des cartes aux couleurs de l’entreprise. Cependant, il est essentiel de prendre en compte l'expérience utilisateur et de conserver une palette de couleurs familière, comprenant l'herbe verte et l'eau bleue. L'avantage de Mapbox Studio est qu'il simplifie le processus de conception de cartes en éliminant le besoin de développement et de transfert d'exigences, réduisant ainsi le coût d'utilisation des cartes.

De plus, Mapbox fournit un outil de géocodage qui peut convertir des adresses en coordonnées ou vice versa, simplifiant ainsi le processus de localisation de points sur une carte. Cependant, l'outil couverture mondiale peut s'avérer insuffisant, entraînant des difficultés pour certains projets. Mapbox rassemble des données de de nombreuses sources , comme les gouvernements, les initiatives de données ouvertes comme OpenStreetMap et les entreprises privées.

Mapbox propose une variété de exemples pratiques , Bien que le Documentation pourrait bénéficier d’une certaine amélioration. Par exemple, lors de l'intégration de fonctionnalités de marqueur, les exemples peuvent être plus informatifs que la documentation. De plus, des défis peuvent survenir lors de la fusion de plusieurs composants, tels que des clusters de marqueurs, le chargement de données personnalisées, la normalisation et les changements d'état des marqueurs.

Revisitons les cartes Mapbox. Que fait le API MapBox faire?

• Il initialise la carte dans un élément HTML de la page ;

• Il charge et restitue les images qui composent la carte ;

• Il dessine des éléments supplémentaires, tels que des marqueurs, en utilisant GeoJson comme données d'entrée ;

• Il génère des événements, tels que des clics ou des changements de zoom, qui peuvent être gérés.

  
  

Examinons de plus près chacun de ces éléments.

Mapbox est spécialisé dans le rendu de cartes à l'aide de tuiles. Les tuiles sont de petites images carrées qui constituent la carte plus grande. La taille par défaut d'une vignette est de 512 x 512 pixels, et elle peut être soit vecteur ou raster . Vecteur les vignettes sont utilisées pour afficher les routes, les bâtiments, les points d'intérêt (PoI) et bien plus encore. Ils peuvent être stylisés de manière dynamique, sont légers et permettent une interaction fluide avec la carte. Trame les tuiles, quant à elles, sont utilisées pour afficher des images satellite.

Juste pour que vous le sachiez, Mapbox Studio nous permet de choisir les données spécifiques que nous souhaitons inclure dans les tuiles de la carte. Ces tuiles sont ensuite placées sur un toile , qui est un élément DOM spécial dans le navigateur qui affiche des images et d'autres éléments graphiques sur le Web. Pour vous donner une idée, cela ressemble à la façon dont les documents sont affichés sur un canevas dans Google Docs.

 <canvas width="100" height="100" />

Mapbox gère le chargement, l'insertion et la mise à jour des tuiles. Il suffit de préciser où nous voulons que la carte soit affichée et les conditions initiales, comme le niveau de zoom ou les coordonnées de la carte. Pour utiliser Mapbox, vous aurez besoin d'un jeton d'accès , qui est une clé unique que l'on peut trouver dans votre compte Mapbox. Pour configurer une carte de base, voici un exemple rapide, mais pour plus d'informations, consultez le lien fourni:

 mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; const map = new mapboxgl.Map({ container: 'map', // we can use an Id or an element style: 'mapbox://styles/mapbox/streets-v11', // URL for styles center: [-74.5, 40], // initial coordinates [lng, lat] zoom: 9, // initial zoom });

Après cela, nous obtiendrons une carte sur la page dans un élément avec l'identifiant « map ».

Pour fournir aux utilisateurs plus d'informations sur la carte, nous affichons souvent l'emplacement d'un certain établissement ou les limites d'une zone spécifique. Pour y parvenir, nous utilisons un format de données spécifique appelé GéoJSON et indiquez à Mapbox comment présenter ces données.

GeoJSON est le format standard pour stocker des structures géographiques sur des cartes. Il peut stocker divers types primitifs décrivant des objets géographiques tels que des adresses, des emplacements, des rues, des autoroutes, des frontières, des pays, des états et des combinaisons de ceux-ci, appelées multiparts. GeoJSON a été introduit en 2008 et est représenté comme ceci :

 { "type": "Feature", // also can be FeatureCollection, it's collection of Feature "geometry": { "type": "Point", // also can be LineString, Polygon, MultiPolygon "coordinates": [125.6, 10.1] // for other types you can use Array with coordinates }, "properties": { // it's metadata, we can you that to show something on the map "name": "Dinagat Islands" } }

Parlons du système de coordonnées utilisé dans Mapbox. Par défaut, Mapbox emploie EPSG3857 , qui est une manière de projeter la Terre sur une surface plane pour travailler le carrelage. Ceci est connu sous le nom de Web Mercator et constitue la norme pour les cartes en ligne. Cependant, lorsqu'il s'agit de données sur des marqueurs et des polygones, il utilise un système de coordonnées différent appelé EPSG4326 . Ce système s'appuie sur la latitude et la longitude pour décrire les coordonnées sur l'ellipsoïde terrestre. Mapbox et d'autres fournisseurs de cartes convertissent automatiquement les coordonnées EPSG 4326 en EPSG 3857. Si nous devons travailler avec différents projections , nous pouvons utiliser la méthode map.setProjection .

Nous allons maintenant voir comment afficher GeoJSON sur la carte. Mapbox propose deux entités qui nous seront utiles :

• Source — C'est la graine de données. Nous pouvons créer une nouvelle source avec des données GeoJSON et la configurer, par exemple, pour générer un ID pour chaque fonctionnalité de la collection de fonctionnalités.

• Couche — C'est la représentation des données. Nous pouvons afficher les données de la source de différentes manières, par exemple en affichant les limites.

  
  

Pour afficher des polygones ou des marqueurs sur la carte, il faut récupérer les données au format GeoJson depuis le serveur. Ensuite, nous créons une source, y saisissons les données et la connectons à la couche requise.

 const geoJsonFeature = { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [ [-67.13734, 45.13745], [-66.96466, 44.8097], [-68.03252, 44.3252], [-67.13734, 45.13745] ] } } // Create source with our data map.addSource('ourSource', { 'type': 'geojson', 'data': geoJsonFeature }); // Add layer for background map.addLayer({ 'id': 'background', 'type': 'fill', 'source': 'ourSource', // название нашего source 'layout': {}, 'paint': { 'fill-color': '#0080ff', 'fill-opacity': 0.5 } }); // Add layer for border map.addLayer({ 'id': 'border', 'type': 'line', 'source': 'ourSource', 'layout': {}, 'paint': { 'line-color': '#000', 'line-width': 3 } });

Après avoir exécuté ce code, nous obtenons le résultat :

Pour en savoir plus sur ce sujet, vous pouvez vous référer au Documentation fourni par Mapbox. Dans ce didacticiel, nous avons couvert le processus d'initialisation de la carte et de présentation de nos données. Nous explorerons ensuite comment gérer des événements tels que cliquer, faire glisser et zoomer. Par exemple, nous pouvons utiliser Mapbox pour surveiller les événements et afficher les coordonnées dans la console lorsque l'utilisateur déplace son curseur sur la carte. Pour y parvenir, nous appelons simplement la méthode on avec le type d’événement souhaité, de la même manière que nous travaillons avec les éléments DOM.

 map.on('mousemove', (e) => { console.log(JSON.stringify(e.point)); }); // Result: {"x":330,"y":49}

En résumé, que faut-il retenir ? Mapbox nous permet d'afficher une carte, d'y dessiner nos données et de traiter les événements de la carte. Parallèlement, Mapbox s'occupe du chargement et de l'affichage des images (tuiles).

Aller chercher

Un mot sur aller chercher . Nous avons déjà vu comment restituer des données sur une carte, mais il faut d'abord les récupérer depuis le serveur. Lorsque nous demandons dynamiquement des données au serveur en arrière-plan sans recharger la page, nous appelons cette approche AJAX (« Un J avaScript et un X ML synchrones »). Il existe de nombreux outils permettant de charger des données de manière asynchrone depuis le serveur, comme Axios ou XMLHttpRequest (natif).

Que faut-il retenir ? Nous récupérons les données du serveur et il existe de nombreuses bibliothèques pour cela, mais nous utiliserons fetch. Ensuite, nous verrons comment procéder spécifiquement lorsque nous travaillons avec des cartes, car il existe des nuances.

Réagir + Mapbox

Voyons maintenant comment les technologies décrites ci-dessus fonctionnent ensemble. Tout d’abord, nous allons récupérer les données permettant d’afficher le polygone à l’aide de fetch. Ensuite, nous déclarerons l'initialisation de la carte, et après son chargement, nous ajouterons le polygone à la carte.

Vous pouvez également trouver un exemple concret sur le site lien fourni.

 const useFetch = () => { /* Our data { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [ [ [-67.13734, 45.13745], [-68.03252, 44.3252], [-68.90478, 47.18479], [-67.13734, 45.13745], ] ] } } */ const [data, setData] = useState(null) useEffect(() => { fetch('https://our-api.com/polygon') .then(response => response.json()) .then(setData) .catch(e => { console.error(e) }) }, [setData]) return { data } } const BaseMap = () => { // Use the hook to fetch data const { data } = useFetch(GET_REGION); // Map instance const map = useRef(null); // DOM element const mapContainer = useRef(null); // Main logic - init the map and add the event useEffect(() => { if (map.current) { return; // initialize map only once } mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; map.current = new mapboxgl.Map({ container: mapContainer.current, style: 'mapbox://styles/mapbox/light-v10', // style URL (it's Mapbox's core style) center: [-68.137343, 45.137451], // starting position zoom: 5 // starting zoom }); // Handle event map.on('load', () => { const sourceId = 'source-region' // Add a data source containing GeoJSON data map.addSource(sourceId, { 'type': 'geojson', 'data': data.region // our data from Apollo }); // Add a new layer to visualize the polygon map.addLayer({ 'id': 'background', 'type': 'fill', 'source': sourceId, // reference the data source 'paint': { 'fill-color': '#0080ff', // blue color fill 'fill-opacity': 0.5 } }); // Add a black outline around the polygon map.addLayer({ 'id': 'outline', 'type': 'line', 'source': sourceId, 'paint': { 'line-color': '#000', 'line-width': 3 } }); }); }); return <div ref={mapContainer} />; } 

Conclusion

Nous avons examiné la pile technologique qui sous-tend notre future architecture. Dans l'article suivant, nous aborderons les principes qui aident à concevoir une architecture de carte, comment obtenir un faible couplage maximal et une cohésion élevée des modules, et comment maintenir et développer un système de carte évolutif.

Merci beaucoup pour votre attention! Passe une bonne journée.