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

package/src/utils/getSafeZoneInset.js

@@ -27,7 +27,7 @@
  * @param {React.RefObject}  refs.leftRef          - Left button column.
  * @param {React.RefObject}  refs.rightRef         - Right button column.
  * @param {React.RefObject}  refs.actionsRef       - Bottom action bar.
- * @param {React.RefObject}  refs.footerRef        - Footer (logo, copyright, etc).
+ * @param {React.RefObject}  refs.bottomRef        - Bottom row (logo, copyright, etc).
  * @param {React.RefObject} [refs.leftTopRef]      - Top-left panel slot.
  * @param {React.RefObject} [refs.leftBottomRef]   - Bottom-left panel slot.
  * @param {React.RefObject} [refs.rightTopRef]     - Top-right panel slot.
@@ -107,15 +107,15 @@ const computeRow = (leftW, rightW, leftH, rightH, wThreshold, baseInset, gap) =>
   leftW + rightW > wThreshold ? baseInset + Math.max(leftH, rightH) + gap : 0
 
 export const getSafeZoneInset = ({
-  mainRef, leftRef, rightRef, actionsRef, footerRef,
+  mainRef, leftRef, rightRef, actionsRef, bottomRef,
   leftTopRef, leftBottomRef, rightTopRef, rightBottomRef
 }) => {
-  if ([mainRef, leftRef, rightRef, actionsRef, footerRef].some(ref => !ref?.current)) {
+  if ([mainRef, leftRef, rightRef, actionsRef, bottomRef].some(ref => !ref?.current)) {
     return undefined
   }
 
   const main = mainRef.current; const left = leftRef.current
-  const actions = actionsRef.current; const footer = footerRef.current
+  const actions = actionsRef.current; const bottom = bottomRef.current
 
   const gap = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--divider-gap'), 10)
 
@@ -127,8 +127,10 @@ export const getSafeZoneInset = ({
   const baseLeft = main.offsetLeft + left.offsetLeft + colWidth + gap
   const baseRight = left.offsetLeft + colWidth + gap
   const baseTop = left.offsetTop
-  const footerInset = main.offsetHeight - footer.offsetTop + gap // mirrors --left/right-offset-bottom CSS var
-  const baseBottom = Math.max(main.offsetHeight - actions.offsetTop + gap, footerInset)
+  const bottomContainerPad = main.offsetHeight - bottom.offsetTop - bottom.offsetHeight
+  // Minimum: primary-gap above the bottom edge. Normally: divider-gap above the top of the bottom container.
+  const bottomInset = Math.max(bottomContainerPad, main.offsetHeight - bottom.offsetTop + gap)
+  const baseBottom = Math.max(main.offsetHeight - actions.offsetTop + gap, bottomInset)
 
   const availableH = main.offsetHeight - baseTop - baseBottom
   const availableW = main.offsetWidth - (baseLeft - main.offsetLeft) - baseRight
@@ -139,7 +141,7 @@ export const getSafeZoneInset = ({
   const leftPanelInset = leftCol.panelInset
   const rightPanelInset = rightCol.panelInset
   const topPanelInset = computeRow(leftCol.rowA.w, rightCol.rowA.w, leftCol.rowA.h, rightCol.rowA.h, availableW / RATIO, baseTop, gap)
-  const bottomPanelInset = computeRow(leftCol.rowB.w, rightCol.rowB.w, leftCol.rowB.h, rightCol.rowB.h, availableW / RATIO, footerInset, gap)
+  const bottomPanelInset = computeRow(leftCol.rowB.w, rightCol.rowB.w, leftCol.rowB.h, rightCol.rowB.h, availableW / RATIO, bottomInset, gap)
 
   const usableW = main.offsetWidth - 2 * gap
   const usableH = main.offsetHeight - 2 * gap

package/src/utils/getSafeZoneInset.test.js

@@ -7,7 +7,7 @@ const LEFT_WIDTH = 40
 const LEFT_TOP = 60
 const RIGHT_WIDTH = 40
 const ACTIONS_TOP = 540
-const FOOTER_TOP = 560
+const BOTTOM_TOP = 560
 const EARLY_ACTIONS_TOP = 500
 const GAP = 8
 
@@ -31,7 +31,7 @@ const PANEL_H_TALL = 150
 const PANEL_H_SHORT = 100
 
 const ABOVE_CAP_TOP = 330 // 60+330+8=398 > CAP_HEIGHT ≈ 389.3 → capped
-const FOOTER_INSET = MAIN_HEIGHT - FOOTER_TOP + GAP // 48
+const BOTTOM_INSET = MAIN_HEIGHT - BOTTOM_TOP + GAP // 48: divider-gap above top of bottom container
 const ABOVE_CAP_BOTTOM = 342 // 48+342+8=398 > CAP_HEIGHT → capped
 
 const PANEL_W_STANDARD = 200
@@ -49,7 +49,7 @@ const CAP_HEIGHT = (MAIN_HEIGHT - 2 * GAP) * (MAX_RATIO - 1) / MAX_RATIO
 
 // ─── Setup ──────────────────────────────────────────────────────────────────
 
-let mainRef, leftRef, rightRef, actionsRef, footerRef
+let mainRef, leftRef, rightRef, actionsRef, bottomRef
 
 beforeAll(() => {
   globalThis.getComputedStyle = jest.fn().mockReturnValue({ getPropertyValue: () => String(GAP) })
@@ -72,10 +72,10 @@ beforeEach(() => {
   leftRef = colRef(LEFT_WIDTH, LEFT_LEFT, LEFT_TOP)
   rightRef = colRef(RIGHT_WIDTH)
   actionsRef = { current: { offsetTop: ACTIONS_TOP } }
-  footerRef = { current: { offsetTop: FOOTER_TOP } }
+  bottomRef = { current: { offsetTop: BOTTOM_TOP, offsetHeight: 0 } }
 })
 
-const base = () => ({ mainRef, leftRef, rightRef, actionsRef, footerRef })
+const base = () => ({ mainRef, leftRef, rightRef, actionsRef, bottomRef })
 
 // Slot container where an .im-c-panel is the first element child.
 const panel = (offsetWidth, offsetHeight) => {
@@ -96,7 +96,7 @@ describe('getSafeZoneInset — missing refs', () => {
     expect(getSafeZoneInset({ ...base(), leftRef: { current: null } })).toBeUndefined()
   })
   it('returns undefined when actionsRef is undefined', () => {
-    expect(getSafeZoneInset({ mainRef, leftRef, rightRef, footerRef })).toBeUndefined()
+    expect(getSafeZoneInset({ mainRef, leftRef, rightRef, bottomRef })).toBeUndefined()
   })
 })
 
@@ -120,7 +120,7 @@ describe('getSafeZoneInset — base structural insets', () => {
   it('uses zero button width when column ref has no button group', () => {
     const noGroupLeft = { current: { offsetWidth: 0, offsetLeft: LEFT_LEFT, offsetTop: LEFT_TOP, querySelector: () => null } }
     const noGroupRight = { current: { offsetWidth: 0, offsetLeft: 0, offsetTop: 0, querySelector: () => null } }
-    expect(getSafeZoneInset({ mainRef, leftRef: noGroupLeft, rightRef: noGroupRight, actionsRef, footerRef })).toEqual({
+    expect(getSafeZoneInset({ mainRef, leftRef: noGroupLeft, rightRef: noGroupRight, actionsRef, bottomRef })).toEqual({
       left: LEFT_LEFT + GAP, right: LEFT_LEFT + GAP, top: LEFT_TOP, bottom: BASE_BOTTOM
     })
   })
@@ -133,7 +133,7 @@ describe('getSafeZoneInset — base structural insets', () => {
       rightBottomRef: panel(PANEL_W_STANDARD, 0)
     })).toEqual({ left: BASE_LEFT, right: BASE_RIGHT, top: BASE_TOP, bottom: BASE_BOTTOM })
   })
-  it('uses max of actions and footer for base bottom', () => {
+  it('uses max of actions and bottom for base bottom', () => {
     actionsRef.current.offsetTop = EARLY_ACTIONS_TOP
     expect(getSafeZoneInset(base()).bottom).toBe(MAIN_HEIGHT - EARLY_ACTIONS_TOP + GAP)
   })
@@ -244,7 +244,7 @@ describe('getSafeZoneInset — bottom edge', () => {
   })
   it('triggers when a bottom panel width exceeds threshold', () => {
     expect(getSafeZoneInset({ ...base(), leftBottomRef: panel(ABOVE_W_THRESHOLD, ABOVE_THRESHOLD) }).bottom)
-      .toBe(Math.min(FOOTER_INSET + ABOVE_THRESHOLD + GAP, CAP_HEIGHT))
+      .toBe(Math.min(BOTTOM_INSET + ABOVE_THRESHOLD + GAP, CAP_HEIGHT))
   })
   it('column-primary wide-and-tall bottom panel triggers left inset, not bottom', () => {
     // panel(400,342): h/availableH≈0.724 > w/availableW≈0.510 → column-primary
@@ -257,7 +257,7 @@ describe('getSafeZoneInset — bottom edge', () => {
       ...base(),
       leftBottomRef: panel(COMBINED_ABOVE_W, PANEL_H_TALL),
       rightBottomRef: panel(COMBINED_ABOVE_W, PANEL_H_SHORT)
-    }).bottom).toBe(Math.min(FOOTER_INSET + PANEL_H_TALL + GAP, CAP_HEIGHT))
+    }).bottom).toBe(Math.min(BOTTOM_INSET + PANEL_H_TALL + GAP, CAP_HEIGHT))
   })
   it('does not trigger when both bottom panels are below combined width threshold', () => {
     expect(getSafeZoneInset({

package/webpack.dev.mjs

@@ -12,16 +12,20 @@ dotenv.config({ path: path.join(__dirname, './.env'), quiet: true })
 export default {
   mode: 'development',
   target: ['web', 'es5'],
+  devtool: [
+    // produce a source-map to aid debugging
+    { type: 'javascript', use: 'source-map' }
+  ],
   entry: {
     index: path.join(__dirname, 'demo/js/index.js'),
-    forms: path.join(__dirname, 'demo/js/forms.js'),
+    draw: path.join(__dirname, 'demo/js/draw.js'),
     farming: path.join(__dirname, 'demo/js/farming.js'),
     planning: path.join(__dirname, 'demo/js/planning.js')
   },
   output: {
     path: path.resolve(__dirname, 'public'),
     filename: '[name].js',
-    clean: true,
+    clean: true
   },
   resolve: {
     extensions: ['.tsx', '.ts', '.jsx', '.js'],
@@ -84,28 +88,28 @@ export default {
         test: /\.jsx?$/,
         loader: 'babel-loader',
         exclude: /node_modules/
-      },{
+      }, {
         test: /\.s[ac]ss$/i,
-        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
-      },{
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
+      }, {
         test: /\.css$/i,
-        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        use: [MiniCssExtractPlugin.loader, 'css-loader']
       }
-    ],
+    ]
   },
   devServer: {
     static: [
-    {
-      directory: path.join(__dirname, 'demo'),
-    },
-    {
-      directory: path.join(__dirname, 'public'),
-    },
-    {
-      directory: path.join(__dirname, 'assets'),
-      publicPath: '/assets' // Images served from here as used in both demo and prototype kit plugin
-    }
-  ],
+      {
+        directory: path.join(__dirname, 'demo')
+      },
+      {
+        directory: path.join(__dirname, 'public')
+      },
+      {
+        directory: path.join(__dirname, 'assets'),
+        publicPath: '/assets' // Images served from here as used in both demo and prototype kit plugin
+      }
+    ],
     compress: true,
     port: 8080,
     open: true,
@@ -120,4 +124,4 @@ export default {
       }
     }
   }
-}
+}

package/docs/govuk-prototype.md

@@ -1,23 +0,0 @@
-# GOV.UK Prototype Kit
-
-This guide explains how to use the Interactive Map component in a GOV.UK Prototype Kit project.
-
-## Installation
-
-Install the package in your prototype kit project:
-
-```shell
-npm install @defra/interactive-map
-```
-
-The InteractiveMap plugin will be automatically added to your prototype.
-
-## Usage
-
-For detailed usage instructions, see the [GOV.UK Prototype Kit documentation](https://prototype-kit.service.gov.uk/docs/install-and-use-plugins).
-
-## Next Steps
-
-- [Getting Started](./getting-started.md) - Learn the basics
-- [API Reference](./api.md) - Explore the full API
-- [Plugins](./plugins.md) - Extend functionality

package/docs/index.md

@@ -1,19 +0,0 @@
-## What's Inside
-
-- **[Getting Started](getting-started)** - Installation and basic usage
-- **[API Reference](api)** - Complete API documentation
-- **[Plugins](plugins)** - Extend functionality with plugins
-- **[Architecture](architecture)** - Learn about the design and structure
-- **[GOV.UK Prototype](govuk-prototype)** - Use with GOV.UK Prototype Kit
-
-## Features
-
-- ✅ Accessible and keyboard navigable
-- 🗺️ Multiple map provider support (MapLibre, ESRI)
-- 🔌 Extensible plugin system
-- 🎨 Customizable styling and behaviors
-- 📱 Responsive design
-
-## Support
-
-For issues and feature requests, visit our [GitHub repository](https://github.com/DEFRA/interactive-map).

package/plugins/beta/datasets/src/api/hideDataset.js

@@ -1,14 +0,0 @@
-export const hideDataset = ({ mapProvider, pluginState }, datasetId) => {
-  const map = mapProvider.map
-
-  // Update map layer visibility
-  if (map.getLayer(datasetId)) {
-    map.setLayoutProperty(datasetId, 'visibility', 'none')
-  }
-  if (map.getLayer(`${datasetId}-stroke`)) {
-    map.setLayoutProperty(`${datasetId}-stroke`, 'visibility', 'none')
-  }
-
-  // Update state
-  pluginState.dispatch({ type: 'SET_DATASET_VISIBILITY', payload: { id: datasetId, visibility: 'hidden' } })
-}

package/plugins/beta/datasets/src/api/hideFeatures.js

@@ -1,41 +0,0 @@
-import { applyExclusionFilter } from '../utils/filters.js'
-
-export const hideFeatures = ({ mapProvider, pluginState }, { featureIds, idProperty, datasetId }) => {
-  const map = mapProvider.map
-
-  // Get dataset to access original filter and determine layer IDs
-  const dataset = pluginState.datasets?.find(d => d.id === datasetId)
-  if (!dataset) {
-    return
-  }
-
-  const originalFilter = dataset.filter || null
-  const hasFill = !!dataset.fill
-  const hasStroke = !!dataset.stroke
-  const fillLayerId = hasFill ? datasetId : null
-
-  let strokeLayerId = null
-  if (hasStroke) {
-    strokeLayerId = hasFill ? `${datasetId}-stroke` : datasetId
-  }
-
-  // Get current hidden state and calculate all hidden IDs
-  const existingHidden = pluginState.hiddenFeatures[datasetId]
-  const allHiddenIds = existingHidden
-    ? [...new Set([...existingHidden.ids, ...featureIds])]
-    : featureIds
-
-  // Update state (store by datasetId, not individual layer IDs)
-  pluginState.dispatch({
-    type: 'HIDE_FEATURES',
-    payload: { layerId: datasetId, idProperty, featureIds }
-  })
-
-  // Apply filter to both layers
-  if (fillLayerId) {
-    applyExclusionFilter(map, fillLayerId, originalFilter, idProperty, allHiddenIds)
-  }
-  if (strokeLayerId) {
-    applyExclusionFilter(map, strokeLayerId, originalFilter, idProperty, allHiddenIds)
-  }
-}

package/plugins/beta/datasets/src/api/showDataset.js

@@ -1,14 +0,0 @@
-export const showDataset = ({ mapProvider, pluginState }, datasetId) => {
-  const map = mapProvider.map
-
-  // Update map layer visibility
-  if (map.getLayer(datasetId)) {
-    map.setLayoutProperty(datasetId, 'visibility', 'visible')
-  }
-  if (map.getLayer(`${datasetId}-stroke`)) {
-    map.setLayoutProperty(`${datasetId}-stroke`, 'visibility', 'visible')
-  }
-
-  // Update state
-  pluginState.dispatch({ type: 'SET_DATASET_VISIBILITY', payload: { id: datasetId, visibility: 'visible' } })
-}

package/plugins/beta/datasets/src/api/showFeatures.js

@@ -1,44 +0,0 @@
-import { applyExclusionFilter } from '../utils/filters.js'
-
-export const showFeatures = ({ mapProvider, pluginState }, { featureIds, idProperty, datasetId }) => {
-  const map = mapProvider.map
-
-  // Get current hidden state before update
-  const existingHidden = pluginState.hiddenFeatures[datasetId]
-  if (!existingHidden) {
-    return
-  }
-
-  // Get dataset to access original filter and determine layer IDs
-  const dataset = pluginState.datasets?.find(d => d.id === datasetId)
-  if (!dataset) {
-    return
-  }
-
-  const originalFilter = dataset.filter || null
-  const hasFill = !!dataset.fill
-  const hasStroke = !!dataset.stroke
-  const fillLayerId = hasFill ? datasetId : null
-
-  let strokeLayerId = null
-  if (hasStroke) {
-    strokeLayerId = hasFill ? `${datasetId}-stroke` : datasetId
-  }
-
-  // Calculate remaining hidden IDs
-  const remainingHiddenIds = existingHidden.ids.filter(id => !featureIds.includes(id))
-
-  // Update state
-  pluginState.dispatch({
-    type: 'SHOW_FEATURES',
-    payload: { layerId: datasetId, featureIds }
-  })
-
-  // Apply filter to both layers (or restore original if nothing hidden)
-  if (fillLayerId) {
-    applyExclusionFilter(map, fillLayerId, originalFilter, idProperty, remainingHiddenIds)
-  }
-  if (strokeLayerId) {
-    applyExclusionFilter(map, strokeLayerId, originalFilter, idProperty, remainingHiddenIds)
-  }
-}

package/plugins/beta/datasets/src/handleSetMapStyle.js

@@ -1,54 +0,0 @@
-import { addMapLayers } from './mapLayers.js'
-import { applyExclusionFilter } from './utils/filters.js'
-
-export const handleSetMapStyle = ({
-  map,
-  events,
-  eventBus,
-  getDatasets,
-  getHiddenFeatures,
-  getDynamicSources
-}) => {
-  const onSetStyle = (e) => {
-    map.once('idle', () => {
-      const newStyleId = e.id
-      const datasets = getDatasets()
-      const hiddenFeatures = getHiddenFeatures()
-      const dynamicSources = getDynamicSources ? getDynamicSources() : new Map()
-
-      // Re-add all layers with correct colors for new style
-      datasets.forEach(dataset => {
-        addMapLayers(map, newStyleId, dataset)
-      })
-
-      // Reapply cached data for dynamic sources
-      dynamicSources.forEach(source => {
-        source.reapply()
-      })
-
-      // Reapply hidden features filters
-      Object.entries(hiddenFeatures).forEach(([datasetId, { idProperty, ids }]) => {
-        const dataset = datasets.find(d => d.id === datasetId)
-        if (!dataset) {
-          return
-        }
-
-        const originalFilter = dataset.filter || null
-        const hasFill = !!dataset.fill
-        const hasStroke = !!dataset.stroke
-        const fillLayerId = hasFill ? datasetId : null
-        const strokeLayerId = hasStroke ? (hasFill ? `${datasetId}-stroke` : datasetId) : null
-
-        if (fillLayerId) {
-          applyExclusionFilter(map, fillLayerId, originalFilter, idProperty, ids)
-        }
-        if (strokeLayerId) {
-          applyExclusionFilter(map, strokeLayerId, originalFilter, idProperty, ids)
-        }
-      })
-    })
-  }
-
-  eventBus.on(events.MAP_SET_STYLE, onSetStyle)
-  return onSetStyle
-}

package/plugins/beta/datasets/src/mapLayers.js

@@ -1,165 +0,0 @@
-import { getValueForStyle } from '../../../../src/utils/getValueForStyle.js'
-
-// Generate a hash for consistent source ID generation
-const hashString = (str) => {
-  const HASH_BASE = 36
-  let hash = 0
-  for (const ch of str) {
-    hash = ((hash << 5) - hash) + ch.codePointAt(0)
-    hash = hash & hash
-  }
-  return Math.abs(hash).toString(HASH_BASE)
-}
-
-// Generate a consistent source ID for source sharing
-const getSourceId = (dataset) => {
-  if (dataset.tiles) {
-    const tilesKey = Array.isArray(dataset.tiles) ? dataset.tiles.join(',') : dataset.tiles
-    return `tiles-${hashString(tilesKey)}`
-  }
-  if (dataset.geojson) {
-    // Dynamic sources get unique IDs per dataset (no sharing)
-    if (isDynamicSource(dataset)) {
-      return `geojson-dynamic-${dataset.id}`
-    }
-    // URL strings can be shared, inline GeoJSON objects get unique IDs per dataset
-    if (typeof dataset.geojson === 'string') {
-      return `geojson-${hashString(dataset.geojson)}`
-    }
-    // Inline GeoJSON - use dataset ID since object identity can't be shared
-    return `geojson-${dataset.id}`
-  }
-  // Fallback to dataset ID
-  return `source-${dataset.id}`
-}
-
-/**
- * Check if a dataset uses dynamic fetching (bbox-based)
- * Dynamic sources require: URL geojson, idProperty for deduplication, and transformRequest for URL building
- * @param {Object} dataset
- * @returns {boolean}
- */
-const isDynamicSource = (dataset) => {
-  return (
-    typeof dataset.geojson === 'string' &&
-    !!dataset.idProperty &&
-    typeof dataset.transformRequest === 'function'
-  )
-}
-
-/**
- * Update the data for a GeoJSON source
- * @param {Object} map - Map instance
- * @param {string} sourceId - Source ID
- * @param {Object} geojson - GeoJSON FeatureCollection
- */
-const updateSourceData = (map, sourceId, geojson) => {
-  const source = map.getSource(sourceId)
-  if (source && typeof source.setData === 'function') {
-    source.setData(geojson)
-  }
-}
-
-/**
- * Get all layer IDs that use a given source
- * @param {string} sourceId
- * @returns {string[]} Array of layer IDs using the source
- */
-const getLayersUsingSource = (map, sourceId) => {
-  const style = map.getStyle()
-  if (!style?.layers) {
-    return []
-  }
-
-  return style.layers
-    .filter(layer => layer.source === sourceId)
-    .map(layer => layer.id)
-}
-
-const addMapLayers = (map, mapStyleId, dataset) => {
-  const sourceId = getSourceId(dataset)
-
-  // --- Add source (shared across datasets with same tiles/data URL) ---
-  if (!map.getSource(sourceId)) {
-
-    if (dataset.tiles) {
-      // Tiles
-      map.addSource(sourceId, {
-        type: 'vector',
-        tiles: dataset.tiles,
-        minzoom: dataset.minZoom || 0,
-        maxzoom: dataset.maxZoom || 22
-      })
-    } else if (dataset.geojson) {
-      // Dynamic source - start with empty FeatureCollection, will be populated by createDynamicSource
-      // Static source - use URL or inline GeoJSON directly
-      const initialData = isDynamicSource(dataset)
-        ? { type: 'FeatureCollection', features: [] }
-        : dataset.geojson
-
-      map.addSource(sourceId, {
-        type: 'geojson',
-        data: initialData
-      })
-    } else {
-      // No action
-    }
-  }
-
-  // --- Determine layer IDs ---
-  const hasFill = !!dataset.fill
-  const hasStroke = !!dataset.stroke
-  const fillLayerId = hasFill ? dataset.id : null
-  const strokeLayerId = hasStroke ? (hasFill ? `${dataset.id}-stroke` : dataset.id) : null
-  
-  // --- Determie visiblity ---
-  const visibility = dataset.visibility === 'hidden' ? 'none' : 'visible'
-
-  // --- Add fill layer ---
-  if (hasFill && !map.getLayer(fillLayerId)) {
-    const fillColor = getValueForStyle(dataset.fill, mapStyleId)
-    map.addLayer({
-      id: fillLayerId,
-      type: 'fill',
-      source: sourceId,
-      'source-layer': dataset?.tiles?.length ? dataset.sourceLayer : undefined,
-      layout: {
-        visibility
-      },
-      paint: {
-        'fill-color': fillColor,
-        'fill-opacity': dataset.opacity || 1
-      },
-      ...(dataset.filter ? { filter: dataset.filter } : {})
-    })
-  }
-
-  // --- Add stroke layer ---
-  if (hasStroke && !map.getLayer(strokeLayerId)) {
-    const strokeColor = getValueForStyle(dataset.stroke, mapStyleId)
-    map.addLayer({
-      id: strokeLayerId,
-      type: 'line',
-      source: sourceId,
-      'source-layer': dataset?.tiles?.length ? dataset.sourceLayer : undefined,
-      layout: {
-        visibility
-      },
-      paint: {
-        'line-color': strokeColor,
-        'line-width': dataset.strokeWidth || 1,
-        'line-opacity': dataset.opacity || 1,
-        ...(dataset.strokeDashArray ? { 'line-dasharray': dataset.strokeDashArray } : {})
-      },
-      ...(dataset.filter ? { filter: dataset.filter } : {})
-    })
-  }
-}
-
-export {
-  getSourceId,
-  getLayersUsingSource,
-  addMapLayers,
-  isDynamicSource,
-  updateSourceData
-}