I am attempting to create my own type of popup for my mapbox application. However, I am attempting to place the popup fixed at the bottom of the screen instead of hovering over the marker. I basically want to get the information from the popup that is active and put it into a seperate HTML element outside of the map. Either this or manually style the popup to be constantly fixed at the bottom of the screen.
I have tried to style the popup manually so it is fixed at the bottom of the screen, however it appears this is not possible as the mapbox styles automatically reposition the popup whenever the maps location changes.
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('<h3>' + currentArray[i].name
+ '</h3>' + '<p>' + currentArray[i].venue + '</p>'))
.addTo(map);
}
The code above is looping through an array of list elements, and the plotting them on the map. I want to find a way to get the element that is active (i.e. the popup that is being displayed) and get the array information out of it and into a HTML element. Any help is much appreciated!
