Skip to content

Instantly share code, notes, and snippets.

@rsimon

rsimon/test.html

Created March 8, 2018 12:21
Show Gist options
  • Save rsimon/74ebfdb9173fd8e7270c1fb439a51574 to your computer and use it in GitHub Desktop.
Save rsimon/74ebfdb9173fd8e7270c1fb439a51574 to your computer and use it in GitHub Desktop.
Download ZIP
'Remote control' OpenLayers through a DOM element that obstructs direct access
Raw
test.html
<html>
<head>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
<style>
#above, #below {
position:absolute;
top:0;
left:0;
width:640px;
height:480px;
border:1px solid #ccc;
}
#above { background-color:rgba(255, 255, 0, 0.3); }
</style>
<script src="https://openlayers.org/en/v4.6.4/build/ol.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
jQuery(document).ready(function() {
var below = jQuery('#below'),
above = jQuery('#above'),
map,
isMouseDown = false,
initMap = function() {
map = new ol.Map({
target: 'below',
layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
},
attachMouseHandlers = function(element, prefix) {
element.mousedown(function() {
isMouseDown = true;
});
element.mouseup(function() {
isMouseDown = false;
});
element.mousemove(forwardMoveEvent);
element.bind('wheel', function(jqEvt) {
var dz = jqEvt.originalEvent.deltaY / Math.abs(jqEvt.originalEvent.deltaY);
map.getView().animate({ zoom: map.getView().getZoom() - dz, duration: 100 });
});
},
forwardMoveEvent = function(jqEvt) {
var dX = jqEvt.originalEvent.movementX,
dY = jqEvt.originalEvent.movementY,
currentCenterXY = map.getPixelFromCoordinate(map.getView().getCenter()),
newCenterXY = [
currentCenterXY[0] - dX,
currentCenterXY[1] - dY
],
newCenterLonLat = map.getCoordinateFromPixel(newCenterXY);
if (isMouseDown) map.getView().setCenter(newCenterLonLat);
};
initMap();
attachMouseHandlers(above, 'above');
});
</script>
</head>
<body>
<div id="below"></div>
<canvas id="above"></canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment