Skip to main content

GeoJsonFeature

Renders a single feature from inside a GeoJson component.

Example

Pigeon | © OpenStreetMap contributors

Code

import { Map, GeoJson, GeoJsonFeature } from "pigeon-maps";

const geoJsonFeatureSample = {
type: "Feature",
geometry: { type: "Point", coordinates: [2.0, 48.5] },
properties: { prop0: "value0" },
};

const MyMap = () => (
<Map height={300} defaultCenter={[50.879, 4.6997]} defaultZoom={4}>
<GeoJson
svgAttributes={{
fill: "#d4e6ec99",
strokeWidth: "1",
stroke: "white",
r: "20",
}}
>
<GeoJsonFeature feature={geoJsonFeatureSample} />
</GeoJson>
</Map>
);

Options

styleCallback

A callback function that is taking a a geojson feature and a boolean indicating if that feature is hovered. It should return an object of svg attributes depending on the type of feature either for circle or path.

svgAttributes

An object of svg attributes depending on the type of feature either for circle or path.

hover

If this component is hovered or not.

Events

onClick

({ event: HTMLMouseEvent, anchor: Point, payload: any }) => void

onContextMenu

({ event: HTMLMouseEvent, anchor: Point, payload: any }) => void

onMouseOver

({ event: HTMLMouseEvent, anchor: Point, payload: any }) => void

onMouseOut

({ event: HTMLMouseEvent, anchor: Point, payload: any }) => void