Map

Using geographic coordinates (latitude and longitude), display a location on a functional map with a map marker and address/location information.

Installation

yarn add @berlitz/map

Props

| Argument | Type | Required | Default | Description | | -------------------- | ------ | -------- | --------------------------------- | ----------------------------------------------------------------------- | | children | node | ✅ | | Children elements passed directly into the components output | | location | object | ✅ | | latitude and longitude values for marker. See propTypes for the shape. | | height | string | ✅ | | Specifies the height of the map e.g. 400px | | showInfoWindowOnLoad | bool | ❌ | true | Specifies if the info window will be open or closed on initial map load | | marker | string | ❌ | "./marker.png" | Path to marker image file | | mapBoxStyle | string | | mapbox://styles/mapbox/streets-v9 | mapbox://styles/ACCOUNT_NAME/STYLE_ID | | mapBoxAccessToken | string | | | | | leaflet | bool | | false | |

Usage

import Map from '@berlitz/map'
const MyApp = () => (
  <Map
    showInfoWindowOnLoad={true}
    location={{
      lat,
      lng,
    }}
  />
)

Notes

This component is using LeafletJS as a JS mapping library and MapBox for custom map tile styles