I am using openlayer 3.9.0 .I have the below code , in which i have to draw a number of overlay on map.
These overlay are coming but not at exact coordinate. But as soon as i click on map some where these overlay moves to correct position.
To overcome tis i tried to hit click event on hidden div also but it is not working. Only when i click on map somewhere then only these anamoly go tpo correct position.
for(var anamolyIndex=0; anamolyIndex< self.anamolyes.array.length ; anamolyIndex++)
{
tmpAnamolyObject = self.anamolyes.array[anamolyIndex];
elem = document.getElementById(tmpAnamolyObject.coordinates);
coordinate = tmpAnamolyObject.coordinates.split(",");
longitude = parseFloat(coordinate[0]);
lattitude = parseFloat(coordinate[1]);
position = ol.proj.transform([longitude, lattitude],'EPSG:4326', 'EPSG:3857');
popup = new ol.Overlay({
//position: position,
element: elem,
stopEvent:true,
positioning : 'center-center'
});
tmpAnamolyObject.type = "ANAMOLY";
popup['identity'] = tmpAnamolyObject;
elem.addEventListener('click', function() {
var coordinates = this.getAttribute('id');
self.send('onAnamolyClick',coordinates);
});
popup.setPosition(position);
self.map.addOverlay(popup);
}