<Map />

A Reactified ol.Map wrapper component

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