https://www.nomadsister.com/assets/controllers/map_hosting_control…fb9d2cd1cbe90ec13f047974cce42aad40c9db11.js

1import { Controller } from "@hotwired/stimulus"
2import mapboxgl from 'mapbox-gl'
3
4export default class extends Controller {
5
6  static targets = ["map"]
7
8  connect(){
9    // console.log("Hello from map hosting controller");
10    if(typeof(mapboxgl) === "undefined") {
11      this.waitForMapBox();
12    } else {
13      this.launchProcess()
14    }
15  }
16
17  waitForMapBox () {
18    const myInterval = window.setInterval( () => {
19      if(mapboxgl){
20        clearInterval(myInterval);
21        this.launchProcess();
22      }
23    }, 100)
24  }
25
26  launchProcess () {
27    if(this.hasMapTarget){
28      mapboxgl.accessToken = this.element.dataset.mapApiKey;
29
30      this.map = new mapboxgl.Map({
31        container: this.mapTarget,
32        style: "mapbox://styles/mapbox/streets-v10",
33        zoom: 10,
34        maxZoom: 12,
35      })
36      this.#addMarkerToMap();
37    }
38  }
39
40  #addMarkerToMap() {
41    const marker = JSON.parse(this.element.dataset.marker);
42    this.map.addControl(new mapboxgl.NavigationControl());
43
44    // Create a HTML element for your custom marker
45    const element = document.createElement('div');
46    element.className = 'marker';
47    element.style.backgroundImage = `url('${marker.image_url}')`;
48    element.style.backgroundSize = 'cover';
49    element.style.width = '150px';
50    element.style.height = '150px';
51
52    // // Pass the element as an argument to the new marker
53    new mapboxgl.Marker(element)
54      .setLngLat([marker.lng, marker.lat])
55      .addTo(this.map);
56
57    this.map.setCenter([marker.lng, marker.lat]);
58  }
59
60
61  // const findBounds = (coordatinates) => {
62  //    let longitudes = coordatinates.map(coordinate => coordinate.lng).sort((a, b) => a - b);
63  //    let latitudes = coordatinates.map(coordinate => coordinate.lat).sort((a, b) => a - b);
64  //    return [[longitudes[longitudes.length - 1], latitudes[latitudes.length - 1]], [longitudes[0], latitudes[0]]];
65  // };
66
67};