react-simple-maps

Beautiful React SVG maps with d3-geo and topojson using a declarative api.

Github stars Tracking Chart

react-simple-maps

Create beautiful SVG maps in react with d3-geo and topojson using a declarative api.

Read the docs, or check out the examples.

Why

React-simple-maps aims to make working with svg maps in react easier. It handles tasks such as panning, zooming and simple rendering optimization, and takes advantage of parts of d3-geo and topojson-client instead of relying on the entire d3 library.

Since react-simple-maps leaves DOM work to react, it can also easily be used with other libraries, such as react-spring and react-annotation.

Install

To install react-simple-maps

$ npm install --save react-simple-maps@beta

...or if you use yarn:

$ yarn add react-simple-maps@beta

Usage

React-simple-maps exposes a set of components that can be combined to create svg maps with markers and annotations. In order to render a map you have to provide a reference to a valid topojson file. You can find example topojson files in the topojson-maps folder or on topojson world-atlas. To learn how to make your own topojson maps from shapefiles, please read "How to convert and prepare TopoJSON files for interactive mapping with d3" on medium.

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/zcreativelabs/react-simple-maps/master/topojson-maps/world-110m.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"))
})

Check out the live example

The above will render a world map using the equal earth projection. You can read more about this projection on Shaded Relief and on Wikipedia.

For other examples and components, check out the documentation.

License

MIT licensed. Copyright (c) Richard Zimerman 2017. See LICENSE.md for more details.

Main metrics

Overview
Name With Ownerzcreativelabs/react-simple-maps
Primary LanguageJavaScript
Program languageJavaScript (Language Count: 1)
Platform
License:MIT License
所有者活动
Created At2017-03-03 18:17:19
Pushed At2024-08-08 15:53:29
Last Commit At
Release Count45
Last Release Namev3.0.0 (Posted on 2022-07-25 20:18:50)
First Release Name0.1.0 (Posted on )
用户参与
Stargazers Count3.2k
Watchers Count25
Fork Count437
Commits Count320
Has Issues Enabled
Issues Count325
Issue Open Count174
Pull Requests Count36
Pull Requests Open Count9
Pull Requests Close Count7
项目设置
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private