feat(demo): update demo area

- update demo area units to km2 - add github link
dqunbp · Jun 12, 2020 · 99f10a1 · 99f10a1
1 parent 35f6dfe
commit 99f10a1
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/example/index.html b/example/index.html
@@ -52,6 +52,13 @@
         margin: 15px;
         top: 0;
         left: 0;
+        position: relative;
+      }
+      #area-container a {
+        position: absolute;
+        right: 0;
+        top: 0;
+        padding: 20px;
       }
     </style>
 
@@ -60,7 +67,10 @@
   <body>
     <div id="map"></div>
     <div id="area-container">
-      <h1 id="area"></h1>
+      <a href="https://github.com/dqunbp/mapbox-gl-draw-rectangle-restrict-area"
+        >github</a
+      >
+      <h1>Area <span id="area"></span> km<sup>2</sup></h1>
     </div>
     <button id="draw-rectangle" class="draw">Draw Rectangle</button>
     <script src="index.js"></script>

diff --git a/example/index.js b/example/index.js
@@ -43,10 +43,10 @@ const draw = new MapboxDraw({
 map.addControl(draw);
 
 const currenArea = document.getElementById("area");
-currenArea.textContent = "Area 0 m2";
+currenArea.textContent = "0";
 
 function onAreaChanged(area) {
-  currenArea.textContent = `Area ${area.toFixed(2)} m2`;
+  currenArea.textContent = `${(area / 1_000_000).toFixed(2)}`;
 }
 
 document.getElementById("draw-rectangle").addEventListener("click", () => {

diff --git a/src/draw-rectangle-mode.js b/src/draw-rectangle-mode.js
@@ -7,9 +7,7 @@ import { getIneractionSwitch } from "./switchIteractions";
 const doubleClickZoom = getIneractionSwitch("doubleClickZoom");
 const dragPan = getIneractionSwitch("dragPan");
 
-function getArea(feature) {
-  return area(feature);
-}
+const getArea = (feature) => area(feature);
 
 const DrawRectangle = {};