The @planet/maps library provides components for rendering maps in your React applications. The library acts as a wrapper aroundOpenLayers, transforming the imperative API into declarative components.
See below for a basic example. Take a look through theexamples directory to learn how to use the library.
import Mapfrom '@planet/maps/Map';import OSMfrom '@planet/maps/source/OSM';import ScaleLinefrom '@planet/maps/control/ScaleLine';import Viewfrom '@planet/maps/View';import TileLayerfrom '@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 theol/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 forchange events. Colons in props can cause issues with React, so we also expose props likeonChange-center along withonChange:center.set -prefixed method on the underlying instances. For example, updating thecenter prop of a<View> component will callsetCenter on the underlying view.@planet/maps/layer/MapboxVector module exports a component for constructing aMapboxVectorLayer from theol-mapbox-style library. If you use this component, runnpm install ol-mapbox-style to add the dependency to your project.Notice a bug or have an idea? Pleasecreate an issueon theGitHub repository.
The @planet/maps library is an open source project fromPlanet.