terra-draw 0.0.1-alpha.45 → 0.0.1-alpha.47

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.
@@ -1,17 +0,0 @@
1
- # Contributing
2
-
3
- ## Instructions
4
-
5
- This document will receive a more thorough update in the future. For the time being, if you wish to contribute to Terra Draw, we request that you:
6
-
7
- 1. Make an issue on GitHub describing the bug you intend to fix or the feature you intend to add.
8
- 2. Create a fork of the project, and work on a branch that represents the issue
9
- 3. Ensure that the work you have done is unit tested, aiming for 80% code coverage
10
- 4. Create a PR that represents this work. Please refer to the issue from the PR
11
- 5. We will address the PR and give you feedback
12
-
13
- Please note that we can not guarantee that all PRs will be merged. There are cases where a PR may deviate from the long-term vision for Terra Draw and hence we may have to decline it. Creating the issue in advance helps us discuss any potential issues upfront before the PR is made.
14
-
15
- ## Code of Conduct
16
-
17
- We have a code of conduct which we expect individuals interacting with the project to respect. Please see the [full Code of Conduct in the repository](./CODE_OF_CONDUCT.md).
@@ -1,156 +0,0 @@
1
- # Development
2
-
3
- This file acts as a way to document how to develop the Terra Draw project locally.
4
-
5
- ### Prerequisites
6
-
7
- A few things you will need to have installed in order to develop on this project:
8
-
9
- - git
10
- - Node LTS - currently v16
11
- - npm 8
12
-
13
- ### Folder Structure
14
-
15
- - `.github` - used for all GitHub related configuration such as the GitHub Actions work flows
16
- - `.husky` - used to storing the precommit hooks that are used on the project
17
- - `src` - source files for the project
18
- - `dist` - the bundled distributed files of the project
19
- - `docs` - the demo app that is published to GitHub pages
20
- - `development` - the local development app that is used for developing locally (see below)
21
- - `common` - code that is used across `development` and `docs` folder`
22
-
23
- ### Technologies Used
24
-
25
- Terra Draw
26
-
27
- - [TypeScript](https://www.typescriptlang.org/) - provides strong compile time typing for JavaScript
28
- - Jest - used for testing (see more information below)
29
- - microbundle - used for the production bundle
30
- - Webpack - used for bundling locally in development (`development` and `docs` folders)
31
- - esno - for running tests quickly without type checking
32
-
33
- ### Precommit Hooks
34
-
35
- It is probably useful to be aware of the precommit hooks you will face when trying to run a git commit on the project. There are two currently in use, namely:
36
-
37
- - Uses pre-commit hook to run lint rules (eslint/prettier) on code before commit
38
- - Uses pre-commit hook to ensure [conventional commit messages](https://www.conventionalcommits.org/en/v1.0.0/) are used
39
-
40
- ### Testing
41
-
42
- Terra Draw uses [jest](https://jestjs.io/) as it's testing framework. You can distinguish a test by it's `.spec.ts` prefix on the file name.
43
-
44
- To run the tests as they would run in CI:
45
-
46
- ```
47
- npm run test
48
- ```
49
-
50
- You can also check the coverage by running:
51
-
52
- ```
53
- npm run test:coverage
54
- ```
55
-
56
- For local development you may benefit from the `nocheck` option which allows you to avoid running TypeScript type checking when running the tests. This option also only checks files which are explicitly tested (i.e. have a spec file.)
57
-
58
- ```
59
- npm run test:nocheck
60
- npm run test:nocheck:coverage
61
- ```
62
-
63
- ### Developing Locally
64
-
65
- A folder called `development` has been set up locally to allow you to test developing Terra Draw locally more easily. It allows you to run the different adapters and test different map providers in parallel, ensuring. You will need to update the .env file in the `development` folder in order to use the related adapters working. An example `.env` file in the `development` folder:
66
-
67
- ```
68
- GOOGLE_API_KEY=YOUR_KEY_HERE
69
- MAPBOX_ACCESS_TOKEN=YOUR_KEY_HERE
70
- ```
71
-
72
- ## Terra Draw Concepts
73
-
74
- Terra Draw has a few elementary concepts that allow it to stay strongly decoupled and relatively map library agnostic. Lets walk through them:
75
-
76
- - **Store**: - at the heart of the library, where geometry data is stored, created, updated and deleted. Data is stored as standard GeoJSON.
77
- - **Adapters**: thin wrappers that contain map library specific logic, for creating and updating layers that can rendered by the mapping library
78
- - **Modes**: - modes represent the logic for a specific drawing tool, for example the point, line and polygon modes
79
-
80
- ### Adapters Explained
81
-
82
- Adapters are a core aspect of Terra Draw - they are the layer between the core of the library and the external mapping libraries (Leaflet, Google Maps etc). In simple terms an adapter takes input events, passes them through to create geometries in the store and then passes them back to the adapter to be rendered specifically for the mapping library. For example, in the `LeafletAdapter` we create and update a GeoJSON layer that Leaflet knows how to render to the screen. In theory an adapter could be created for any mapping library that can fill out the Adapter abstract class (TerraDrawBaseAdapter). Namely these are methods that would need to be completed:
83
-
84
- ```typescript
85
- public project(...args: Parameters<Project>): ReturnType<Project>;
86
-
87
- public unproject(
88
- ...args: Parameters<Unproject>
89
- ): ReturnType<Unproject>;
90
-
91
- public setCursor(
92
- ...args: Parameters<SetCursor>
93
- ): ReturnType<SetCursor>;
94
-
95
- public getLngLatFromEvent(event: PointerEvent | MouseEvent): {
96
- lng: number;
97
- lat: number;
98
- } | null;
99
-
100
- public setDraggability(enabled: boolean): void;
101
-
102
- public setDoubleClickToZoom(enabled: boolean): void;
103
-
104
- public getMapContainer(): HTMLElement;
105
-
106
- public render(
107
- changes: TerraDrawChanges,
108
- styling: TerraDrawStylingFunction
109
- ): void;
110
- ```
111
-
112
- ### Modes Explained
113
-
114
- Modes are another important concept in Terra Draw. Modes are a way to encapsulate specific logic for drawing a certain entity. For example, there are built in modes for drawing points, lines, polygons, circles and rectangles.
115
-
116
- Modes can go beyond just drawing however, for example the built in `TerraDrawSelectMode` allows for selection and editing of geometries that have previously been drawn. Another example of a mode that is not explicitly just editing is `TerraDrawRenderMode` which can be considered to be a 'view only mode' and used if you wanted to show some contextual data in your application alongside data that you want to edit.
117
-
118
- Assuming that a mode extends from `TerraDrawBaseMode`
119
-
120
- ```typescript
121
- /** @internal */
122
- start() {
123
- this.setStarted();
124
-
125
- }
126
-
127
- /** @internal */
128
- stop() {
129
- this.setStopped();
130
- }
131
-
132
- /** @internal */
133
- onClick(event: TerraDrawMouseEvent) {}
134
-
135
- /** @internal */
136
- onMouseMove(event: TerraDrawMouseEvent) {}
137
-
138
- /** @internal */
139
- onKeyDown(event: TerraDrawKeyboardEvent) {}
140
-
141
- /** @internal */
142
- onKeyUp(event: TerraDrawKeyboardEvent) {}
143
-
144
-
145
- /** @internal */
146
- onDragStart(event: TerraDrawMouseEvent) {}
147
-
148
- /** @internal */
149
- onDrag(event: TerraDrawMouseEvent) {}
150
-
151
- /** @internal */
152
- onDragEnd(event: TerraDrawMouseEvent) {}
153
-
154
- /** @internal */
155
- styleFeature(feature: GeoJSONStoreFeatures): TerraDrawAdapterStyling {}
156
- ```
@@ -1,216 +0,0 @@
1
- # Getting Started
2
-
3
- ## Install
4
-
5
- We start with the assumption that you have [Node.js](https://nodejs.org/en) installed and [npm](https://www.npmjs.com/) (node package manager).
6
-
7
- You can install the Terra Draw into your project like so:
8
-
9
- ```shell
10
- npm install terra-draw
11
- ```
12
-
13
- Be aware Terra Draw is currently in alpha, the initial API is still being finalised. It is strongly advised to pin your installation to a specific version i.e. not using carat, asterix or tilde for versions but giving a version explicitly in your `package.json`
14
-
15
- ```
16
- "terra-draw": "0.0.1-alpha.22"
17
- ```
18
-
19
- Once terra-draw is out of alpha this suggestion will be removed as we will aim to move to semantic versioning.
20
-
21
- ## API Docs
22
-
23
- You can find the full autogenerated [API docs on the terra draw website](https://terradraw.io/#/api)
24
-
25
- ## Common Patterns
26
-
27
- A selection of common things you may want to do with Terra Draw is available via the [common patterns guide in this folder](./COMMON_PATTERNS.md). If you think something is missing please raise an issue!
28
-
29
- ## Adapters
30
-
31
- Terra Draw can be used with a set of different adapters to allow you to use it with your mapping library of choice. Each adapter has slightly different configuration but the API is the same for them all. For a deeper explanation about what adapters are and how to write you own see the [development guide](./DEVELOPMENT.md).
32
-
33
- ### Leaflet
34
-
35
- Here is some simple starter code for using Terra Draw with the popular open source mapping library Leaflet. It assumes you are going instantiate your map in a div with and id of `map`, which is assumed to exist within your HTML.
36
-
37
- ```typescript
38
- // Import the leaflet mapping library
39
- import * as L from "leaflet";
40
-
41
- // Import Terra Draw, we will import the leaflet adapter, select mode and polygon mode
42
- import {
43
- TerraDraw,
44
- TerraDrawLeafletAdapter,
45
- TerraDrawSelectMode,
46
- TerraDrawPolygonMode,
47
- } from "terra-draw";
48
-
49
- // Initialize a new Leaflet map, providing the id of the div to display the map
50
- // Set the initial center (latitude, longitude) and the zoom level
51
- const leafletMap = L.map("map", {
52
- center: [lat, lng],
53
- zoom: 4, // starting zoom,
54
- minZoom: 3,
55
- maxZoom: 20,
56
- tapTolerance: 10,
57
- });
58
-
59
- // Add a basemap from OpenStreetMap to the Leaflet map
60
- L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
61
- maxZoom: 19,
62
- attribution:
63
- '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
64
- }).addTo(leafletMap);
65
-
66
- // Instantiate the TerraDraw API with a Leaflet adapter and custom modes
67
- const draw = new TerraDraw({
68
- adapter: new TerraDrawLeafletAdapter({
69
- // The leaflet library object
70
- lib: leaflet,
71
-
72
- // The leaflet map object we created
73
- map: leafletMap,
74
-
75
- // The decimal precision of the coordinates created
76
- coordinatePrecision: 9,
77
- }),
78
-
79
- // Modes is an object containing all the modes we wish to
80
- // instantiate Terra Draw with
81
- modes: [
82
- new TerraDrawSelectMode({
83
- flags: {
84
- // Following flags determine what you can do in
85
- // select mode for features of a given mode - in this case polygon
86
- polygon: {
87
- feature: {
88
- scaleable: true,
89
- rotateable: true,
90
- draggable: true,
91
- coordinates: {
92
- midpoints: true,
93
- draggable: true,
94
- deletable: true,
95
- },
96
- },
97
- },
98
- },
99
- }),
100
- new TerraDrawPolygonMode({
101
- allowSelfIntersections: false,
102
- pointerDistance: 30,
103
- }),
104
- ]
105
- });
106
-
107
- // Start drawing
108
- draw.start();
109
-
110
- // Set the mode to polygon
111
- draw.setMode("polygon");
112
- ```
113
-
114
- ### Google Maps API
115
-
116
- Here is some starter code for using Terra Draw with the Google Maps API. It assumes you are going instantiate your map in a div with and id of `map`, which is assumed to exist within your HTML.
117
-
118
- ```typescript
119
- // Import the google maps api loader
120
- import { Loader } from "@googlemaps/js-api-loader";
121
-
122
- // Import Terra Draw, we will import the leaflet adapter, select mode and polygon mode
123
- import {
124
- TerraDraw,
125
- TerraDrawLeafletAdapter,
126
- TerraDrawSelectMode,
127
- TerraDrawPolygonMode,
128
- } from "terra-draw";
129
-
130
- const loader = new Loader({
131
- apiKey: "INSERT_YOUR_API_KEY_HERE", // You need to provide your own API key here
132
- version: "weekly",
133
- });
134
-
135
- // We need to await the google maps api
136
- loader.load().then((google) => {
137
- // Create the map
138
- const map = new google.maps.Map(document.getElementById("map"), {
139
- disableDefaultUI: true,
140
- center: { lat: this.lat, lng: this.lng },
141
- zoom: this.zoom,
142
-
143
- //Setting clickableIcons to false is used to disable the default behavior of the
144
- // Google Maps API, which is to allow users to interact with clickable icons on the
145
- // map, such as points of interest (POIs) or other interactive map elements.
146
- clickableIcons: false,
147
- });
148
-
149
- // When using Google Maps, it's important to wrap the creation of custom overlays or other // map-related initializations inside the 'projection_changed' event listener to ensure
150
- // that the map's projection is fully loaded before your code runs.
151
- map.addListener("projection_changed", () => {
152
- const draw = new TerraDraw({
153
- adapter: new TerraDrawGoogleMapsAdapter({
154
- lib: google.maps,
155
- map,
156
- coordinatePrecision: 9,
157
- }),
158
- modes: [
159
- new TerraDrawSelectMode({
160
- flags: {
161
- // Following flags determine what you can do in
162
- // select mode for features of a given mode - in this case polygon
163
- polygon: {
164
- feature: {
165
- scaleable: true,
166
- rotateable: true,
167
- draggable: true,
168
- coordinates: {
169
- midpoints: true,
170
- draggable: true,
171
- deletable: true,
172
- },
173
- },
174
- },
175
- },
176
- }),
177
- new TerraDrawPolygonMode({
178
- allowSelfIntersections: false,
179
- pointerDistance: 30,
180
- }),
181
- ]
182
- });
183
-
184
- // Start drawing
185
- draw.start();
186
-
187
- // Set the mode to polygon
188
- draw.setMode("polygon");
189
- });
190
- });
191
- ```
192
-
193
- ### OpenLayers
194
-
195
- Coming soon - please see development folder for example for now.
196
-
197
- ### MapboxGL JS
198
-
199
- Coming soon - please see development folder for example for now.
200
-
201
- ### MapLibreGL JS
202
-
203
- Coming soon - please see development folder for example for now.
204
-
205
- ## Other Examples
206
-
207
- There are a few other working examples that you can use as points of reference for creating a new app using Terra Draw.
208
-
209
- ### Development Example
210
-
211
- The [development folder features an example](https://github.com/JamesLMilner/terra-draw/tree/main/development) of using Terra Draw with all the adapters. It is meant for local development but can also be used as a guide of how to use Terra Draw with each adapter without any frame work.
212
-
213
- ### Full Example
214
-
215
- The [Terra Draw official website](https://github.com/JamesLMilner/terra-draw-website) is open source acts as a full working implementation of how to use Terra Draw. In this case it is used with popular framework Preact (has very similar API to React).
216
-
package/jest.config.ts DELETED
@@ -1,27 +0,0 @@
1
- let options = {};
2
-
3
- if (process.env.NO_CHECK) {
4
- options = {
5
- transform: {
6
- "^.+\\.(t|j)sx?$": "@swc/jest",
7
- },
8
- coveragePathIgnorePatterns: ["<rootDir>/src/test/"],
9
- setupFilesAfterEnv: ["<rootDir>/src/test/jest.matchers.ts"],
10
- };
11
- } else {
12
- options = {
13
- preset: "ts-jest",
14
- testEnvironment: "node",
15
- coveragePathIgnorePatterns: ["<rootDir>/src/test/"],
16
- setupFilesAfterEnv: ["<rootDir>/src/test/jest.matchers.ts"],
17
- collectCoverage: true,
18
- collectCoverageFrom: ["./src/**"],
19
- coverageThreshold: {
20
- global: {
21
- lines: 65,
22
- },
23
- },
24
- };
25
- }
26
-
27
- module.exports = options;
package/logo.png DELETED
Binary file
@@ -1,5 +0,0 @@
1
-
2
-
3
-
4
- npm run release -- --prerelease --release-as 0.0.1-alpha.45
5
- git push --follow-tags origin main
@@ -1,21 +0,0 @@
1
- import { readFileSync } from "fs";
2
-
3
- const packageJson = JSON.parse(readFileSync("./package.json", "utf-8"));
4
-
5
- if (packageJson.version.includes("alpha")) {
6
- const currentVersion = packageJson.version.split(".").pop();
7
-
8
- if (
9
- currentVersion === undefined ||
10
- currentVersion === null ||
11
- isNaN(currentVersion)
12
- ) {
13
- throw new Error("Could not get current version number");
14
- }
15
-
16
- const nextVersion = parseInt(currentVersion) + 1;
17
-
18
- console.log(nextVersion);
19
- } else {
20
- throw new Error("This script is for alpha releases only");
21
- }