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 vectorLayer2 = new ol.layer.Vector({
    source: new ol.source.GeoJSON({
    projection: "EPSG:3857",
    url: "XXXX"
    })
});

.. 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 printet to log.

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.

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 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?

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 vectorLayer2 = new ol.layer.Vector({
    source: new ol.source.GeoJSON({
    projection: "EPSG:3857",
    url: "XXXX"
    })
});

.. 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 printet to log.