[GIS] OpenLayers forEachFeatureAtPixel finds point when clicking in the lower part or below the symbol

openlayers-2

I have OpenLayers 3.0 map with vector layer (geojson data) and try to add tooltip, when the point on map is clicked. I use the forEachFeatureAtPixel (edit: was allFeaturesAtPixel) function for finding the points.

Points are symbolized as simple circles, radius ca 10px.

The problem is, that clicking in the upper part of the circle gives no results. Clicking in the lower part or BELOW the circle, finds the point. It seems also that the bigger the radius of circle, the bigger the search area is, but it is just too low.

Coordinate system is 3857.

Any ideas, how to fix it?

Edit: Yes, sorry ofcourse it is forEachFeatureAtPixel.

Some code snippets:

var vectorLayer1 = new ol.layer.Vector({
    source: new ol.source.GeoJSON({
    projection: "EPSG:3857",
    url: "XXX"
    })
    style: new ol.style.Style({
       image: new ol.style.Circle({
       radius: 10,
       fill: new ol.style.Fill({color: 'red'})
       })
   })
});

.. layer is added to map etc

map.on('singleclick', function(evt) {
   var place = null;
   allFeaturesAtPixel = [];
   map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
   allFeaturesAtPixel.push(feature);
   place = feature;
   });
   if (place) {
      var i; 
      for (i = 0; i < allFeaturesAtPixel.length; ++i) {
         console.log(allFeaturesAtPixel[i].get('name'));
      }
   }
   else{
       console.log("No feature");
   }

}

Sorry for extra logging here. When clicking the upper part of circle, the "No feature" text will be printed to log.

Best Answer

Actually trying to add the example to jsfiddle helped to find the problem. The page was running ok on jsfiddle and when comparing the jsfiddle source code with the original, I found the problem

The code snippets posted above are ok, the problem was in the (missing) first row. After adding 

"<!DOCTYPE html>"

in the beginning of the page, the mysterious behavoiur ended.

Related Question