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 ol react react-dom styled-components @material-ui/core @material-ui/icons @material-ui/styles --saveIt'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,
BasemapContainer,
ContextMenu,
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)
// set the title on the layer to show in LayerPanel
dataLayer.set('title', 'NASA Data')
console.log('data layer:', dataLayer)
}
render () {
return (
<Map onMapInit={this.onMapInit} fullScreen>
<BasemapContainer />
<ContextMenu />
<Controls />
<LayerPanel />
<Popup />
</Map>
)
}
}
export default AppThe documentation for the project is available in the /docs directory and the hosted version is available at ol-kit.com.
The code for the demo application lives in the app/ folder.
npm install
npm run app
# open your browser and go to localhost:2020
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!
