<html lang="en">
  <head>
    <title>GeoAdmin API</title>
  </head>
  <body>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="//api3.geo.admin.ch/loader.js?lang=en" type="text/javascript"></script>
    <div id="map" class="map"></div>
  </body>
</html>
html, body, .map {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
var map_layer = ga.layer.create('ch.swisstopo.pixelkarte-farbe');
var image_layer = ga.layer.create('ch.swisstopo.swissimage');

var map = new ga.Map({
  target: 'map',
  layers: [map_layer,image_layer],
  view: new ol.View({
    resolution: 650,
    center: [670000, 160000]
  })
});

var radius = 100;

// get the pixel position with every move
var mousePosition = null;
$(map.getViewport()).on('mousemove', function(evt) {
  mousePosition = map.getEventPixel(evt.originalEvent);
  map.render();
}).on('mouseout', function() {
  mousePosition = null;
  map.render();
});

// before rendering the layer, do some clipping
image_layer.on('precompose', function(event) {
  var ctx = event.context;
  var pixelRatio = event.frameState.pixelRatio;
  ctx.save();
  ctx.beginPath();
  if (mousePosition) {
    // only show a circle around the mouse
    ctx.arc(mousePosition[0] * pixelRatio, mousePosition[1] * pixelRatio,
        radius * pixelRatio, 0, 2 * Math.PI);
    ctx.lineWidth = 5 * pixelRatio;
    ctx.strokeStyle = 'rgba(0,0,0,0.5)';
    ctx.stroke();
  }
  ctx.clip();
});

// after rendering the layer, restore the canvas context
image_layer.on('postcompose', function(event) {
  var ctx = event.context;
  ctx.restore();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.