10.1.2 • Published 1 year ago

@goodhood/map v10.1.2

Weekly downloads
35
License
MIT
Repository
github
Last release
1 year ago

@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

import '@goodhood/map/styles.css'

Include:

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

API

Map

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

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

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

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

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)

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

1 year ago

10.1.0

1 year ago

10.1.1

1 year ago

10.1.0-beta.0

1 year ago

10.0.0

1 year ago

10.0.0-beta.1

1 year ago

8.1.0

2 years ago

8.1.2

2 years ago

8.1.1

2 years ago

8.1.3-beta.0

2 years ago

9.0.0-beta.0

2 years ago

7.4.0-beta.0

2 years ago

7.2.1

2 years ago

8.0.0

2 years ago

9.0.0

2 years ago

7.3.0-beta.1

2 years ago

8.1.0-beta.0

2 years ago

7.3.0-beta.2

2 years ago

7.3.0-beta.0

2 years ago

7.2.0

2 years ago

7.1.2

2 years ago

7.1.1

3 years ago

7.1.0

3 years ago

7.1.1-beta.0

3 years ago

7.1.1-beta.1

3 years ago

7.0.2

3 years ago

7.0.2-beta.0

3 years ago

7.0.1

3 years ago

7.0.1-beta.0

3 years ago

6.1.0

3 years ago

6.1.0-beta.0

3 years ago

7.0.0

3 years ago

5.1.1

4 years ago

6.0.0

4 years ago

5.1.0

4 years ago

5.0.0

4 years ago

4.2.0

4 years ago

4.3.0

4 years ago

4.2.0-beta.12

4 years ago

4.2.0-beta.13

4 years ago

4.2.0-beta.11

4 years ago

4.2.0-beta.8

4 years ago

4.2.0-beta.9

4 years ago

4.2.0-beta.10

4 years ago

4.2.0-beta.7

4 years ago

4.2.0-beta.4

4 years ago

4.2.0-beta.3

4 years ago

4.2.0-beta.6

4 years ago

4.2.0-beta.5

4 years ago

4.2.0-beta.2

4 years ago

4.2.0-beta.0

4 years ago

4.2.0-beta.1

4 years ago

4.1.0

4 years ago

4.0.0

4 years ago

3.0.1

5 years ago

3.0.0

5 years ago

2.1.0

5 years ago

2.0.0

5 years ago

2.0.0-beta.0

5 years ago

1.1.0

5 years ago

1.0.9

5 years ago

1.0.8

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.3-beta.2

5 years ago

1.0.3-beta.1

5 years ago

1.0.3-beta.0

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago

1.0.0-beta.11

5 years ago

1.0.0-beta.10

5 years ago

1.0.0-beta.7

5 years ago

1.0.0-beta.8

5 years ago

1.0.0-beta.9

5 years ago

1.0.0-beta.6

5 years ago

1.0.0-beta.5

5 years ago

1.0.0-beta.4

5 years ago

1.0.0-beta.2

5 years ago

1.0.0-beta.3

5 years ago

1.0.0-beta.1

5 years ago

1.0.0-beta.0

5 years ago

0.0.0

5 years ago