https://app.youwindrenewables.com/assets/controllers/mapbox/simple…/wind_resource_grid_controller-3f253170.js

1import SimpleDisplayMapController from 'controllers/mapbox/simple_display/simple_display_controller'
2import { MapboxHelpers } from 'utils/mapboxHelpers'
3
4// Read-only WRG preview on the library edit page — PNG overlay aligned with scenario maps.
5export default class extends SimpleDisplayMapController {
6  static targets = ['container']
7
8  initializeData() {
9    super.initializeData()
10    this.wrgData = this.parseDataAttribute('wrg-data', null)
11    this.pngUrl = this.loadDataAttribute('png-url')
12    this.defaultCenter = this.parseDataAttribute('company-center', [2.168, 41.38])
13    this.zoomLevel = parseInt(this.loadDataAttribute('zoom-level', 4), 10)
14  }
15
16  calculateCenter() {
17    const { latitude, longitude } = this.wrgData || {}
18    if (latitude == null || longitude == null) return [0, 0]
19
20    return this.getSafeCoordinates(parseFloat(latitude), parseFloat(longitude))
21  }
22
23  wrgBounds() {
24    if (this._wrgBounds === undefined) {
25      this._wrgBounds = MapboxHelpers.parseWrgBounds(this.wrgData)
26    }
27    return this._wrgBounds
28  }
29
30  addCustomDisplayElements() {
31    this.addWrgPngLayer()
32    this.addWrgExtentOutline()
33    this.fitMapToData()
34  }
35
36  addWrgPngLayer() {
37    const bounds = this.wrgBounds()
38    if (!this.pngUrl || !bounds) return
39
40    try {
41      MapboxHelpers.addWrgPngOverlay(this.map, this.pngUrl, bounds, { replace: true })
42    } catch (error) {
43      console.error('Error adding WRG layer:', error)
44      if (!this.element.parentElement?.querySelector('[data-wrg-layer-error]')) {
45        this.element.insertAdjacentHTML(
46          'beforebegin',
47          '<div class="alert alert-warning mb-2 py-2 px-3 small" role="alert" data-wrg-layer-error>Failed to load wind resource preview. Please refresh the page. If the problem persists, please contact [email protected].</div>'
48        )
49      }
50    }
51  }
52
53  addWrgExtentOutline() {
54    const bounds = this.wrgBounds()
55    if (!bounds || this.pngUrl || this.map.getSource('wrg-extent-outline')) return
56
57    const coordinates = [
58      [bounds.west, bounds.south],
59      [bounds.east, bounds.south],
60      [bounds.east, bounds.north],
61      [bounds.west, bounds.north],
62      [bounds.west, bounds.south]
63    ]
64
65    this.map.addSource('wrg-extent-outline', {
66      type: 'geojson',
67      data: {
68        type: 'Feature',
69        geometry: { type: 'LineString', coordinates },
70        properties: {}
71      }
72    })
73
74    this.map.addLayer({
75      id: 'wrg-extent-outline-layer',
76      type: 'line',
77      source: 'wrg-extent-outline',
78      paint: {
79        'line-color': '#0d6efd',
80        'line-width': 3
81      }
82    })
83  }
84
85  fitMapToData() {
86    const bounds = this.wrgBounds()
87    if (!bounds) return
88
89    MapboxHelpers.fitMapToWrgBounds(this.map, bounds, { padding: 48, maxZoom: 13 })
90  }
91}