ol-react-renaud009

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.MapQuest layer="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.

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.