Skip to content

Instantly share code, notes, and snippets.

@tsauerwein

tsauerwein/index.html

Created February 20, 2016 11:23
Show Gist options
  • Save tsauerwein/1941fdb6703fb4820933 to your computer and use it in GitHub Desktop.
Save tsauerwein/1941fdb6703fb4820933 to your computer and use it in GitHub Desktop.
Download ZIP
Smart mouse-wheel scrolling for OpenLayers 3 maps #2
Raw
index.html
<!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>
Raw
scroll.js
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();
map.addInteraction(mouseWheelZoomInteraction);
var scrollTimer;
$(window).on('scroll', function(e) {
mouseWheelZoomInteraction.setActive(false);
if (scrollTimer) {
clearInterval(scrollTimer);
}
scrollTimer = setTimeout(function() {
mouseWheelZoomInteraction.setActive(true);
}, 500);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment