Star
Chart primitives
Layouts & specialized
Interactions
SVG utilities
Data utilities
Umbrella package

@vx/geo

The @vx/geo package provides react components for rendering common and custom geographic projections. <Projection /> can be used to render preset projections (projection='orthographic' | 'albers' | 'albersUsa' | 'mercator' | 'naturalEarth' | 'equalEarth') along with configurable <Graticule />s lines. Convenience projections such as <Mercator /> are also exported, along with <CustomProjection /> and <Graticule /> for full customization.

Installation

npm install --save @vx/geo

Examples

Preset Geos
<Geo.Mercator />
Custom Geos
<Geo.CustomProjection />

Components

APIs

#<Projection />

# Projection.dataDatum[]required

Array of features to project.

# Projection.center[number, number] | undefinedoptional

Sets the projection’s center to the specified two-element array of longitude and latitude in degrees.

# Projection.centroid((centroid: [number, number], feature: ParsedFeature<Datum>) => ReactNode) | undefinedoptional

Hook to render anything at the centroid of a feature.

# Projection.children((args: { path: GeoPath<any, GeoPermissibleObjects>; features: ParsedFeature<Datum>[]; }) => ReactNode) | undefinedoptional

Override render function which is passed the

# Projection.classNamestring | undefinedoptional

className to apply to feature path elements.

# Projection.clipAnglenumber | undefinedoptional

Sets the projection’s clipping circle radius to the specified angle in degree.

# Projection.clipExtent[[number, number], [number, number]] | undefinedoptional

Sets the projection’s viewport clip extent to the specified bounds in pixels. extent bounds are specified as an array [x₀, y₀, x₁, y₁], where x₀ is the left-side of the viewport, y₀ is the top, x₁ is the right and y₁ is the bottom.

# Projection.fitExtent[[[number, number], [number, number]], any] | undefinedoptional

Sets the projection’s scale and translate to fit the specified GeoJSON object in the center of the given extent. The extent is specified as an array [x₀, y₀, x₁, y₁], where x₀ is the left side of the bounding box, y₀ is the top, x₁ is the right and y₁ is the bottom.

# Projection.fitSize[[number, number], any] | undefinedoptional

Convenience prop for props.fitExtent where the top-left corner of the extent is 0, 0.

# Projection.graticule(Pick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }) | undefinedoptional

If specified, renders a Graticule with the specified props. Specify graticule.foreground = true to be rendered on top of features.

# Projection.graticuleLines(Pick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }) | undefinedoptional

If specified, renders a Graticule lines with the specified props. Specify graticuleLines.foreground = true to be rendered on top of features.

# Projection.graticuleOutline(Pick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "lines" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }) | undefinedoptional

If specified, renders a Graticule outline with the specified props. Specify graticuleOutline.foreground = true to be rendered on top of features.

# Projection.innerRef((feature: ParsedFeature<Datum>, index: number) => Ref<SVGPathElement>) | undefinedoptional

Function invoked for each feature which returns a React.Ref to the projection path element for that feature.

# Projection.pointRadiusnumber | undefinedoptional

Sets the radius used to display Point and MultiPoint geometries to the specified number.

# Projection.precisionnumber | undefinedoptional

Sets the threshold for the projection’s adaptive resampling to the specified value in pixels.

# Projection.projection"mercator" | "orthographic" | "albers" | "albersUsa" | "naturalEarth" | "equalEarth" | (() => GeoProjection) | undefinedoptional

Preset projection name, or custom projection function which returns a GeoProjection.

Default mercator

# Projection.projectionFunc((projection: GeoProjection) => ReactNode) | undefinedoptional

Hook to render above features, passed the configured projectionFunc.

# Projection.rotate[number, number] | [number, number, number] | undefinedoptional

Sets the projection’s three-axis spherical rotation to the specified angles [lambda, phi , gamma], corresponding to yaw, pitch, and roll.

# Projection.scalenumber | undefinedoptional

Sets the projection’s scale factor to the specified value. The scale factor corresponds linearly to the distance between projected points; however, absolute scale factors are not equivalent across projections.

# Projection.translate[number, number] | undefinedoptional

Sets the projection’s translation offset, which determines the pixel coordinates of the projection’s center, to the specified two-element array tx, ty.

#<Graticule />

# Graticule.children(({ graticule }: { graticule: GeoGraticuleGenerator; }) => ReactNode) | undefinedoptional

