{"library":"react-simple-maps","title":"React Simple Maps","description":"React Simple Maps is a component library designed to facilitate the creation of interactive SVG maps within React applications. As of version 3.0.0, released in July 2022, it provides a declarative API built on top of `d3-geo` and `topojson-client`, specifically handling common complexities like panning, zooming, and rendering optimizations. Unlike many mapping solutions, it does not bundle map data; users are required to provide their own GeoJSON or TopoJSON files. This approach makes the library lean and flexible, allowing seamless integration with other React ecosystem tools such as `react-spring` or `react-annotation`. While its average release cycle was historically around 145 days, v3.0.0 has been the latest stable release for some time, suggesting a slower development cadence or maintenance mode. Its core differentiator lies in its minimalist design, offering building blocks for custom map charts without unnecessary bloat, focusing on the core task of rendering and interacting with geographic data.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-simple-maps"],"cli":null},"imports":["import { ComposableMap } from 'react-simple-maps';","import { Geographies } from 'react-simple-maps';","import { Geography } from 'react-simple-maps';","import { Marker } from 'react-simple-maps';","import { ZoomableGroup } from 'react-simple-maps';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { ComposableMap, Geographies, Geography, Marker } from 'react-simple-maps';\n\nconst geoUrl = 'https://raw.githubusercontent.com/deldersveld/topojson/master/world-countries.json';\n\nconst markers = [\n  { markerOffset: -15, name: 'Buenos Aires', coordinates: [-58.3816, -34.6037] },\n  { markerOffset: -15, name: 'La Paz', coordinates: [-68.1193, -16.4897] },\n  { markerOffset: 25, name: 'Brasília', coordinates: [-47.8825, -15.7942] },\n  { markerOffset: 25, name: 'Santiago', coordinates: [-70.6693, -33.4489] },\n  { markerOffset: -15, name: 'Bogotá', coordinates: [-74.0721, 4.7110] },\n  { markerOffset: 25, name: 'Quito', coordinates: [-78.4678, -0.1807] }\n];\n\nconst MapChart = () => {\n  return (\n    <ComposableMap\n      projection=\"geoEqualEarth\"\n      projectionConfig={{\n        scale: 160\n      }}\n      style={{\n        width: '100%',\n        height: 'auto'\n      }}\n    >\n      <Geographies geography={geoUrl}>\n        {({ geographies }) =>\n          geographies.map((geo) => (\n            <Geography\n              key={geo.rsmKey}\n              geography={geo}\n              fill=\"#D6D6DA\"\n              stroke=\"#FFFFFF\"\n              strokeWidth={0.5}\n            />\n          ))\n        }\n      </Geographies>\n      {markers.map(({ name, coordinates, markerOffset }) => (\n        <Marker key={name} coordinates={coordinates}>\n          <circle r={8} fill=\"#F00\" stroke=\"#fff\" strokeWidth={2} />\n          <text\n            textAnchor=\"middle\"\n            y={markerOffset}\n            style={{ fontFamily: 'system-ui', fill: '#5D5A6D', fontSize: '10px' }}\n          >\n            {name}\n          </text>\n        </Marker>\n      ))}\n    </ComposableMap>\n  );\n};\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(<MapChart />);","lang":"javascript","description":"This quickstart renders a basic world map using the `geoEqualEarth` projection, fetching a TopoJSON file from a URL. It then overlays a set of predefined markers with labels for several South American capitals. The map is set to fill 100% width and auto height.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}