A thin wrapper for OpenLayers3 in React.
The goal is to be able to write applications using OpenLayers maps in a declarative way. For example, the following is JSX, which can be returned by the render() method on a React component, to generate a map with a red square near the equator.
<Map view=<View resolution={10000} center={[0, 0]}/>>
<layer.Tile>
<source.OSM />
</layer.Tile>
<layer.Vector>
<source.Vector>
<Feature style={{stroke: {color: [255, 0, 0, 1]}}}>
<geom.LineString>
{[[0, 0], [100000, 0], [100000, 100000], [0, 100000]]}
</geom.LineString>
</Feature>
</source.Vector>
</layer.Vector>
</Map>
To understand what each element does, read the OpenLayers API documentation.
Styles
Are declared using a JSON object, passing through the properties you'd like on the final object.
When creating an Icon, Circle or RegularShape, a type parameter must be present, with the value of icon, circle, or regular-shape.
Example:
image: {
type: 'circle',
radius: 10,
fill: { color: '#666666' },
stroke: { color: '#bada55', width: 1 }
}
It's early days! If you're familiar with react and/or openlayers and are interested in helping, please get in touch. Available on github and npm.
I am especially interested in assistance with having each component be optionally controlled. This would allow binding of the components with, say, Redux and for sophisticated state management outside of OpenLayers.