Markers animation test

We consider several ways to show animated google maps markers. They are: native markers, custom div overlay and custom canvas overlay. Perfomance measuring is based on requestAnimationFrame method.

Draw settings

Draw engine

Native engine uses google maps markers and google maps polylines as markers tracks.

Use second polyline for storing static track part

Div engine uses custom overlay and draws each marker as a small div, tracks (if shown) use native google maps polylines.

Use second polyline for storing static track part

Optimize geo calculations

Canvas engine uses one big canvas layer as a custom overlay, that refreshes and redraws all markers and tracks every frame.

Use second canvas layer for storing static tracks

Prepare and cache canvas icons

Optimize geo calculations

Use simplify.js from Leaflet with 10px precision

Canvas tile engine splits one big canvas to tiles and uses custom map type. The advantage is that tiles with tracks do not redraw on map drag.

Use canvas tile layer for storing static tracks

Prepare and cache canvas icons

Optimize geo calculations

Use simplify.js from Leaflet with 10px precision

Show tracks

Animate markers

Generator settings

Total amount

TopLeft bound

Bot.Right bound

Speed and angle

Move & hold prob.

Measurer

FPS:

ColoredTracks Show bounds