@goodhood/map
v10.1.2
Published
React map components
Downloads
1,353
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
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 (seeconfig/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