Skip to content

Commit 0cc0543

Browse files
valentinogagliardivalentinogagliardi
authored
v1.0.0
1 parent 3d07399 commit 0cc0543

File tree

16 files changed

+17828
-1
lines changed

16 files changed

+17828
-1
lines changed

‎.github/workflows/github.ci.yml‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
name: Test
2+
3+
on: push
4+
5+
jobs:
6+
unit_test:
7+
runs-on: ubuntu-latest
8+
if: github.ref != 'refs/heads/main-build'
9+
10+
steps:
11+
- uses: actions/checkout@v2
12+
- uses: actions/setup-node@v2
13+
with:
14+
node-version: '16'
15+
16+
- name: Install dependencies
17+
run: npm ci
18+
19+
- name: Test
20+
run: npm test
21+
22+
functional_test:
23+
runs-on: ubuntu-18.04
24+
if: github.ref != 'refs/heads/main-build'
25+
26+
steps:
27+
- uses: actions/checkout@v2
28+
29+
- name: Install JS dependencies
30+
run: npm ci
31+
32+
- name: Test
33+
uses: cypress-io/github-action@v2
34+
with:
35+
start: npm start
36+
spec: cypress/integration/*.spec.ts
37+
38+
- uses: actions/upload-artifact@v2
39+
if: failure()
40+
with:
41+
name: cypress-screenshots
42+
path: cypress/screenshots

‎.github/workflows/release.yml‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
name: Release
2+
3+
on:
4+
release:
5+
types: [published]
6+
7+
jobs:
8+
build:
9+
name: 'Build and publish to NPM'
10+
runs-on: ubuntu-latest
11+
steps:
12+
- uses: actions/checkout@v2
13+
- uses: actions/setup-node@v2
14+
with:
15+
node-version: '16'
16+
registry-url: 'https://registry.npmjs.org'
17+
- run: npm ci
18+
- run: npm test
19+
- run: npm run build:esm
20+
- run: npm publish --access public
21+
env:
22+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

‎README.md‎

Lines changed: 63 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,63 @@
1-
# leaflet-polydiff
1+
# leaflet-polydiff
2+
> Leaflet layer for efficient data fetching.
3+
4+
`leaflet-polydiff` keeps track of user movements to compute the **difference between newly visited area in the map, and the sum of all previously visited area**, thanks to [Turf.js](https://turfjs.org).
5+
6+
The resulting polygon can be used to make API calls to a backend, in order to optimize data fetching of GeoJSON feature.
7+
8+
## Installation
9+
10+
You can install `leaflet-polydiff` with NPM:
11+
12+
```bash
13+
npm i @20tab/leaflet-polydiff
14+
```
15+
16+
Or with YARN:
17+
18+
```bash
19+
yarn add @20tab/leaflet-polydiff
20+
```
21+
22+
## Usage
23+
24+
`leaflet-polydiff` is distributed as an ES2015 module, and is intended to be used with a module bundler.
25+
26+
```typescript jsx
27+
import * as L from "leaflet";
28+
29+
import PolyDiff from "@20tab/leaflet-polydiff";
30+
31+
/**
32+
* Map initialization.
33+
*/
34+
const copy =
35+
"© <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors";
36+
const url = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
37+
const osm = L.tileLayer(url, { attribution: copy });
38+
39+
const leafletMap = L.map("map", {
40+
layers: [osm],
41+
zoom: 15,
42+
center: [43.71994, 10.948968],
43+
});
44+
45+
/**
46+
* PolyDiff activation.
47+
*/
48+
49+
PolyDiff().addTo(leafletMap);
50+
51+
leafletMap.on("polydiff", (event) => {
52+
// The event object will carry a diff polygon.
53+
event.diff;
54+
});
55+
```
56+
57+
## Props
58+
59+
| Name | Type | Default | Description |
60+
|--------------|-----------------------------------------------------------------------|---------------|------------------------------------|
61+
| eventName? | string | "polydiff" | The event name for the diff event. |
62+
| pane? | [LayerOptions](https://leafletjs.com/reference.html#layer-pane) | "overlayPane" | See link. |
63+
| attribution? | [LayerOptions](https://leafletjs.com/reference.html#layer-pane) | null | See link. |

‎__tests__/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
7+
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
8+
crossorigin=""/>
9+
<style>
10+
#map {
11+
height: 500px;
12+
}
13+
</style>
14+
</head>
15+
<body>
16+
<div id="map">
17+
<!-- bundle injected by webpack -->
18+
</div>
19+
</body>
20+
</html>

‎__tests__/index.ts‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import * as L from "leaflet";
2+
3+
import PolyDiff from "../src";
4+
5+
/**
6+
* Map initialization.
7+
*/
8+
const copy =
9+
"© <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors";
10+
const url = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
11+
const osm = L.tileLayer(url, { attribution: copy });
12+
13+
const leafletMap = L.map("map", {
14+
layers: [osm],
15+
zoom: 15,
16+
center: [43.71994, 10.948968],
17+
});
18+
19+
/**
20+
* PolyDiff activation.
21+
*/
22+
23+
PolyDiff({
24+
eventName: "polydiffevent",
25+
}).addTo(leafletMap);
26+
27+
/**
28+
* To test PolyDiff we ensure that when the "polydiff" event is fired, two new layers get added to the map.
29+
*/
30+
const colors = ["#6351c6", "#f9c4c0"];
31+
32+
leafletMap.on("polydiffevent", (event) => {
33+
// @ts-ignore
34+
L.geoJSON(event.diff, {
35+
style: {
36+
color: colors.pop(),
37+
},
38+
}).addTo(leafletMap);
39+
});

‎__tests__/utils/geometry.spec.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { getBboxPolygon } from "../../src";
2+
3+
import { LatLngBounds } from "leaflet";
4+
5+
describe("Geometry utils", () => {
6+
test("geometry of a given bounding box", () => {
7+
const bounds = new LatLngBounds([
8+
[29.27681632836857, -107.70996093750001],
9+
[33.95247360616284, -86.75903320312501],
10+
]);
11+
12+
expect(getBboxPolygon(bounds)).toEqual({
13+
bbox: [
14+
-107.70996093750001, 29.27681632836857, -86.75903320312501,
15+
33.95247360616284,
16+
],
17+
geometry: {
18+
coordinates: [
19+
[
20+
[-107.70996093750001, 29.27681632836857],
21+
[-86.75903320312501, 29.27681632836857],
22+
[-86.75903320312501, 33.95247360616284],
23+
[-107.70996093750001, 33.95247360616284],
24+
[-107.70996093750001, 29.27681632836857],
25+
],
26+
],
27+
type: "Polygon",
28+
},
29+
properties: {},
30+
type: "Feature",
31+
});
32+
});
33+
});

‎cypress.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"baseUrl": "http://localhost:8080"
3+
}

‎cypress/integration/PolyDiff.spec.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
context("Map", () => {
2+
describe("Layers", () => {
3+
describe("Polydiff", () => {
4+
it("generates diff polygons", () => {
5+
cy.visit("");
6+
cy.get("a[title='Zoom out']").click();
7+
cy.get("[stroke='#f9c4c0']");
8+
cy.wait(400);
9+
cy.get("a[title='Zoom out']").click();
10+
cy.get("[stroke='#6351c6']");
11+
});
12+
});
13+
});
14+
});

‎cypress/tsconfig.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"lib": ["es5", "dom"],
5+
"types": ["cypress"]
6+
},
7+
"include": ["**/*.ts"]
8+
}

0 commit comments

Comments
 (0)