https://www.starwoodhotels.com/modules/custom/mapbox_megamap/templ…/patterns/mapboxpopup/mapboxpopup.js?tlrzgr

1(function (Drupal, settings, once) {
2
3	Drupal.behaviors.addMapPopUps = {
4		attach: function (context, settings){
5			once('mapboxPopUp', '.mapboxpopup', context).forEach(function (element) {
6
7
8				var mapID = element.getAttribute('for');
9				const map = document.querySelector("#"+mapID)?._mapboxGLJS;
10				let places = settings['mapbox_markers'][mapID];
11
12				if (typeof map !== 'undefined'){
13				
14					map.on('load',  function(e) { 
15
16						map.on('click', 'symbol-places', (e) => {
17							const markerid = e.features[0].properties.markerid;
18							const popup = element.querySelector('.meagmap-popup[popupid="'+markerid+'"]');
19							const popupOpened = popup.classList.contains("meagmap-popup--active");
20
21							closeActivePopups(element);
22							if(popupOpened){
23								closePopup(popup);
24							}
25							else{
26								openPopup(popup);
27							}
28
29							if(window.innerWidth <768) {
30								var padding = {'left' : 0};
31							}
32							else {
33								var padding = {'left' : popup.offsetWidth};
34							}
35							map.easeTo({
36									speed: 5000,
37									center: e.features[0].geometry.coordinates,
38									padding: padding
39							});
40						});
41					});
42				}
43
44				/// Add Event Lister to all close 
45				for (const feature of places.features ){
46					const popup = element.querySelector('.meagmap-popup[popupid="'+feature.properties.markerid+'"]');
47					const closeButton = popup.querySelector('.meagmap-popup__close');
48					closeButton.addEventListener('click', function(){
49						closePopup(popup)
50					});
51				}
52			})
53		}
54	}
55
56	function closeActivePopups(element) {
57		element.querySelectorAll('.meagmap-popup--active').forEach(function(pop){
58			closePopup(pop);
59		});
60	}
61
62	function closePopup(popup){
63		popup.classList.remove('meagmap-popup--active');
64		// var markers = map.getContainer().querySelectorAll('.mapboxgl-marker--active[popupid="'+popup.getAttribute('popupid')+'"]');
65		// markers.forEach(function(marker) {
66		// 	marker.classList.remove('mapboxgl-marker--active');
67		// });
68		
69
70		// Only do this for bigger screen
71		// if(window.innerWidth >1024) {
72		// 	map.easeTo({
73		// 		padding: {left:0, bottom:0},
74		// 		duration: 1000 // In ms. This matches the CSS transition duration property.
75		// 	});
76		// }
77	}
78
79	function openPopup(popup) {
80		popup.classList.add('meagmap-popup--active');
81		// markerElement.classList.add('mapboxgl-marker--active');
82
83
84		// var padding = {'left' : popup.offsetWidth};
85		// if(window.innerWidth <1025) {
86		// 	padding['left'] = 0;
87		// 	padding['bottom'] =popup.offsetHeight;
88		// }
89
90		// This overrides the flyto in Mapbox
91		// map.easeTo({

92		// 	center: markerElement._feature.geometry.coordinates,
93		// 	padding: padding,
94		// 	duration: 1000 
95		// });
96	}
97
98})(Drupal, drupalSettings, once);