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

@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

Mercator
<Geo.Mercator />
Custom Projection
<Geo.CustomProjection />
AlbersUsa
<Geo.AlbersUsa />

APIs

#<Projection />

# dataDatum[]required

Array of features to project.

# center[number, number]

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

Hook to render anything at the centroid of a feature.

# children(args: { path: GeoPath<unknown, GeoPermissibleObjects>; features: ParsedFeature<Datum>[]; projection: GeoProjection; }) => ReactNode

Override render function which is passed path data and a copy of the constructed projection.

# classNamestring

className to apply to feature path elements.

# clipAnglenumber

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

# clipExtent[[number, number], [number, number]]

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]], ExtendedFeature<GeoGeometryObjects, { [name: string]: any; }>]

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], ExtendedFeature<GeoGeometryObjects, { [name: string]: any; }>]

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

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

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

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

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

# graticuleOutlinePick<GraticuleProps, "children" | "step" | "graticule" | "lines" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor" | "precision"> & { ...; }

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>

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

# pointRadiusnumber

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

# precisionnumber

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

# projectionProjection

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

Default mercator

# projectionFunc(projection: GeoProjection) => ReactNode

Hook to render above features, passed the configured projectionFunc.

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

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

# scalenumber

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]

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

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

# extent[[number, number], [number, number]]

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

# extentMajor[[number, number], [number, number]]

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

# extentMinor[[number, number], [number, number]]

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

# graticule(multiLineString: MultiLineString) => string

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

# lines(lineString: LineString) => string

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

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

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

# step[number, number]

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

# stepMajor[number, number]

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

# stepMinor[number, number]

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

#<Albers />

# dataDatum[]required

Array of features to project.

# center[number, number]

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

Hook to render anything at the centroid of a feature.

# children(args: { path: GeoPath<unknown, GeoPermissibleObjects>; features: ParsedFeature<Datum>[]; projection: GeoProjection; }) => ReactNode

Override render function which is passed path data and a copy of the constructed projection.

# classNamestring

className to apply to feature path elements.

# clipAnglenumber

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

# clipExtent[[number, number], [number, number]]

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]], ExtendedFeature<GeoGeometryObjects, { [name: string]: any; }>]

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], ExtendedFeature<GeoGeometryObjects, { [name: string]: any; }>]

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

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

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

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

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

# graticuleOutlinePick<GraticuleProps, "children" | "step" | "graticule" | "lines" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor" | "precision"> & { ...; }

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>

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

# pointRadiusnumber

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

# precisionnumber

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

# projectionFunc(projection: GeoProjection) => ReactNode

Hook to render above features, passed the configured projectionFunc.

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

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

# scalenumber

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]

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]

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

Hook to render anything at the centroid of a feature.

# children(args: { path: GeoPath<unknown, GeoPermissibleObjects>; features: ParsedFeature<Datum>[]; projection: GeoProjection; }) => ReactNode

Override render function which is passed path data and a copy of the constructed projection.

# classNamestring

className to apply to feature path elements.

# clipAnglenumber

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

# clipExtent[[number, number], [number, number]]

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]], ExtendedFeature<GeoGeometryObjects, { [name: string]: any; }>]

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], ExtendedFeature<GeoGeometryObjects, { [name: string]: any; }>]

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

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

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

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

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

# graticuleOutlinePick<GraticuleProps, "children" | "step" | "graticule" | "lines" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor" | "precision"> & { ...; }

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>

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

# pointRadiusnumber

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

# precisionnumber

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

# projectionFunc(projection: GeoProjection) => ReactNode

Hook to render above features, passed the configured projectionFunc.

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

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

# scalenumber

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]

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]

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

Hook to render anything at the centroid of a feature.

# children(args: { path: GeoPath<unknown, GeoPermissibleObjects>; features: ParsedFeature<Datum>[]; projection: GeoProjection; }) => ReactNode

Override render function which is passed path data and a copy of the constructed projection.

# classNamestring

className to apply to feature path elements.

# clipAnglenumber

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

# clipExtent[[number, number], [number, number]]

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]], ExtendedFeature<GeoGeometryObjects, { [name: string]: any; }>]

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], ExtendedFeature<GeoGeometryObjects, { [name: string]: any; }>]

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

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

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

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

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

