README
bpk-component-map
Backpack map component.
Installation
npm install bpk-component-map --save-dev
Usage
import React from 'react';
import BpkText from 'bpk-component-text';
import { withRtlSupport } from 'bpk-component-icon';
import LandmarkIconSm from 'bpk-component-icon/sm/landmark';
import BpkMap, {
BpkIconMarker,
BpkOverlayView,
} from 'bpk-component-map';
const AlignedLandmarkIconSm = withRtlSupport(LandmarkIconSm);
export default () => (
<BpkMap
zoom={15}
showControls={false}
panEnabled={false}
center={{
latitude: 27.9881,
longitude: 86.925,
}}
>
<BpkIconMarker
icon={<AlignedLandmarkIconSm />}
position={{ latitude: 27.9881, longitude: 86.925 }}
onClick={() => {}}
/>
<BpkIconMarker
icon={<AlignedLandmarkIconSm />}
position={{ latitude: 27.9881, longitude: 86.925 }}
onClick={() => {}}
selected
/>
<BpkIconMarker
icon={<AlignedLandmarkIconSm />}
position={{ latitude: 27.9881, longitude: 86.927 }}
onClick={() => {}}
disabled
/>
<BpkOverlayView position={{ latitude: 27.9881, longitude: 86.925 }}>
<BpkText>Shibuya Crossing</BpkText>
</BpkOverlayView>
</BpkMap>
);
BpkPriceMarker
Price markers are used to display clickable prices on a map.
import React from 'react';
import BpkMap, { BpkPriceMarker, PRICE_MARKER_STATUSES } from 'bpk-component-map';
export default () => (
<BpkMap
zoom={15}
showControls={false}
panEnabled={false}
center={{
latitude: 27.9881,
longitude: 86.925,
}}
>
<BpkPriceMarker
label="£120"
position={{ latitude: 27.9881, longitude: 86.925 }}
onClick={() => {
console.log("Price marker pressed.")
}}
status={PRICE_MARKER_STATUSES.focused}
/>
<BpkPriceMarker
label="£120"
position={{ latitude: 27.9881, longitude: 86.925 }}
onClick={() => {
console.log("Price marker pressed.")
}}
status={PRICE_MARKER_STATUSES.viewed}
/>
</BpkMap>
);
Accompanying HOCs
withGoogleMapsScript
withGoogleMapsScript
is a HOC that loads the Google Maps JavaScript, then loads the map. This is useful for when you don't already have the Google Maps JavaScript loaded.
If you intend to include multiple maps on one page, it's better to load the Google Maps JavaScript elsewhere and not use this HOC, as it downloads the script every time it's used.
import React from 'react';
import BpkMap, { withGoogleMapsScript } from 'bpk-component-map';
const MAP_URL =
'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places';
const BpkMapWithScript = withGoogleMapsScript(BpkMap);
export default () => (
<BpkMapWithScript
googleMapURL={MAP_URL}
zoom={15}
center={{
latitude: 27.9881,
longitude: 86.925,
}}
showControls={false}
panEnabled={false}
/>
);
Props
BpkMap
Property | PropType | Required | Default Value |
---|---|---|---|
bounds | shape({north: number, east: number, south: number, west: number}) | false | null |
center | shape({latitude: number, longitude: number}) | false | null |
containerElement | node | false | <div style={{height: '100%'}} /> |
greedyGestureHandling | bool | false | false |
mapElement | node | false | <div style={{height: '100%'}} /> |
mapRef | func | false | null |
onRegionChange | func | false | null |
onZoom | func | false | null |
onTilesLoaded | func | false | null |
panEnabled | bool | false | true |
showControls | bool | false | true |
zoom | number | false | 15 |
Note: One of bounds
and center
must be provided.
withGoogleMapsScript
When using withGoogleMapsScript
, some additional props are available:
Property | PropType | Required | Default Value |
---|---|---|---|
googleMapURL | string | true | - |
loadingElement | node | false | BpkSpinner |
BpkIconMarker
Property | PropType | Required | Default Value |
---|---|---|---|
icon | node | true | - |
position | shape({latitude: number, longitude: number}) | true | - |
className | string | false | null |
disabled | bool | false | false |
onClick | func | false | null |
selected | bool | false | false |
buttonProps | object | false | null |
icon
BpkIconMarker
only supports small icons from the Backpack icon set. Large icons should not be used with BpkIconMarker
.
BpkPriceMarker
Property | PropType | Required | Default Value |
---|---|---|---|
label | string | true | - |
position | shape({latitude: number, longitude: number}) | true | - |
arrowClassName | string | false | null |
className | string | false | null |
disabled | bool | false | false |
onClick | func | false | null |
status | oneOf(PRICE_MARKER_STATUSES.default , PRICE_MARKER_STATUSES.focused , PRICE_MARKER_STATUSES.viewed ) |
false | PRICE_MARKER_STATUSES.default |
buttonProps | object | false | null |
BpkOverlayView
Property | PropType | Required | Default Value |
---|---|---|---|
children | node | true | - |
position | shape({latitude: number, longitude: number}) | true | - |
Theme Props
Icon markers:
iconMarkerDefaultBackgroundColor
iconMarkerDefaultSelectedColor
iconMarkerDefaultDisabledBackgroundColor
iconMarkerDefaultDisabledColor
Price markers:
priceMarkerBackgroundColor
priceMarkerSelectedBorderColor
priceMarkerSelectedColor
priceMarkerViewedBackgroundColor
priceMarkerViewedBorderColor
priceMarkerViewedColor