feat(styles): expose default draw styles

- expose draw style merged with default draw styles - use area in sq. meters - refactor imports/exports BREAKING CHANGE: Calculate area in sq. meters
dqunbp · Jun 8, 2020 · c163e65 · c163e65
1 parent a4a480b
commit c163e65
Show file tree

Hide file tree

Showing 6 changed files with 338 additions and 274 deletions.
diff --git a/README.md b/README.md
@@ -6,25 +6,53 @@
 
 ## Features
 
-- One click drawing - _two click drawing also supported_
+- One/two click drawing
 - Mobile compabillity
 - Area square restriction **Optional**
 
 ## Install
 
 ```bash
-npm install --save mapbox-gl-draw-rectangle-restrict-area
+npm install --save @mapbox/mapbox-gl-draw mapbox-gl-draw-rectangle-restrict-area
 ```
 
-> Don't forget install the peer dependencies.
+## Usage
 
-```bash
-npm install --save @mapbox/mapbox-gl-draw
+```js
+import MapboxDraw from "@mapbox/mapbox-gl-draw";
+import DrawRectangle, {
+  DrawStyles,
+} from "mapbox-gl-draw-rectangle-restrict-area";
+
+const map = new mapboxgl.Map({
+  container: "map", // container id
+  style: "mapbox://styles/mapbox/streets-v11",
+  center: [-91.874, 42.76], // starting position
+  zoom: 12, // starting zoom
+  modes: Object.assign(MapboxDraw.modes, {
+    draw_rectangle: DrawRectangle,
+  }),
+});
+
+const draw = new MapboxDraw({
+  userProperties: true,
+  displayControlsDefault: false,
+  styles: DrawStyles,
+});
+map.addControl(draw);
+
+// when mode drawing should be activated
+draw.changeMode("draw_rectangle", {
+  areaLimit: 5 * 1_000_000, // 5 km2, optional
+  escapeKeyStopsDrawing: true, // default true
+  allowCreateExceeded: false, // default false
+  exceedCallsOnEachMove: false, // default false
+  exceedCallback: (area) => console.log("exceeded!", area), // optional
+  areaChangedCallback: (area) => console.log("updated", area), // optional
+});
 ```
 
-## Usage
-
-See [example](https://github.com/dqunbp/mapbox-gl-draw-rectangle-restrict-area/blob/master/example/index.js)
+[Example](https://github.com/dqunbp/mapbox-gl-draw-rectangle-restrict-area/blob/master/example/index.js)
 
 ## License
 

diff --git a/example/index.html b/example/index.html
@@ -20,6 +20,7 @@
       body {
         margin: 0;
         padding: 0;
+        font-family: Arial, Helvetica, sans-serif;
       }
       #map {
         position: absolute;
@@ -36,17 +37,31 @@
         font-family: Arial, Helvetica, sans-serif;
         font-size: 18px;
         border: 2px dashed black;
-        background: lightgreen;
+        background: lightskyblue;
         padding: 25px;
         border-radius: 5px;
         cursor: pointer;
       }
+
+      #area-container {
+        position: absolute;
+        background-color: whitesmoke;
+        border: 2px dashed black;
+        border-radius: 5px;
+        padding: 15px 25px;
+        margin: 15px;
+        top: 0;
+        left: 0;
+      }
     </style>
 
     <title>Draw Rectangle Example</title>
   </head>
   <body>
     <div id="map"></div>
+    <div id="area-container">
+      <h1 id="area"></h1>
+    </div>
     <button id="draw-rectangle" class="draw">Draw Rectangle</button>
     <script src="index.js"></script>
   </body>

diff --git a/example/index.js b/example/index.js
@@ -1,6 +1,7 @@
 import MapboxDraw from "@mapbox/mapbox-gl-draw";
-import DrawRectangle from "mapbox-gl-draw-rectangle-restrict-area";
-import defaultDrawThemes from "@mapbox/mapbox-gl-draw/src/lib/theme";
+import DrawRectangle, {
+  DrawStyles,
+} from "mapbox-gl-draw-rectangle-restrict-area";
 
 const OSM_STYLE = {
   version: 8,
@@ -24,72 +25,38 @@ const OSM_STYLE = {
   ],
 };
 
-function updateDrawThemes(themes) {
-  return defaultDrawThemes
-    .filter((theme) => !themes.map(({ id }) => id).includes(theme.id))
-    .concat(themes);
-}
-
-export const drawStyles = updateDrawThemes([
-  {
-    id: "gl-draw-polygon-fill-active",
-    type: "fill",
-    filter: ["all", ["==", "active", "true"], ["==", "$type", "Polygon"]],
-    paint: {
-      "fill-color": [
-        "case",
-        ["!", ["to-boolean", ["get", "user_size_exceed"]]],
-        "#fbb03b",
-        "#ff0000",
-      ],
-      "fill-opacity": 0.2,
-    },
-  },
-  {
-    id: "gl-draw-polygon-stroke-active",
-    type: "line",
-    filter: ["all", ["==", "active", "true"], ["==", "$type", "Polygon"]],
-    layout: {
-      "line-cap": "round",
-      "line-join": "round",
-    },
-    paint: {
-      "line-color": [
-        "case",
-        ["!", ["to-boolean", ["get", "user_size_exceed"]]],
-        "#fbb03b",
-        "#ff0000",
-      ],
-      "line-dasharray": [0.2, 2],
-      "line-width": 2,
-    },
-  },
-]);
-
 const map = new mapboxgl.Map({
   container: "map", // container id
   style: OSM_STYLE,
   center: [-91.874, 42.76], // starting position
   zoom: 12, // starting zoom
   modes: Object.assign(MapboxDraw.modes, {
-    draw_polygon: DrawRectangle,
+    draw_rectangle: DrawRectangle,
   }),
 });
 
 const draw = new MapboxDraw({
   userProperties: true,
   displayControlsDefault: false,
-  styles: drawStyles,
+  styles: DrawStyles,
 });
 map.addControl(draw);
+
+const currenArea = document.getElementById("area");
+currenArea.textContent = "Area 0 m2";
+
+function onAreaChanged(area) {
+  currenArea.textContent = `Area ${area.toFixed(2)} m2`;
+}
+
 document.getElementById("draw-rectangle").addEventListener("click", () => {
   console.log("let's draw!");
-  draw.changeMode("draw_polygon", {
-    areaLimit: 5, // required, km2
-    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
+  draw.changeMode("draw_rectangle", {
+    areaLimit: 5 * 1_000_000, // 5 km2, optional
+    escapeKeyStopsDrawing: true, // default true
+    allowCreateExceeded: false, // default false
+    exceedCallsOnEachMove: false, // default false - calls exceedCallback on each mouse move
+    exceedCallback: (area) => console.log(`area exceeded! ${area.toFixed(2)}`), // optional
+    areaChangedCallback: onAreaChanged,
   });
 });