Creating own dynamic layer type in OL3

Question

I am currently migrating a special dynamic layer type I created for OpenLayers from OL2 to OL3. The layer displays markers (a lot of them, usually around 1000) that are moving on predefined trajectories. Trajectories are loaded in a special JSON format from a server.

My current approach for OL2 is very performant, heavily optimized and uses the Raphael library ( http://raphaeljs.com/ ). The general application layout looks like this:

• OpenLayers2 is loaded, the map is created
• A special layer "DynLayer" is created which is modelled after OL2's own VectorLayer. This layer handles communication with OL2 (zooming, panning, dragging etc) and provides a very sophisticated asynchronous mechanism to redraw to map (that is, move the markers) based on the current interaction (for example, the refresh rate goes down if the user is currently panning to map to prevent a stuttering effect). During construction, the DynLayer creates a Raphael SVG-layer and attaches it into the DOM. If the map is panned or zoomed, the Raphael layer is synchronized by the DynLayer.
• Markers are then created on the SVG-layer and their position is periodically updated

This approach works extremely well and because Raphael supports older IE versions, it also runs in IE8 and IE7. It also enables me to provide animations based on Raphaels built-in animate method.

I am now trying to migrate this application to OL3 and I am not 100% sure what the best approach would be. Is it possible in OL3 to add custom-built layers after OL3 is loaded? If so, is there any documentation? I tried implementing my own version of a VectorLayer, but OL3 threw a ton of errors related to the goog object provided by the Closure API.

More generally speaking: would it be better to recreate my old approach and draw a Raphael layer on top of OL3? This method would allow me to reuse most of my previous code. Or should I use methods provided by OL3 to draw directly on a HTML5 canvas? If so, how can I obtain control of the refresh rate of the canvas?

I had I a look at the example at http://ol3js.org/en/vector-api/examples/dynamic-data.html?q=dynamic but it does not really fullfil my needs. The markers are animated in an endless loop, and I need specific control over the refresh rate. More generally, how do I prevent my markers from being deleted on one of OL3's own canvas refreshes (for example, if new tiles are loaded).

My general impression of OL3 is that it is more difficult to add own extensions than with OL2, which appeared more 'open' to me than OL3.

Thanks for any help!

Answer 1

Note that OL3 is not meant to work well with IE7 or other 'old' browsers. As far as I understand OL3 was build for performance and has fast vector rendering. It also integrates with d3 , so it can probably integrate with other technologies.