DOCSEARCHbyAlgolia
Submit Docs

react-simple-maps

repository·main·Indexed 25 days ago

https://github.com/zcreativelabs/react-simple-maps

An SVG map chart component for React that uses a declarative API to render maps. It leverages d3-geo and topojson-client for rendering, panning, and zooming. The library provides core components such as ComposableMap, Geographies, Geography, Marker, and Line, as well as state management via MapProvider and ZoomPanProvider with associated hooks like useMapContext and useZoomPanContext.

Tokens
1.1K
Snippets
4
Records
7
Agent score
35%

What's inside react-simple-maps

  3. Create a basic SVG map

    main

    To render a map, use the ComposableMap, Geographies, and Geography components. You must provide a URL to a valid TopoJSON file to the geographies prop of the Geographies component. The Geographies component uses a render prop that provides an array of geographies, which you can then map over to render individual Geography components.

    import React from "react";
import ReactDOM from "react-dom";
import { ComposableMap, Geographies, Geography } from "react-simple-maps";

// url to a valid topojson file
const geoUrl =
  "https://raw.githubusercontent.com/deldersveld/topojson/master/world-countries.json";

const App = () => {
  return (
    <div>
      <ComposableMap>
        <Geographies geography={geoUrl}>
          {({ geographies }) =>
            geographies.map((geo) => (
              <Geography key={geo.rsmKey} geography={geo} />
            ))
          }
        </Geographies>
      </ComposableMap>
    </div>
  );
};

document.addEventListener("DOMContentLoaded", () => {
  ReactDOM.render(<App />, document.getElementById("app"));
});

  4. Access map state with MapProvider and useMapContext

    main

    The MapProvider and MapContext allow you to manage and share map-related state across your component tree. You can consume this state using the useMapContext hook.

    import {
  MapProvider,
  MapContext,
  useMapContext
} from 'react-simple-maps';

  5. Use core react-simple-maps components

    main

    The following components are the primary building blocks for creating maps. They are exported from the main entry point:

    • ComposableMap: The top-level container for your map.
    • Geographies: A wrapper for rendering multiple geographic features.
    • Geography: Represents a single geographic feature (e.g., a country or state).
    • Graticule: Renders a grid of latitude and longitude lines.
    • Sphere: Renders a background sphere (useful for world maps).
    • ZoomableGroup: A component that enables zooming and panning capabilities.
    • Marker: Used to place points or icons at specific coordinates.
    • Line: Used to draw lines between coordinates.
    • Annotation: Used to add text or labels to the map.

  6. Manage zoom and pan state with ZoomPanProvider and useZoomPanContext

    main

    The ZoomPanProvider and ZoomPanContext provide state management for zoom and pan interactions. You can consume this state using the useZoomPanContext hook.

    import {
  ZoomPanProvider,
  ZoomPanContext,
  useZoomPanContext
} from 'react-simple-maps';

  7. Use react-simple-maps hooks

    main

    The library provides custom hooks for interacting with map data and zoom/pan state:

    • useGeographies: A hook to fetch and manage geographic data.
    • useZoomPan: A hook to interact with or control zoom and pan state.
    • useMapContext: A hook to access the map context.
    • useZoomPanContext: A hook to access the zoom and pan context.