https://tadaaa.co.uk/assets/controllers/mapbox_delivery_area_controller-2998c2e2.js

1import BaseController from "controllers/base_controller";
2
3export default class extends BaseController {
4  static targets = ["map"]
5
6  static values = {
7    deliveryAreaCoordinates: Array
8  }
9
10  async connect() {
11    await this.delay(100); // When loaded in a lazy frame, give script time to load
12    this.initializeMap()
13  }
14
15  initializeMap() {
16    if (typeof mapboxgl === "undefined") {
17      console.error("Mapbox GL JS is not loaded.")
18      return
19    }
20
21    // Get Mapbox token from environment
22    const mapboxToken = document.querySelector('meta[name="mapbox-token"]')?.getAttribute("content")
23
24    if (!mapboxToken) {
25      console.error("Mapbox token not found. Please ensure MAPBOX_TOKEN environment variable is set.")
26      return
27    }
28
29    // Set access token
30    mapboxgl.accessToken = mapboxToken
31
32    const deliveryArea = {
33      type: "Feature",
34      geometry: {
35        type: "Polygon",
36        coordinates: [this.deliveryAreaCoordinatesValue]
37      }
38    }
39
40    // Initialize map
41    const map = new mapboxgl.Map({
42      container: this.mapTarget,
43      style: "mapbox://styles/mapbox/streets-v12",
44      center: [-0.1, 51.51], // London
45      zoom: 10,
46      cooperativeGestures: true
47    })
48
49    // Add polygon when map loads
50    map.on("load", () => {
51      // Add polygon source
52      map.addSource("delivery-area", {
53        type: "geojson",
54        data: deliveryArea
55      })
56
57      // Filled polygon
58      map.addLayer({
59        id: "delivery-fill",
60        type: "fill",
61        source: "delivery-area",
62        paint: {
63          "fill-color": "#28a745",
64          "fill-opacity": 0.25
65        }
66      })
67
68      // Outline
69      map.addLayer({
70        id: "delivery-outline",
71        type: "line",
72        source: "delivery-area",
73        paint: {
74          "line-color": "#28a745",
75          "line-width": 2
76        }
77      })
78
79      // Automatically fit to polygon
80      const bounds = new mapboxgl.LngLatBounds()
81      deliveryArea.geometry.coordinates[0].forEach((coord) => {
82        bounds.extend(coord)
83      })
84      map.fitBounds(bounds, { padding: 30 })
85    })
86
87    // Locate me control
88    map.addControl(new mapboxgl.GeolocateControl({
89      positionOptions: {
90        enableHighAccuracy: true
91      },
92      trackUserLocation: true
93    }));
94  }
95}