Declarative mapping components for React

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/lib/Map';
import OSM from '@planet/maps/lib/source/OSM';
import ScaleLine from '@planet/maps/lib/control/ScaleLine';
import View from '@planet/maps/lib/View';
import TileLayer from '@planet/maps/lib/layer/WebGLTile';

function MyApp() {
  return (
    <Map style={{width: '100%', height: '100%'}}>
      <View options={{center: [0, 0], zoom: 1}} />
        <OSM />
      <ScaleLine />

💿 Installation

The library requires React and OpenLayers. You can install all the dependencies with npm:
npm install @planet/maps ol react react-dom

✨ Usage tips

🙏 Contributing

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.