1

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]);
1

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);
          }
  • Thanks for solution. But it will show some flicker. I want some smooth animation while hovering and hovering-out. – Shoaib Konnur Jul 20 '16 at 12:14
  • I want to avoid flickering on hover like on the link : codepen.io/anon/pen/Wxzbjv?editors=0010 . There should be smooth animation while expanding and collapsing – Shoaib Konnur Jul 20 '16 at 12:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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