I would like to animate a Overlay marker from one coordinate to another with a smooth movement.

In the last Overlay documentation: http://openlayers.org/en/v3.9.0/apidoc/ol.Overlay.html there are autoPan & autoPanAnimation options, but it is not working for me as you can see here: http://jsfiddle.net/q2x4vf6x/2/

If I define the marker without those options the marker changes its position as expected, but without animation:

marker_pos = new ol.Overlay({
        element: $('<img id="marker_pos" src="http://1.bp.blogspot.com/_GZzKwf6g1o8/S6xwK6CSghI/AAAAAAAAA98/_iA3r4Ehclk/s1600/marker-green.png">')
        .css({marginTop: '-10px', marginLeft: '-10px', cursor: 'pointer'})

Am I missing something?


It seems there is a bug there. Firebug sais TypeError: Argument 1 of Window.getComputedStyle does not implement interface Element. You can always do the map pan with animation within your function. like so:

// Trying animation here...
    marker_pos.setPosition(ol.proj.transform([4.9090, 52.3667], 'EPSG:4326', 'EPSG:3857'));
         var pan = ol.animation.pan({
          source: map.getView().getCenter()
        // when we set the new location, the map will pan smoothly to it
        map.getView().setCenter(ol.proj.transform([4.9090, 52.3667], 'EPSG:4326', 'EPSG:3857'));

check your fiddle here

| improve this answer | |

You can add class with animation to your overlay:

overlay js code:

   marker_pos = new ol.Overlay({
            element: ...
            className: 'ol-overlay-container ol-selectable animation_move'

css animation:

.animation_move {
    -webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
    -ms-transition: all 0.7s ease-out;
    -o-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;

And now each time you call overlay.setPosition(...) it will animate to the new position.

| improve this answer | |

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.