React-mapbox-gl is a React wrapper for Mapbox GL JS, providing a set of React components for building interactive maps. It allows developers to easily integrate Mapbox's powerful mapping capabilities into React applications, offering a more declarative approach to map creation and management.

Pros

• Seamless integration with React applications
• Declarative API for easier map manipulation
• Supports custom layers and controls
• Automatic handling of map lifecycle and performance optimizations

Cons

• Requires a Mapbox access token, which may have usage limits
• Learning curve for developers unfamiliar with Mapbox GL JS
• Limited documentation compared to the official Mapbox GL JS library
• May lag behind in supporting the latest Mapbox GL JS features

Code Examples

1. Creating a basic map:

import ReactMapboxGl from 'react-mapbox-gl';

const Map = ReactMapboxGl({
  accessToken: 'your-mapbox-access-token'
});

const App = () => (
  <Map
    style="mapbox://styles/mapbox/streets-v11"
    containerStyle={{
      height: '100vh',
      width: '100vw'
    }}
  />
);

2. Adding a marker to the map:

import ReactMapboxGl, { Marker } from 'react-mapbox-gl';

const Map = ReactMapboxGl({
  accessToken: 'your-mapbox-access-token'
});

const App = () => (
  <Map
    style="mapbox://styles/mapbox/streets-v11"
    center={[-74.5, 40]}
    zoom={[9]}
  >
    <Marker coordinates={[-74.5, 40]}>
      <img src="marker.png" />
    </Marker>
  </Map>
);

3. Adding a GeoJSON layer:

import ReactMapboxGl, { GeoJSONLayer } from 'react-mapbox-gl';

const Map = ReactMapboxGl({
  accessToken: 'your-mapbox-access-token'
});

const geojson = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [-77.0323, 38.9131]
      },
      properties: {
        title: 'Mapbox DC',
        icon: 'monument'
      }
    }
  ]
};

const App = () => (
  <Map style="mapbox://styles/mapbox/streets-v11">
    <GeoJSONLayer
      data={geojson}
      symbolLayout={{
        "icon-image": "monument-15",
        "text-field": "{title}",
        "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
        "text-offset": [0, 0.6],
        "text-anchor": "top"
      }}
    />
  </Map>
);

Getting Started

1. Install the package:

   npm install react-mapbox-gl mapbox-gl
   

2. Import and use in your React application:

   import ReactMapboxGl from 'react-mapbox-gl';
   
   const Map = ReactMapboxGl({
     accessToken: 'your-mapbox-access-token'
   });
   
   function App() {
     return (
       <Map
         style="mapbox://styles/mapbox/streets-v11"
         containerStyle={{
           height: '400px',
           width: '100%'
         }}
       />
     );
   }
   

3. Make sure to include the Mapbox GL CSS in your project:

   <link href='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css' rel='stylesheet' />