3

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.

Improve this question
4
  • Any chance of a code sample?
    – John Powell
    Commented Dec 2, 2014 at 10:40
  • Are you sure you don't mean, forEachFeatureAtPixel. I have just pulled ol3 from github and grepped allFeaturesAtPixel -- it does not exist. All the more reason for a code sample :D
    – John Powell
    Commented Dec 2, 2014 at 10:43
  • Sorry, very rude of me, welcome to stack exchange. In general, it is hard to answer a question without some indication of what you have tried. A verbal description of a non-existent Javascript function is not going to get us very far. From your descrition, I am guessing it is to do with the circle's anchor position, but it remains a guess.
    – John Powell
    Commented Dec 2, 2014 at 10:47
  • This is strange. I'd also like to see a jsfiddle demonstrating the issue.
    – erilem
    Commented Dec 3, 2014 at 19:05

2 Answers 2

Reset to default
1

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.

Improve this answer
1
  • Are you saying adding a DOCTYPE fixed both the performance and offset problem?
    – ca0v
    Commented May 24, 2016 at 19:23
0

I had an identical problem with Openlayers 5.x and the misalignment was due to the fact that the map was rendered in the browser without the vertical scrollbar and later on when the vertical scroll bar was added, the browser was resizing the map without re-rendering it.

Forcing the scrollbar to be always visible solved the problem. In the html file I added:

<body style="overflow-y:scroll;">

and the problem was solved.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.