Override render function, which is passed the configured graticule generator.

# Graticule.extent[[number, number], [number, number]] | undefinedoptional

Sets the major and minor extents of the graticule generator, which defaults to ⟨⟨-180°, -80° - ε⟩, ⟨180°, 80° + ε⟩⟩.

# Graticule.extentMajor[[number, number], [number, number]] | undefinedoptional

Sets the major extent of the graticule generator, which defaults to ⟨⟨-180°, -90° + ε⟩, ⟨180°, 90° - ε⟩⟩.

# Graticule.extentMinor[[number, number], [number, number]] | undefinedoptional

Sets the major extent of the graticule generator, which defaults to ⟨⟨-180°, -80° - ε⟩, ⟨180°, 80° + ε⟩⟩.

# Graticule.graticule((multiLineString: MultiLineString) => string) | undefinedoptional

Render function for graticules which is passed a GeoJSON MultiLineString geometry object representing all meridians and parallels for the graticule.

# Graticule.lines((lineString: LineString) => string) | undefinedoptional

Render function for graticule lines, which is invoked once for each meridian or parallel for the graticule, and is passed the GeoJSON LineString object representing said meridian or parallel.

# Graticule.outline((polygon: Polygon) => string) | undefinedoptional

Render function for the outline of the graticule (i.e. along the meridians and parallels defining its extent). It is passed a GeoJSON Polygon geometry object representing the outline.

# Graticule.precisionnumber | undefinedoptional

Sets the precision of the graticule generator, which defaults to 2.5°.

# Graticule.step[number, number] | undefinedoptional

Sets both the major and minor step of the graticule generator.

# Graticule.stepMajor[number, number] | undefinedoptional

Sets the major step of the graticule generator, which defaults to ⟨90°, 360°⟩.

# Graticule.stepMinor[number, number] | undefinedoptional

Sets the major step of the graticule generator, which defaults to ⟨10°, 10°⟩.

#<Albers />

# Albers.dataDatum[]required

Array of features to project.

# Albers.center[number, number] | undefinedoptional

Sets the projection’s center to the specified two-element array of longitude and latitude in degrees.

# Albers.centroid((centroid: [number, number], feature: ParsedFeature<Datum>) => ReactNode) | undefinedoptional

Hook to render anything at the centroid of a feature.

# Albers.children((args: { path: GeoPath<any, GeoPermissibleObjects>; features: ParsedFeature<Datum>[]; }) => ReactNode) | undefinedoptional

Override render function which is passed the

# Albers.classNamestring | undefinedoptional

className to apply to feature path elements.

# Albers.clipAnglenumber | undefinedoptional

Sets the projection’s clipping circle radius to the specified angle in degree.

# Albers.clipExtent[[number, number], [number, number]] | undefinedoptional

Sets the projection’s viewport clip extent to the specified bounds in pixels. extent bounds are specified as an array [x₀, y₀, x₁, y₁], where x₀ is the left-side of the viewport, y₀ is the top, x₁ is the right and y₁ is the bottom.

# Albers.fitExtent[[[number, number], [number, number]], any] | undefinedoptional

Sets the projection’s scale and translate to fit the specified GeoJSON object in the center of the given extent. The extent is specified as an array [x₀, y₀, x₁, y₁], where x₀ is the left side of the bounding box, y₀ is the top, x₁ is the right and y₁ is the bottom.

# Albers.fitSize[[number, number], any] | undefinedoptional

Convenience prop for props.fitExtent where the top-left corner of the extent is 0, 0.

# Albers.graticule(Pick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }) | undefinedoptional

If specified, renders a Graticule with the specified props. Specify graticule.foreground = true to be rendered on top of features.

# Albers.graticuleLines(Pick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }) | undefinedoptional

If specified, renders a Graticule lines with the specified props. Specify graticuleLines.foreground = true to be rendered on top of features.

# Albers.graticuleOutline(Pick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "lines" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }) | undefinedoptional

If specified, renders a Graticule outline with the specified props. Specify graticuleOutline.foreground = true to be rendered on top of features.

# Albers.innerRef((feature: ParsedFeature<Datum>, index: number) => Ref<SVGPathElement>) | undefinedoptional

Function invoked for each feature which returns a React.Ref to the projection path element for that feature.

# Albers.pointRadiusnumber | undefinedoptional

Sets the radius used to display Point and MultiPoint geometries to the specified number.

