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

Check out the demo site here!

Install ol-kit and its peerDependencies

npm i @bayer/ol-kit [email protected] react react-dom styled-components @material-ui/core @material-ui/icons @material-ui/styles --save

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

The documentation for the project is available in the /docs directory and the hosted version is available at ol-kit.com.

If you find a bug or think of a new feature, please submit a Github issue.

The current maintainers are listed in MAINTAINERS.md. If you would like contribute to the project see CONTRIBUTING.md.

The ol-kit project was internally developed at Bayer Crop Science. Without the generous support of various stakeholders at Bayer, this project would never have become an open source reality. Thank you for the support, resources & final approval!