dawarich/app/javascript/maps_maplibre/layers/selected_points_layer.js

import { BaseLayer } from './base_layer'

/**
 * Layer for displaying selected points with distinct styling
 */
export class SelectedPointsLayer extends BaseLayer {
  constructor(map, options = {}) {
    super(map, { id: 'selected-points', ...options })
    this.pointIds = []
  }

  getSourceConfig() {
    return {
      type: 'geojson',
      data: this.data || {
        type: 'FeatureCollection',
        features: []
      }
    }
  }

  getLayerConfigs() {
    return [
      // Outer circle (highlight)
      {
        id: `${this.id}-highlight`,
        type: 'circle',
        source: this.sourceId,
        paint: {
          'circle-radius': 8,
          'circle-color': '#ef4444',
          'circle-opacity': 0.3
        }
      },
      // Inner circle (selected point)
      {
        id: this.id,
        type: 'circle',
        source: this.sourceId,
        paint: {
          'circle-radius': 5,
          'circle-color': '#ef4444',
          'circle-stroke-width': 2,
          'circle-stroke-color': '#ffffff'
        }
      }
    ]
  }

  /**
   * Get layer IDs for this layer
   */
  getLayerIds() {
    return [`${this.id}-highlight`, this.id]
  }

  /**
   * Update selected points and store their IDs
   */
  updateSelectedPoints(geojson) {
    this.data = geojson

    // Extract point IDs
    this.pointIds = geojson.features.map(f => f.properties.id)

    // Update map source
    this.update(geojson)

    console.log('[SelectedPointsLayer] Updated with', this.pointIds.length, 'points')
  }

  /**
   * Get IDs of selected points
   */
  getSelectedPointIds() {
    return this.pointIds
  }

  /**
   * Clear selected points
   */
  clearSelection() {
    this.pointIds = []
    this.update({
      type: 'FeatureCollection',
      features: []
    })
  }

  /**
   * Get count of selected points
   */
  getCount() {
    return this.pointIds.length
  }
}