Graticule

Draws a grid of meridians and parallels. Useful as a reference layer under or over the geographies.

Usage

import { ComposableMap, Graticule } from "react-simple-maps"
 
const Map = () => (
  <ComposableMap projection="geoOrthographic">
    <Graticule stroke="#DDD" step={[15, 15]} />
  </ComposableMap>
)

The rendered <path> gets the class rsm-graticule.

Props

fill

Fill of the graticule path. Defaults to "transparent", which is almost always what you want — a filled graticule covers the map.

stroke

Stroke colour of the grid lines. Defaults to "currentcolor", so it inherits the CSS color of an ancestor.

step

[longitudeStep, latitudeStep] in degrees between grid lines. Defaults to [10, 10]. A larger step gives a sparser grid:

<Graticule step={[30, 30]} />

className

Appended to the built-in rsm-graticule class.

SVG attributes

Any other prop is forwarded to the <path> — strokeWidth, strokeDasharray, opacity, style, and so on.

<Graticule stroke="#999" strokeWidth={0.5} strokeDasharray="2,2" />