levu levu - 3 months ago 37
Javascript Question

ol.interaction.Draw condition on mouse move?

I'm using a

ol.interaction.Draw
to draw new features onto a map, but there are also already existing features on the map. I want the user to not be able to place a new feature when the mouse is hovering an existing feature.

For now I use a
condition
on the Draw interaction which returns false when it's set on a pixel where there is already a feature. But when just moving the mouse over these pixels, it's still styled like the user was able to place a marker there. Is there something like
condition
which is checked at every mouse move not just at a click?

Update: my current condition is:

condition: function(e) {
var isFirstOne = true;
var feature = map.forEachFeatureAtPixel(e.pixel, function(feature) {
var n = feature.get('name');
// if n is undefined, feature is the current drawing one
if (!!n) return feature;
});
return (!feature);
}

Answer

Is there something like condition which is checked at every mouse move not just at a click?

Yes, you can use pointermove, and change the cursor (via CSS):

map.on('pointermove', function(e) {
  if (e.dragging) return;
  var hit = map.hasFeatureAtPixel(map.getEventPixel(e.originalEvent));
  map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});