@defra/interactive-map 0.0.3-alpha → 0.0.5-alpha

package/plugins/{draw-ml → beta/draw-ml}/src/mapboxDraw.js

@@ -1,9 +1,11 @@
 import MapboxDraw from '@mapbox/mapbox-gl-draw'
 import { DisabledMode } from './modes/disabledMode.js'
 import { EditVertexMode } from './modes/editVertexMode.js'
-import { DrawVertexMode } from './modes/drawVertexMode.js'
+import { DrawPolygonMode } from './modes/drawPolygonMode.js'
+import { DrawLineMode } from './modes/drawLineMode.js'
 import { createDrawStyles, updateDrawStyles } from './styles.js'
 import { initMapLibreSnap } from './mapboxSnap.js'
+import { createUndoStack } from './undoStack.js'
 
 /**
  * Creates and manages a MapLibre/Mapbox Draw control instance configured for polygon editing.
@@ -33,7 +35,8 @@ export const createMapboxDraw = ({ mapStyle, mapProvider, events, eventBus, snap
     ...MapboxDraw.modes,
     disabled: DisabledMode,
     edit_vertex: EditVertexMode,
-    draw_vertex: DrawVertexMode
+    draw_polygon: DrawPolygonMode,
+    draw_line: DrawLineMode
   }
 
   // --- Create MapLibre Draw instance ---
@@ -46,10 +49,53 @@ export const createMapboxDraw = ({ mapStyle, mapProvider, events, eventBus, snap
   })
   map.addControl(draw)
 
+  // Workaround: mapbox-gl-draw calls preventDefault() on touchend even in disabled mode,
+  // which prevents the browser from synthesizing a click event. We detect taps and
+  // manually dispatch a click event when in disabled mode.
+  const canvas = map.getCanvas()
+  let touchStart = null
+
+  const handleTouchStart = (e) => {
+    if (e.touches.length === 1) {
+      touchStart = { x: e.touches[0].clientX, y: e.touches[0].clientY, time: Date.now() }
+    }
+  }
+
+  const handleTouchEnd = (e) => {
+    if (draw.getMode() !== 'disabled' || !touchStart) {
+      touchStart = null
+      return
+    }
+
+    const touch = e.changedTouches[0]
+    const dx = touch.clientX - touchStart.x
+    const dy = touch.clientY - touchStart.y
+    const duration = Date.now() - touchStart.time
+
+    // Only synthesize click for quick taps with minimal movement
+    if (duration < 300 && Math.abs(dx) < 10 && Math.abs(dy) < 10) {
+      canvas.dispatchEvent(new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+        clientX: touch.clientX,
+        clientY: touch.clientY
+      }))
+    }
+
+    touchStart = null
+  }
+
+  canvas.addEventListener('touchstart', handleTouchStart, { passive: true })
+  canvas.addEventListener('touchend', handleTouchEnd, { passive: true })
+
   // We need a reference to this
   mapProvider.draw = draw
   // Initialize snap as disabled (matches initialState.snap = false)
   mapProvider.snapEnabled = false
+  // Initialize undo stack (also stored on map for mode access)
+  const undoStack = createUndoStack(map)
+  mapProvider.undoStack = undoStack
+  map._undoStack = undoStack
 
   // --- Initialize MapboxSnap using external module ---
   // Start with status: false to match initial snap disabled state
@@ -77,6 +123,9 @@ export const createMapboxDraw = ({ mapStyle, mapProvider, events, eventBus, snap
   return {
     draw,
     remove() {
+      // Remove touch workaround listeners
+      canvas.removeEventListener('touchstart', handleTouchStart)
+      canvas.removeEventListener('touchend', handleTouchEnd)
       // Remove event listeners
       eventBus.off(events.MAP_SET_STYLE, handleSetMapStyle)
       // Delete all features and disable draw

package/plugins/{draw-ml → beta/draw-ml}/src/mapboxSnap.js

@@ -68,6 +68,7 @@ function applyMapboxSnapPatches(colors) {
       return orig.getLines.call(this, feature, mouse, radiusArg)
     } catch (e) {
       // Invalid geometry - skip this feature
+      console.log(e)
       return []
     }
   }
@@ -111,9 +112,9 @@ function applyMapboxSnapPatches(colors) {
     return r
   }
 
-  // Skip when disabled, clean up internal arrays to prevent memory accumulation
+  // Skip when disabled or zooming, clean up internal arrays to prevent memory accumulation
   proto.snapToClosestPoint = function(e) {
-    if (!this.status) {
+    if (!this.status || this.map?._isZooming) {
       return
     }
     try {
@@ -127,6 +128,7 @@ function applyMapboxSnapPatches(colors) {
       return result
     } catch (err) {
       // Invalid geometry encountered - clear state and continue
+      console.log(err)
       this.snapStatus = false
       this.snapCoords = null
       return
@@ -138,6 +140,8 @@ function applyMapboxSnapPatches(colors) {
 function pollUntil(checkFn, onSuccess) {
   (function poll() {
     const result = checkFn()
+    // null signals to stop polling, falsy continues polling
+    if (result === null) return
     result ? onSuccess(result) : requestAnimationFrame(poll)
   })()
 }
@@ -265,7 +269,7 @@ export function initMapLibreSnap(map, draw, snapOptions = {}) {
   // Handle style changes - re-patch source and ensure snap layer exists
   map.on('style.load', () => {
     pollUntil(
-      () => map.getSource('mapbox-gl-draw-hot'),
+      () => map._removed ? null : map.getSource('mapbox-gl-draw-hot'),
       (source) => {
         patchSourceData(source)
 
@@ -293,24 +297,26 @@ export function initMapLibreSnap(map, draw, snapOptions = {}) {
     )
   })
 
-  // Hide snap indicator during zoom
+  // Suppress snap processing during zoom (indicator freezes in place)
   map.on('zoomstart', () => {
-    if (map.getLayer(SNAP_HELPER_LAYER)) {
-      map.setLayoutProperty(SNAP_HELPER_LAYER, 'visibility', 'none')
-    }
+    map._isZooming = true
   })
 
   map.on('zoomend', () => {
-    // Only show indicator if snap is enabled
-    const snap = map._snapInstance
-    if (map.getLayer(SNAP_HELPER_LAYER) && snap?.status) {
-      map.setLayoutProperty(SNAP_HELPER_LAYER, 'visibility', 'visible')
+    map._isZooming = false
+    // Force hide then re-show to reset indicator at new zoom level (Safari fix)
+    if (map.getLayer(SNAP_HELPER_LAYER)) {
+      map.setLayoutProperty(SNAP_HELPER_LAYER, 'visibility', 'none')
+      const snap = map._snapInstance
+      if (snap?.status) {
+        map.setLayoutProperty(SNAP_HELPER_LAYER, 'visibility', 'visible')
+      }
     }
   })
 
   // Initial setup - poll until draw source exists
   pollUntil(
-    () => map.getSource('mapbox-gl-draw-hot'),
+    () => map._removed ? null : map.getSource('mapbox-gl-draw-hot'),
     createSnap
   )
 }

package/plugins/beta/draw-ml/src/modes/createDrawMode.js

@@ -0,0 +1,497 @@
+import createVertex from '../../../../../node_modules/@mapbox/mapbox-gl-draw/src/lib/create_vertex.js'
+
+import {
+  getSnapInstance,
+  isSnapActive,
+  isSnapEnabled,
+  getSnapLngLat,
+  triggerSnapAtPoint,
+  triggerSnapAtCenter,
+  createSnappedEvent,
+  createSnappedClickEvent
+} from '../utils/snapHelpers.js'
+
+/**
+ * Factory function to create a draw mode for either polygons or lines.
+ * Reduces duplication by sharing common event handling, snap detection, etc.
+ *
+ * @param {Object} ParentMode - DrawPolygon or DrawLineString from mapbox-gl-draw
+ * @param {Object} config - Configuration for the mode
+ * @param {string} config.featureProp - Property name on state ('polygon' or 'line')
+ * @param {string} config.geometryType - 'Polygon' or 'LineString'
+ * @param {Function} config.getCoords - Function to get coordinates from feature
+ * @param {Function} config.validateClick - Validation function for clicks
+ * @param {Function} config.createVertices - Function to create vertex display features
+ */
+export const createDrawMode = (ParentMode, config) => {
+  const {
+    featureProp,
+    geometryType,
+    getCoords,
+    validateClick,
+    createVertices,
+    excludeFeatureIdFromSetup = false,
+    finishOnInvalidClick = false // For lines: finish when clicking same spot (like double-click)
+  } = config
+
+  const getFeature = (state) => state[featureProp]
+
+  return {
+    ...ParentMode,
+
+    onSetup(options) {
+      const { map } = this
+
+      // Some parent modes (DrawLineString) interpret featureId as "continue existing"
+      // rather than "use this ID for new feature"
+      const parentOptions = excludeFeatureIdFromSetup
+        ? { ...options, featureId: undefined }
+        : options
+
+      const state = {
+        ...ParentMode.onSetup.call(this, parentOptions),
+        ...options
+      }
+
+      // Add initial props
+      state[featureProp].properties = options.properties
+
+      const { container, interfaceType, vertexMarkerId } = state
+      const vertexMarker = container.querySelector(`#${vertexMarkerId}`)
+      vertexMarker.style.display = ['touch', 'keyboard'].includes(interfaceType) ? 'block' : 'none'
+      state.vertexMarker = vertexMarker
+
+      // Bind all handlers once
+      const bind = (name, fn) => (this[name] = fn.bind(this, state))
+      const handlers = {
+        keydownHandler: this.onKeydown,
+        keyupHandler: this.onKeyup,
+        focusHandler: this.onFocus,
+        blurHandler: this.onBlur,
+        createHandler: this.onCreate,
+        moveHandler: this.onMove,
+        pointerdownHandler: this.onPointerdown,
+        pointermoveHandler: this.onPointermove,
+        pointerupHandler: this.onPointerup,
+        vertexButtonClickHandler: this.onVertexButtonClick,
+        undoHandler: this.onUndo
+      }
+      Object.entries(handlers).forEach(([k, fn]) => bind(k, fn))
+
+      // Register events
+      this._listeners = [
+        [window, 'keydown', this.keydownHandler],
+        [window, 'keyup', this.keyupHandler],
+        [window, 'click', this.vertexButtonClickHandler],
+        [container, 'focus', this.focusHandler],
+        [container, 'blur', this.blurHandler],
+        [container, 'pointermove', this.pointermoveHandler],
+        [container, 'pointerup', this.pointerupHandler],
+        [map, 'pointerdown', this.pointerdownHandler],
+        [map, 'draw.create', this.createHandler],
+        [map, 'move', this.moveHandler],
+        [map, 'draw.undo', this.undoHandler]
+      ]
+      this._listeners.forEach(([t, e, h]) => t.addEventListener ? t.addEventListener(e, h) : t.on(e, h))
+
+      return state
+    },
+
+    onClick(state, e) {
+      // Skip non-primary clicks, undo operations, or clicks outside canvas
+      if (e.originalEvent.button > 0 || this.map._undoInProgress || e.originalEvent.target !== this.map.getCanvas()) {
+        return
+      }
+      const snap = getSnapInstance(this.map)
+      if (isSnapEnabled(state) && isSnapActive(snap)) {
+        e = createSnappedEvent(e, snap)
+      } else {
+        const coords = getCoords(getFeature(state))
+        if (coords.length > 0) {
+          coords[coords.length - 1] = [e.lngLat.lng, e.lngLat.lat]
+        }
+      }
+      const coordsBefore = getCoords(getFeature(state)).length
+      ParentMode.onClick.call(this, state, e)
+      // Push undo if a vertex was added
+      if (getCoords(getFeature(state)).length > coordsBefore) {
+        this.pushDrawUndo(state)
+      }
+    },
+
+    onTap() {
+      return
+    },
+
+    doClick(state) {
+      // Skip during undo operation
+      if (this.map._undoInProgress) {
+        return
+      }
+
+      const feature = getFeature(state)
+      const coords = getCoords(feature)
+      this.dispatchVertexChange(coords)
+
+      if (!validateClick(feature)) {
+        // For lines: clicking same spot (like double-click) should finish the line
+        if (finishOnInvalidClick && coords.length > 1) {
+          coords.pop()
+          this.map.fire('draw.create', {
+            features: [feature.toGeoJSON()]
+          })
+          this.changeMode('simple_select', { featureIds: [feature.id] })
+        }
+        return
+      }
+
+      const snap = getSnapInstance(this.map)
+      const snappedEvent = isSnapEnabled(state) && createSnappedClickEvent(this.map, snap)
+      const coordsBefore = coords.length
+
+      if (snappedEvent) {
+        ParentMode.onClick.call(this, state, snappedEvent)
+        this._ctx.store.render()
+      } else {
+        this._simulateMouse('click', ParentMode.onClick, state)
+      }
+
+      // Push undo if a vertex was added
+      if (getCoords(getFeature(state)).length > coordsBefore) {
+        this.pushDrawUndo(state)
+      }
+    },
+
+    dispatchVertexChange(coords) {
+      this.map.fire('draw.vertexchange', {
+        numVertecies: coords.length
+      })
+    },
+
+    /**
+     * Push an undo operation for the last added vertex
+     */
+    pushDrawUndo(state) {
+      const undoStack = this.map._undoStack
+      // Don't push during undo operations
+      if (!undoStack || this.map._undoInProgress) {
+        return
+      }
+      undoStack.push({
+        type: 'draw_vertex',
+        geometryType,
+        featureId: getFeature(state).id
+      })
+    },
+
+    /**
+     * Undo the last added vertex during drawing
+     */
+    undoVertex(state) {
+      const feature = getFeature(state)
+      const coords = getCoords(feature)
+
+      if (coords.length < 2) {
+        return false
+      }
+
+      // Undoing last vertex requires reinitializing the feature
+      if (coords.length === 2) {
+        return this._reinitializeFeature(state, feature)
+      }
+
+      this._removeLastVertex(state, feature, coords)
+      return true
+    },
+
+    /**
+     * Reinitialize feature when undoing to 0 vertices
+     * For Polygon: reinitialize in place
+     * For LineString: restart the draw mode with fresh state
+     */
+    _reinitializeFeature(state, feature) {
+      const featureId = feature.id
+      this._ctx.store.delete([featureId])
+
+      // LineString: restart the draw mode with fresh state but same feature ID
+      if (geometryType === 'LineString') {
+        const undoStack = this.map._undoStack
+        if (undoStack) {
+          undoStack.clear()
+        }
+        // Restart draw with same options (excludeFeatureIdFromSetup prevents "continue" mode)
+        this._ctx.api.changeMode('draw_line', {
+          featureId,
+          container: state.container,
+          interfaceType: state.interfaceType,
+          vertexMarkerId: state.vertexMarkerId,
+          addVertexButtonId: state.addVertexButtonId,
+          getSnapEnabled: state.getSnapEnabled,
+          properties: state.properties
+        })
+        return true
+      }
+
+      // Polygon: reinitialize in place
+      const center = this.map.getCenter()
+      const initialCoords = [[center.lng, center.lat], [center.lng, center.lat]]
+      const newFeature = this.newFeature({
+        type: 'Feature',
+        properties: state.properties || {},
+        geometry: {
+          type: geometryType,
+          coordinates: [initialCoords]
+        }
+      })
+      newFeature.id = featureId
+      this._ctx.store.add(newFeature)
+
+      state[featureProp] = newFeature
+      state.currentVertexPosition = 0
+
+      this._ctx.store.render()
+      this._simulateMouse('mousemove', ParentMode.onMouseMove, state)
+      this._ctx.store.render()
+
+      this.dispatchVertexChange(initialCoords)
+      return true
+    },
+
+    /**
+     * Remove the last committed vertex and update rubber band
+     */
+    _removeLastVertex(state, feature, coords) {
+      // Structure during drawing: [v1, v2, ..., vN, rubber_band]
+      const ring = geometryType === 'Polygon' ? feature.coordinates[0] : coords
+      ring.splice(ring.length - 2, 1)
+
+      // Snap rubber band to new last vertex position
+      const newLastVertex = ring[ring.length - 2]
+      if (newLastVertex) {
+        ring[ring.length - 1] = [...newLastVertex]
+      }
+
+      // Keep parent mode's vertex counter in sync (min 1 for rubber band)
+      state.currentVertexPosition = Math.max(1, state.currentVertexPosition - 1)
+
+      this._ctx.store.render()
+      this._updateRubberBand(state, getCoords(feature))
+    },
+
+    /**
+     * Update rubber band position based on interface type
+     */
+    _updateRubberBand(state, coords) {
+      if (['touch', 'keyboard'].includes(state.interfaceType)) {
+        // Touch/keyboard: move to map center for add point to work
+        this._simulateMouse('mousemove', ParentMode.onMouseMove, state)
+        this._ctx.store.render()
+      } else {
+        // Mouse: keep rubber band at current position
+        const rubberBandIndex = geometryType === 'Polygon' ? coords.length - 2 : coords.length - 1
+        const rubberBandPos = coords[rubberBandIndex]
+        if (rubberBandPos) {
+          const lngLat = { lng: rubberBandPos[0], lat: rubberBandPos[1] }
+          const point = this.map.project(lngLat)
+          ParentMode.onMouseMove.call(this, state, {
+            lngLat,
+            point,
+            originalEvent: new MouseEvent('mousemove', { clientX: point.x, clientY: point.y })
+          })
+          this._ctx.store.render()
+        }
+      }
+      this.dispatchVertexChange(coords)
+    },
+
+    /**
+     * Handle draw.undo event
+     */
+    onUndo(state, e) {
+      if (e.operation?.type === 'draw_vertex') {
+        this.undoVertex(state)
+      }
+    },
+
+    _simulateMouse(type, fn, state) {
+      const { map } = this
+      const center = map.getCenter()
+      const point = map.project(center)
+      fn.call(this, state, {
+        lngLat: center,
+        point,
+        originalEvent: new MouseEvent(type, {
+          clientX: point.x,
+          clientY: point.y,
+          bubbles: true,
+          cancelable: true
+        })
+      })
+      this._ctx.store.render()
+
+      this.map.fire('draw.geometrychange', state.polygon || state.line)
+    },
+
+    _setInterface(state, type, show = true) {
+      state.interfaceType = type
+      if (show) {
+        state.vertexMarker.style.display = 'block'
+      }
+    },
+
+    onCreate(state, e) {
+      const draw = this._ctx.api
+      const feature = e.features[0]
+      draw.delete(feature.id)
+      feature.id = state.featureId
+      draw.add(feature, { userProperties: true })
+    },
+
+    onVertexButtonClick(state, e) {
+      // Only trigger for the specific add vertex button, and skip during undo
+      if (state.addVertexButtonId && !this.map._undoInProgress && e.target.closest(`#${state.addVertexButtonId}`)) {
+        this.doClick(state)
+      }
+    },
+
+    onTouchStart(state, e) {
+      this._setInterface(state, 'touch')
+      this.onMove(state, e)
+    },
+
+    onTouchEnd(state, e) {
+      this._setInterface(state, 'touch')
+      this.onMove(state, e)
+    },
+
+    onKeydown(state, e) {
+      // Undo with Cmd/Ctrl+Z (works without viewport focus, but not in input fields)
+      if (e.key === 'z' && (e.metaKey || e.ctrlKey) && !e.shiftKey) {
+        const tag = document.activeElement?.tagName
+        if (tag === 'INPUT' || tag === 'TEXTAREA') {
+          return
+        }
+        e.preventDefault()
+        e.stopPropagation()
+        const undoStack = this.map._undoStack
+        if (undoStack && undoStack.length > 0) {
+          const operation = undoStack.pop()
+          if (operation?.type === 'draw_vertex') {
+            // Set flag to prevent click interference during undo
+            this.map._undoInProgress = true
+            setTimeout(() => { this.map._undoInProgress = false }, 100)
+            this.undoVertex(state)
+          }
+        }
+        return
+      }
+      if (document.activeElement !== state.container) {
+        return
+      }
+      if (e.key === 'Escape') {
+        return e.preventDefault()
+      }
+      if (e.key === 'Enter') {
+        state.isActive = true
+      }
+      this._setInterface(state, 'keyboard')
+      this.onMove(state, e)
+    },
+
+    onKeyup(state, e) {
+      if (e.key === 'Escape' || document.activeElement !== state.container) {
+        return
+      }
+      this._setInterface(state, 'keyboard')
+      this.onMove(state, e)
+      if (e.key === 'Enter' && state.isActive) {
+        this.doClick(state)
+      }
+    },
+
+    onFocus(state) {
+      state.vertexMarker.style.display = ['touch', 'keyboard'].includes(state.interfaceType) ? 'block' : 'none'
+    },
+
+    onBlur(state, e) {
+      if (e.target !== state.container) {
+        state.vertexMarker.style.display = 'none'
+      }
+    },
+
+    onMouseMove(state, e) {
+      if (isSnapEnabled(state)) {
+        const snap = getSnapInstance(this.map)
+        triggerSnapAtPoint(snap, this.map, e.point)
+
+        const snappedLngLat = getSnapLngLat(snap)
+        if (snappedLngLat) {
+          e = { ...e, lngLat: snappedLngLat }
+        }
+      }
+
+      this.map.fire('draw.geometrychange', state.polygon || state.line)
+      
+      ParentMode.onMouseMove.call(this, state, e)
+    },
+
+    onMove(state) {
+      if (['touch', 'keyboard'].includes(state.interfaceType)) {
+        if (isSnapEnabled(state)) {
+          triggerSnapAtCenter(getSnapInstance(this.map), this.map)
+        }
+
+        const snap = getSnapInstance(this.map)
+        const snappedLngLat = isSnapEnabled(state) && getSnapLngLat(snap)
+
+        if (snappedLngLat) {
+          const point = this.map.project([snappedLngLat.lng, snappedLngLat.lat])
+          ParentMode.onMouseMove.call(this, state, {
+            lngLat: snappedLngLat,
+            point,
+            originalEvent: new MouseEvent('mousemove', {
+              clientX: point.x,
+              clientY: point.y,
+              bubbles: true,
+              cancelable: true
+            })
+          })
+          this._ctx.store.render()
+        } else {
+          this._simulateMouse('mousemove', ParentMode.onMouseMove, state)
+        }
+      }
+    },
+
+    onPointerdown(state, e) {
+      if (e.pointerType !== 'touch') {
+        this._setInterface(state, 'pointer', false)
+      }
+    },
+
+    onPointermove(state, e) {
+      if (e.pointerType !== 'touch') {
+        state.vertexMarker.style.display = 'none'
+      }
+    },
+
+    onPointerup(state) {
+      this.dispatchVertexChange(getCoords(getFeature(state)))
+    },
+
+    toDisplayFeatures(state, geojson, display) {
+      ParentMode.toDisplayFeatures.call(this, state, geojson, display)
+
+      const feature = getFeature(state)
+      if (geojson.geometry.type === geometryType && geojson.id === feature.id) {
+        createVertices(geojson, display, createVertex)
+      }
+    },
+
+    onStop(state) {
+      ParentMode.onStop.call(this, state)
+      this._listeners.forEach(([t, e, h]) => t.removeEventListener ? t.removeEventListener(e, h) : t.off(e, h))
+      state.vertexMarker.style.display = 'none'
+    }
+  }
+}

