@bradtech/map NPM

Map Component

React Map Component created for Brad Technology web apps.

Supports both Google Map and MapBox.

Getting started

npm i @bradtech/map

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