https://gbvaor.net/modules/custom/gbv_map/assets/js/module.js?v=1.1.1

1/* globals mapboxgl turf */
2(function ($, Drupal, drupalSettings, once) {
3  Drupal.behaviors.loadMap = {
4    attach(context, settings) {
5      const mapElement = once("loadMap", "#gbv-map", context);
6      mapElement.forEach(function () {
7        mapboxgl.accessToken = drupalSettings.accessToken;
8        const map = new mapboxgl.Map({
9          container: "gbv-map",
10          style: drupalSettings.mapStyle,
11          renderWorldCopies: false,
12          bounds: [
13            [-180, -60],
14            [180, 90],
15          ],
16          attributionControl: false,
17          interactive: true,
18        });
19        let hoveredStateId = null;
20        map.dragPan.disable();
21        map.touchZoomRotate.disableRotation();
22        map.dragRotate.disable();
23        map.scrollZoom.disable();
24        map.boxZoom.disable();
25        map.doubleClickZoom.disable();
26        const mapData = JSON.parse(drupalSettings.mapData);
27        const filteredCountries = {
28          type: "FeatureCollection",
29          features: [],
30        };
31        const postResult = $.ajax({
32          url: "https://gistcdn.githack.com/timilsinabishal/1df12bb0ce3afe5dbdd6081f89513cae/raw/ece2a05253c7e86a43d8f3e5ea4841cd79b59299/world-admin-0.geojson",
33          dataType: "json",
34        });
35
36        map.on("load", function () {
37          postResult.then(function (countries) {
38            mapData.forEach(function (data, index) {
39              const filteredCountry = countries.features.filter(
40                function (feature) {
41                  // bounds.extend(feature.geometry.coordinates);
42                  return feature.iso_2 === data.country;
43                },
44              );
45
46              filteredCountries.features.push(filteredCountry[0]);
47              filteredCountries.features[index].properties.content = data.body;
48              filteredCountries.features[index].properties.uri = data.uri;
49            });
50            // let layers = map.getStyle().layers;
51            map.addSource("countries", {
52              type: "geojson",
53              data: filteredCountries,
54            });
55            map.addLayer({
56              id: "country-fill",
57              type: "fill",
58              source: "countries",
59              layout: {},
60              paint: {
61                "fill-color": "#63337c",
62                "fill-opacity": [
63                  "case",
64                  ["boolean", ["feature-state", "hover"], false],
65                  0.8,
66                  0.5,
67                ],
68              },
69            });
70
71            const bbox = turf.bbox(filteredCountries);
72            map.fitBounds(bbox, { padding: 20 });
73
74            map.on("mousemove", "country-fill", function (e) {
75              if (e.features.length > 0) {
76                if (hoveredStateId) {
77                  map.setFeatureState(
78                    { source: "countries", id: hoveredStateId },
79                    { hover: false },
80                  );
81                }
82                hoveredStateId = e.features[0].id;
83                map.setFeatureState(
84                  { source: "countries", id: hoveredStateId },
85                  { hover: true },
86                );
87              }
88            });
89
90            map.on("mouseleave", "country-fill", function () {
91              if (hoveredStateId) {
92                map.setFeatureState(
93                  { source: "countries", id: hoveredStateId },
94                  { hover: false },
95                );
96              }
97              hoveredStateId = null;
98            });
99
100            map.on("click", "country-fill", function (e) {
101              const centroid = $.parseJSON(e.features[0].properties.centroid);
102              const coordinates = centroid.slice();
103              const { name } = e.features[0].properties;
104              const { uri } = e.features[0].properties;
105              const { content } = e.features[0].properties;
106
107              while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
108                coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
109              }
110              let popupContent = `<div class="country-header"><h3>${name}</h3>`;
111              if (uri !== "null") {
112                popupContent += `<a class="country-url" href="${
113                  uri
114                }" target="_blank"> Visit Country Page <i class="fa fa-external-link"></i></a>`;
115              }
116              popupContent += "</div>";
117              popupContent += content;
118              new mapboxgl.Popup()
119                .setLngLat(coordinates)
120                .setHTML(popupContent)
121                .addTo(map);
122            });
123
124            map.on("mouseenter", "country-fill", function () {
125              map.getCanvas().style.cursor = "pointer";
126            });
127
128            map.on("mouseleave", "country-fill", function () {
129              map.getCanvas().style.cursor = "";
130            });
131          });
132        });
133        if ($(window).width() < 560) {
134          map.addControl(
135            new mapboxgl.NavigationControl({
136              showCompass: false,
137            }),
138          );
139          map.dragPan.enable();
140          map.scrollZoom.enable();
141        }
142      });
143    },
144  };
145})(jQuery, Drupal, drupalSettings, once);