Polygon morpher (#1)

* feat: 🎸 polygon-morpher * docs: ✏️ update
naivemap · Mar 11, 2023 · 229ed8b · 229ed8b
1 parent dd3b7f1
commit 229ed8b
Show file tree

Hide file tree

Showing 16 changed files with 547 additions and 56 deletions.
diff --git a/README.md b/README.md
@@ -1 +1,69 @@
-# vite-lib-template
+# @naivemap/mapbox-gl-polygon-morpher
+
+Morph smoothly between Polygons or MultiPolygons.
+
+[API Reference](./docs/index.md)
+
+## Install
+
+```bash
+npm i mapbox-gl @naivemap/mapbox-gl-polygon-morpher
+```
+
+## Quick start
+
+```js
+import PolygonMorpher from '@naivemap/mapbox-gl-polygon-morpher'
+
+const map = new mapboxgl.Map({
+  container: 'map',
+  style: 'mapbox://styles/mapbox/streets-v12',
+  center: [-74.5, 40],
+  zoom: 9
+})
+
+map.on('load', () => {
+  map.addSource('geojson-source', {
+    type: 'geojson',
+    data: {
+      type: 'FeatureCollection',
+      features: []
+    }
+  })
+  map.addLayer(
+    {
+      id: 'poly-layer',
+      type: 'fill',
+      source: 'geojson-source',
+      paint: {
+        'fill-color': 'rgba(152, 224, 173, 0.5)'
+      }
+    },
+    'aeroway-line'
+  )
+  const geojsonSource = map.getSource('geojson-source') as mapboxgl.GeoJSONSource
+  const polygonMorpher = new PolygonMorpher(geojsonSource)
+
+  polygonMorpher.morph(feature)
+})
+```
+
+## UMD
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link href="https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.css" rel="stylesheet" />
+    <script src="https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@naivemap/mapbox-gl-polygon-morpher"></script>
+  </head>
+  <body>
+    <div id="map" style="position: absolute; top: 0; right: 0; bottom: 0; left: 0"></div>
+    <script>
+      const polygonMorpher = new PolygonMorpher(geojsonSource)
+    </script>
+  </body>
+</html>
+```
diff --git a/docs/index.md b/docs/index.md
@@ -6,6 +6,7 @@
 
 ## Packages
 
-| Package                                     | Description |
-| ------------------------------------------- | ----------- |
-| [vite-lib-template](./vite-lib-template.md) |             |
+|  Package | Description |
+|  --- | --- |
+|  [@naivemap/mapbox-gl-polygon-morpher](./mapbox-gl-polygon-morpher.md) | Morph smoothly between Polygons or MultiPolygons. |
+
diff --git a/docs/mapbox-gl-polygon-morpher.md b/docs/mapbox-gl-polygon-morpher.md
@@ -0,0 +1,20 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@naivemap/mapbox-gl-polygon-morpher](./mapbox-gl-polygon-morpher.md)
+
+## mapbox-gl-polygon-morpher package
+
+Morph smoothly between Polygons or MultiPolygons.
+
+## Classes
+
+|  Class | Description |
+|  --- | --- |
+|  [PolygonMorpher](./mapbox-gl-polygon-morpher.polygonmorpher.md) | Morph smoothly between Polygons or MultiPolygons. |
+
+## Interfaces
+
+|  Interface | Description |
+|  --- | --- |
+|  [MorphOption](./mapbox-gl-polygon-morpher.morphoption.md) | The option of the morpher. |
+
diff --git a/docs/mapbox-gl-polygon-morpher.morphoption.maxduration.md b/docs/mapbox-gl-polygon-morpher.morphoption.maxduration.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@naivemap/mapbox-gl-polygon-morpher](./mapbox-gl-polygon-morpher.md) &gt; [MorphOption](./mapbox-gl-polygon-morpher.morphoption.md) &gt; [maxDuration](./mapbox-gl-polygon-morpher.morphoption.maxduration.md)
+
+## MorphOption.maxDuration property
+
+Maximum duration of morphing
+
+**Signature:**
+
+```typescript
+maxDuration?: number;
+```
diff --git a/docs/mapbox-gl-polygon-morpher.morphoption.md b/docs/mapbox-gl-polygon-morpher.morphoption.md
@@ -0,0 +1,20 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@naivemap/mapbox-gl-polygon-morpher](./mapbox-gl-polygon-morpher.md) &gt; [MorphOption](./mapbox-gl-polygon-morpher.morphoption.md)
+
+## MorphOption interface
+
+The option of the morpher.
+
+**Signature:**
+
+```typescript
+export interface MorphOption 
+```
+
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [maxDuration?](./mapbox-gl-polygon-morpher.morphoption.maxduration.md) |  | number | _(Optional)_ Maximum duration of morphing |
+
diff --git a/docs/mapbox-gl-polygon-morpher.polygonmorpher._constructor_.md b/docs/mapbox-gl-polygon-morpher.polygonmorpher._constructor_.md
@@ -0,0 +1,21 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@naivemap/mapbox-gl-polygon-morpher](./mapbox-gl-polygon-morpher.md) &gt; [PolygonMorpher](./mapbox-gl-polygon-morpher.polygonmorpher.md) &gt; [(constructor)](./mapbox-gl-polygon-morpher.polygonmorpher._constructor_.md)
+
+## PolygonMorpher.(constructor)
+
+Constructs a new instance of the PolygonMorpher class
+
+**Signature:**
+
+```typescript
+constructor(source: mapboxgl.GeoJSONSource, option?: MorphOption);
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  source | mapboxgl.GeoJSONSource | The GeoJSONSource to be updated. |
+|  option | [MorphOption](./mapbox-gl-polygon-morpher.morphoption.md) | _(Optional)_ The option of the morpher. |
+
diff --git a/docs/mapbox-gl-polygon-morpher.polygonmorpher.md b/docs/mapbox-gl-polygon-morpher.polygonmorpher.md
@@ -0,0 +1,26 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@naivemap/mapbox-gl-polygon-morpher](./mapbox-gl-polygon-morpher.md) &gt; [PolygonMorpher](./mapbox-gl-polygon-morpher.polygonmorpher.md)
+
+## PolygonMorpher class
+
+Morph smoothly between Polygons or MultiPolygons.
+
+**Signature:**
+
+```typescript
+export default class PolygonMorpher 
+```
+
+## Constructors
+
+|  Constructor | Modifiers | Description |
+|  --- | --- | --- |
+|  [(constructor)(source, option)](./mapbox-gl-polygon-morpher.polygonmorpher._constructor_.md) |  | Constructs a new instance of the PolygonMorpher class |
+
+## Methods
+
+|  Method | Modifiers | Description |
+|  --- | --- | --- |
+|  [morph(feature)](./mapbox-gl-polygon-morpher.polygonmorpher.morph.md) |  | Morph to the given feature |
+
diff --git a/docs/mapbox-gl-polygon-morpher.polygonmorpher.morph.md b/docs/mapbox-gl-polygon-morpher.polygonmorpher.morph.md
@@ -0,0 +1,24 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@naivemap/mapbox-gl-polygon-morpher](./mapbox-gl-polygon-morpher.md) &gt; [PolygonMorpher](./mapbox-gl-polygon-morpher.polygonmorpher.md) &gt; [morph](./mapbox-gl-polygon-morpher.polygonmorpher.morph.md)
+
+## PolygonMorpher.morph() method
+
+Morph to the given feature
+
+**Signature:**
+
+```typescript
+morph(feature: GeoJSON.Feature<GeoJSON.Polygon | GeoJSON.MultiPolygon>): Promise<void>;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  feature | GeoJSON.Feature&lt;GeoJSON.Polygon \| GeoJSON.MultiPolygon&gt; | Feature |
+
+**Returns:**
+
+Promise&lt;void&gt;
+
diff --git a/docs/vite-lib-template.add.md b/docs/vite-lib-template.add.md
diff --git a/docs/vite-lib-template.md b/docs/vite-lib-template.md
diff --git a/index.html b/index.html
@@ -2,17 +2,85 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <title>vite lib</title>
+    <title>@naivemap/mapbox-gl-polygon-morpher</title>
     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
   </head>
   <body>
-    <script src="./dist/index.umd.js"></script>
+    <div id="map" style="position: absolute; top: 0; right: 0; bottom: 0; left: 0"></div>
+
+    <!-- <script src="./dist/index.umd.js"></script> -->
     <script type="module">
-      import { add } from './dist/index.js'
+      import mapboxgl from 'mapbox-gl'
+      import 'mapbox-gl/dist/mapbox-gl.css'
+      import PolygonMorpher from './dist'
+
+      mapboxgl.accessToken =
+        'pk.eyJ1IjoiaHVhbmdsaWkiLCJhIjoiY2wwM2E4a2drMDVrZjNrcGRucHIxOHo0cyJ9.0ecG5KGQE6R-SmhxvLvhHg'
+      const map = new mapboxgl.Map({
+        container: 'map',
+        style: 'mapbox://styles/huanglii/ckqt08oxg1kcc18ub9vowurqd?optimize=true',
+        hash: true,
+        center: [-73.950543, 40.7611],
+        zoom: 11
+      })
+
+      const buildGeoJSONDistricts = (results) => {
+        return results.map((row, i) => {
+          return {
+            type: 'Feature',
+            geometry: JSON.parse(row.boundary_simple)
+          }
+        })
+      }
+
+      map.on('load', () => {
+        map.addSource('geojson-source', {
+          type: 'geojson',
+          data: {
+            type: 'FeatureCollection',
+            features: []
+          }
+        })
+
+        map.addLayer(
+          {
+            id: 'poly-layer',
+            type: 'fill',
+            source: 'geojson-source',
+            paint: {
+              'fill-color': 'rgba(152, 224, 173, 0.5)'
+            }
+          },
+          'aeroway-line'
+        )
+        map.addLayer({
+          id: 'line-layer',
+          type: 'line',
+          source: 'geojson-source',
+          paint: {
+            'line-width': 2,
+            'line-color': 'rgba(255, 178, 125, 1)'
+          }
+        })
+
+        const geojsonSource = map.getSource('geojson-source')
+        const polygonMorpher = new PolygonMorpher(geojsonSource, {
+          // maxDuration: 100
+        })
 
-      console.log(add(1, 2))
+        fetch(
+          'https://us-congress-districts.api.aclu.org/pip?min_session=86&lat=40.7306&lng=-73.9866'
+        )
+          .then((res) => res.json())
+          .then((data) => {
+            const features = buildGeoJSONDistricts(data.results)
 
-      console.log(MyLib.add(3, 4))
+            polygonMorpher.morph(features[1])
+            setTimeout(() => {
+              polygonMorpher.morph(features[2])
+            }, 1000)
+          })
+      })
     </script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,10 +1,21 @@
 {
-  "name": "vite-lib-template",
+  "name": "@naivemap/mapbox-gl-polygon-morpher",
   "version": "0.1.0",
-  "description": "vite lib",
-  "repository": "https://github.com/naivemap/vite-lib-template",
-  "keywords": [],
-  "author": "huangli",
+  "description": "Morph smoothly between Polygons or MultiPolygons",
+  "repository": "https://github.com/naivemap/mapbox-gl-polygon-morpher",
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://github.com/naivemap/mapbox-gl-polygon-morpher/issues"
+  },
+  "keywords": [
+    "mapbox-gl",
+    "animate",
+    "morph",
+    "flubber"
+  ],
+  "author": "huanglii <[email protected]>",
   "license": "MIT",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.js",
@@ -52,6 +63,7 @@
     "@microsoft/api-documenter": "^7.19.25",
     "@microsoft/api-extractor": "^7.33.6",
     "@types/jest": "^29.2.4",
+    "@types/mapbox-gl": "^2.7.10",
     "@types/node": "^18.11.9",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
@@ -64,10 +76,17 @@
     "husky": "^8.0.2",
     "jest": "^29.3.1",
     "lint-staged": "^13.0.4",
+    "mapbox-gl": "^2.13.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.0",
     "ts-jest": "^29.0.3",
     "typescript": "^4.9.3",
     "vite": "^3.2.4"
+  },
+  "dependencies": {
+    "@turf/area": "^6.5.0",
+    "@turf/intersect": "^6.5.0",
+    "flubber": "^0.4.2",
+    "geojson-tools": "^0.2.2"
   }
 }