https://citizenfreak.com/assets/controllers/map_controller-6e54ee1f.js

1import { Controller } from '@hotwired/stimulus'
2import 'jqvmap'
3import 'jqvmap-world'
4import 'jqvmap-canada'
5
6// Connects to data-controller="map"
7export default class extends Controller {
8  static values = { selectedCode: String }
9
10  connect () {
11    this.initMap(this.codeValue, this.mapValue || 'canada_en')
12  }
13
14  disconnect () {
15    // clean up if Turbo caches this page
16    if ($('#vmap').data('mapObject')) {
17      $('#vmap').vectorMap('destroy')
18    }
19  }
20
21  initMap (selectedCode, mapName) {
22    $('#vmap').vectorMap({
23      map: mapName,
24      backgroundColor: document.body.style.backgroundColor,
25      color: '#666666',
26      enableZoom: false,
27      hoverColor: '#999999',
28      hoverOpacity: 0.7,
29      normalizeFunction: 'linear',
30      selectedColor: '#999999',
31      selectedRegions: selectedCode ? [selectedCode] : [],
32      showTooltip: true,
33
34      onRegionClick: (event, code, region) => {
35        location.search = this.updateQueryStringParameter(location.search,
36          'code', code)
37      },
38
39      onRegionOver: () => {
40        document.body.style.cursor = 'pointer'
41      },
42
43      onRegionOut: () => {
44        document.body.style.cursor = 'default'
45      },
46    })
47  }
48
49  updateQueryStringParameter (uri, key, value) {
50    let re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i')
51    let separator = uri.indexOf('?') !== -1 ? '&' : '?'
52    if (uri.match(re)) {
53      return uri.replace(re, '$1' + key + '=' + value + '$2')
54    } else {
55      return uri + separator + key + '=' + value
56    }
57  }
58}