[GIS] Openlayer3 icon mouse hover animation

javascriptjqueryopenlayers

I am using openlayer3. And using icon as a marker. So my requirement is that when I hover on marker, it should increase in size to show that it is hovered.
Till now I have success to detect the icon and change cursor pointer.
Live example for this can be found at http://codepen.io/anon/pen/Wxzbjv

Javascript Code is as follows :

  var
    sourceFeatures = new ol.source.Vector(),
      layerFeatures = new ol.layer.Vector({
          source: sourceFeatures
      })
  ;

  var map = new ol.Map({
      target: 'map',
      view: new ol.View({
          center: [-5484116.753984261,-1884416.14606312],
          zoom: 16,
          minZoom: 2,
          maxZoom: 20
      }),
      layers: [
        new ol.layer.Tile({ 
            source: new ol.source.OSM(),
            opacity: 0.6
        }),
         layerFeatures
      ]
  });


          $(map.getViewport()).on('mousemove', function(e) {
            var pixel = map.getEventPixel(e.originalEvent);
            var hit = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
              return true;
            });
            targetStr=map.getTarget();
            targetEle=typeof targetStr==="string"?$('#'+targetStr):$(targetStr);
            if (hit) {
              targetEle.css('cursor','pointer');
            } else {
              targetEle.css('cursor','');
            }
          });


  var 
    fill = new ol.style.Fill({color:'rgba(255,255,255,1)'}),
      stroke = new ol.style.Stroke({color:'rgba(0,0,0,1)'}),
      style1 = [
          new ol.style.Style({
              image: new ol.style.Icon(({
                  scale: .7, opacity: 1,
                  rotateWithView: false, anchor: [0.5, 1],
                  anchorXUnits: 'fraction', anchorYUnits: 'fraction',
                  src: '//cdn.rawgit.com/jonataswalker/map-utils/' +                        'master/images/marker.png'
              })),
              zIndex: 5
          })
      ]
  ;


  var feature_start = new ol.Feature({
          geometry: new ol.geom.Point( [-5484116.753984261,-1884416.14606312])
      });
  feature_start.setStyle(style1);
  sourceFeatures.addFeatures([feature_start]);

Best Answer

Create a second style with bigger scale:

style2 = [
new ol.style.Style({
    image: new ol.style.Icon(({
        scale: .9, opacity: 1,
        rotateWithView: false, anchor: [0.5, 1],
        anchorXUnits: 'fraction', anchorYUnits: 'fraction',
        src: '//cdn.rawgit.com/jonataswalker/map-utils/' + 'master/images/marker.png'
    })),
    zIndex: 5
})
]

Then set the style2 for the hit, and style1 when the mouse moves away:

if (hit) {
            targetEle.css('cursor','pointer');
            feature_start.setStyle(style2);
          } else {
            targetEle.css('cursor','');
            feature_start.setStyle(style1);
          }
Related Question