# @goodhood/map

> React map components

Latest version **10.1.2** (published 2024-05-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install @goodhood/map
pnpm add @goodhood/map
yarn add @goodhood/map
bun add @goodhood/map
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 10.1.2 |
| Published | 2024-05-13 |
| First published | 2020-07-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 566.8 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Good Hood GmbH |
| Maintainers | jobemichael, hahiii, fweinrich, spossner, rejas |

## Links

- npm: https://www.npmjs.com/package/@goodhood/map
- Repository: https://github.com/goodhood-eu/goodhood
- Homepage: https://github.com/goodhood-eu/goodhood/packages/map#readme
- Issues: https://github.com/goodhood-eu/goodhood/issues
- npm.io page: https://npm.io/package/@goodhood/map

## Dependencies (4)

- [clsx](https://npm.io/package/clsx.md) ^2.1.1
- [maplibre-gl](https://npm.io/package/maplibre-gl.md) ^4.2.0
- [@goodhood/icons](https://npm.io/package/@goodhood/icons.md) ^5.1.3
- [nebenan-react-hocs](https://npm.io/package/nebenan-react-hocs.md) ^10.0.0

## Recent versions

- 10.1.2 (latest) — 2024-05-13
- 10.1.0-beta.0 (beta) — 2024-05-03
- 10.1.1 — 2024-05-08
- 10.1.0 — 2024-05-08
- 10.0.0 — 2024-04-26
- 10.0.0-beta.1 — 2024-04-19
- 9.0.0 — 2023-11-28
- 9.0.0-beta.0 — 2023-11-21
- 8.1.3-beta.0 — 2023-11-21
- 8.1.2 — 2023-11-13
- 8.1.1 — 2023-10-25
- 8.1.0 — 2023-09-19
- 8.1.0-beta.0 — 2023-08-23
- 8.0.0 — 2023-08-23
- 7.4.0-beta.0 — 2023-08-21
- … 71 more at https://npm.io/package/@goodhood/map/versions

## README

# `@goodhood/map`

> React map components

## Install

```
npm i @goodhood/map
```

Install peer dependencies
```
npm i react // v16.x.x
npm i prop-types // v15.x.x
npm i clsx // v2.x.x
npm i nebenan-ui-kit // v4.x.x
npm i @babel/runtime // v7.x.x
npm i @goodhood/icons // v1.x.x
```

Include css
```js
import '@goodhood/map/styles.css'
```

## Include:

```js
import Map from '@goodhood/map/lib/map';
import Polygon from '@goodhood/map/lib/polygon';
```

# API

## Map
```jsx
import Map from '@goodhood/map/lib/map';

const App = () => (
  <Map
    {/* Credentials for maptiler */}
    credentials={{ key: 'Maptiler API secret key', map_id: 'Map style id' }}

    {/* Max zoom level */}
    maxZoom={10}

    {/* Min zoom level */}
    minZoom={5}

    {/* Bounds of the map. If the prop is passed, it overrides the bounding box of map layers. */}
    bounds={[]}

    {/* Lock map on desktop */}
    locked={true}

    {/* Lock map on mobile */}
    lockedMobile={true}

    {/* Animate transition of map view */}
    animate={true}

    {/* Change attribution style, possible values: 'default', 'compact', 'hidden' */}
    attribution={'default'}

    {/* Text to display when WebGL is not supported by browser */}
    webGLError="WebGL is not supported"

    {/* Fired when map styles are loaded. Takes map as an argument */}
    onLoad={(map) => { alert('Loaded') }}
  >
    {/* Map layers. if bounds prop is not specified, the map will try to get bounds from layers */}
  </Map>
);
```

## Polygon
```jsx
import Polygon from '@goodhood/map/lib/polygon';

const App = () => (
  <Polygon
    {/* GeoJSON coordinates of polygon */}
    area={[]}

    {/* Polygon style. Get values from @goodhood/map/lib/polygon/constants */}
    type={POLYGON_ACTIVE}

    {/* Click event */}
    onClick={() => console.log('Clicked')}
  />
);
```

## Circle
```jsx
import Circle from '@goodhood/map/lib/circle';

const App = () => (
  <Circle
    {/* GeoJSON coordinates of circle center */}
    center={[]}

    {/* Circle radius in px */}
    radius={300}

    {/* Circle style. Get values from @goodhood/map/lib/circle/constants */}
    type={CIRCLE_ACTIVE}
  />
);
```

## Marker
```jsx
import Marker from '@goodhood/map/lib/marker';

const App = () => (
  <Marker
    {/* GeoJSON coordinates of marker */}
    position={[]}

    {/* Content that will be rendered in marker popup */}
    popupContent={<ReactElement />}

    {/* Open marker popup on initialization */}
    popupDefaultState={true}

    {/* Popup offset relative to marker position */}
    popupOffset={[x, y]}
  >
    {/* Marker's content. Can be image or styled element */}
  </Marker>
);


// All markers below are wrappers around <Marker /> component.
// They receive same props as <Marker />

<CircleMarker />
<EyecatcherMarker />
<ImageMarker />
<InfoMarker />
<LabelMarker />
<PinMarker />
```

## Popup
```jsx
import { Popup, Marker } from '@goodhood/map';

const App = () => (
  <Marker>
    <Popup
      {/* Offset relative to marker position */}
      offsetX={0}
      offsetY={0}

      {/* Open popup by default */}
      defaultOpen={true}
    >
      {/* Popup's content. Can be image or styled element */}
    </Popup>
  </Marker>
);
```

# Development

## Preview

- Set maptiler credentials in root package `config/local.js` file (see `config/default.js`)
- `npm run start`
- Visit http://localhost:3000

## Add a new component

- Create `src/*/index.jsx`
  - Default exports will be re-exported with the map name
  - Named exports will be re-exported as they are (watch out for collisions)
    ```js
      // src/map/index.jsx
      export const MapType = 123;
      export Map 666;

      // usage
      import { Map, MapType } from '@goodhood/map';
    ```
- Create `src/*/index.stories.jsx`
  - Preview will take it up automatically

---
_Source: https://npm.io/package/@goodhood/map · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._