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