https://www.gymfit.by/assets/client/controllers/place_map_controll…b4771a1973898fb6611ef671e51d5b4912e68582.js

1import { Controller } from '@hotwired/stimulus'
2import mapboxgl from 'mapbox-gl'
3
4export default class extends Controller {
5  static values = {
6    places: Array
7  }
8
9  connect () {
10    mapboxgl.accessToken = this.accessToken
11
12    const firstPlace = this.placesValue[0]
13
14    this.map = new mapboxgl.Map({
15      container: 'map_container',
16      style: 'mapbox://styles/mapbox/standard',
17      config: {
18        basemap: {
19          lightPreset: 'night'
20        }
21      },
22      language: 'ru',
23      center: [
24        Number(firstPlace.longtitude),
25        Number(firstPlace.latitude)
26      ],
27      zoom: 11
28    })
29
30    this.map.scrollZoom.disable()
31    this.map.addControl(new mapboxgl.NavigationControl())
32    this.map.on('style.load', () => {
33      this.map.setLanguage('ru')
34    })
35
36    this.placesValue.forEach(place => this.addMarker(place))
37  }
38
39  disconnect () {
40    if (this.map) {
41      this.map.remove()
42      this.map = null
43    }
44  }
45
46  addMarker (place) {
47    const el = document.createElement('div')
48    el.className = 'marker'
49
50    const marker = new mapboxgl.Marker(el)
51      .setLngLat([place.longtitude, place.latitude]).addTo(this.map)
52  }
53
54  get accessToken () {
55    return document.querySelector('meta[name="mapbox_api_key"]').getAttribute('content')
56  }
57};