bpk-component-map
Backpack map component.
Requires React 16.8+
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 in this HOC, as it ensures that script will not be re-downloaded every time it's used.
import React from 'react';
import BpkMap, { withGoogleMapsScript } from 'bpk-component-map';
const BpkMapWithScript = withGoogleMapsScript(BpkMap);
export default () => (
<BpkMapWithScript
googleMapsApiKey='YOUR_API_KEY'
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 |
className | string | false | null |
greedyGestureHandling | bool | false | false |
mapOptionStyles | array | false | null |
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 |
---|---|---|---|
googleMapsApiKey | string | true | - |
libraries | array | false | ['geometry', 'drawing', 'places'] |
loadingElement | node | false | BpkSpinner |
preventGoogleFontsLoading | bool | false | false |
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