Merge branch 'main' of github.com:UPRI-NOAH/noah-frontend into main

package.json

@@ -24,7 +24,9 @@
     "@angular/platform-browser": "~11.2.6",
     "@angular/platform-browser-dynamic": "~11.2.6",
     "@angular/router": "~11.2.6",
+    "@mapbox/mapbox-gl-draw": "^1.4.3",
     "@mapbox/mapbox-gl-geocoder": "^4.7.4",
+    "@turf/turf": "^6.5.0",
     "highcharts": "^9.3.0",
     "highcharts-angular": "^2.10.0",
     "mapbox-gl": "^2.5.1",

src/app/features/noah-playground/components/map-playground/map-playground.component.html

@@ -1,4 +1,8 @@
 <div id="map"></div>
+
+<div id="distance" class="distance-container"></div>
+<div id="area" class="area-container"></div>
+
 <div
   id="graph-dom"
   hidden
@@ -11,7 +15,52 @@
     user-select: none;
   "
 ></div>
-<div class="top-32 absolute z-10 right-0 pl-2 h-16 w-16 flex flex-row py-4">
+
+<div
+  class="top-48 absolute z-10 right-0 mt-2 pl-2 h-14 w-14 flex flex-row py-2"
+>
+  <div class="p-2">
+    <div class="inline-block relative group">
+      <div class="border bg-white text-gray-500 shadow rounded flex flex-col">
+        <button
+          class="
+            py-1
+            px-1
+            flex
+            items-center
+            justify-center
+            focus:outline-none
+            border-b
+            hover:bg-gray-300
+          "
+          (click)="calculateDistance()"
+        >
+          <img class="w-44 inline-block" src="assets/icons/distance.svg" />
+        </button>
+        <button
+          class="
+            py-1
+            px-1
+            flex
+            items-center
+            justify-center
+            focus:outline-none
+            border-b border-indigo-100
+            hover:bg-gray-300
+          "
+        >
+          <img
+            class="w-44 inline-block"
+            src="assets/icons/delete-distance.svg"
+            (click)="clearDistance()"
+          />
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="top-72 absolute z-10 right-0 pl-2 h-16 w-16 flex flex-row py-4">
   <div class="p-2">
     <div class="dropdown inline-block relative">
       <button

src/app/features/noah-playground/components/map-playground/map-playground.component.scss

@@ -13,3 +13,37 @@
   font-size: 20px;
   right: 5px;
 }
+.distance-container {
+  position: absolute;
+  top: 216px;
+  right: 47px;
+  z-index: 1;
+}
+
+.distance-container > * {
+  background-color: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  font-size: 11px;
+  line-height: 18px;
+  display: block;
+  margin: 0;
+  padding: 5px 10px;
+  border-radius: 3px;
+}
+.area-container {
+  position: absolute;
+  top: 146px;
+  right: 47px;
+  z-index: 1;
+}
+
+.area-container > * {
+  background-color: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  font-size: 11px;
+  line-height: 18px;
+  display: block;
+  margin: 0;
+  padding: 5px 10px;
+  border-radius: 3px;
+}

src/app/features/noah-playground/components/map-playground/map-playground.component.ts

@@ -14,6 +14,8 @@ import mapboxgl, {
   Map,
   Marker,
 } from 'mapbox-gl';
+import * as MapboxDraw from '@mapbox/mapbox-gl-draw';
+import * as turf from '@turf/turf';
 import { environment } from '@env/environment';
 import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
 import {
@@ -161,8 +163,14 @@ export class MapPlaygroundComponent implements OnInit, OnDestroy {
   private subscriptions: Subscription[] = [];
   isWarningAlert: boolean = true;
   municity = [];
+  private draw: MapboxDraw;
+  distanceContainer: any;
+  geojson: any;
+  linestring: any;
+  private measurementActive: boolean = false;
 
   @ViewChild('selectQc') selectQc: ElementRef;
+
   constructor(
     private mapService: MapService,
     private pgService: NoahPlaygroundService,
@@ -202,6 +210,9 @@ export class MapPlaygroundComponent implements OnInit, OnDestroy {
         this.initBarangayBoundary();
         this.initAffectedExposure();
         this.initRainForcast();
+        this.initArea();
+        this.initDistance();
+        this.clearDistance();
       });
   }
 
@@ -1844,6 +1855,170 @@ export class MapPlaygroundComponent implements OnInit, OnDestroy {
     }
   }
 