# graticuleOutlinePick<GraticuleProps, "children" | "step" | "graticule" | "lines" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor" | "precision"> & { ...; }

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>

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

# pointRadiusnumber

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

# precisionnumber

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

# projectionProjection

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

# projectionFunc(projection: GeoProjection) => ReactNode

Hook to render above features, passed the configured projectionFunc.

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

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

# scalenumber

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]

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]

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

Hook to render anything at the centroid of a feature.

# children(args: { path: GeoPath<unknown, GeoPermissibleObjects>; features: ParsedFeature<Datum>[]; projection: GeoProjection; }) => ReactNode

Override render function which is passed path data and a copy of the constructed projection.

# classNamestring

className to apply to feature path elements.

# clipAnglenumber

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

# clipExtent[[number, number], [number, number]]

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]], ExtendedFeature<GeoGeometryObjects, { [name: string]: any; }>]

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], ExtendedFeature<GeoGeometryObjects, { [name: string]: any; }>]

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

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

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

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

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

# graticuleOutlinePick<GraticuleProps, "children" | "step" | "graticule" | "lines" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor" | "precision"> & { ...; }

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>

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

# pointRadiusnumber

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

# precisionnumber

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

# projectionFunc(projection: GeoProjection) => ReactNode

Hook to render above features, passed the configured projectionFunc.

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

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

# scalenumber

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]

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]

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

Hook to render anything at the centroid of a feature.

# children(args: { path: GeoPath<unknown, GeoPermissibleObjects>; features: ParsedFeature<Datum>[]; projection: GeoProjection; }) => ReactNode

Override render function which is passed path data and a copy of the constructed projection.

# classNamestring

className to apply to feature path elements.

# clipAnglenumber

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

# clipExtent[[number, number], [number, number]]

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]], ExtendedFeature<GeoGeometryObjects, { [name: string]: any; }>]

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], ExtendedFeature<GeoGeometryObjects, { [name: string]: any; }>]

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

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

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

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

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

# graticuleOutlinePick<GraticuleProps, "children" | "step" | "graticule" | "lines" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor" | "precision"> & { ...; }

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>

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

# pointRadiusnumber

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

# precisionnumber

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

# projectionFunc(projection: GeoProjection) => ReactNode

Hook to render above features, passed the configured projectionFunc.

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

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

# scalenumber

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]

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]

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

Hook to render anything at the centroid of a feature.

# children(args: { path: GeoPath<unknown, GeoPermissibleObjects>; features: ParsedFeature<Datum>[]; projection: GeoProjection; }) => ReactNode

Override render function which is passed path data and a copy of the constructed projection.

# classNamestring

className to apply to feature path elements.

# clipAnglenumber

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

# clipExtent[[number, number], [number, number]]

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]], ExtendedFeature<GeoGeometryObjects, { [name: string]: any; }>]

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], ExtendedFeature<GeoGeometryObjects, { [name: string]: any; }>]

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

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

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

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

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

# graticuleOutlinePick<GraticuleProps, "children" | "step" | "graticule" | "lines" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor" | "precision"> & { ...; }

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>

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

# pointRadiusnumber

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

# precisionnumber

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

# projectionFunc(projection: GeoProjection) => ReactNode

Hook to render above features, passed the configured projectionFunc.

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

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

# scalenumber

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]

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]

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

Hook to render anything at the centroid of a feature.

# children(args: { path: GeoPath<unknown, GeoPermissibleObjects>; features: ParsedFeature<Datum>[]; projection: GeoProjection; }) => ReactNode

Override render function which is passed path data and a copy of the constructed projection.

# classNamestring

className to apply to feature path elements.

# clipAnglenumber

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

# clipExtent[[number, number], [number, number]]

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]], ExtendedFeature<GeoGeometryObjects, { [name: string]: any; }>]

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], ExtendedFeature<GeoGeometryObjects, { [name: string]: any; }>]

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

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

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

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

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

# graticuleOutlinePick<GraticuleProps, "children" | "step" | "graticule" | "lines" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor" | "precision"> & { ...; }

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>

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

# pointRadiusnumber

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

# precisionnumber

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

# projectionFunc(projection: GeoProjection) => ReactNode

Hook to render above features, passed the configured projectionFunc.

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

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

# scalenumber

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]

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

Exports