# Albers.precisionnumber | undefinedoptional

Sets the threshold for the projection’s adaptive resampling to the specified value in pixels.

# Albers.projectionFunc((projection: GeoProjection) => ReactNode) | undefinedoptional

Hook to render above features, passed the configured projectionFunc.

# Albers.rotate[number, number] | [number, number, number] | undefinedoptional

Sets the projection’s three-axis spherical rotation to the specified angles [lambda, phi , gamma], corresponding to yaw, pitch, and roll.

# Albers.scalenumber | undefinedoptional

Sets the projection’s scale factor to the specified value. The scale factor corresponds linearly to the distance between projected points; however, absolute scale factors are not equivalent across projections.

# Albers.translate[number, number] | undefinedoptional

Sets the projection’s translation offset, which determines the pixel coordinates of the projection’s center, to the specified two-element array tx, ty.

#<AlbersUsa />

# AlbersUsa.dataDatum[]required

Array of features to project.

# AlbersUsa.center[number, number] | undefinedoptional

Sets the projection’s center to the specified two-element array of longitude and latitude in degrees.

# AlbersUsa.centroid((centroid: [number, number], feature: ParsedFeature<Datum>) => ReactNode) | undefinedoptional

Hook to render anything at the centroid of a feature.

# AlbersUsa.children((args: { path: GeoPath<any, GeoPermissibleObjects>; features: ParsedFeature<Datum>[]; }) => ReactNode) | undefinedoptional

Override render function which is passed the

# AlbersUsa.classNamestring | undefinedoptional

className to apply to feature path elements.

# AlbersUsa.clipAnglenumber | undefinedoptional

Sets the projection’s clipping circle radius to the specified angle in degree.

# AlbersUsa.clipExtent[[number, number], [number, number]] | undefinedoptional

Sets the projection’s viewport clip extent to the specified bounds in pixels. extent bounds are specified as an array [x₀, y₀, x₁, y₁], where x₀ is the left-side of the viewport, y₀ is the top, x₁ is the right and y₁ is the bottom.

# AlbersUsa.fitExtent[[[number, number], [number, number]], any] | undefinedoptional

Sets the projection’s scale and translate to fit the specified GeoJSON object in the center of the given extent. The extent is specified as an array [x₀, y₀, x₁, y₁], where x₀ is the left side of the bounding box, y₀ is the top, x₁ is the right and y₁ is the bottom.

# AlbersUsa.fitSize[[number, number], any] | undefinedoptional

Convenience prop for props.fitExtent where the top-left corner of the extent is 0, 0.

# AlbersUsa.graticule(Pick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }) | undefinedoptional

If specified, renders a Graticule with the specified props. Specify graticule.foreground = true to be rendered on top of features.

# AlbersUsa.graticuleLines(Pick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }) | undefinedoptional

If specified, renders a Graticule lines with the specified props. Specify graticuleLines.foreground = true to be rendered on top of features.

# AlbersUsa.graticuleOutline(Pick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "lines" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }) | undefinedoptional

If specified, renders a Graticule outline with the specified props. Specify graticuleOutline.foreground = true to be rendered on top of features.

# AlbersUsa.innerRef((feature: ParsedFeature<Datum>, index: number) => Ref<SVGPathElement>) | undefinedoptional

Function invoked for each feature which returns a React.Ref to the projection path element for that feature.

# AlbersUsa.pointRadiusnumber | undefinedoptional

Sets the radius used to display Point and MultiPoint geometries to the specified number.

# AlbersUsa.precisionnumber | undefinedoptional

Sets the threshold for the projection’s adaptive resampling to the specified value in pixels.

# AlbersUsa.projectionFunc((projection: GeoProjection) => ReactNode) | undefinedoptional

Hook to render above features, passed the configured projectionFunc.

# AlbersUsa.rotate[number, number] | [number, number, number] | undefinedoptional

Sets the projection’s three-axis spherical rotation to the specified angles [lambda, phi , gamma], corresponding to yaw, pitch, and roll.

# AlbersUsa.scalenumber | undefinedoptional

Sets the projection’s scale factor to the specified value. The scale factor corresponds linearly to the distance between projected points; however, absolute scale factors are not equivalent across projections.

# AlbersUsa.translate[number, number] | undefinedoptional

Sets the projection’s translation offset, which determines the pixel coordinates of the projection’s center, to the specified two-element array tx, ty.

