Skip to content

Instantly share code, notes, and snippets.

@tsauerwein
Last active February 20, 2016 11:02
Show Gist options
  • Save tsauerwein/38dc9e71a6781da42017 to your computer and use it in GitHub Desktop.
Save tsauerwein/38dc9e71a6781da42017 to your computer and use it in GitHub Desktop.
Smart mouse-wheel scrolling for OpenLayers 3 maps
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="http://openlayers.org/en/v3.13.1/css/ol.css" type="text/css">
<style>
.content {
width: 500px;
margin-left: auto;
margin-right: auto;
}
.map {
width: 500px;
height: 200px;
}
</style>
<title>Smart Scroll</title>
</head>
<body>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in fermentum ligula.
Curabitur lobortis, lectus et tempus sagittis, lectus ante facilisis lectus, at ultricies
ante sapien eget nunc. Vestibulum a ex vel risus egestas lobortis vel ut erat. Phasellus
felis risus, vehicula eget leo sed, dignissim facilisis risus. Fusce vel euismod lectus.
In et tristique justo. Praesent auctor rutrum enim eget ornare. Ut id libero mauris. Sed
sed tristique dolor, at dignissim justo. Donec tristique vel elit commodo ornare.
Quisque posuere orci eu nulla consequat, vitae egestas turpis semper. Praesent turpis purus,
bibendum porttitor ante convallis, malesuada tristique justo. Praesent vitae purus sit amet
justo tristique porttitor ac vel elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in fermentum ligula.
Curabitur lobortis, lectus et tempus sagittis, lectus ante facilisis lectus, at ultricies
ante sapien eget nunc. Vestibulum a ex vel risus egestas lobortis vel ut erat. Phasellus
felis risus, vehicula eget leo sed, dignissim facilisis risus. Fusce vel euismod lectus.
In et tristique justo. Praesent auctor rutrum enim eget ornare. Ut id libero mauris. Sed
sed tristique dolor, at dignissim justo. Donec tristique vel elit commodo ornare.
Quisque posuere orci eu nulla consequat, vitae egestas turpis semper. Praesent turpis purus,
bibendum porttitor ante convallis, malesuada tristique justo. Praesent vitae purus sit amet
justo tristique porttitor ac vel elit.
</p>
<div id="map" class="map"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in fermentum ligula.
Curabitur lobortis, lectus et tempus sagittis, lectus ante facilisis lectus, at ultricies
ante sapien eget nunc. Vestibulum a ex vel risus egestas lobortis vel ut erat. Phasellus
felis risus, vehicula eget leo sed, dignissim facilisis risus. Fusce vel euismod lectus.
In et tristique justo. Praesent auctor rutrum enim eget ornare. Ut id libero mauris. Sed
sed tristique dolor, at dignissim justo. Donec tristique vel elit commodo ornare.
Quisque posuere orci eu nulla consequat, vitae egestas turpis semper. Praesent turpis purus,
bibendum porttitor ante convallis, malesuada tristique justo. Praesent vitae purus sit amet
justo tristique porttitor ac vel elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in fermentum ligula.
Curabitur lobortis, lectus et tempus sagittis, lectus ante facilisis lectus, at ultricies
ante sapien eget nunc. Vestibulum a ex vel risus egestas lobortis vel ut erat. Phasellus
felis risus, vehicula eget leo sed, dignissim facilisis risus. Fusce vel euismod lectus.
In et tristique justo. Praesent auctor rutrum enim eget ornare. Ut id libero mauris. Sed
sed tristique dolor, at dignissim justo. Donec tristique vel elit commodo ornare.
Quisque posuere orci eu nulla consequat, vitae egestas turpis semper. Praesent turpis purus,
bibendum porttitor ante convallis, malesuada tristique justo. Praesent vitae purus sit amet
justo tristique porttitor ac vel elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in fermentum ligula.
Curabitur lobortis, lectus et tempus sagittis, lectus ante facilisis lectus, at ultricies
ante sapien eget nunc. Vestibulum a ex vel risus egestas lobortis vel ut erat. Phasellus
felis risus, vehicula eget leo sed, dignissim facilisis risus. Fusce vel euismod lectus.
In et tristique justo. Praesent auctor rutrum enim eget ornare. Ut id libero mauris. Sed
sed tristique dolor, at dignissim justo. Donec tristique vel elit commodo ornare.
Quisque posuere orci eu nulla consequat, vitae egestas turpis semper. Praesent turpis purus,
bibendum porttitor ante convallis, malesuada tristique justo. Praesent vitae purus sit amet
justo tristique porttitor ac vel elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in fermentum ligula.
Curabitur lobortis, lectus et tempus sagittis, lectus ante facilisis lectus, at ultricies
ante sapien eget nunc. Vestibulum a ex vel risus egestas lobortis vel ut erat. Phasellus
felis risus, vehicula eget leo sed, dignissim facilisis risus. Fusce vel euismod lectus.
In et tristique justo. Praesent auctor rutrum enim eget ornare. Ut id libero mauris. Sed
sed tristique dolor, at dignissim justo. Donec tristique vel elit commodo ornare.
Quisque posuere orci eu nulla consequat, vitae egestas turpis semper. Praesent turpis purus,
bibendum porttitor ante convallis, malesuada tristique justo. Praesent vitae purus sit amet
justo tristique porttitor ac vel elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in fermentum ligula.
Curabitur lobortis, lectus et tempus sagittis, lectus ante facilisis lectus, at ultricies
ante sapien eget nunc. Vestibulum a ex vel risus egestas lobortis vel ut erat. Phasellus
felis risus, vehicula eget leo sed, dignissim facilisis risus. Fusce vel euismod lectus.
In et tristique justo. Praesent auctor rutrum enim eget ornare. Ut id libero mauris. Sed
sed tristique dolor, at dignissim justo. Donec tristique vel elit commodo ornare.
Quisque posuere orci eu nulla consequat, vitae egestas turpis semper. Praesent turpis purus,
bibendum porttitor ante convallis, malesuada tristique justo. Praesent vitae purus sit amet
justo tristique porttitor ac vel elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in fermentum ligula.
Curabitur lobortis, lectus et tempus sagittis, lectus ante facilisis lectus, at ultricies
ante sapien eget nunc. Vestibulum a ex vel risus egestas lobortis vel ut erat. Phasellus
felis risus, vehicula eget leo sed, dignissim facilisis risus. Fusce vel euismod lectus.
In et tristique justo. Praesent auctor rutrum enim eget ornare. Ut id libero mauris. Sed
sed tristique dolor, at dignissim justo. Donec tristique vel elit commodo ornare.
Quisque posuere orci eu nulla consequat, vitae egestas turpis semper. Praesent turpis purus,
bibendum porttitor ante convallis, malesuada tristique justo. Praesent vitae purus sit amet
justo tristique porttitor ac vel elit.
</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://www.ssorallen.com/jquery-scrollstop/jquery.scrollstop.min.js"></script>
<script src="http://openlayers.org/en/v3.13.1/build/ol.js"></script>
<script src="scroll.js"></script>
</body>
</html>
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
}),
interactions: ol.interaction.defaults({mouseWheelZoom: false})
});
var mouseWheelZoomInteraction = new ol.interaction.MouseWheelZoom();
mouseWheelZoomInteraction.setActive(false);
map.addInteraction(mouseWheelZoomInteraction);
var inMap = false;
var scrolling = false;
$('#map').hover(function(e) {
inMap = true;
if (!scrolling) {
mouseWheelZoomInteraction.setActive(true);
}
}, function(e) {
inMap = false;
});
$(document).on('scrollstart', function(e) {
scrolling = true;
if (!inMap) {
mouseWheelZoomInteraction.setActive(false);
}
});
$(document).on('scrollstop', {latency: 500}, function(e) {
scrolling = false;
if (inMap) {
mouseWheelZoomInteraction.setActive(true);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment