This is the code I am using
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsfilter',
(filterInstances) => {
console.log('cmsfilter Successfully loaded!');
const [filterInstance] = filterInstances;
// This function gather all info from within the cards to create the elements needed for mapbox
function mapData(item) {
const resultElement = item.element;
let cmsItem = resultElement;
let img = cmsItem
.querySelector('.location-profile')
.style.backgroundImage.slice(4, -1)
.replace(/["']/g, '');
let name = cmsItem.querySelector('.location-name').innerHTML.trim();
let lat = cmsItem.querySelector('.lat').innerHTML;
let lon = cmsItem.querySelector('.lon').innerHTML;
let detail1 = cmsItem.querySelector('.popup-detail'); //left blank as it is undefined now
let detail2 = cmsItem.querySelector('.popup-detail-2'); //left blank as it is undefined now
//These can be removed after all info needed is reliably gathered
console.log('image:', img);
console.log('name', name);
console.log('lat', lat);
console.log('lon', lon);
console.log('detail1', detail1);
console.log('detail2', detail2);
document.addEventListener('DOMContentLoaded', function () {
function initializeMap() {
// Your Mapbox access token
mapboxgl.accessToken = 'pk.eyJ1IjoiZXRoYW5xIiwiYSI6ImNsazIwc3V6MDBiZnozbnFtd3Q1ODdjeWUifQ.b06Fc0rBTSM8Bquhg-cDXw';
// Initialize the map
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/ethanq/cllombele001t01ofh6yz6evy',
center: [144.977731, -37.823803],
zoom: 8,
});
// Handle state filter dropdown change
$(".state-filter-dropdown").on("change", function () {
var selectedCoordinates = $(this).val();
var [longitude, latitude] = selectedCoordinates.split(",").map(parseFloat);
if (!isNaN(longitude) && !isNaN(latitude)) {
map.flyTo({
center: [longitude, latitude],
zoom: 8,
essential: true
});
} else {
console.log("Invalid coordinates format");
}
});
var current_popup, current_marker, current_item;
$(".location").each(function () {
var cmsItem = $(this);
var img = cmsItem.find(".location-profile").css("background-image").slice(4, -1).replace(/["']/g, "");
var name = cmsItem.find(".location-name").text();
var lat = cmsItem.find(".lat").text();
var lon = cmsItem.find(".lon").text();
var detail1 = cmsItem.find(".popup-detail").text();
var detail2 = cmsItem.find(".popup-detail-2").text();
var el = document.createElement('div');
el.classList.add('star');
var body = cmsItem.find(".pre-popup");
var pop = new mapboxgl.Popup({
offset: 25,
closeButton: false,
maxWidth: "auto"
}).setHTML(body[0].outerHTML);
var mark = new mapboxgl.Marker(el)
.setLngLat([lon, lat])
.setPopup(pop)
.addTo(map);
map.on('click', function (e) {
if (e.originalEvent.srcElement.ariaLabel === "Map") {
current_marker.classList.remove('show');
}
});
// MARKERS EVENT
el.addEventListener('click', function () {
pop.addTo(map);
if (current_marker != undefined) {
current_item.classList.remove('active');
current_marker.classList.remove('show');
pop.remove();
}
current_item = this;
current_item.classList.add('active');
current_marker = el;
current_marker.classList.add('show');
map.flyTo({
center: [lon, lat],
zoom: 8,
essential: true
});
});
el.addEventListener('mouseover', function () {
pop.addTo(map);
el.classList.add('show');
});
el.addEventListener('mouseout', function () {
if (current_marker !== el) {
pop.remove();
el.classList.remove('show');
}
});
// LIST ITEMS EVENT
this.addEventListener('click', function () {
map.flyTo({
center: [lon, lat],
zoom: 8,
essential: true
});
if (current_marker != undefined) {
current_item.classList.remove('active');
current_marker.classList.remove('show');
current_popup.remove();
}
pop.addTo(map);
el.classList.add('show');
current_marker = el;
current_popup = pop;
current_item = this;
current_item.classList.add('active');
});
this.addEventListener('mouseover', function () {
pop.addTo(map);
el.classList.add('show');
});
this.addEventListener('mouseout', function () {
if (current_marker !== el) {
pop.remove();
el.classList.remove('show');
}
});
});
// Add zoom and rotation controls to the map
map.addControl(new mapboxgl.NavigationControl());
// Disable map zoom when using scroll
map.scrollZoom.disable();
}
// Call the initialization function
initializeMap();
}
filterInstance.listInstance.on('renderitems', (renderedItems) => {
// console.log(renderedItems);
renderedItems.forEach((item) => {
mapData(item);
});
});
},
]);
</script>
