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.
See below for a basic example. Take a look through the examples directory to learn how to use the library.
import Map from '@planet/maps/Map';
import OSM from '@planet/maps/source/OSM';
import ScaleLine from '@planet/maps/control/ScaleLine';
import View from '@planet/maps/View';
import TileLayer from '@planet/maps/layer/WebGLTile';
function MyApp() {
return (
<Map style={{width: '100%', height: '100%'}}>
<View options={{center: [0, 0], zoom: 1}} />
<TileLayer>
<OSM />
</TileLayer>
<ScaleLine />
</Map>
);
}
npm install @planet/maps ol react react-dom
@planet/maps/lib/Map component wraps the
ol/Map class.
options prop is passed to the constructor of the underlying
class. This prop cannot be updated.
on -prefixed props. For example, onChange will
be called for change events. Colons in props can cause issues
with React, so we also expose props like onChange-center along
with onChange:center.
set -prefixed method on the underlying instances. For example,
updating the center prop of a <View> component
will call setCenter on the underlying view.
@planet/maps/layer/MapboxVector module
exports a component for constructing a MapboxVectorLayer from the
ol-mapbox-style library.
If you use this component, run npm install ol-mapbox-style to add
the dependency to your project.
Notice a bug or have an idea? Please create an issue on the GitHub repository.
The @planet/maps library is an open source project from Planet.