Skip to main content

GeoJsonLoader

Renders GeoJson file. This component is intended to easily use external GeoJson files. But it does not handle loading errors at all. So you should rather use the GeoJson component in production.

Example​

Pigeon | © OpenStreetMap contributors

Code​

import { Map, GeoJsonLoader } from "pigeon-maps";

const geoJsonLink = "https://raw.githubusercontent.com/isellsoap/deutschlandGeoJSON/main/2_bundeslaender/4_niedrig.geo.json"

const MyMap = () => (
    <Map height={300} defaultCenter={[50.879, 4.6997]} defaultZoom={4}>
      <GeoJsonLoader
        link={geoJsonLink}
        styleCallback={(feature, hover) =>
          hover
            ? { fill: '#93c0d099', strokeWidth: '2'}
            : { fill: '#d4e6ec99', strokeWidth: '1'}
        }
      />
    </Map>
)

Options​

A link to a geo json file

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.

className​

An additional class name for the wrapper div.

style​

Additional styling for the wrapper div.

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

Attribution​

GeoJson File of Germany by isellsoap