Mastering OpenLayers 3

Clipping layers

In the next example, called ch07_clip, we will use another useful canvas operation. We will use a clipping mask to restrict a layer to a small square, creating a peeking window, just like the one in the Google Maps application.

Note

There are way more canvas operations than those described in the examples. However, I tried to pick out the most useful ones for web mapping applications.

For this example, we extend our init function with a custom layer. We register the required precompose and postcompose events on it, and then silently add it to the map:

var clippedLayer = new ol.layer.Tile({ source: new ol.source.MapQuest({ layer: 'osm' }), zIndex: 9999 }); clippedLayer.on('precompose', function (evt) { var ctx = evt.context; ctx.save(); ...