Skip to content

Instantly share code, notes, and snippets.

Created December 28, 2017 13:40
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save ThomasG77/18f12f74248181f51a34fff5540c098d to your computer and use it in GitHub Desktop.
OpenLayers demo to useAnchor option in ol.interaction.MouseWheelZoom
<!DOCTYPE html>
<meta charset=utf-8>
<meta name=description content="">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Simple Map with default interactions</title>
<link rel="stylesheet" href="" type="text/css">
html, body {
height: 100%;
padding: 0;
margin: 0;
#map {
width: 100%;
height: 60%;
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src=",Element.prototype.classList,URL"></script>
<script src=""></script>
<div id="map" class="map"></div>
<label for="mouse-anchor">
Mouse anchor when using wheelzoom
<input id="mouse-anchor" type="checkbox" checked="checked">
const defaultInteractions = ol.interaction.defaults();
const mouseWheelInteraction = defaultInteractions.getArray().find(el => el instanceof ol.interaction.MouseWheelZoom);
const map = new ol.Map({
interactions: defaultInteractions,
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
document.getElementById('mouse-anchor').addEventListener('change', function() {
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment