Map Component
React Map Component created for Brad Technology web apps.
Supports both Google Map and MapBox.
Getting started
npm i @bradtech/mapOR
yarn add @bradtech/mapMap props
| Name | Type | Default | Description |
|---|---|---|---|
| width | string | '600px' | Map width |
| height | string | '600px' | Map height |
| display | 'block' | 'inline' | '' | CSS display property |
| center | {latitude: number; longitude: number} | {latitude: 0; longitude: 0} | Default location |
| zoom | number | 12 | Default zoom level |
| markerList | {latitude: number; longitude: number}[] | [] | List containing the markers the map will display |
| kmlList | string[] | [] | List containing KML codes to display KML layers |
| apiKey | string | null | Google Map or MapBox API key |
| decorator | GoogleMapDecorator | MapBoxDecorator | GoogleMapDecorator | Component that will be used to display the map |
Examples
Display a basic map
import React from 'react'
import { Map } from '@bradtech/map'
export default class App extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<Map
width="100%"
zoom={6}
center={{ latitude: 43.932658, longitude: 4.821883 }}
apiKey={'GOOGLE_MAP_API_KEY'}
/>
)
}
}Display a map using MapBox
import React from 'react'
import { Map, MapBoxDecorator } from '@bradtech/map'
export default class App extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<Map
width="100%"
zoom={6}
center={{ latitude: 43.932658, longitude: 4.821883 }}
decorator={MapBoxDecorator}
apiKey={'MAPBOX_API_KEY'}
/>
)
}
}Display markers
import React from 'react'
import { Ma } from '@bradtech/map'
export default class App extends React.Component {
constructor(props) {
super(props)
this.markerList = [
{ longitude: -110.65264890901744, latitude: 44.59255346806212 },
]
}
render() {
return (
<Map
width="100%"
zoom={6}
markerList={this.markerList}
apiKey={'GOOGLE_MAP_API_KEY'}
/>
)
}
}