fix(selectmove): add a default style with a high zIndex to selectmove interaction

Author: oterral

index.html

@@ -14,7 +14,7 @@
     <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io/en/v6.4.3/build/ol.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/mapbox-gl.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/jsts.min.js"></script>
-    <script src="build/index.js"></script>
+    <script src="index.js"></script>
     <div id="app">
       <div id="header">
         <nav>

src/interaction/selectmove.js

@@ -1,6 +1,26 @@
 import Select from 'ol/interaction/Select';
+import { Circle, Style, Fill, Stroke } from 'ol/style';
 import { click, shiftKeyOnly } from 'ol/events/condition';
 
+// Default style on moving geometries
+const selectMoveStyle = new Style({
+  zIndex: 10000, // Always on top
+  image: new Circle({
+    radius: 5,
+    fill: new Fill({
+      color: '#05A0FF',
+    }),
+    stroke: new Stroke({ color: '#05A0FF', width: 2 }),
+  }),
+  stroke: new Stroke({
+    color: '#05A0FF',
+    width: 3,
+  }),
+  fill: new Fill({
+    color: 'rgba(255,255,255,0.4)',
+  }),
+});
+
 /**
  * Select features for modification by a Move interaction.
  *
@@ -18,6 +38,7 @@ class SelectMove extends Select {
       condition: click,
       toggleCondition: shiftKeyOnly,
       wrapX: false,
+      style: selectMoveStyle,
       ...options,
     });
   }