fix(digitization): add new example json and change default color

terrestris · Jan 28, 2022 · 1cb354f · 1cb354f
1 parent c875baa
commit 1cb354f
Show file tree

Hide file tree

Showing 4 changed files with 159 additions and 23 deletions.
diff --git a/assets/simple-geometries.json b/assets/simple-geometries.json
@@ -0,0 +1,146 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {},
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [
+              4.537353515625,
+              50.97918242660188
+            ],
+            [
+              6.15234375,
+              50.97918242660188
+            ],
+            [
+              6.15234375,
+              51.957807388715516
+            ],
+            [
+              4.537353515625,
+              51.957807388715516
+            ],
+            [
+              4.537353515625,
+              50.97918242660188
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {},
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [
+              6.9873046875,
+              51.32374658474385
+            ],
+            [
+              7.646484374999999,
+              50.98609893339354
+            ],
+            [
+              8.690185546875,
+              51.33061163769853
+            ],
+            [
+              8.250732421875,
+              51.84935276370605
+            ],
+            [
+              7.569580078124999,
+              52.07950600379697
+            ],
+            [
+              6.932373046875,
+              51.67936786087718
+            ],
+            [
+              6.9873046875,
+              51.32374658474385
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {},
+      "geometry": {
+        "type": "LineString",
+        "coordinates": [
+          [
+            4.63623046875,
+            49.37522008143603
+          ],
+          [
+            3.71337890625,
+            49.95121990866204
+          ],
+          [
+            4.998779296875,
+            50.3734961443035
+          ],
+          [
+            6.053466796875,
+            49.85215166776998
+          ],
+          [
+            5.789794921875,
+            49.03786794532644
+          ],
+          [
+            4.10888671875,
+            48.821332549646634
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          7.119140625,
+          50.162824333817284
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          8.349609375,
+          50.127621728300475
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "label": "Label",
+        "isLabel": true
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          7.690429687499999,
+          49.49667452747045
+        ]
+      }
+    }
+  ]
+}
diff --git a/src/Button/CopyButton/CopyButton.example.md b/src/Button/CopyButton/CopyButton.example.md
@@ -1,24 +1,26 @@
 This demonstrates the use of the CopyButton.
 
 ```jsx
-import { useEffect, useState } from 'react';
+import {useEffect, useState} from 'react';
 
 import OlMap from 'ol/Map';
 import OlView from 'ol/View';
 import OlLayerTile from 'ol/layer/Tile';
 import OlSourceOsm from 'ol/source/OSM';
 import OlFormatGeoJSON from 'ol/format/GeoJSON';
-import { fromLonLat } from 'ol/proj';
+import {fromLonLat} from 'ol/proj';
 
 import MapContext from '@terrestris/react-geo/Context/MapContext/MapContext'
 import MapComponent from '@terrestris/react-geo/Map/MapComponent/MapComponent';
 import CopyButton from '@terrestris/react-geo/Button/CopyButton/CopyButton';
-import { DigitizeUtil } from '@terrestris/react-geo/Util/DigitizeUtil';
+import {DigitizeUtil} from '@terrestris/react-geo/Util/DigitizeUtil';
 
-import federalStates from '../../../assets/federal-states-ger.json';
+import featuresJson from '../../../assets/simple-geometries.json';
 
-const format = new OlFormatGeoJSON();
-const features = format.readFeatures(federalStates);
+const format = new OlFormatGeoJSON({
+  featureProjection: 'EPSG:3857'
+});
+const features = format.readFeatures(featuresJson);
 
 const CopyButtonExample = () => {
   const [map, setMap] = useState();
@@ -56,7 +58,7 @@ const CopyButtonExample = () => {
             height: '400px'
           }}
         />
-    
+
         <CopyButton>
           Copy feature
         </CopyButton>
@@ -65,5 +67,5 @@ const CopyButtonExample = () => {
   );
 }
 
-<CopyButtonExample />
+<CopyButtonExample/>
 ```
diff --git a/src/Button/DrawButton/DrawButton.tsx b/src/Button/DrawButton/DrawButton.tsx
@@ -204,30 +204,18 @@ const DrawButton: React.FC<DrawButtonProps> = ({
 
   /**
    * Called when the draw button is toggled. If the button state is pressed,
-   * the appropriate draw interaction will be activated.
-   *
-   * @param pressed Whether the draw button is pressed or not.
-   * @param lastClickEvent
+   * the draw interaction will be activated.
    */
   const onToggleInternal = (pressed: boolean, lastClickEvent: any) => {
     drawInteraction.setActive(pressed);
     onToggle?.(pressed, lastClickEvent);
   };
 
-  /**
-   * Callback function after `Ok` button of label input modal was clicked.
-   * Turns visibility of modal off and call `setTextOnFeature` method.
-   */
   const onModalLabelOkInternal = () => {
     onModalLabelOk?.(digitizeTextFeature);
     setDigitizeTextFeature(null);
   };
 
-  /**
-   * Callback function after `Cancel` button of label input modal was clicked.
-   * Turns visibility of modal off and removes last drawn feature from the
-   * digitize layer.
-   */
   const onModalLabelCancelInternal = () => {
     onModalLabelCancel?.();
     layer.getSource().removeFeature(digitizeTextFeature);

diff --git a/src/Util/DigitizeUtil.ts b/src/Util/DigitizeUtil.ts
@@ -18,12 +18,12 @@ export class DigitizeUtil {
   /**
    * Default fill color used in style object of drawn features.
    */
-  static DEFAULT_FILL_COLOR = 'rgba(154, 26, 56, 0.5)';
+  static DEFAULT_FILL_COLOR = 'rgba(0, 183, 43, 0.5)';
 
   /**
    * Default stroke color used in style object of drawn features.
    */
-  static DEFAULT_STROKE_COLOR = 'rgba(154, 26, 56, 0.8)';
+  static DEFAULT_STROKE_COLOR = 'rgba(0, 183, 43, 0.8)';
 
   /**
    * Default style for digitized points.