I currently have a mapbox app that displays a popup for each marker once clicked which is great. What I want however, is the information within the popup to be sent to a seperate div within the app, so the data is displayed at the bottom of the screen instead of within a popup on the map. So it looks something like the image below, but at the bottom of the page instead and with only the essential data such as name, description etc. The code below is what I am using to generate the markers.
So far I have tried editing the CSS of the mapbox popup, but this only gets overwritten by the default mapbox CSS and even when it's not, it's simply too clunky and does not give the effect I want. I'm also aware that this can be done using Leaflet, but this is not something that I wish to use, so that is not an option for me.
for(var i = 0; i < currentArray.length ; i++){
var el = document.createElement('div');
var markerHeight = 50, markerRadius = 10, linearOffset = 25;
el.className = 'marker2';
new mapboxgl.Marker(el)
.setLngLat([currentArray[i].lng, currentArray[i].lat])
.addTo(map);
new mapboxgl.Marker(el)
.setLngLat([currentArray[i].lng, currentArray[i].lat])
.setPopup(new mapboxgl.Popup({ offset: 25, closeOnClick:true})
.setHTML(
`<div id = "popup-container">
<h3>${currentArray[i].name}</h3>
<p>${currentArray[i].venue}</p>
</div>`
)
)
.addTo(map);
}
callbackEventbrite(function(result){
console.log("env", result)
//var geo = GeoJSON.parse(result.events,{Point: [result.location.latitude, result.location.longitude]});
//console.log(geo);
const keys = Object.values(result);
for(const key of keys){
geojson = {
type: 'featureCollection',
features: [{
type: 'feature',
geometry: {
type: 'Point',
coordinates: [key.venue.longitude, key.venue.latitude]
}
}]
}
eventInfo.push(
{"longitude": key.venue.longitude , "latitude": key.venue.latitude , "name": key.name.text, "venue": key.venue.name, "date": key.start.local, "category": key.category_id}
);
}
});