@planet/maps 9.0.0-dev.1698333742151 → 9.0.0-dev.1698338214745
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.
- package/package.json +1 -1
- package/readme.md +86 -0
package/package.json
CHANGED
package/readme.md
ADDED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
# @planet/maps
|
|
2
|
+
|
|
3
|
+

|
|
4
|
+
|
|
5
|
+
Declarative mapping components
|
|
6
|
+
|
|
7
|
+
## Use
|
|
8
|
+
|
|
9
|
+
```
|
|
10
|
+
npm install @planet/maps
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
See the [planetlabs.github.io/maps](https://planetlabs.github.io/maps/) website for more details and examples using the library.
|
|
14
|
+
|
|
15
|
+
## Background
|
|
16
|
+
|
|
17
|
+
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.
|
|
18
|
+
|
|
19
|
+
This library provides declarative mapping components representing imperative APIs from OpenLayers.
|
|
20
|
+
|
|
21
|
+
## Design Goals
|
|
22
|
+
|
|
23
|
+
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.
|
|
24
|
+
|
|
25
|
+
Here are some of the goals of this project:
|
|
26
|
+
|
|
27
|
+
* Ideally, the renderer would not have any additional dependencies beyond what is bundled with an OpenLayers map.
|
|
28
|
+
* Components exported by this package map 1:1 with classes exported by OpenLayers.
|
|
29
|
+
* 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`.
|
|
30
|
+
* Components accept a `ref` that provide access to the underlying OpenLayers instance.
|
|
31
|
+
* The renderer should add negligible overhead in terms of bundle size, memory consumption, or processing.
|
|
32
|
+
* Code components can be generated by using OpenLayers sources. Exceptions to this are the map component (responsible for invoking the custom renderer) and components that map to classes without subclasses (e.g. the view).
|
|
33
|
+
|
|
34
|
+
## Non-Goals
|
|
35
|
+
|
|
36
|
+
This project does not intend to provide any of the following:
|
|
37
|
+
|
|
38
|
+
* Higher level abstractions or components that combine logic from multiple OpenLayers instances (e.g. an editable layer component that wraps a layer, source, and editing interactions).
|
|
39
|
+
* Styled widgets (e.g. a layer switcher/browser).
|
|
40
|
+
* Other utilities for working with vector data, projections, etc.
|
|
41
|
+
|
|
42
|
+
We hope that this package can provide the foundation for other, higher-level libraries with more opinions about the look and feel of mapping components.
|
|
43
|
+
|
|
44
|
+
## Development
|
|
45
|
+
|
|
46
|
+
The development setup depends on [Node 18](https://nodejs.org/) (most things work on 16, but not all).
|
|
47
|
+
|
|
48
|
+
Install project dependencies:
|
|
49
|
+
|
|
50
|
+
```bash
|
|
51
|
+
npm install
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
Start the development server:
|
|
55
|
+
```bash
|
|
56
|
+
npm start
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
The rendering tests use Playwright for visual snapshot comparison. See the [`tests/rendering/readme.md`](tests/rendering/readme.md) for more detail.
|
|
60
|
+
|
|
61
|
+
Before running tests for the first time, install the required Playwright browser:
|
|
62
|
+
```bash
|
|
63
|
+
npx playwright install chromium
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
Run the tests:
|
|
67
|
+
```bash
|
|
68
|
+
npm test
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
After updating the `ol` package to a new version, the generated component sources should be updated:
|
|
72
|
+
```bash
|
|
73
|
+
npm run generate
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
To publish a new release, choose the release type, update the `package.json` version and create a tag with `npm version`, and then push the change:
|
|
77
|
+
```bash
|
|
78
|
+
npm version minor
|
|
79
|
+
git push --tags origin main
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
After pushing the changes, draft release notes based on the tag and publish the [GitHub release](https://github.com/planetlabs/maps/releases).
|
|
83
|
+
|
|
84
|
+
## Prior Art
|
|
85
|
+
|
|
86
|
+
Other projects like [`react-openlayers-fiber`](https://github.com/crubier/react-openlayers-fiber) and [`react-ol-fiber`](https://www.npmjs.com/package/react-ol-fiber) use a similar approach and provided inspiration for this project. The major difference between this project and those is that this project provides importable components for OpenLayers layers, sources, controls, and interactions. The other projects bundle all of OpenLayers in their renderer. So a simple "hello world" map with one of the existing projects is about 1.5 MB while the same with this project is about 460 KB.
|