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