@bradtech/map
TypeScript icon, indicating that this package has built-in type declarations

1.2.0 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i @bradtech/map

Weekly Downloads

2

Version

1.2.0

License

MIT

Unpacked Size

105 kB

Total Files

32

Last publish

Collaborators

  • elliottlepine
  • crapougnax