https://kakadu.gov.au/js/map-init-infobox-component.js

1//* Initialise a map for the Infobox Map
2//  NOTE: Embed map paragraph maps are handled by
3//  ./static/js/map-init-embed-map-component.js, and the Access Report maps are handled in
4//  ./src/components/map/MapEmbed.js
5
6// 'mapData' is defined in ./src/components/map/MapEmbed.js and passes in any
7// variables we need
8if (typeof mapData !== 'object') {
9  console.warn('mapData is not an object, or is undefined. Maps may not work as expected');
10}
11
12maplat = parseFloat(mapData.lat);
13// Default position/zoom values for embedded map paragraphs are controlled here
14
15// If lan/long are not within allowed values, default to Coober Pedy :)
16maplat = isNaN(maplat) || maplat < -90 ? -28.2744 : maplat > 90 ? -28.2744 : maplat;
17maplong = parseFloat(mapData.lon);
18maplong = isNaN(maplong) || maplong < -180 ? 134.7751 : maplong > 180 ? 134.7751 : maplong;
19
20// Mapbox provides maps in 23 zoom levels, with 0 being the lowest zoom level
21// (fully zoomed out) and 22 being the highest (fully zoomed in).
22// Defaults to zoom 3, to show the whole of Australia. This allows users to
23// at least see any pins/markers on the map.
24mapzoom = parseFloat(mapData.zoom) | 3;
25mapzoom = mapzoom < 0 ? 0 : mapzoom > 22 ? 22 : mapzoom;
26let infomap = null;
27// Once the window has loaded, change the body to full width and height without
28// margins
29const mapFullSize = '100%';
30
31window.addEventListener('load', async (event) => {
32  document.body.style.width = mapFullSize;
33  document.body.style.height = mapFullSize;
34  document.body.style.margin = '0';
35  if (isNaN(maplong) || isNaN(maplat)) return;
36
37  // 'maptilerKeys' is injected from the static js file 'maptiler-keys.js'
38  maptilersdk.config.apiKey = maptilerKeys[mapData.park];
39
40  // Set visual style of the map tiles - MapTiler accepts
41  // 'streets', 'outdoor' and 'satellite'
42  const infomap = new maptilersdk.Map({
43    container: 'infomap',
44    style: 'https://api.maptiler.com/maps/outdoor/style.json',
45    center: [maplong, maplat],
46    height: mapFullSize,
47    navigationControl: false,
48    scaleControl: false,
49    Control: false,
50    geolocateControl: false,
51    zoom: 14,
52  });
53
54  loadMapIconsPins(infomap);
55
56  infomap.on('load', (event) => {
57    // Add just the zoom controls to the map
58    const mapControls = new maptilersdk.MaptilerNavigationControl({
59      showCompass: false,
60      showZoom: true,
61    });
62    infomap.addControl(mapControls);
63
64    // Disable users scrolling over the map to zoom, as this creates a scroll
65    // trap on some devices
66    infomap.scrollZoom.disable();
67
68    let infomap_dom = document.getElementById('infomap');
69    // Push the map out to the full width of the container
70    infomap_dom.style.width = mapFullSize;
71    infomap_dom.style.height = mapFullSize;
72    resetMap();
73
74    // From within the iframe, talk to the parent housing the map and add a
75    // click event listener
76    const wrapper = window.parent.document.querySelector('.info-pullout-wrapper'),
77      infoboxButtons = window.parent.document.querySelectorAll(
78        '.infomapclick, .info-pullout__info-tab'
79      );
80
81    // Use a mutation observer to pick if the display resizes to desktop or mobile
82    // This is much less intensive than listening for 'resize' events
83    const htmlRoot = window.parent.document.documentElement,
84      config = { attributes: true, childList: false, subtree: false };
85
86    // Assess the current display mode
87    let isMobile = () =>
88      !htmlRoot.classList.contains('breakpoint-desktop') &&
89      !htmlRoot.classList.contains('breakpoint-widescreen');
90
91    function resetMap() {
92      infomap_dom.style.width = mapFullSize;
93      infomap_dom.style.height = mapFullSize;
94      // Trigger the map resize method in case the display have been resized
95      // since loading, which leads to a small/stretched map
96      infomap.resize();
97    }
98    function hideMap() {
99      infomap_dom.style.width = '0';
100      infomap_dom.style.height = '0';
101    }
102
103    const mutationCallback = (mutationList, observer) => {
104      for (const mutation of mutationList) {
105        if (mutation.type === 'attributes') {
106          if (
107            mutation.target.classList.contains('breakpoint-desktop') ||
108            mutation.target.classList.contains('breakpoint-widescreen')
109          ) {
110            // Expose the map when display resizes to desktop mode
111            resetMap();
112          } else {
113            wrapper.classList.contains('info-pullout-wrapper--map-mode') ? resetMap() : hideMap();
114          }
115        }
116      }
117    };
118
119    const observer = new MutationObserver(mutationCallback);
120    observer.observe(htmlRoot, config);
121
122    // On first load, check if the display is mobile or desktop
123    isMobile() ? hideMap() : resetMap();
124
125    // When someone clicks on the Info/Map buttons, toggle the classes
126    infoboxButtons.forEach(function (e) {
127      e.addEventListener('click', function (event) {
128        wrapper.classList.toggle('info-pullout-wrapper--map-mode');
129        isMobile() && !wrapper.classList.contains('info-pullout-wrapper--map-mode')
130          ? hideMap()
131          : resetMap();
132      });
133    });
134
135    loadLocationMarkers(infomap, {
136      items: [
137        {
138          title: window.parent.document.title,
139          lat: maplat,
140          lng: maplong,
141          url: null,
142          text: null,
143        },
144      ],
145    });
146  });
147});