@goodhood/map
React map components
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'
import Map from '@goodhood/map/lib/map';
import Polygon from '@goodhood/map/lib/polygon';
import Map from '@goodhood/map/lib/map';
const App = () => (
<Map
{/* Credentials for maptiler */}
credentials=
{/* 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}
{/* Hide attribution */}
noAttribution={true}
{/* 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>
);
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')}
/>
);
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}
/>
);
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 />
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>
);
config/local.js
file (see config/default.js
)npm run start
src/*/index.jsx
// src/map/index.jsx
export const MapType = 123;
export Map 666;
// usage
import { Map, MapType } from '@goodhood/map';
src/*/index.stories.jsx