An easy to use, open source React & OpenLayers map component toolkit.

Checkout the demo site here!

Prebuilt Map Components

Ready to use and just work with the map via a single line drop-in!

Installation

Install ol-kit and its peerDependencies

npm i @bayer/ol-kit ol@4.6.5 react react-dom styled-components @material-ui/core @material-ui/icons @material-ui/styles --save

Getting Started

It's easy to start building map apps with ol-kit. For simple projects the following will get you started:


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

  class App extends React.Component {
    onMapInit = async map => {
      console.log('we got a map!', map)
      // nice to have map set on the window while debugging
      window.map = map

      // find a geojson or kml dataset (url or file) to load on the map
      const data = 'https://data.nasa.gov/api/geospatial/7zbq-j77a?method=export&format=KML'
      const dataLayer = await loadDataLayer(map, data)

      console.log('data layer:', dataLayer)
    }

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

  export default App

Go to docs

© 2020 Bayer Crop Science; All Rights Reserved.