Info window for Vector Layer

[aslam-gis]

Hi,
I am trying to display a popup as Info window for my vector Layer but I am not getting any result.
Please have a look at my code below and suggest the way forward.
LongLat = [obj.longitude,obj.latitude];
siteLonLat = ol.proj.fromLonLat(LongLat);
var point = new ol.geom.Point([siteLonLat[0],siteLonLat[1]]);
var feature = new ol.Feature({
geometry: point,
properties : obj,
geometryName : 'Site'
});

vectorSource = new ol.source.Vector();
vectorSource.addFeature(feature);

// Create vector layer attached to the vector source.
vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: new ol.style.Style({
          image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
                    src: 'img/radio-tower.png'
              }))

    });


map.addLayer(vectorLayer);  

var element = document.getElementById('popup');

var popup = new ol.Overlay({
  element: element,
  positioning: 'bottom-center',
  stopEvent: false
});
map.addOverlay(popup);

   // display popup on click
map.on('click', function(evt) {
  var feature = map.forEachFeatureAtPixel(evt.pixel,
      function(feature, layer) {
        return feature;
      });

  if (feature) {
    var geometry = feature.getGeometry();
    var coord = geometry.getCoordinates();
    var _geomproperties = feature.getProperties();
    popup.setPosition(evt.coordinate);

    //alert(_lineproperties.geometryName);

    if(_geomproperties.geometryName == 'Site')
    {
        s =     "<code>Link Name :   " + _geomproperties.properties['site'] + "</code>"+
                "<br><code>ES A : " + _geomproperties.properties['latitude']  + "</code>"+
                "<br><code>ES B : " +_geomproperties.properties['longitude']  + "</code>";
    }               


    $(element).popover({
      'placement': 'top',
      'html': true,
      'title' : '<span class="text-info"><strong>Site Details...</strong></span> <button type="button" style="float:right">&times;</button>',
      'content':  s
    });
    $(element).popover('show');
  } else {
    $(element).popover('destroy');
  }

$('.close').click(function() {
    $(element).popover('destroy');
});
});

$(map.getViewport()).on('mousemove', function(e) {
var pixel = map.getEventPixel(e.originalEvent);
var hit = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
return true;
});
if (hit) {
document.getElementById('map').style.cursor = 'pointer';
} else {
document.getElementById('map').style.cursor = '';
}
});

[jmgomezpoveda]

Hi, this seems to be the same problem that I had. You can check my workaround at #344 (comment)