Kids Parties - X-Cube.nl (2024)

`; }).join(""); itemsContainer.innerHTML = locationItems; fireClickListener(); } // Add click event listener to location items function fireClickListener() { let locationListItems = document.querySelectorAll(".location-item"); locationListItems.forEach(item => { item.onclick = (e) => { let { target: { dataset } } = e; toggleMarkerByName(dataset.target); if (mobileCheck()) { document.querySelector(".location-list").classList.remove("show"); } } }); } // Toggle marker by name function toggleMarkerByName(name) { let location = locations.find((entry, i) => `entry-${i}` == name); locationsMarkers.forEach(marker => { if (marker.title == name) { let popup = marker.getPopup(); if (activePopup) { activePopup.remove(); } marker.togglePopup(); activeMarkerEl = marker.getElement(); activeMarkerEl.classList.add("active"); activePopup = popup; //Set point of focus map.flyTo({ center: [parseFloat(location.Longitude), parseFloat(location.Latitude)], zoom: 15 }); } }); } //Render the location markers function renderMarkers(cities) { locationsMarkers = cities.map((city, i) => { let cityMarker = createMarker(city, i); return cityMarker; }); } //Marker logic function createMarker(entry, i) { let markerEl = document.createElement("div"); markerEl.classList.add("div-marker"); if (entry['Booking Link']) { markerEl.innerHTML += svgIcons; } else { markerEl.innerHTML += svgIconsHidden; } let popup = createPopup(entry); let marker = new mapboxgl.Marker({ element: markerEl }) marker.setLngLat([parseFloat(entry.Longitude), parseFloat(entry.Latitude)]).setPopup(popup).addTo(map); marker.title = `entry-${i}`; popup.on("close", (e) => { activeMarkerEl.classList.remove("active"); }); markerEl.addEventListener("click", (e) => { e.stopPropagation(); if (activeMarkerEl && activeMarkerEl != e.target) { activeMarkerEl.classList.remove("active"); activePopup.remove(); } e.target.classList.add("active"); marker.togglePopup(); activeMarkerEl = e.target; activePopup = popup; }); return marker; } //Create popup window for marker function createPopup(entry) { let popupContent if (entry['Booking Link']) { popupContent = `

`; } else { popupContent = `

`; } let coordinates = [parseFloat(entry.Longitude), parseFloat(entry.Latitude)]; return new mapboxgl.Popup({ focusAfterOpen: false, offset: [0, -10] }).setHTML(popupContent); }

We're always finding new ways to bring fun and exciting experiences right to your neighborhood. Check out our growing network and find the closest X-Cube for your next big thrill!