How to change the cursor on hover in openlayers 3?

javascript openlayers-3
Pierre Henry picture Pierre Henry · Sep 24, 2014 · Viewed 26.1k times · Source

I managed to add interactivity to a feature layer added from a remote GeoJSON resource. When I click on a feature I get its ID, fire an AJAX request and display some relevant info about the feature, on the page outside of the map area.

I used a Select interaction.

I would like to make it even clearer to the user that he can click on the features on the map. Is there any way I can change the mouse cursor to "cursor" of "hand" when the mouse hovers a feature contained in a ol.layer.Vector ?

I couldn't find anything in the doc, on this site or by googling.

Answer

Pablo picture Pablo · Dec 9, 2014

It can be done as well without jQuery: 

map.on("pointermove", function (evt) {
    var hit = this.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
        return true;
    }); 
    if (hit) {
        this.getTargetElement().style.cursor = 'pointer';
    } else {
        this.getTargetElement().style.cursor = '';
    }
});

Related questions

Access to Image from origin 'null' has been blocked by CORS policy

I have JavaScript application in OpenLayers 3, and my base layer is created from local tiles. I work only in my computer so I do not know why I have CORS error. var newLayer = new ol.layer.Tile({ source: new ol.…

Read More
how to add markers with OpenLayers 3

I'm trying to add makers on a OpenLayers 3 map. The only example I have found is this one in the OpenLayers example list. But the example uses ol.Style.Icon instead of something like OpenLayers.Marker in OpenLayers 2. First Question …

Read More
Adding event handler to feature in OpenLayers 3?

I am using the following code to add a feature to a vector layer in OpenLayers 3 (OL3): marker = new ol.Feature({ geometry: new ol.geom.Point([longitude, latitude]), name: "Location Marker" }); markerStyle = new ol.style.Style({ image: new ol.style.…

Read More