#<CustomProjection />

# CustomProjection.dataDatum[]required

Array of features to project.

# CustomProjection.center[number, number] | undefinedoptional

Sets the projection’s center to the specified two-element array of longitude and latitude in degrees.

# CustomProjection.centroid((centroid: [number, number], feature: ParsedFeature<Datum>) => ReactNode) | undefinedoptional

Hook to render anything at the centroid of a feature.

# CustomProjection.children((args: { path: GeoPath<any, GeoPermissibleObjects>; features: ParsedFeature<Datum>[]; }) => ReactNode) | undefinedoptional

Override render function which is passed the

# CustomProjection.classNamestring | undefinedoptional

className to apply to feature path elements.

# CustomProjection.clipAnglenumber | undefinedoptional

Sets the projection’s clipping circle radius to the specified angle in degree.

# CustomProjection.clipExtent[[number, number], [number, number]] | undefinedoptional

Sets the projection’s viewport clip extent to the specified bounds in pixels. extent bounds are specified as an array [x₀, y₀, x₁, y₁], where x₀ is the left-side of the viewport, y₀ is the top, x₁ is the right and y₁ is the bottom.

# CustomProjection.fitExtent[[[number, number], [number, number]], any] | undefinedoptional

Sets the projection’s scale and translate to fit the specified GeoJSON object in the center of the given extent. The extent is specified as an array [x₀, y₀, x₁, y₁], where x₀ is the left side of the bounding box, y₀ is the top, x₁ is the right and y₁ is the bottom.

# CustomProjection.fitSize[[number, number], any] | undefinedoptional

Convenience prop for props.fitExtent where the top-left corner of the extent is 0, 0.

# CustomProjection.graticule(Pick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }) | undefinedoptional

If specified, renders a Graticule with the specified props. Specify graticule.foreground = true to be rendered on top of features.

# CustomProjection.graticuleLines(Pick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }) | undefinedoptional

If specified, renders a Graticule lines with the specified props. Specify graticuleLines.foreground = true to be rendered on top of features.

# CustomProjection.graticuleOutline(Pick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "lines" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }) | undefinedoptional

If specified, renders a Graticule outline with the specified props. Specify graticuleOutline.foreground = true to be rendered on top of features.

# CustomProjection.innerRef((feature: ParsedFeature<Datum>, index: number) => Ref<SVGPathElement>) | undefinedoptional

Function invoked for each feature which returns a React.Ref to the projection path element for that feature.

# CustomProjection.pointRadiusnumber | undefinedoptional

Sets the radius used to display Point and MultiPoint geometries to the specified number.

# CustomProjection.precisionnumber | undefinedoptional

Sets the threshold for the projection’s adaptive resampling to the specified value in pixels.

# CustomProjection.projection"mercator" | "orthographic" | "albers" | "albersUsa" | "naturalEarth" | "equalEarth" | (() => GeoProjection) | undefinedoptional

Preset projection name, or custom projection function which returns a GeoProjection.

# CustomProjection.projectionFunc((projection: GeoProjection) => ReactNode) | undefinedoptional

Hook to render above features, passed the configured projectionFunc.

# CustomProjection.rotate[number, number] | [number, number, number] | undefinedoptional

Sets the projection’s three-axis spherical rotation to the specified angles [lambda, phi , gamma], corresponding to yaw, pitch, and roll.

# CustomProjection.scalenumber | undefinedoptional

Sets the projection’s scale factor to the specified value. The scale factor corresponds linearly to the distance between projected points; however, absolute scale factors are not equivalent across projections.

# CustomProjection.translate[number, number] | undefinedoptional

Sets the projection’s translation offset, which determines the pixel coordinates of the projection’s center, to the specified two-element array tx, ty.

#<EqualEarth />

# EqualEarth.dataDatum[]required

Array of features to project.

# EqualEarth.center[number, number] | undefinedoptional

Sets the projection’s center to the specified two-element array of longitude and latitude in degrees.

# EqualEarth.centroid((centroid: [number, number], feature: ParsedFeature<Datum>) => ReactNode) | undefinedoptional

Hook to render anything at the centroid of a feature.

# EqualEarth.children((args: { path: GeoPath<any, GeoPermissibleObjects>; features: ParsedFeature<Datum>[]; }) => ReactNode) | undefinedoptional

Override render function which is passed the

# EqualEarth.classNamestring | undefinedoptional

