React-geo-grapher NPM

react-geo-grapher is a library that allows you to display quantitative data across sections of a geographic region.

You must have a geojson file that matches the desired region and this file must follow a specific structure.
see this example.

Install

Using npm:

npm install react-geo-grapher

Using yarn:

yarn add react-geo-grapher

For the library to work correctly it is necessary to add the following line to the .env at the root of the project.

SKIP_PREFLIGHT_CHECK=true

BarMap

      // import your geojson file
      import goias from "./goias.json"
      import {BarMap} from  'react-geo-grapher'

      ...

      // Set the properties
      <BarMap
        style={{ width: "400px", background: "#ffffff" }}
        geojson={goias}
        percents={[40, 30, 30]}
        colors={['#040DA6', '#10863C', '#920B8E']}
        scale={5500}
      />

Properties

Parameter	Type	Definition
percents	`Array<number>`	Each array index will correspond to a section in the map, the sum of array values must equal 100, all numbers must be integers.
colors	`Array<string>`	Each index of the array will match the color of a section on the map.
geojson	`Feature` or `FeatureCollection` or `any`	Geojson file.
style	`CSSProperties` or `undefined`	Css properties that will be applied to the \ around the map.
scale	`number`	Property from `ComposableMapProps` that scale the geojson on the map.
ComposableMapProps?	`ComposableMapProps`	More details here
ZoomableGroupProps?	`ZoomableGroupProps`	More details here

LineMap

      // import your geojson file
      import goias from "./goias.json";
      import {LineMap} from  'react-geo-grapher'
      ...

      // Set the properties
      <LineMap
        style={{ width: "400px", background: "#ffffff" }}
        geojson={goias}
        percents={[40, 30, 30]}
        colors={['#040DA6', '#10863C', '#920B8E']}
        scale={4700}
        scaleFactor={30}
        strokeWidth="15px"
      />

Properties

Parameter	Type	Definition
percents	`Array<number>`	Each array index will correspond to a section in the map, the sum of array values must equal 100, all numbers must be integers.
colors	`Array<string>`	Each index of the array will match the color of a section on the map.
geojson	`Feature` or `FeatureCollection` or `any`	Geojson file.
style	`CSSProperties` or `undefined`	Css properties that will be applied to the \ around the map.
scale	`number`	Property from `ComposableMapProps` that scale the geojson on the map.
scaleFactor	`number`	`number-1` of lines.
strokeWidth	`string`	stroke width of line (The larger, the greater the height of each line).
ComposableMapProps?	`ComposableMapProps`	More details here
ZoomableGroupProps?	`ZoomableGroupProps`	More details here

CircMap

      // import your geojson file
      import goias from "./goias.json";
      import {CircMap} from  'react-geo-grapher'
      ...

      // Set the properties
      <CircMap
        style={{ width: "400px", background: "#ffffff" }}
        geojson={goias}
        percents={[40, 30, 30]}
        colors={['#040DA6', '#10863C', '#920B8E']}
        scale={4700}
        spacing={25}
        itemSize={8}
      />

Properties

Parameter	Type	Definition
limits	`Array<number>`	Each array index will correspond to a section in the map, the sum of array values must equal 100, all numbers must be integers.
colors	`Array<string>`	Each index of the array will match the color of a section on the map.
geojson	`Feature` or `FeatureCollection` or `any`	Geojson file.
style	`CSSProperties` or `undefined`	Css properties that will be applied to the \ around the map.
scale	`number`	Property from `ComposableMapProps` that scale the geojson on the map.
spacing	`number`	Space between circles.
itemSize	`number`	Circles radius.
ComposableMapProps?	`ComposableMapProps`	More details here
ZoomableGroupProps?	`ZoomableGroupProps`	More details here

SquaredMap

      // import your geojson file
      import goias from "./goias.json";
      import {SquaredMap} from  'react-geo-grapher'
      ...

      // Set the properties
      <SquaredMap
        style={{ width: "400px", background: "#ffffff" }}
        geojson={goias}
        percents={[40, 30, 30]}
        colors={['#040DA6', '#10863C', '#920B8E']}
        scale={4700}
        spacing={25}
        itemSize={8}
      />

Properties

Parameter	Type	Definition
percents	`Array<number>`	Each array index will correspond to a section in the map, the sum of array values must equal 100, all numbers must be integers.
colors	`Array<string>`	Each index of the array will match the color of a section on the map.
geojson	`Feature` or `FeatureCollection` or `any`	Geojson file.
style	`CSSProperties` or `undefined`	Css properties that will be applied to the \ around the map.
scale	`number`	Property from `ComposableMapProps` that scale the geojson on the map.
spacing	`number`	Space between squares.
itemSize	`number`	Width and height of squares.
ComposableMapProps?	`ComposableMapProps`	More details here
ZoomableGroupProps?	`ZoomableGroupProps`	More details here

Considerations

This library uses products from other libraries, such as react-simple-maps and turf.
It is not recommended for use in commercial projects as it contains some incompatibility issues with some geojson file structures.