How to animated feature marker in openlayers like in google map example of bouncing marker. I'm new in openlayers so if you have a sample code much better.

  • I want to move a marker with animation from one location to another smoothly in openlayer. There is a sample: openlayers.org/en/latest/examples/feature-move-animation.html. But this has a polyline coordinates which consist of different characters. I want to move a marker with animation from one location (lat1,lon1) to new place (lat2,lon2) . I haven't find this for weeks. Pls help me.
    – Ali
    Oct 3 '16 at 14:08
  • If you have a new question, please ask it by clicking the Ask Question button. Include a link to this question if it helps provide context. - From Review Oct 3 '16 at 14:55
  • This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. You can also add a bounty to draw more attention to this question once you have enough reputation. - From Review
    – nmtoken
    Oct 3 '16 at 15:42

You might use SVG symbols, like in this example:


or a simple moving marker:


The source files should be self-explaining.


I don't know if it is the right answer but this trick solve mine. I create a GIF (bouncing marker) then change the icon of existing marker (JPG) to GIF icon then adjust the size and offset. This my sample code.

var size = new OpenLayers.Size(w,h);                   // new height 
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);  // new offset
marker.setUrl("new_GIF_image_path");            //set new GIF icon path 
marker.icon.setSize(size);                      // set new size
marker.icon.offset=offset;                     // set new offset
markers.redraw();                      // redraw layer markers

If you have an easy or other answer let me know.

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.