className to apply to feature path elements.

# EqualEarth.clipAnglenumber | undefinedoptional

Sets the projection’s clipping circle radius to the specified angle in degree.

# EqualEarth.clipExtent[[number, number], [number, number]] | undefinedoptional

Sets the projection’s viewport clip extent to the specified bounds in pixels. extent bounds are specified as an array [x₀, y₀, x₁, y₁], where x₀ is the left-side of the viewport, y₀ is the top, x₁ is the right and y₁ is the bottom.

# EqualEarth.fitExtent[[[number, number], [number, number]], any] | undefinedoptional

Sets the projection’s scale and translate to fit the specified GeoJSON object in the center of the given extent. The extent is specified as an array [x₀, y₀, x₁, y₁], where x₀ is the left side of the bounding box, y₀ is the top, x₁ is the right and y₁ is the bottom.

# EqualEarth.fitSize[[number, number], any] | undefinedoptional

Convenience prop for props.fitExtent where the top-left corner of the extent is 0, 0.

# EqualEarth.graticule(Pick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }) | undefinedoptional

If specified, renders a Graticule with the specified props. Specify graticule.foreground = true to be rendered on top of features.

# EqualEarth.graticuleLines(Pick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }) | undefinedoptional

If specified, renders a Graticule lines with the specified props. Specify graticuleLines.foreground = true to be rendered on top of features.

# EqualEarth.graticuleOutline(Pick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "lines" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }) | undefinedoptional

If specified, renders a Graticule outline with the specified props. Specify graticuleOutline.foreground = true to be rendered on top of features.

# EqualEarth.innerRef((feature: ParsedFeature<Datum>, index: number) => Ref<SVGPathElement>) | undefinedoptional

Function invoked for each feature which returns a React.Ref to the projection path element for that feature.

# EqualEarth.pointRadiusnumber | undefinedoptional

Sets the radius used to display Point and MultiPoint geometries to the specified number.

# EqualEarth.precisionnumber | undefinedoptional

Sets the threshold for the projection’s adaptive resampling to the specified value in pixels.

# EqualEarth.projectionFunc((projection: GeoProjection) => ReactNode) | undefinedoptional

Hook to render above features, passed the configured projectionFunc.

# EqualEarth.rotate[number, number] | [number, number, number] | undefinedoptional

Sets the projection’s three-axis spherical rotation to the specified angles [lambda, phi , gamma], corresponding to yaw, pitch, and roll.

# EqualEarth.scalenumber | undefinedoptional

Sets the projection’s scale factor to the specified value. The scale factor corresponds linearly to the distance between projected points; however, absolute scale factors are not equivalent across projections.

# EqualEarth.translate[number, number] | undefinedoptional

Sets the projection’s translation offset, which determines the pixel coordinates of the projection’s center, to the specified two-element array tx, ty.

#<Mercator />

# Mercator.dataDatum[]required

Array of features to project.

# Mercator.center[number, number] | undefinedoptional

Sets the projection’s center to the specified two-element array of longitude and latitude in degrees.

# Mercator.centroid((centroid: [number, number], feature: ParsedFeature<Datum>) => ReactNode) | undefinedoptional

Hook to render anything at the centroid of a feature.

# Mercator.children((args: { path: GeoPath<any, GeoPermissibleObjects>; features: ParsedFeature<Datum>[]; }) => ReactNode) | undefinedoptional

Override render function which is passed the

# Mercator.classNamestring | undefinedoptional

className to apply to feature path elements.

# Mercator.clipAnglenumber | undefinedoptional

Sets the projection’s clipping circle radius to the specified angle in degree.

# Mercator.clipExtent[[number, number], [number, number]] | undefinedoptional

Sets the projection’s viewport clip extent to the specified bounds in pixels. extent bounds are specified as an array [x₀, y₀, x₁, y₁], where x₀ is the left-side of the viewport, y₀ is the top, x₁ is the right and y₁ is the bottom.

# Mercator.fitExtent[[[number, number], [number, number]], any] | undefinedoptional

Sets the projection’s scale and translate to fit the specified GeoJSON object in the center of the given extent. The extent is specified as an array [x₀, y₀, x₁, y₁], where x₀ is the left side of the bounding box, y₀ is the top, x₁ is the right and y₁ is the bottom.

# Mercator.fitSize[[number, number], any] | undefinedoptional

Convenience prop for props.fitExtent where the top-left corner of the extent is 0, 0.

