Utiliser React avec Mapbox : Un Guide pour react-map-gl

Intégrer Mapbox avec React peut être un moyen puissant de créer des cartes interactives et dynamiques pour vos applications web. La bibliothèque react-map-gl, développée par l’équipe de visualisation d’Uber, fournit une suite de composants React pour les bibliothèques compatibles avec Mapbox GL JS. Ce guide vous expliquera les bases de l’utilisation de react-map-gl ainsi que quelques astuces avancées.

Pourquoi Utiliser react-map-gl ?

react-map-gl offre plusieurs avantages pour intégrer Mapbox avec React :

1. Intégration avec React : Adopte pleinement React et la programmation réactive, facilitant la gestion de la complexité des applications avec de nombreux composants.
2. Flexibilité : Offre un contrôle total sur l’état et le comportement de la carte via les props et la gestion d’état de React.
3. Performance : Conçu pour gérer efficacement de grands ensembles de données, ce qui le rend idéal pour les visualisations cartographiques complexes.

Commencer

Pour commencer avec react-map-gl, vous devez installer les packages nécessaires. Vous pouvez utiliser soit Mapbox, soit Maplibre comme bibliothèque de cartes sous-jacente.

Installation

Pour Mapbox :

npm install --save react-map-gl mapbox-gl @types/mapbox-gl

Pour Maplibre :

npm install --save react-map-gl @maplibre/maplibre-gl @types/@maplibre/maplibre-gl

Importation et Initialisation

Une fois les packages installés, vous pouvez importer et initialiser react-map-gl dans votre composant React :

import * as React from 'react';
import MapGL from '@maplibre/maplibre-gl';
import { MapView } from '@maplibre/react-map-gl';

const App = () => {
  return (
    <MapView
      mapStyle="mapbox://styles/mapbox/streets-v11"
      accessToken="YOUR_ACCESS_TOKEN"
      latitude={37.7749}
      longitude={-122.4194}
      zoom={12}
    >
      {/* Ajoutez vos couches et vos éléments de carte ici */}
    </MapView>
  );
};

Couches et Éléments de Carte

react-map-gl fournit plusieurs composants pour ajouter des couches et des éléments de carte à votre carte. Voici quelques exemples :

• Layer : Ajoute une couche de carte avec des options de style et de données.
• Marker : Ajoute un marqueur de carte avec des options de style et de position.
• Popup : Ajoute une info-bulle de carte avec des options de contenu et de position.

import * as React from 'react';
import MapGL from '@maplibre/maplibre-gl';
import { MapView, Layer, Marker, Popup } from '@maplibre/react-map-gl';

const App = () => {
  return (
    <MapView
      mapStyle="mapbox://styles/mapbox/streets-v11"
      accessToken="YOUR_ACCESS_TOKEN"
      latitude={37.7749}
      longitude={-122.4194}
      zoom={12}
    >
      <Layer
        id="points"
        type="circle"
        paint={{
          'circle-color': '#ff0000',
          'circle-radius': 10,
        }}
        data={[
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [-122.4194, 37.7749],
            },
          },
        ]}
      />
      <Marker
        latitude={37.7749}
        longitude={-122.4194}
        offsetLeft={-20}
        offsetTop={-10}
      >
        <img src="/marker.png" alt="Marker" />
      </Marker>
      <Popup
        latitude={37.7749}
        longitude={-122.4194}
        closeButton={false}
        closeOnClick={false}
        anchor="top"
      >
        <h1>Marqueur</h1>
        <p>Cette est une info-bulle de carte.</p>
      </Popup>
    </MapView>
  );
};

Contrôle de la Carte

react-map-gl fournit également des mécanismes pour contrôler la carte, tels que le zoom, la rotation et le déplacement. Vous pouvez utiliser les props onViewportChange et onMoveEnd pour gérer ces événements.

import * as React from 'react';
import MapGL from '@maplibre/maplibre-gl';
import { MapView } from '@maplibre/react-map-gl';

const App = () => {
  const [viewport, setViewport] = React.useState({
    latitude: 37.7749,
    longitude: -122.4194,
    zoom: 12,
  });

  const handleViewportChange = (newViewport) => {
    setViewport(newViewport);
  };

  return (
    <MapView
      mapStyle="mapbox://styles/mapbox/streets-v11"
      accessToken="YOUR_ACCESS_TOKEN"
      latitude={viewport.latitude}
      longitude={viewport.longitude}
      zoom={viewport.zoom}
      onViewportChange={handleViewportChange}
    >
      {/* Ajoutez vos couches et vos éléments de carte ici */}
    </MapView>
  );
};

Conclusion

react-map-gl est une bibliothèque puissante pour intégrer Mapbox avec React. Elle offre une grande flexibilité et des performances élevées pour créer des cartes interactives et dynamiques. En suivant ce guide, vous devriez maintenant être en mesure de commencer à utiliser react-map-gl dans vos applications React.