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();
    ctx.beginPath();
    ctx.rect(20, 20, 100, 100);
    ctx.clip();
});
clippedLayer.on('postcompose', function (evt) {
    evt.context.restore();
});
clippedLayer.setMap(map);

Tip

You can provide a zIndex property for...