# Mercator.graticule(Pick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }) | undefinedoptional

If specified, renders a Graticule with the specified props. Specify graticule.foreground = true to be rendered on top of features.

# Mercator.graticuleLines(Pick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }) | undefinedoptional

If specified, renders a Graticule lines with the specified props. Specify graticuleLines.foreground = true to be rendered on top of features.

# Mercator.graticuleOutline(Pick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "lines" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }) | undefinedoptional

If specified, renders a Graticule outline with the specified props. Specify graticuleOutline.foreground = true to be rendered on top of features.

# Mercator.innerRef((feature: ParsedFeature<Datum>, index: number) => Ref<SVGPathElement>) | undefinedoptional

Function invoked for each feature which returns a React.Ref to the projection path element for that feature.

# Mercator.pointRadiusnumber | undefinedoptional

Sets the radius used to display Point and MultiPoint geometries to the specified number.

# Mercator.precisionnumber | undefinedoptional

Sets the threshold for the projection’s adaptive resampling to the specified value in pixels.

# Mercator.projectionFunc((projection: GeoProjection) => ReactNode) | undefinedoptional

Hook to render above features, passed the configured projectionFunc.

# Mercator.rotate[number, number] | [number, number, number] | undefinedoptional

Sets the projection’s three-axis spherical rotation to the specified angles [lambda, phi , gamma], corresponding to yaw, pitch, and roll.

# Mercator.scalenumber | undefinedoptional

Sets the projection’s scale factor to the specified value. The scale factor corresponds linearly to the distance between projected points; however, absolute scale factors are not equivalent across projections.

# Mercator.translate[number, number] | undefinedoptional

Sets the projection’s translation offset, which determines the pixel coordinates of the projection’s center, to the specified two-element array tx, ty.

#<NaturalEarth />

# NaturalEarth.dataDatum[]required

Array of features to project.

# NaturalEarth.center[number, number] | undefinedoptional

Sets the projection’s center to the specified two-element array of longitude and latitude in degrees.

# NaturalEarth.centroid((centroid: [number, number], feature: ParsedFeature<Datum>) => ReactNode) | undefinedoptional

Hook to render anything at the centroid of a feature.

# NaturalEarth.children((args: { path: GeoPath<any, GeoPermissibleObjects>; features: ParsedFeature<Datum>[]; }) => ReactNode) | undefinedoptional

Override render function which is passed the

# NaturalEarth.classNamestring | undefinedoptional

className to apply to feature path elements.

# NaturalEarth.clipAnglenumber | undefinedoptional

Sets the projection’s clipping circle radius to the specified angle in degree.

# NaturalEarth.clipExtent[[number, number], [number, number]] | undefinedoptional

Sets the projection’s viewport clip extent to the specified bounds in pixels. extent bounds are specified as an array [x₀, y₀, x₁, y₁], where x₀ is the left-side of the viewport, y₀ is the top, x₁ is the right and y₁ is the bottom.

# NaturalEarth.fitExtent[[[number, number], [number, number]], any] | undefinedoptional

Sets the projection’s scale and translate to fit the specified GeoJSON object in the center of the given extent. The extent is specified as an array [x₀, y₀, x₁, y₁], where x₀ is the left side of the bounding box, y₀ is the top, x₁ is the right and y₁ is the bottom.

# NaturalEarth.fitSize[[number, number], any] | undefinedoptional

Convenience prop for props.fitExtent where the top-left corner of the extent is 0, 0.

# NaturalEarth.graticule(Pick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }) | undefinedoptional

If specified, renders a Graticule with the specified props. Specify graticule.foreground = true to be rendered on top of features.

# NaturalEarth.graticuleLines(Pick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }) | undefinedoptional

If specified, renders a Graticule lines with the specified props. Specify graticuleLines.foreground = true to be rendered on top of features.

# NaturalEarth.graticuleOutline(Pick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "lines" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }) | undefinedoptional

If specified, renders a Graticule outline with the specified props. Specify graticuleOutline.foreground = true to be rendered on top of features.

# NaturalEarth.innerRef((feature: ParsedFeature<Datum>, index: number) => Ref<SVGPathElement>) | undefinedoptional

Function invoked for each feature which returns a React.Ref to the projection path element for that feature.

# NaturalEarth.pointRadiusnumber | undefinedoptional

Sets the radius used to display Point and MultiPoint geometries to the specified number.

