feat: configurable drawing pointer style (#84)

theopensystemslab · Nov 19, 2021 · 735b088 · 735b088
1 parent cc35990
commit 735b088
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 26 deletions.
diff --git a/index.html b/index.html
@@ -14,7 +14,7 @@
     />
   </head>
   <body>
-    <my-map zoom="18" maxZoom="23" drawMode />
+    <my-map zoom="18" maxZoom="23" drawMode drawPointer="dot" />
 
     <script>
       const map = document.querySelector("my-map");

diff --git a/src/drawing.ts b/src/drawing.ts
@@ -2,14 +2,12 @@ import MultiPoint from "ol/geom/MultiPoint";
 import { Draw, Modify, Snap } from "ol/interaction";
 import { Vector as VectorLayer } from "ol/layer";
 import { Vector as VectorSource } from "ol/source";
-import {
-  Fill,
-  RegularShape,
-  Stroke,
-  Style,
-} from "ol/style";
+import { Fill, RegularShape, Stroke, Style } from "ol/style";
+import CircleStyle from "ol/style/Circle";
 import { pointsSource } from "./snapping";
 
+export type DrawPointerEnum = "crosshair" | "dot";
+
 const redLineBase = {
   color: "#ff0000",
   width: 3,
@@ -26,16 +24,23 @@ const redLineFill = new Fill({
   color: "rgba(255, 0, 0, 0.1)",
 });
 
-const drawingPointer = new RegularShape({
+const crosshair = new RegularShape({
   stroke: new Stroke({
-    color: 'red',
+    color: "red",
     width: 2,
   }),
   points: 4, // crosshair aka star
   radius1: 15, // outer radius
   radius2: 1, // inner radius
 });
 
+const dot = new CircleStyle({
+  radius: 6,
+  fill: new Fill({
+    color: "#ff0000",
+  }),
+});
+
 const drawingVertices = new Style({
   image: new RegularShape({
     fill: new Fill({
@@ -69,24 +74,28 @@ export const drawingLayer = new VectorLayer({
   ],
 });
 
-export const draw = new Draw({
-  source: drawingSource,
-  type: "Polygon",
-  style: new Style({
-    stroke: redDashedStroke,
-    fill: redLineFill,
-    image: drawingPointer,
-  }),
-});
+export function configureDraw(pointerStyle: DrawPointerEnum) {
+  return new Draw({
+    source: drawingSource,
+    type: "Polygon",
+    style: new Style({
+      stroke: redDashedStroke,
+      fill: redLineFill,
+      image: pointerStyle === "crosshair" ? crosshair : dot,
+    }),
+  });
+}
 
 export const snap = new Snap({
   source: pointsSource, // empty if OS VectorTile basemap is disabled & zoom > 20
   pixelTolerance: 15,
 });
 
-export const modify = new Modify({
-  source: drawingSource,
-  style: new Style({
-    image: drawingPointer,
-  }),
-});
+export function configureModify(pointerStyle: DrawPointerEnum) {
+  return new Modify({
+    source: drawingSource,
+    style: new Style({
+      image: pointerStyle === "crosshair" ? crosshair : dot,
+    }),
+  });
+}
diff --git a/src/my-map.ts b/src/my-map.ts
@@ -10,7 +10,15 @@ import { Vector as VectorSource } from "ol/source";
 import { Fill, Stroke, Style } from "ol/style";
 import View from "ol/View";
 import { last } from "rambda";
-import { draw, drawingLayer, drawingSource, modify, snap } from "./drawing";
+
+import {
+  configureDraw,
+  configureModify,
+  drawingLayer,
+  drawingSource,
+  DrawPointerEnum,
+  snap,
+} from "./drawing";
 import {
   getFeaturesAtPoint,
   makeFeatureLayer,
@@ -92,6 +100,9 @@ export class MyMap extends LitElement {
   @property({ type: Number })
   drawGeojsonDataBuffer = 100;
 
+  @property({ type: String })
+  drawPointer: DrawPointerEnum = "crosshair";
+
   @property({ type: Boolean })
   showFeaturesAtPoint = false;
 
@@ -189,6 +200,10 @@ export class MyMap extends LitElement {
       }),
     });
 
+    // make configurable interactions available
+    const draw = configureDraw(this.drawPointer);
+    const modify = configureModify(this.drawPointer);
+
     // add a custom 'reset' control below zoom
     const button = document.createElement("button");
     button.innerHTML = "↻";

diff --git a/src/snapping.ts b/src/snapping.ts
@@ -18,7 +18,7 @@ export const pointsLayer = new VectorLayer({
     image: new CircleStyle({
       radius: 3,
       fill: new Fill({
-        color: "black",
+        color: "grey",
       }),
     }),
   }),