Displaying the Popup

[Fredy Sabuni]

For some reason i can't get the popup displayed.
The following is my piece of code.

`

    const MarkerLayer = ({ source, zIndex = 0 }) => {
    const { map } = useContext(MapContext); 
useEffect(() => {
    if (!map) return;  
    var vectorSource = new OLSourceVector({});
    var markerVectorLayer = new OLVectorLayer({});  

    var popup = new Popup({
        insertFirst: false, 
    });   
    map.addOverlay(popup);

    source.features.forEach(element => {
        if(element.geometry != null){
            var marker = new OLFeature({
                geometry: new Point(fromLonLat([element.geometry.coordinates[0], element.geometry.coordinates[1]])),
                properties: element.properties,
                type: 'click',
            });

            var iconStyle =  new OLStyle({
                image: new OLStyleIcon( ({
                color: '#f1e7fe', 
                scale:0.7,
                crossOrigin: 'anonymous',
                src: 'http://maps.google.com/mapfiles/ms/micons/blue.png'
                }))
            });
            marker.setStyle(iconStyle);  
            vectorSource.addFeature(marker);

        } 
    });   


    map.on('singleclick', (evt) => {
        var f = map.forEachFeatureAtPixel(
            evt.pixel,
            function(ft, layer){return ft;}
        );
        if (f && f.get('type') == 'click') {  
             
            var geometry = f.getGeometry();
            var coord = geometry.getCoordinates();
            // var content = '<p> Building Type: '+f.get('properties').BLD_Type + '</p>' + 
            //               '</br>' + '<p> Issue Date:'+ f.get('properties').ISSUE_DATE + '</p>' +
            //               '</br>' + '<p> Building Cost:'+ f.get('properties').BLD_Cost + '</p>' +
            //               '</br>' + '<p> SQFT Floor:'+ f.get('properties').SQFT_FLOOR + '</p>';
            console.log(coord);  
            
            var el = document.createElement("div");
            var title = document.createElement("h2");
            title.innerHTML = 'Demolition Details';
            el.appendChild(title);
            var content = document.createElement("div");
            content.innerHTML = '<p> Building Type: '+f.get('properties').BLD_Type + '</p>' + 
            '</br>' + '<p> Issue Date:'+ f.get('properties').ISSUE_DATE + '</p>' +
            '</br>' + '<p> Building Cost:'+ f.get('properties').BLD_Cost + '</p>' +
            '</br>' + '<p> SQFT Floor:'+ f.get('properties').SQFT_FLOOR + '</p>';
            el.appendChild(content);
            popup.show(evt.coordinate, el); 
        }   
    })

    
    markerVectorLayer = new OLVectorLayer({
        source: vectorSource 
    }); 
    map.addLayer(markerVectorLayer); 
    markerVectorLayer.setZIndex(zIndex);  

	return () => {
		if (map) {
            map.removeLayer(markerVectorLayer);
            
		}
	};
}, [map]);

return (null);
    };

    export default MarkerLayer;`

[makrolika]

Hi fredsabuni, check what the variables evt.coordinate and el have a value, with maybe console.log(), and post it here.