package/plugins/beta/draw-ml/src/modes/drawLineMode.js

@@ -0,0 +1,18 @@
+import DrawLineString from '../../../../../node_modules/@mapbox/mapbox-gl-draw/src/modes/draw_line_string.js'
+import { isValidLineClick } from '../utils/spatial.js'
+import { createDrawMode } from './createDrawMode.js'
+
+export const DrawLineMode = createDrawMode(DrawLineString, {
+  featureProp: 'line',
+  geometryType: 'LineString',
+  getCoords: (feature) => feature.coordinates,
+  validateClick: (feature) => isValidLineClick(feature.coordinates),
+  excludeFeatureIdFromSetup: true, // DrawLineString interprets featureId as "continue existing"
+  finishOnInvalidClick: true, // Clicking same spot (like double-click) finishes the line
+  createVertices: (geojson, display, createVertex) => {
+    const coords = geojson.geometry.coordinates
+    for (let i = 1; i < coords.length - 1; i++) {
+      display(createVertex(geojson.id, coords[i], `${i}`))
+    }
+  }
+})

package/plugins/beta/draw-ml/src/modes/drawPolygonMode.js

@@ -0,0 +1,16 @@
+import DrawPolygon from '../../../../../node_modules/@mapbox/mapbox-gl-draw/src/modes/draw_polygon.js'
+import { isValidClick } from '../utils/spatial.js'
+import { createDrawMode } from './createDrawMode.js'
+
+export const DrawPolygonMode = createDrawMode(DrawPolygon, {
+  featureProp: 'polygon',
+  geometryType: 'Polygon',
+  getCoords: (feature) => feature.coordinates[0],
+  validateClick: (feature) => isValidClick(feature.coordinates),
+  createVertices: (geojson, display, createVertex) => {
+    const ring = geojson.geometry.coordinates[0]
+    for (let i = 1; i < ring.length - 2; i++) {
+      display(createVertex(geojson.id, ring[i], `0.${i}`))
+    }
+  }
+})