react-map-gl

react-map-gl is an open-source library that provides a React-friendly wrapper around Mapbox GL JS, a powerful JavaScript library for building interactive, customizable vector maps on the web. It allows React developers to declaratively render maps and integrate them seamlessly into React applications, leveraging React's component-based architecture and state management.

Key Features:
* Declarative API: Renders maps using React components, making it intuitive to manage map state and properties. This aligns perfectly with React's component model, where the UI is a function of state.
* Performance: Utilizes Mapbox GL JS's WebGL rendering capabilities, ensuring smooth, high-performance maps capable of handling large datasets and complex visualizations.
* Extensibility: Supports a wide range of Mapbox GL JS features, including various layer types (e.g., vector, raster, GeoJSON), interactive controls (e.g., navigation, scale), popups, markers, and custom styling.
* React Integration: Manages the map's view state (e.g., latitude, longitude, zoom, pitch, bearing) as React component state, enabling reactive updates and easy synchronization with other application data.
* Event Handling: Provides React-style event handlers (e.g., `onMove`, `onClick`, `onLoad`), simplifying interaction management and custom logic execution.

Benefits:
* Simplified Integration: Greatly simplifies the process of integrating sophisticated Mapbox GL JS maps into React projects, reducing boilerplate code.
* Improved Maintainability: Enhances code readability and maintainability through its component-based design, allowing map features to be encapsulated within reusable React components.
* Dynamic Data Visualization: Facilitates the creation of complex map interactions and dynamic data visualizations by tightly coupling map state with React component state, allowing for reactive updates based on application logic.

import React, { useState } from 'react';
import Map from 'react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

function MyMapComponent() {
  const [viewState, setViewState] = useState({
    longitude: -122.4,
    latitude: 37.8,
    zoom: 10,
    pitch: 0, // Angle of the map (0-60 degrees)
    bearing: 0 // Rotation of the map (0-360 degrees)
  });

  // IMPORTANT: Replace with your actual Mapbox access token
  // You can get one from https://account.mapbox.com/access-tokens/
  const MAPBOX_TOKEN = 'YOUR_MAPBOX_ACCESS_TOKEN';

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <Map
        mapboxAccessToken={MAPBOX_TOKEN}
        initialViewState={viewState}
        style={{ width: '100%', height: '100%' }}
        mapStyle="mapbox://styles/mapbox/streets-v12"
        onMove={evt => setViewState(evt.viewState)}
        // You can add more props like maxZoom, minZoom, etc.
      >
        {/* You can add custom markers, popups, or layers as children here */}
        {/* Example of adding a marker (requires importing Marker from 'react-map-gl'): */}
        {/* <Marker longitude={-122.4} latitude={37.8} anchor="bottom" > */}
        {/*   <div style={{ color: 'red', fontSize: '24px' }}>📍</div> */}
        {/* </Marker> */}
      </Map>
    </div>
  );
}

export default MyMapComponent;