From a4a480bb076e669830945e80efbc89e3d2dc37ff Mon Sep 17 00:00:00 2001
From: dqunbp <dqunbp@gmail.com>
Date: Sun, 7 Jun 2020 20:41:02 +0300
Subject: [PATCH] fix: fix convert area function

---
 example/index.js | 40 ++++++++++++++++++++--------------------
 src/main.js      |  2 +-
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/example/index.js b/example/index.js
index eb2af8c..cc909d9 100644
--- a/example/index.js
+++ b/example/index.js
@@ -10,23 +10,23 @@ const OSM_STYLE = {
       tiles: [
         "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
         "https://b.tile.openstreetmap.org/{z}/{x}/{y}.png",
-        "https://c.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        "https://c.tile.openstreetmap.org/{z}/{x}/{y}.png",
       ],
-      tileSize: 256
-    }
+      tileSize: 256,
+    },
   },
   layers: [
     {
       id: "osm",
       source: "osm",
-      type: "raster"
-    }
-  ]
+      type: "raster",
+    },
+  ],
 };
 
 function updateDrawThemes(themes) {
   return defaultDrawThemes
-    .filter(theme => !themes.map(({ id }) => id).includes(theme.id))
+    .filter((theme) => !themes.map(({ id }) => id).includes(theme.id))
     .concat(themes);
 }
 
@@ -40,10 +40,10 @@ export const drawStyles = updateDrawThemes([
         "case",
         ["!", ["to-boolean", ["get", "user_size_exceed"]]],
         "#fbb03b",
-        "#ff0000"
+        "#ff0000",
       ],
-      "fill-opacity": 0.2
-    }
+      "fill-opacity": 0.2,
+    },
   },
   {
     id: "gl-draw-polygon-stroke-active",
@@ -51,19 +51,19 @@ export const drawStyles = updateDrawThemes([
     filter: ["all", ["==", "active", "true"], ["==", "$type", "Polygon"]],
     layout: {
       "line-cap": "round",
-      "line-join": "round"
+      "line-join": "round",
     },
     paint: {
       "line-color": [
         "case",
         ["!", ["to-boolean", ["get", "user_size_exceed"]]],
         "#fbb03b",
-        "#ff0000"
+        "#ff0000",
       ],
       "line-dasharray": [0.2, 2],
-      "line-width": 2
-    }
-  }
+      "line-width": 2,
+    },
+  },
 ]);
 
 const map = new mapboxgl.Map({
@@ -72,14 +72,14 @@ const map = new mapboxgl.Map({
   center: [-91.874, 42.76], // starting position
   zoom: 12, // starting zoom
   modes: Object.assign(MapboxDraw.modes, {
-    draw_polygon: DrawRectangle
-  })
+    draw_polygon: DrawRectangle,
+  }),
 });
 
 const draw = new MapboxDraw({
   userProperties: true,
   displayControlsDefault: false,
-  styles: drawStyles
+  styles: drawStyles,
 });
 map.addControl(draw);
 document.getElementById("draw-rectangle").addEventListener("click", () => {
@@ -89,7 +89,7 @@ document.getElementById("draw-rectangle").addEventListener("click", () => {
     escapeKeyStopsDrawing: true, // optional
     allowCreateExceeded: false, // optional
     exceedCallsOnEachMove: false, // optional, true - calls exceedCallback on each mouse move
-    exceedCallback: area => console.log("exceeded!", area), // optional
-    areaChangedCallback: area => console.log("area updated", area) // optional
+    exceedCallback: (area) => console.log("exceeded!", area), // optional
+    areaChangedCallback: (area) => console.log("area updated", area), // optional
   });
 });
diff --git a/src/main.js b/src/main.js
index 0151ac6..dfbd2d0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,7 +14,7 @@ function convertToKm2(value) {
   return convertArea(value, "meters", "kilometers");
 }
 function getArea(feature) {
-  convertToKm2(area(feature));
+  return convertToKm2(area(feature));
 }
 
 const DrawRectangle = {};