A unique mapping library

OL 3.0 has been released!

This talk:

present some of the techniques used in the library

Example #1 (rotate and animate)

« Draw early, Draw often »

So for good rendering quality:

  • vectors redrawn at each frame
  • while interacting and animating
  • at 60 fps!

Performance challenge!

Now let's look at the techniques we use in the library…

#1 batching

Minimize data processing and manipulation:

  • style calculations
  • geometry simplifications
  • R-tree lookups
  • object creations

⇨ replay batch during animations/interactions

#2 geometry simplification

  • Douglas Peuker (lines)
  • Quantization – to maintain topology (polygons)

⇨ also allows for better rendering qualtity

#3 over-simplification

Over-simplification and clipping for the parts that are outside the viewport.

Example #2 (complex and large features)

#4 No intermediate canvas for vectors

Vector geometries are draw to the output canvas directly.

  • avoid composing transparent pixels
  • save memory

Consequence: vector layers are very cheap!

Feature Hit Detection

Example #3 (hit detection)

Hit Detection

Canvas doesn't natively support hit detection.

Technique used: redraw the entire "scene" in a 1x1 px canvas, and test if there is a color.


  • features under others are detectable
  • pixel-perfect detection
  • tolerance for line detection on touch devices



  • WebGL is now everywhere…
  • even in iOS! (iOS 8)
  • allow to do thing otherwise not possible

Current status of OL3's WebGL renderer

  • support for tile and image layers
  • basic image effect support (hue, …)
  • vector layers are not supported


Push WebGL renderer forward!

  • Add vector support
  • Tilted/perspective views

And to finish:

Example #4 (tilt)