@planet/maps 8.0.0-dev.1666713300824 → 8.0.0-dev.1666715244672

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/readme.md +19 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@planet/maps",
3
- "version": "8.0.0-dev.1666713300824",
3
+ "version": "8.0.0-dev.1666715244672",
4
4
  "description": "Declarative mapping components for React",
5
5
  "type": "module",
6
6
  "scripts": {
package/readme.md CHANGED
@@ -1,18 +1,24 @@
1
1
  # @planet/maps
2
2
 
3
- Declarative mapping components
4
-
5
- ## Background
3
+ ![Test Status](https://github.com/planetlabs/maps/actions/workflows/test.yml/badge.svg)
6
4
 
7
- React lets you build interactive UIs with (mostly) declarative syntax. OpenLayers provides an imperative API for building mapping apps. It can be awkward to map React's component API to an imperative API. However, the React team provides a package for creating custom renderers: [`react-reconciler`](https://www.npmjs.com/package/react-reconciler). This is how they integrate with imperative APIs themselves. The `react-dom` package uses `react-reconciler` to provide a mapping to the imperative DOM API. `react-native` uses `react-reconciler` to map to imperative native APIs.
5
+ Declarative mapping components
8
6
 
9
- This library provides declarative mapping components representing imperative APIs from OpenLayers.
7
+ ## Use
10
8
 
11
- ## Example
9
+ ```
10
+ npm install @planet/maps
11
+ ```
12
12
 
13
- Here is an example of what a map looks like with components from this package:
13
+ Import the components you need for your map. Provide an `options` prop to pass to the underlying OpenLayers constructor. Provide other props for values that you want to update with state changes.
14
14
 
15
15
  ```js
16
+ import Map from '@planet/maps/lib/Map';
17
+ import OSM from '@planet/maps/lib/source/OSM';
18
+ import ScaleLine from '@planet/maps/lib/control/ScaleLine';
19
+ import View from '@planet/maps/lib/View';
20
+ import WebGLTile from '@planet/maps/lib/layer/WebGLTile';
21
+
16
22
  function MyApp() {
17
23
  return (
18
24
  <Map style={{width: '100%', height: '100%'}}>
@@ -28,6 +34,12 @@ function MyApp() {
28
34
 
29
35
  You can also listen to any events on the map, view, controls, interactions, layers, or sources; use `ref`s to get access to the underlying OpenLayers instances; and more.
30
36
 
37
+ ## Background
38
+
39
+ React lets you build interactive UIs with (mostly) declarative syntax. OpenLayers provides an imperative API for building mapping apps. It can be awkward to map React's component API to an imperative API. However, the React team provides a package for creating custom renderers: [`react-reconciler`](https://www.npmjs.com/package/react-reconciler). This is how they integrate with imperative APIs themselves. The `react-dom` package uses `react-reconciler` to provide a mapping to the imperative DOM API. `react-native` uses `react-reconciler` to map to imperative native APIs.
40
+
41
+ This library provides declarative mapping components representing imperative APIs from OpenLayers.
42
+
31
43
  ## Design Goals
32
44
 
33
45
  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.