@visx/geo

The @visx/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 @visx/geo

Examples

APIs

#<Projection />

# dataDatum[]required

Array of features to project.

# center[number, number] | undefined

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

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

Hook to render anything at the centroid of a feature.

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

Override render function which is passed the

# classNamestring | undefined

className to apply to feature path elements.

# clipAnglenumber | undefined

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

# clipExtent[[number, number], [number, number]] | undefined

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.

# fitExtent[[[number, number], [number, number]], any] | undefined

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.

# fitSize[[number, number], any] | undefined

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

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

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

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

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

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

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

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

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

# pointRadiusnumber | undefined

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

# precisionnumber | undefined

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

# projection"mercator" | "orthographic" | "albers" | "albersUsa" | "naturalEarth" | "equalEarth" | (() => GeoProjection) | undefined

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

Default mercator

# projectionFunc((projection: GeoProjection) => ReactNode) | undefined

Hook to render above features, passed the configured projectionFunc.

# rotate[number, number] | [number, number, number] | undefined

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

# scalenumber | undefined

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.

# translate[number, number] | undefined

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 />

# children(({ graticule }: { graticule: GeoGraticuleGenerator; }) => ReactNode) | undefined

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

# extent[[number, number], [number, number]] | undefined

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

# extentMajor[[number, number], [number, number]] | undefined

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

# extentMinor[[number, number], [number, number]] | undefined

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

# graticule((multiLineString: MultiLineString) => string) | undefined

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

# lines((lineString: LineString) => string) | undefined

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.

# outline((polygon: Polygon) => string) | undefined

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.

# precisionnumber | undefined

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

# step[number, number] | undefined

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

# stepMajor[number, number] | undefined

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

# stepMinor[number, number] | undefined

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

#<Albers />

# dataDatum[]required

Array of features to project.

# center[number, number] | undefined

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

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

Hook to render anything at the centroid of a feature.

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

Override render function which is passed the

# classNamestring | undefined

className to apply to feature path elements.

# clipAnglenumber | undefined

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

# clipExtent[[number, number], [number, number]] | undefined

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.

# fitExtent[[[number, number], [number, number]], any] | undefined

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.

# fitSize[[number, number], any] | undefined

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

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

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

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

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

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

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

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

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

# pointRadiusnumber | undefined

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

# precisionnumber | undefined

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

# projectionFunc((projection: GeoProjection) => ReactNode) | undefined

Hook to render above features, passed the configured projectionFunc.

# rotate[number, number] | [number, number, number] | undefined

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

# scalenumber | undefined

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.

# translate[number, number] | undefined

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 />

# dataDatum[]required

Array of features to project.

# center[number, number] | undefined

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

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

Hook to render anything at the centroid of a feature.

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

Override render function which is passed the

# classNamestring | undefined

className to apply to feature path elements.

# clipAnglenumber | undefined

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

# clipExtent[[number, number], [number, number]] | undefined

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.

# fitExtent[[[number, number], [number, number]], any] | undefined

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.

# fitSize[[number, number], any] | undefined

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

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

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

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

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

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

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

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

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

# pointRadiusnumber | undefined

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

# precisionnumber | undefined

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

# projectionFunc((projection: GeoProjection) => ReactNode) | undefined

Hook to render above features, passed the configured projectionFunc.

# rotate[number, number] | [number, number, number] | undefined

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

# scalenumber | undefined

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.

# translate[number, number] | undefined

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 />

# dataDatum[]required

Array of features to project.

# center[number, number] | undefined

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

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

Hook to render anything at the centroid of a feature.

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

Override render function which is passed the

# classNamestring | undefined

className to apply to feature path elements.

# clipAnglenumber | undefined

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

# clipExtent[[number, number], [number, number]] | undefined

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.

# fitExtent[[[number, number], [number, number]], any] | undefined

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.

# fitSize[[number, number], any] | undefined

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

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

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

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

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

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

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

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

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