# NaturalEarth.precisionnumber | undefinedoptional

Sets the threshold for the projection’s adaptive resampling to the specified value in pixels.

# NaturalEarth.projectionFunc((projection: GeoProjection) => ReactNode) | undefinedoptional

Hook to render above features, passed the configured projectionFunc.

# NaturalEarth.rotate[number, number] | [number, number, number] | undefinedoptional

Sets the projection’s three-axis spherical rotation to the specified angles [lambda, phi , gamma], corresponding to yaw, pitch, and roll.

# NaturalEarth.scalenumber | undefinedoptional

Sets the projection’s scale factor to the specified value. The scale factor corresponds linearly to the distance between projected points; however, absolute scale factors are not equivalent across projections.

# NaturalEarth.translate[number, number] | undefinedoptional

Sets the projection’s translation offset, which determines the pixel coordinates of the projection’s center, to the specified two-element array tx, ty.

#<Orthographic />

# Orthographic.dataDatum[]required

Array of features to project.

# Orthographic.center[number, number] | undefinedoptional

Sets the projection’s center to the specified two-element array of longitude and latitude in degrees.

# Orthographic.centroid((centroid: [number, number], feature: ParsedFeature<Datum>) => ReactNode) | undefinedoptional

Hook to render anything at the centroid of a feature.

# Orthographic.children((args: { path: GeoPath<any, GeoPermissibleObjects>; features: ParsedFeature<Datum>[]; }) => ReactNode) | undefinedoptional

Override render function which is passed the

# Orthographic.classNamestring | undefinedoptional

className to apply to feature path elements.

# Orthographic.clipAnglenumber | undefinedoptional

Sets the projection’s clipping circle radius to the specified angle in degree.

# Orthographic.clipExtent[[number, number], [number, number]] | undefinedoptional

Sets the projection’s viewport clip extent to the specified bounds in pixels. extent bounds are specified as an array [x₀, y₀, x₁, y₁], where x₀ is the left-side of the viewport, y₀ is the top, x₁ is the right and y₁ is the bottom.

# Orthographic.fitExtent[[[number, number], [number, number]], any] | undefinedoptional

Sets the projection’s scale and translate to fit the specified GeoJSON object in the center of the given extent. The extent is specified as an array [x₀, y₀, x₁, y₁], where x₀ is the left side of the bounding box, y₀ is the top, x₁ is the right and y₁ is the bottom.

# Orthographic.fitSize[[number, number], any] | undefinedoptional

Convenience prop for props.fitExtent where the top-left corner of the extent is 0, 0.

# Orthographic.graticule(Pick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }) | undefinedoptional

If specified, renders a Graticule with the specified props. Specify graticule.foreground = true to be rendered on top of features.

# Orthographic.graticuleLines(Pick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }) | undefinedoptional

If specified, renders a Graticule lines with the specified props. Specify graticuleLines.foreground = true to be rendered on top of features.

# Orthographic.graticuleOutline(Pick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "lines" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }) | undefinedoptional

If specified, renders a Graticule outline with the specified props. Specify graticuleOutline.foreground = true to be rendered on top of features.

# Orthographic.innerRef((feature: ParsedFeature<Datum>, index: number) => Ref<SVGPathElement>) | undefinedoptional

Function invoked for each feature which returns a React.Ref to the projection path element for that feature.

# Orthographic.pointRadiusnumber | undefinedoptional

Sets the radius used to display Point and MultiPoint geometries to the specified number.

# Orthographic.precisionnumber | undefinedoptional

Sets the threshold for the projection’s adaptive resampling to the specified value in pixels.

# Orthographic.projectionFunc((projection: GeoProjection) => ReactNode) | undefinedoptional

Hook to render above features, passed the configured projectionFunc.

# Orthographic.rotate[number, number] | [number, number, number] | undefinedoptional

Sets the projection’s three-axis spherical rotation to the specified angles [lambda, phi , gamma], corresponding to yaw, pitch, and roll.

# Orthographic.scalenumber | undefinedoptional

Sets the projection’s scale factor to the specified value. The scale factor corresponds linearly to the distance between projected points; however, absolute scale factors are not equivalent across projections.

# Orthographic.translate[number, number] | undefinedoptional

Sets the projection’s translation offset, which determines the pixel coordinates of the projection’s center, to the specified two-element array tx, ty.

vx
made by @hshoff