+  private initArea() {
+    this.map.on('load', () => {
+      this.draw = new MapboxDraw({
+        displayControlsDefault: false,
+        controls: {
+          polygon: true,
+          trash: true,
+        },
+      });
+
+      this.map.addControl(this.draw);
+      this.map.on('draw.create', this.updateArea.bind(this));
+      this.map.on('draw.delete', this.updateArea.bind(this));
+      this.map.on('draw.update', this.updateArea.bind(this));
+      this.map.on('draw.delete', this.clearDistance.bind(this));
+    });
+  }
+
+  private updateArea(event) {
+    const data = this.draw.getAll();
+    const answer = document.getElementById('area');
+
+    if (data.features.length > 0) {
+      const area = turf.area(data);
+      const rounded_area = Math.round(area * 100) / 100;
+      answer.innerHTML = `<p>Total Area: ${rounded_area.toLocaleString()} sqm</p>`;
+    } else {
+      answer.innerHTML = '';
+      if (event.type !== 'draw.delete') {
+        console.log('computation for area: ');
+      }
+    }
+  }
+
+  initDistance() {
+    this.distanceContainer = document.getElementById('distance');
+    this.geojson = {
+      type: 'FeatureCollection',
+      features: [],
+    };
+    this.linestring = {
+      type: 'Feature',
+      geometry: {
+        type: 'LineString',
+        coordinates: [],
+      },
+    };
+
+    this.map.on('load', () => {
+      this.map.addSource('geojson', {
+        type: 'geojson',
+        data: this.geojson,
+      });
+
+      this.map.addLayer({
+        id: 'measure-points',
+        type: 'circle',
+        source: 'geojson',
+        paint: {
+          'circle-radius': 5,
+          'circle-color': '#000',
+        },
+        filter: ['in', '$type', 'Point'],
+      });
+
+      this.map.addLayer({
+        id: 'measure-lines',
+        type: 'line',
+        source: 'geojson',
+        layout: {
+          'line-cap': 'round',
+          'line-join': 'round',
+        },
+        paint: {
+          'line-color': '#000',
+          'line-width': 2.5,
+        },
+        filter: ['in', '$type', 'LineString'],
+      });
+
+      const handleClickOrTouch = (e) => {
+        if (this.measurementActive) {
+          const features = this.map.queryRenderedFeatures(e.point, {
+            layers: ['measure-points'],
+          });
+
+          if (this.geojson.features.length > 1) this.geojson.features.pop();
+
+          this.distanceContainer.innerHTML = '';
+
+          if (features.length) {
+            const id = features[0].properties.id;
+            this.geojson.features = this.geojson.features.filter(
+              (point) => point.properties.id !== id
+            );
+          } else {
+            const point = {
+              type: 'Feature',
+              geometry: {
+                type: 'Point',
+                coordinates: [e.lngLat.lng, e.lngLat.lat],
+              },
+              properties: {
+                id: String(new Date().getTime()),
+              },
+            };
+
+            this.geojson.features.push(point);
+          }
+
+          if (this.geojson.features.length > 1) {
+            this.linestring.geometry.coordinates = this.geojson.features.map(
+              (point) => point.geometry.coordinates
+            );
+
+            this.geojson.features.push(this.linestring);
+
+            const value = document.createElement('pre');
+            const distance = turf.length(this.linestring);
+            value.textContent = `Total distance: ${distance.toLocaleString()}km`;
+            this.distanceContainer.appendChild(value);
+          }
+
+          (this.map.getSource('geojson') as mapboxgl.GeoJSONSource).setData(
+            this.geojson
+          );
+        }
+      };
+
+      this.map.on('click', handleClickOrTouch);
+      this.map.on('touchend', handleClickOrTouch);
+
+      this.map.on('mousemove', (e) => {
+        if (!this.measurementActive) {
+          return;
+        }
+        const features = this.map.queryRenderedFeatures(e.point, {
+          layers: ['measure-points'],
+        });
+        this.map.getCanvas().style.cursor = features.length
+          ? 'pointer'
+          : 'crosshair';
+      });
+    });
+  }
+
+  calculateDistance(): void {
+    this.measurementActive = true;
+    this.geojson.features = [];
+    this.distanceContainer.innerHTML = '';
+    (this.map.getSource('geojson') as mapboxgl.GeoJSONSource).setData(
+      this.geojson
+    );
+  }
+
+  clearDistance() {
+    this.measurementActive = false;
+    this.geojson.features = [];
+    this.distanceContainer.innerHTML = '';
+    (this.map.getSource('geojson') as mapboxgl.GeoJSONSource).setData(
+      this.geojson
+    );
+  }
+
   /**
    * All hazard maps except the debris flow and alluvial fan are
    * added to the map as layers of FillLayer type with gradations

src/index.html

@@ -26,6 +26,13 @@
       href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.0/mapbox-gl-geocoder.css"
       type="text/css"
     />
+    <link
+      rel="stylesheet"
+      href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.4.3/mapbox-gl-draw.css"
+      type="text/css"
+    />
+    <script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
+    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.4.3/mapbox-gl-draw.js"></script>
   </head>
 
   <body>