CODEWITHSUNDEEP
javascriptopenlayers
Psymøn
Psymøn

Reputation: 473

Dragging cursor does not apply cursor style change until drag is complete

I would like to follow up on this question: Changing cursor on drag in openlayers 3

The answer provided is sound, and has a working example. I have used the basic OpenLayers quickstart code and added that user's answer to it to test, and I am sorry to say that it does not work.

What happens is that the cursor defined in "pointerup" is the starting cursor, and when you click and hold to drag the map around, it remains as that cursor until you let go of the mouse button to stop dragging. You'll see the hand icon change very briefly, then change back to the pointerup cursor. It is acting like the cursor cannot be changed while a dragging action is occurring.

What can be done to fix this?

Full code of my example file below. Please note that in jsfiddle, it demonstrates the expected behaviour. But when I make a file (eg. "test-drag.html") and load it up in Chrome, it acts as I described instead.

<html>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<body>
<div id="map" class="map" style="width:1200px;height:800px"></div>
<script type="text/javascript">
var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
	center: ol.proj.fromLonLat([37.41, 8.82]),
	zoom:2
  })
});

map.getViewport().style.cursor = "-webkit-grab";
map.on('pointerdrag', function(evt) {
    map.getViewport().style.cursor = "-webkit-grabbing";
});

map.on('pointerup', function(evt) {
    map.getViewport().style.cursor = "-webkit-grab";
});
</script>
</body>
</html>

Upvotes: 3

Views: 2462

Answers (1)

Pizza and Coke
Pizza and Coke

Reputation: 123

The answer is that this is caused by Dev Tools being open, as mentioned in comments by @m.cekiera and @Psymøn.

Upvotes: 5

Related Questions