Map Component

React Map Component created for Brad Technology web apps.

Supports both Google Map and MapBox.

Getting started

npm i @bradtech/map

OR

yarn add @bradtech/map

Map 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'}
         />
      )
   }
}

License

MIT