Constructor

# <Map addMapToContext children contextProps dragZoomboxStyle fullScreen id isMultiMap logoPosition map onMapInit updateUrlDebounce updateUrlFromView updateViewFromUrl urlViewParam selectInteraction style synced translations visible />

PropTypes:

Name	Type	Required	Description	Default
`addMapToContext`	func	No	callback passed by a parent to attach props from this (map, selectInteraction, etc.) to context	() => {}
`children`	union	No	any ol-kit children components will automatically be passed a reference to the map object via the `map` prop
`contextProps`	object	No	custom props that get added to Provider context and passed to connectToContext components	{}
`dragZoomboxStyle`	object	No	apply styles to the OL shift-zoom box	{ backgroundColor: 'rgb(0, 50, 50, 0.5)' }
`fullScreen`	bool	No	if this is set to false, the map will fill it's parent container	false
`id`	string	No	optional id to set on openlayers map and htmk id that map renders into (defaulted to unique id internally)
`isMultiMap`	bool	No	flag passed for to recognize when is in multi-map mode	false
`logoPosition`	string	No	place the ol-kit logo on the 'left', 'right', or set to 'none' to hide	'right'
`map`	object	No	optionally pass a custom map	null
`onMapInit`	func	No	callback called with initialized map object after optional animations complete note: if a Promise is returned from this function, Map will wait for onMapInit to resolve before rendering children	() => {}
`updateUrlDebounce`	number	No	the length of debounce on map movements before the url gets updated	400
`updateUrlFromView`	bool	No	add map location coords + zoom level to url as query params	true
`updateViewFromUrl`	bool	No	update map view based off the url param	true
`urlViewParam`	string	No	change the url param used to set the map location coords	'view'
`selectInteraction`	object	No	an openlayers select interaction passed down to connected components - created internally if not passed as prop
`style`	object	No	apply inline styles to the map container	{}
`synced`	bool	No	(only used with isMultiMap) sets initial synced state for a SyncableMap	true
`translations`	object	No	object of string key/values (see: locales)	function()
`visible`	bool	No	(only used with isMultiMap) sets initial visibility state for a SyncableMap	true

Since:

0.1.0

View Source Map/Map.js, line 26

Examples

Map

The <Map> component will either create an OpenLayers map for you or take a prebuilt map as a prop. A reference to this map will be passed down via props to ol-kit child components of <Map> via connectToContext.

Drop-in example:

This one-liner will create a map + div with the id of _ol_kit_map_{uuid} & render the map into that div.

import React from 'react'
import { Map } from '@bayer/ol-kit'

const App = () => {
  return (
    <Map />
  )
}

export default App

Callback example:

onMapInit is not required but it will be called on componentDidMount and return a reference to the newly created OpenLayers map (in case you want to manipulate it).

import React from 'react'
import { Map } from '@bayer/ol-kit'

import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'

class App extends React.Component {
  onMapInit = map => {
    const data = new VectorLayer({
      source: new VectorSource({
        features: [/** Get some data and have fun with it */]
      })
    })

    // add the data to the map
    map.addLayer(data)
  }

  render () {
    return (
      <Map onMapInit={this.onMapInit} />
    )
  }
}

export default App

Prop example:

Make sure the passed map is created before <Map> is mounted; if the map prop is falsey on mount, <Map> will create it's own map instead (and return it via onMapInit).

import React from 'react'
import { Map, Popup, Controls } from '@bayer/ol-kit'

import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'

class App extends React.Component {
  constructor () {
    super()

    // create new openlayers map
    const map = new Map({
      view: new View({
        center: [0, 0],
        zoom: 5
      }),
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      target: 'map'
    })

    this.state = {
      map
    }
  }

  render () {
    const { map } = this.state

    // create a div for the map to render into with an id matching the target
    return (
      <React.Fragment>
        <div id='map'></div>
        <Map map={map} />
      </React.Fragment>
    )
  }
}

export default App