React map components
npm install @goodhood/map@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
`js`
import '@goodhood/map/styles.css'
`js`
import Map from '@goodhood/map/lib/map';
import Polygon from '@goodhood/map/lib/polygon';
jsx
import Map from '@goodhood/map/lib/map';const App = () => (
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 /}
);
`Polygon
jsx
import Polygon from '@goodhood/map/lib/polygon';const App = () => (
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 = () => (
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 = () => (
position={[]}
{/ Content that will be rendered in marker popup /}
popupContent={
{/ 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 /}
);
// All markers below are wrappers around
// They receive same props as
`Popup
jsx
import { Popup, Marker } from '@goodhood/map';const App = () => (
offsetX={0}
offsetY={0}
{/ Open popup by default /}
defaultOpen={true}
>
{/ Popup's content. Can be image or styled element /}
);
`Development
Preview
- Set maptiler credentials in root package
file (see config/default.js)
- npm run start
- Visit http://localhost:3000Add a new component
- Create
- 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