display openlayers infowindow in React - reactjs

Question

I am trying to display an info window (overlay popup) when the user clicks on one of the markers displayed on the map. Here's the code:
export const Home = () => {
const { centerPoint, zoomValue, testSites } = useContext(AppContext);
const [layer, setLayer] = useState<VectorLayer>(new VectorLayer({}));
const [popup, setPopup] = useState<Overlay>(new Overlay({}));
const popupRef = useRef<HTMLDivElement>(null);
const contentRef = useRef<HTMLDivElement>(null);
const [map] = useState(
new Map({
interactions: defaultInteractions().extend([
new DragRotateAndZoom()
]),
controls: defaultControls().extend([
new ScaleLine({
units: 'imperial'
})
]),
target: '',
layers: [new TileLayer({
source: new SourceOSM()
})],
view: new View({
center: fromLonLat([centerPoint.longitude, centerPoint.latitude]),
zoom: zoomValue
})
})
);
useEffect(() => {
map.setTarget('map');
map.on('click', (event) => {
const feature = map.forEachFeatureAtPixel(event.pixel, (feature) => {
return feature;
});
if (feature) {
popup.setPosition(event.coordinate);
if (contentRef.current) {
contentRef.current.innerHTML = '<p>' + feature.getProperties().name + '</p>';
}
}
});
map.on('pointermove', (event) => {
if (!event.dragging) {
map.getTargetElement().style.cursor = map.hasFeatureAtPixel(map.getEventPixel(event.originalEvent)) ? 'pointer' : '';
}
});
setPopup(new Overlay({
element: popupRef.current,
positioning: 'bottom-center' as OverlayPositioning,
stopEvent: false,
offset: [9, 9],
}));
}, [map]);
useEffect(() => {
map.addOverlay(popup);
}, [popup, map]);
useEffect(() => {
if (testSites.length) {
const features: Feature[] = [];
testSites.forEach((testSite: TestSite) => {
const feature = new Feature({
geometry: new Point(fromLonLat([testSite.longitude, testSite.latitude])),
name: testSite.name,
address: testSite.address,
city: testSite.city,
state: testSite.state,
notes: testSite.notes
});
feature.setStyle(new Style({
image: new Icon({
src: 'images/site.png'
})
}));
features.push(feature);
});
setLayer(new VectorLayer({
source: new VectorSource({
features: features
})
}));
if (layer.getProperties().source !== null) {
map.addLayer(layer);
}
}
map.getView().animate({zoom: zoomValue}, {center: fromLonLat([centerPoint.longitude, centerPoint.latitude])}, {duration: 1000});
}, [centerPoint, zoomValue, map, testSites]);
return (
<div className="map-wrapper">
<div id="map"></div>
<div id="popup" className="map-popup" ref={popupRef}>
<div id="popup-content" ref={contentRef}></div>
</div>
</div>
);
};
Pretty much everything works fine except for displaying the info window on feature icon click. From what I can tell the positioning on click is being applied to a different div, not the one that contains . See screenshot below. Any help would be appreciated. Thanks.

Answer 1

Ok, I solved it. I assigned an id to my overlay and then referenced it inside the on click event function.
setPopup(new Overlay({
id: 'info',
element: popupRef.current,
positioning: 'bottom-center' as OverlayPositioning,
stopEvent: false,
offset: [9, 9],
}));
......
if (feature) {
map.getOverlayById('info').setPosition(event.coordinate);
if (contentRef.current) {
contentRef.current.innerHTML = '<p>' + feature.getProperties().name + '</p>';
}
}