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!


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 = map

      // find a geojson or kml dataset (url or file) to load on the map
      const data = ''
      const dataLayer = await loadDataLayer(map, data)

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

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

  export default App

Go to docs

© 2020 Bayer Crop Science; All Rights Reserved.