# pointRadiusnumber | undefined

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

# precisionnumber | undefined

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

# projection"mercator" | "orthographic" | "albers" | "albersUsa" | "naturalEarth" | "equalEarth" | (() => GeoProjection) | undefined

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

# projectionFunc((projection: GeoProjection) => ReactNode) | undefined

Hook to render above features, passed the configured projectionFunc.

# rotate[number, number] | [number, number, number] | undefined

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

# scalenumber | undefined

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.

# translate[number, number] | undefined

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 />

# dataDatum[]required

Array of features to project.

# center[number, number] | undefined

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

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

Hook to render anything at the centroid of a feature.

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

Override render function which is passed the

# classNamestring | undefined

className to apply to feature path elements.

# clipAnglenumber | undefined

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

# clipExtent[[number, number], [number, number]] | undefined

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.

# fitExtent[[[number, number], [number, number]], any] | undefined

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.

# fitSize[[number, number], any] | undefined

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

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

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

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

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

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

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

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

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

# pointRadiusnumber | undefined

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

# precisionnumber | undefined

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

# projectionFunc((projection: GeoProjection) => ReactNode) | undefined

Hook to render above features, passed the configured projectionFunc.

# rotate[number, number] | [number, number, number] | undefined

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

# scalenumber | undefined

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.

# translate[number, number] | undefined

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 />

# dataDatum[]required

Array of features to project.

# center[number, number] | undefined

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

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

Hook to render anything at the centroid of a feature.

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

Override render function which is passed the

# classNamestring | undefined

className to apply to feature path elements.

# clipAnglenumber | undefined

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

# clipExtent[[number, number], [number, number]] | undefined

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.

# fitExtent[[[number, number], [number, number]], any] | undefined

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.

# fitSize[[number, number], any] | undefined

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

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

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

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

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

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

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

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

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

# pointRadiusnumber | undefined

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

# precisionnumber | undefined

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

# projectionFunc((projection: GeoProjection) => ReactNode) | undefined

Hook to render above features, passed the configured projectionFunc.

# rotate[number, number] | [number, number, number] | undefined

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

# scalenumber | undefined

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.

# translate[number, number] | undefined

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 />

# dataDatum[]required

Array of features to project.

# center[number, number] | undefined

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

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

Hook to render anything at the centroid of a feature.

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

Override render function which is passed the

# classNamestring | undefined

className to apply to feature path elements.

# clipAnglenumber | undefined

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

# clipExtent[[number, number], [number, number]] | undefined

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.

# fitExtent[[[number, number], [number, number]], any] | undefined

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.

# fitSize[[number, number], any] | undefined

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

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

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

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

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

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

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

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

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

# pointRadiusnumber | undefined

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

# precisionnumber | undefined

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

# projectionFunc((projection: GeoProjection) => ReactNode) | undefined

Hook to render above features, passed the configured projectionFunc.

# rotate[number, number] | [number, number, number] | undefined

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

# scalenumber | undefined

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.

# translate[number, number] | undefined

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 />

# dataDatum[]required

Array of features to project.

# center[number, number] | undefined

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

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

Hook to render anything at the centroid of a feature.

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

Override render function which is passed the

# classNamestring | undefined

className to apply to feature path elements.

# clipAnglenumber | undefined

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

# clipExtent[[number, number], [number, number]] | undefined

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.

# fitExtent[[[number, number], [number, number]], any] | undefined

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.

# fitSize[[number, number], any] | undefined

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

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

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

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

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

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

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

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

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

# pointRadiusnumber | undefined

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

# precisionnumber | undefined

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

# projectionFunc((projection: GeoProjection) => ReactNode) | undefined

Hook to render above features, passed the configured projectionFunc.

# rotate[number, number] | [number, number, number] | undefined

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

# scalenumber | undefined

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.

# translate[number, number] | undefined

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