Skip to content

Instantly share code, notes, and snippets.

@mfelsche

mfelsche/gist:4664568

Created January 29, 2013 14:19
Show Gist options
  • Save mfelsche/4664568 to your computer and use it in GitHub Desktop.
Save mfelsche/4664568 to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet Error Example of ContainerPoint calculation inside a fancybox with scrolled window
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<title>Leaflet-Fancybox</title>
<link rel="stylesheet" type="text/css" href="http://leafletjs.com/dist/leaflet.css" media="all">
<script type="text/javascript" src="http://leafletjs.com/dist/leaflet-src.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script>
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.4" media="screen" />
</head>
<body>
<div style="height:1000px">
<span>
Please Scroll Down and click on the map!
Then try to zoom with doubleclick!
</span>
</div>
<div id="map-container">
<div id="map" style="height:400px;"></div>
</div>
<div id="fancy-map-container" style="display:none;">
<div id="fancy-map"></div>
</div>
<script type="text/javascript">
$(document).ready(function(e){
var map = L.map('map', {
center:[52, 13] ,
dragging:true,
touchZoom: false,
scrollWheelZoom: false,
doubleClickZoom: false,
boxZoom: false,
trackResize: false,
zoomControl:false,
zoom:10
}).addLayer(
L.tileLayer('http://{s}.tile.cloudmade.com/4fc5a3da20804bf9bef9d5d5346f92fa/79350/256/{z}/{x}/{y}.png', {
maxZoom: 18,
detectRetina: true,
}),
true // insert at bottom
);
var fancy_map = undefined;
var open_fancy_map = function(e) {
var map_box = $.fancybox("#fancy-map-container", {
openEffect:'elastic',
openSpeed: 90,
closeEffect:'elastic',
width : 600,
minWidth : 600,
height : 430,
minHeight : 430,
autoWidth : false,
autoHeight : false,
afterLoad : function(){
//working around a strange bug, with leaflet not centering correctly
setTimeout(function(){
if (fancy_map === undefined) {
fancy_map = L.map('fancy-map', {
dragging:true,
center: [52,13],
touchZoom: true,
scrollWheelZoom: true,
doubleClickZoom: true,
boxZoom: true,
trackResize: false,
zoomControl: true,
zoom:8
}).addLayer(
L.tileLayer('http://{s}.tile.cloudmade.com/4fc5a3da20804bf9bef9d5d5346f92fa/79350/256/{z}/{x}/{y}.png', {
maxZoom: 18,
detectRetina: true
}),
true
);
$("#fancy-map").height(400);
fancy_map.invalidateSize(true);
fancy_map.on("dblclick", function(e){
console.log("clientY: " + e.originalEvent.clientY);
console.log("scrollY: " + window.scrollY);
console.log(fancy_map.mouseEventToContainerPoint(e.originalEvent));
});
}
}, 100);
}
});
return false;
};
map.on("click", open_fancy_map);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment