A New React Wrapper for OpenLayers

Planet has published a library of React components to build map user interfaces using OpenLayers:

The @planet/maps library provides components for rendering maps in your React applications. The library acts as a wrapper around OpenLayers, transforming the imperative API into declarative components.

The design goals:

The purpose of this project is to provide a mapping between React’s declarative components and OpenLayers’ imperative API. In other words, this project provides a React renderer for OpenLayers.


  • Components exported by this package map 1:1 with classes exported by OpenLayers.
  • Component props map directly to properties that are settable on instances of OpenLayers classes. Exceptions to this are props like options (passed to the constructor only), listener props (e.g. onChange), and ref.
  • Components accept a ref that provide access to the underlying OpenLayers instance.

The examples only show a small fraction of the whole feature set of the library. I looked through the source code on GitHub, and it seems like many—if not all—OpenLayers classes have a corresponding React component in the library.