@defra/interactive-map 0.0.17-alpha → 0.0.19-alpha

package/plugins/interact/src/hooks/useInteractionHandlers.test.js

@@ -30,19 +30,27 @@ const click = result =>
     })
   )
 
-const setup = (pluginOverrides = {}) => {
+const makeMarkerEl = (rect) => ({
+  getBoundingClientRect: () => rect,
+  parentElement: {
+    getBoundingClientRect: () => ({ left: 0, top: 0 })
+  }
+})
+
+const setup = (pluginOverrides = {}, markerItems = [], markerRefs = new Map()) => {
   const deps = {
     mapState: {
-      markers: { add: jest.fn(), remove: jest.fn() }
+      markers: { add: jest.fn(), remove: jest.fn(), items: markerItems, markerRefs }
     },
     pluginState: {
       dispatch: jest.fn(),
-      dataLayers: [{ layerId: 'parcels', idProperty: 'parcelId' }],
-      interactionMode: 'select',
+      layers: [{ layerId: 'parcels', idProperty: 'parcelId' }],
+      interactionModes: ['selectMarker', 'selectFeature'],
       multiSelect: false,
       contiguous: false,
-      markerColor: 'red',
+      marker: { symbol: 'pin', backgroundColor: 'red' },
       selectedFeatures: [],
+      selectedMarkers: [],
       selectionBounds: null,
       ...pluginOverrides
     },
@@ -73,12 +81,94 @@ beforeEach(() => {
 })
 
 /* ------------------------------------------------------------------ */
-/* Marker mode                                                        */
+/* DOM marker hit detection                                           */
+/* ------------------------------------------------------------------ */
+
+describe('DOM marker hit detection', () => {
+  it('dispatches TOGGLE_SELECTED_MARKERS when click is within a marker bounds', () => {
+    const markerEl = makeMarkerEl({ left: 5, top: 15, right: 15, bottom: 25 })
+    const markerRefs = new Map([['marker-1', markerEl]])
+    const markerItems = [{ id: 'marker-1', coords: [1, 2] }]
+
+    const { result, deps } = setup({}, markerItems, markerRefs)
+    click(result)
+
+    expect(deps.pluginState.dispatch).toHaveBeenCalledWith({
+      type: 'TOGGLE_SELECTED_MARKERS',
+      payload: { markerId: 'marker-1', multiSelect: false }
+    })
+  })
+
+  it('markers take precedence over features when both hit', () => {
+    const markerEl = makeMarkerEl({ left: 5, top: 15, right: 15, bottom: 25 })
+    const markerRefs = new Map([['marker-1', markerEl]])
+    const markerItems = [{ id: 'marker-1', coords: [1, 2] }]
+
+    const { result, deps } = setup({}, markerItems, markerRefs)
+    click(result)
+
+    expect(deps.pluginState.dispatch).not.toHaveBeenCalledWith(
+      expect.objectContaining({ type: 'TOGGLE_SELECTED_FEATURES' })
+    )
+    expect(featureQueries.getFeaturesAtPoint).not.toHaveBeenCalled()
+  })
+
+  it('skips markers with no ref and continues to next', () => {
+    // marker in items but not in markerRefs — should not throw, should fall through to features
+    const markerItems = [{ id: 'marker-no-ref', coords: [1, 2] }]
+    const markerRefs = new Map() // no entry for marker-no-ref
+
+    const { result, deps } = setup({}, markerItems, markerRefs)
+    click(result)
+
+    expect(featureQueries.getFeaturesAtPoint).toHaveBeenCalled()
+    expect(deps.pluginState.dispatch).toHaveBeenCalledWith(
+      expect.objectContaining({ type: 'TOGGLE_SELECTED_FEATURES' })
+    )
+  })
+
+  it('uses zero offset when marker element has no parentElement', () => {
+    // parentElement is null — fallback parentRect { left: 0, top: 0 } should be used
+    const markerEl = {
+      getBoundingClientRect: () => ({ left: 5, top: 15, right: 15, bottom: 25 }),
+      parentElement: null
+    }
+    const markerRefs = new Map([['marker-1', markerEl]])
+    const markerItems = [{ id: 'marker-1', coords: [1, 2] }]
+
+    const { result, deps } = setup({}, markerItems, markerRefs)
+    click(result)
+
+    // click point { x: 10, y: 20 } is within [5,15,15,25] with zero parent offset
+    expect(deps.pluginState.dispatch).toHaveBeenCalledWith({
+      type: 'TOGGLE_SELECTED_MARKERS',
+      payload: { markerId: 'marker-1', multiSelect: false }
+    })
+  })
+
+  it('falls through to feature selection when click misses all markers', () => {
+    // marker bounds don't include the click point { x: 10, y: 20 }
+    const markerEl = makeMarkerEl({ left: 50, top: 50, right: 80, bottom: 80 })
+    const markerRefs = new Map([['marker-1', markerEl]])
+    const markerItems = [{ id: 'marker-1', coords: [1, 2] }]
+
+    const { result, deps } = setup({}, markerItems, markerRefs)
+    click(result)
+
+    expect(featureQueries.getFeaturesAtPoint).toHaveBeenCalled()
+    expect(deps.pluginState.dispatch).toHaveBeenCalledWith(
+      expect.objectContaining({ type: 'TOGGLE_SELECTED_FEATURES' })
+    )
+  })
+})
+
+/* ------------------------------------------------------------------ */
+/* placeMarker mode                                                   */
 /* ------------------------------------------------------------------ */
 
-describe('marker mode', () => {
+describe('placeMarker mode', () => {
   it('places marker, clears selection, and emits event', () => {
-    const { result, deps } = setup({ interactionMode: 'marker' })
+    const { result, deps } = setup({ interactionModes: ['placeMarker'] })
 
     click(result)
 
@@ -88,7 +178,7 @@ describe('marker mode', () => {
     expect(deps.mapState.markers.add).toHaveBeenCalledWith(
       'location',
       [1, 2],
-      { color: 'red' }
+      { symbol: 'pin', backgroundColor: 'red' }
     )
     expect(deps.services.eventBus.emit).toHaveBeenCalledWith(
       'interact:markerchange',
@@ -98,32 +188,30 @@ describe('marker mode', () => {
 })
 
 /* ------------------------------------------------------------------ */
-/* Select & Auto modes                                                */
+/* selectFeature mode                                                 */
 /* ------------------------------------------------------------------ */
 
-describe.each(['select', 'auto'])('%s mode feature selection', mode => {
-  it('dispatches selection for matching feature', () => {
-    const { result, deps } = setup({ interactionMode: mode })
+it('selectFeature mode dispatches selection for matching feature', () => {
+  const { result, deps } = setup({ interactionModes: ['selectFeature'] })
 
-    click(result)
+  click(result)
 
-    expect(deps.pluginState.dispatch).toHaveBeenCalledWith(
-      expect.objectContaining({
-        type: 'TOGGLE_SELECTED_FEATURES',
-        payload: expect.objectContaining({
-          featureId: 'P1',
-          layerId: 'parcels'
-        })
+  expect(deps.pluginState.dispatch).toHaveBeenCalledWith(
+    expect.objectContaining({
+      type: 'TOGGLE_SELECTED_FEATURES',
+      payload: expect.objectContaining({
+        featureId: 'P1',
+        layerId: 'parcels'
       })
-    )
-  })
+    })
+  )
 })
 
-it('falls back to marker in auto mode when no feature found', () => {
+it('falls back to placeMarker when selectFeature finds no match', () => {
   featureQueries.getFeaturesAtPoint.mockReturnValue([])
   featureQueries.findMatchingFeature.mockReturnValue(null)
 
-  const { result, deps } = setup({ interactionMode: 'auto' })
+  const { result, deps } = setup({ interactionModes: ['selectFeature', 'placeMarker'] })
 
   click(result)
 
@@ -248,32 +336,58 @@ describe('deselectOnClickOutside', () => {
 })
 
 /* ------------------------------------------------------------------ */
-/* Marker condition guard (FULL COVERAGE)                             */
+/* placeMarker / selectFeature guards                                 */
 /* ------------------------------------------------------------------ */
 
-it('does NOT place marker in auto mode when no dataLayers exist', () => {
+it('places marker with placeMarker mode even when no layers exist', () => {
   featureQueries.getFeaturesAtPoint.mockReturnValue([])
   featureQueries.findMatchingFeature.mockReturnValue(null)
 
   const { result, deps } = setup({
-    interactionMode: 'auto',
-    dataLayers: []
+    interactionModes: ['selectFeature', 'placeMarker'],
+    layers: []
   })
 
   click(result)
 
+  expect(deps.mapState.markers.add).toHaveBeenCalled()
+})
+
+it('does not place marker when placeMarker is not in interactionModes', () => {
+  featureQueries.getFeaturesAtPoint.mockReturnValue([])
+  featureQueries.findMatchingFeature.mockReturnValue(null)
+
+  const { result, deps } = setup({ interactionModes: ['selectFeature'] })
+
+  click(result)
+
   expect(deps.mapState.markers.add).not.toHaveBeenCalled()
 })
 
+it('does not check markers when selectMarker is not in interactionModes', () => {
+  const markerEl = makeMarkerEl({ left: 5, top: 15, right: 15, bottom: 25 })
+  const markerRefs = new Map([['marker-1', markerEl]])
+  const markerItems = [{ id: 'marker-1', coords: [1, 2] }]
+
+  const { result, deps } = setup({ interactionModes: ['selectFeature'] }, markerItems, markerRefs)
+  click(result)
+
+  expect(deps.pluginState.dispatch).not.toHaveBeenCalledWith(
+    expect.objectContaining({ type: 'TOGGLE_SELECTED_MARKERS' })
+  )
+  expect(featureQueries.getFeaturesAtPoint).toHaveBeenCalled()
+})
+
 /* ------------------------------------------------------------------ */
 /* Selection change event                                             */
 /* ------------------------------------------------------------------ */
 
 it('emits selectionchange once when bounds exist', () => {
   const deps = {
-    mapState: { markers: { add: jest.fn(), remove: jest.fn() } },
+    mapState: { markers: { add: jest.fn(), remove: jest.fn(), items: [], markerRefs: new Map() } },
     pluginState: {
       selectedFeatures: [{ featureId: 'F1' }],
+      selectedMarkers: [],
       selectionBounds: { sw: [0, 0], ne: [1, 1] }
     },
     services: { eventBus: { emit: jest.fn() } },
@@ -286,6 +400,7 @@ it('emits selectionchange once when bounds exist', () => {
     'interact:selectionchange',
     expect.objectContaining({
       selectedFeatures: deps.pluginState.selectedFeatures,
+      selectedMarkers: [],
       selectionBounds: deps.pluginState.selectionBounds,
       canMerge: false,
       canSplit: false
@@ -299,8 +414,8 @@ it('skips emission when selection remains empty after being cleared', () => {
   // 1. First render with a feature (prev is null, emission happens)
   const { rerender } = renderHook(
     ({ features }) => useInteractionHandlers({
-      mapState: { markers: {} },
-      pluginState: { selectedFeatures: features, selectionBounds: { b: 1 } },
+      mapState: { markers: { items: [], markerRefs: new Map() } },
+      pluginState: { selectedFeatures: features, selectedMarkers: [], selectionBounds: { b: 1 } },
       services: { eventBus },
       mapProvider: {}
     }),

package/plugins/interact/src/manifest.js

@@ -1,11 +1,14 @@
 // /plugins/interact/manifest.js
 import { InteractInit } from './InteractInit.jsx'
+import { isSelectMarkerOnly } from './utils/interactionModes.js'
 import { initialState, actions } from './reducer.js'
 import { enable } from './api/enable.js'
 import { disable } from './api/disable.js'
 import { clear } from './api/clear.js'
 import { selectFeature } from './api/selectFeature.js'
 import { unselectFeature } from './api/unselectFeature.js'
+import { selectMarker } from './api/selectMarker.js'
+import { unselectMarker } from './api/unselectMarker.js'
 
 export const manifest = {
   InitComponent: InteractInit,
@@ -36,7 +39,10 @@ export const manifest = {
     id: 'selectAtTarget',
     label: 'Select',
     variant: 'primary',
-    hiddenWhen: ({ appState, pluginState }) => !pluginState.enabled || appState.interfaceType !== 'touch',
+    // Hidden for touch when selectMarker is the only mode — markers have a sufficient tap target
+    // and the Select button is only needed alongside the crosshair. Mirrors the crosshair logic in InteractInit.
+    hiddenWhen: ({ appState, pluginState }) =>
+      !pluginState.enabled || appState.interfaceType !== 'touch' || isSelectMarkerOnly(pluginState.interactionModes),
     mobile: {
       slot: 'actions'
     },
@@ -83,6 +89,8 @@ export const manifest = {
     disable,
     clear,
     selectFeature,
-    unselectFeature
+    unselectFeature,
+    selectMarker,
+    unselectMarker
   }
 }

package/plugins/interact/src/reducer.js

@@ -1,12 +1,13 @@
 const initialState = {
   enabled: false,
-  dataLayers: [],
-  markerColor: null,
-  interactionMode: null,
+  layers: [],
+  marker: null,
+  interactionModes: null,
   multiSelect: false,
   contiguous: false,
   deselectOnClickOutside: false,
   selectedFeatures: [],
+  selectedMarkers: [],
   selectionBounds: null,
   closeOnAction: true // Done or Cancel
 }
@@ -24,6 +25,7 @@ const disable = (state) => {
     ...state,
     enabled: false,
     selectedFeatures: [],
+    selectedMarkers: [],
     selectionBounds: null
   }
 }
@@ -67,7 +69,7 @@ const toggleSelectedFeatures = (state, payload) => {
     nextSelected = isSameSingle ? [] : [featureObj]
   }
 
-  return { ...state, selectedFeatures: nextSelected, selectionBounds: null }
+  return { ...state, selectedFeatures: nextSelected, selectedMarkers: multiSelect && !replaceAll ? state.selectedMarkers : [], selectionBounds: null }
 }
 
 // Update bounds (called from useEffect after map provider calculates them)
@@ -81,20 +83,72 @@ const updateSelectedBounds = (state, payload) => {
   }
 }
 
+const toggleSelectedMarkers = (state, { markerId, multiSelect }) => {
+  const current = state.selectedMarkers
+  const exists = current.includes(markerId)
+  if (multiSelect) {
+    const next = exists ? current.filter(id => id !== markerId) : [...current, markerId]
+    return { ...state, selectedMarkers: next }
+  }
+  return {
+    ...state,
+    selectedFeatures: [],
+    selectionBounds: null,
+    selectedMarkers: exists && current.length === 1 ? [] : [markerId]
+  }
+}
+
 const clearSelectedFeatures = (state) => {
   return {
     ...state,
     selectedFeatures: [],
+    selectedMarkers: [],
     selectionBounds: null
   }
 }
 
+/**
+ * Explicitly select a marker. Has no effect if already selected.
+ * In single-select mode, clears selectedFeatures and replaces the selection.
+ * In multi-select mode, adds to the existing selection.
+ */
+const selectMarker = (state, { markerId, multiSelect }) => {
+  const current = state.selectedMarkers
+  if (current.includes(markerId)) {
+    return state
+  }
+  const nextMarkers = multiSelect ? [...current, markerId] : [markerId]
+  return {
+    ...state,
+    selectedFeatures: multiSelect ? state.selectedFeatures : [],
+    selectionBounds: null,
+    selectedMarkers: nextMarkers
+  }
+}
+
+/**
+ * Explicitly unselect a marker. Has no effect if not selected.
+ */
+const unselectMarker = (state, { markerId }) => {
+  const current = state.selectedMarkers
+  if (!current.includes(markerId)) {
+    return state
+  }
+  return {
+    ...state,
+    selectedMarkers: current.filter(id => id !== markerId)
+  }
+}
+
 const actions = {
   ENABLE: enable,
   DISABLE: disable,
   TOGGLE_SELECTED_FEATURES: toggleSelectedFeatures,
+  TOGGLE_SELECTED_MARKERS: toggleSelectedMarkers,
   UPDATE_SELECTED_BOUNDS: updateSelectedBounds,
-  CLEAR_SELECTED_FEATURES: clearSelectedFeatures
+  CLEAR_SELECTED_FEATURES: clearSelectedFeatures,
+  SELECT_MARKER: selectMarker,
+  UNSELECT_MARKER: unselectMarker
 }
 
 export {

package/plugins/interact/src/reducer.test.js

@@ -4,13 +4,14 @@ describe('initialState', () => {
   it('has correct defaults', () => {
     expect(initialState).toEqual({
       enabled: false,
-      dataLayers: [],
-      markerColor: null,
-      interactionMode: null,
+      layers: [],
+      marker: null,
+      interactionModes: null,
       multiSelect: false,
       contiguous: false,
       deselectOnClickOutside: false,
       selectedFeatures: [],
+      selectedMarkers: [],
       selectionBounds: null,
       closeOnAction: true
     })
@@ -20,23 +21,26 @@ describe('initialState', () => {
 describe('ENABLE/DISABLE actions', () => {
   it('ENABLE sets enabled and merges payload', () => {
     const state = { ...initialState, enabled: false }
-    const payload = { dataLayers: [1], markerColor: 'red' }
+    const marker = { symbol: 'pin', backgroundColor: 'red' }
+    const payload = { layers: [1], marker }
     const result = actions.ENABLE(state, payload)
 
     expect(result.enabled).toBe(true)
-    expect(result.dataLayers).toEqual([1])
-    expect(result.markerColor).toBe('red')
+    expect(result.layers).toEqual([1])
+    expect(result.marker).toEqual(marker)
     expect(result).not.toBe(state)
   })
 
-  it('DISABLE sets enabled to false, clears selection, and preserves other state', () => {
-    const state = { ...initialState, enabled: true, dataLayers: [1], markerColor: 'red', selectedFeatures: [{ featureId: 'f1' }], selectionBounds: [0, 0, 1, 1] }
+  it('DISABLE sets enabled to false, clears selection and markers, and preserves other state', () => {
+    const marker = { symbol: 'pin', backgroundColor: 'red' }
+    const state = { ...initialState, enabled: true, layers: [1], marker, selectedFeatures: [{ featureId: 'f1' }], selectedMarkers: ['m1'], selectionBounds: [0, 0, 1, 1] }
     const result = actions.DISABLE(state)
 
     expect(result.enabled).toBe(false)
-    expect(result.dataLayers).toEqual([1])
-    expect(result.markerColor).toBe('red')
+    expect(result.layers).toEqual([1])
+    expect(result.marker).toEqual(marker)
     expect(result.selectedFeatures).toEqual([])
+    expect(result.selectedMarkers).toEqual([])
     expect(result.selectionBounds).toBeNull()
     expect(result).not.toBe(state)
   })
@@ -96,6 +100,19 @@ describe('TOGGLE_SELECTED_FEATURES action', () => {
     expect(state.selectedFeatures[0].featureId).toBe('f3')
   })
 
+  it('clears selectedMarkers in single-select; preserves them in multi-select', () => {
+    const state = { ...initialState, selectedMarkers: ['m1'] }
+    const feature = createFeature('f1')
+
+    // single-select clears markers
+    const single = actions.TOGGLE_SELECTED_FEATURES(state, feature)
+    expect(single.selectedMarkers).toEqual([])
+
+    // multi-select preserves markers
+    const multi = actions.TOGGLE_SELECTED_FEATURES(state, { ...feature, multiSelect: true })
+    expect(multi.selectedMarkers).toEqual(['m1'])
+  })
+
   it('handles null or empty selectedFeatures gracefully', () => {
     let state = { ...initialState, selectedFeatures: null }
     state = actions.TOGGLE_SELECTED_FEATURES(state, createFeature('f1'))
@@ -127,28 +144,99 @@ describe('UPDATE_SELECTED_BOUNDS action', () => {
   })
 })
 
+describe('TOGGLE_SELECTED_MARKERS action', () => {
+  it('selects a marker in single-select mode and clears features', () => {
+    const state = { ...initialState, selectedFeatures: [{ featureId: 'f1' }], selectionBounds: { sw: [0, 0], ne: [1, 1] } }
+    const result = actions.TOGGLE_SELECTED_MARKERS(state, { markerId: 'm1', multiSelect: false })
+    expect(result.selectedMarkers).toEqual(['m1'])
+    expect(result.selectedFeatures).toEqual([])
+    expect(result.selectionBounds).toBeNull()
+  })
+
+  it('toggles off the only selected marker in single-select mode', () => {
+    const state = { ...initialState, selectedMarkers: ['m1'] }
+    const result = actions.TOGGLE_SELECTED_MARKERS(state, { markerId: 'm1', multiSelect: false })
+    expect(result.selectedMarkers).toEqual([])
+  })
+
+  it('adds a marker in multi-select mode without clearing features', () => {
+    const state = { ...initialState, selectedFeatures: [{ featureId: 'f1' }], selectedMarkers: ['m1'] }
+    const result = actions.TOGGLE_SELECTED_MARKERS(state, { markerId: 'm2', multiSelect: true })
+    expect(result.selectedMarkers).toEqual(['m1', 'm2'])
+    expect(result.selectedFeatures).toEqual([{ featureId: 'f1' }])
+  })
+
+  it('removes a marker in multi-select mode', () => {
+    const state = { ...initialState, selectedMarkers: ['m1', 'm2'] }
+    const result = actions.TOGGLE_SELECTED_MARKERS(state, { markerId: 'm1', multiSelect: true })
+    expect(result.selectedMarkers).toEqual(['m2'])
+  })
+})
+
 describe('CLEAR_SELECTED_FEATURES action', () => {
-  it('resets selection and bounds', () => {
+  it('resets features, markers and bounds', () => {
     const state = {
       ...initialState,
       selectedFeatures: [1],
+      selectedMarkers: ['m1'],
       selectionBounds: { sw: [0, 0], ne: [1, 1] }
     }
     const result = actions.CLEAR_SELECTED_FEATURES(state)
     expect(result.selectedFeatures).toEqual([])
+    expect(result.selectedMarkers).toEqual([])
     expect(result.selectionBounds).toBeNull()
     expect(result).not.toBe(state)
   })
 })
 
+describe('SELECT_MARKER action', () => {
+  it('adds a marker in single-select mode, clearing selectedFeatures', () => {
+    const state = { ...initialState, selectedFeatures: [{ featureId: 'f1' }], selectedMarkers: [] }
+    const result = actions.SELECT_MARKER(state, { markerId: 'm1', multiSelect: false })
+    expect(result.selectedMarkers).toEqual(['m1'])
+    expect(result.selectedFeatures).toEqual([])
+    expect(result.selectionBounds).toBeNull()
+  })
+
+  it('adds a marker in multi-select mode without clearing selectedFeatures', () => {
+    const state = { ...initialState, selectedFeatures: [{ featureId: 'f1' }], selectedMarkers: ['m1'] }
+    const result = actions.SELECT_MARKER(state, { markerId: 'm2', multiSelect: true })
+    expect(result.selectedMarkers).toEqual(['m1', 'm2'])
+    expect(result.selectedFeatures).toEqual([{ featureId: 'f1' }])
+  })
+
+  it('is idempotent — does not change state if marker already selected', () => {
+    const state = { ...initialState, selectedMarkers: ['m1'] }
+    const result = actions.SELECT_MARKER(state, { markerId: 'm1', multiSelect: false })
+    expect(result).toBe(state)
+  })
+})
+
+describe('UNSELECT_MARKER action', () => {
+  it('removes a selected marker', () => {
+    const state = { ...initialState, selectedMarkers: ['m1', 'm2'] }
+    const result = actions.UNSELECT_MARKER(state, { markerId: 'm1' })
+    expect(result.selectedMarkers).toEqual(['m2'])
+  })
+
+  it('is idempotent — does not change state if marker not selected', () => {
+    const state = { ...initialState, selectedMarkers: ['m2'] }
+    const result = actions.UNSELECT_MARKER(state, { markerId: 'm1' })
+    expect(result).toBe(state)
+  })
+})
+
 describe('actions object', () => {
   it('exports all action handlers as functions', () => {
     expect(Object.keys(actions)).toEqual([
       'ENABLE',
       'DISABLE',
       'TOGGLE_SELECTED_FEATURES',
+      'TOGGLE_SELECTED_MARKERS',
       'UPDATE_SELECTED_BOUNDS',
-      'CLEAR_SELECTED_FEATURES'
+      'CLEAR_SELECTED_FEATURES',
+      'SELECT_MARKER',
+      'UNSELECT_MARKER'
     ])
     Object.values(actions).forEach(fn => expect(typeof fn).toBe('function'))
   })

package/plugins/interact/src/utils/buildStylesMap.js

@@ -1,6 +1,17 @@
-import { DEFAULTS } from '../defaults.js'
 import { getValueForStyle } from '../../../../src/utils/getValueForStyle.js'
 
+const DEFAULT_STROKE_WIDTH = 3
+
+/**
+ * Builds a map of layerId → resolved highlight style for the given data layers.
+ *
+ * Stroke colour resolution order:
+ *   layer.selectedStroke → mapStyle.selectedColor → mapColorScheme scheme default
+ *
+ * @param {Object[]} dataLayers
+ * @param {Object} mapStyle - Current map style config
+ * @returns {Object} layerId → { stroke, fill, strokeWidth }
+ */
 export const buildStylesMap = (dataLayers, mapStyle) => {
   const stylesMap = {}
 
@@ -8,10 +19,12 @@ export const buildStylesMap = (dataLayers, mapStyle) => {
     return stylesMap
   }
 
+  const schemeSelectedColor = mapStyle.mapColorScheme === 'dark' ? '#ffffff' : '#0b0c0c'
+
   dataLayers.forEach(layer => {
-    const stroke = layer.selectedStroke || DEFAULTS.selectedStroke
-    const fill = layer.selectedFill || DEFAULTS.selectedFill
-    const strokeWidth = layer.selectedStrokeWidth || DEFAULTS.selectedStrokeWidth
+    const stroke = layer.selectedStroke || mapStyle.selectedColor || schemeSelectedColor
+    const fill = layer.selectedFill || 'transparent'
+    const strokeWidth = layer.selectedStrokeWidth || DEFAULT_STROKE_WIDTH
 
     stylesMap[layer.layerId] = {
       stroke: getValueForStyle(stroke, mapStyle.id),

package/plugins/interact/src/utils/buildStylesMap.test.js

@@ -34,11 +34,25 @@ describe('buildStylesMap', () => {
     })
 
     // Default fallback values
-    expect(result.custom2.stroke).toBe(DEFAULTS.selectedStroke)
-    expect(result.custom2.fill).toBe(DEFAULTS.selectedFill)
+    expect(result.custom2.stroke).toBe('#0b0c0c')
+    expect(result.custom2.fill).toBe('transparent')
     expect(result.custom2.strokeWidth).toBe(DEFAULTS.selectedStrokeWidth)
   })
 
+  it('uses mapStyle.selectedColor as default stroke when no layer override', () => {
+    const dataLayers = [{ layerId: 'layer1' }]
+    const mapStyle = { id: 'test', selectedColor: '#336699' }
+    const result = buildStylesMap(dataLayers, mapStyle)
+    expect(result.layer1.stroke).toBe('#336699')
+    expect(result.layer1.fill).toBe('transparent')
+  })
+
+  it('uses scheme default when mapStyle has no selectedColor', () => {
+    const dataLayers = [{ layerId: 'layer1' }]
+    expect(buildStylesMap(dataLayers, { id: 'light' }).layer1.stroke).toBe('#0b0c0c')
+    expect(buildStylesMap(dataLayers, { id: 'dark', mapColorScheme: 'dark' }).layer1.stroke).toBe('#ffffff')
+  })
+
   it('calls getValueForStyle for stroke and fill with mapStyle.id', () => {
     const dataLayers = [
       { layerId: 'layer1', selectedStroke: 'strokeVal', selectedFill: 'fillVal' }

package/plugins/interact/src/utils/featureQueries.js

@@ -15,12 +15,17 @@ export const getFeaturesAtPoint = (mapProvider, point, options) => {
   }
 }
 
+const isPointGeometry = (feature) => {
+  const type = feature.geometry?.type
+  return type === 'Point' || type === 'MultiPoint'
+}
+
 export const findMatchingFeature = (features, layerConfigMap) => {
-  for (const feature of features) {
-    const layerId = feature.layer?.id
-    if (layerConfigMap[layerId]) {
-      return { feature, config: layerConfigMap[layerId] }
-    }
+  const matched = features.filter(f => layerConfigMap[f.layer?.id])
+  const pointMatch = matched.find(isPointGeometry)
+  if (pointMatch) {
+    return { feature: pointMatch, config: layerConfigMap[pointMatch.layer.id] }
   }
-  return null
+  const first = matched[0]
+  return first ? { feature: first, config: layerConfigMap[first.layer.id] } : null
 }