Skip to content

Instantly share code, notes, and snippets.

@derickr
Forked from andrewharvey/leaflet-side-by-side.html
Created September 5, 2011 11:26
Show Gist options
  • Save derickr/1194737 to your computer and use it in GitHub Desktop.
Save derickr/1194737 to your computer and use it in GitHub Desktop.
Demo web app displaying two web maps side by side in sync with each other based on Leaflet
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
This file is licenced CC0 http://creativecommons.org/publicdomain/zero/1.0/
-->
<head>
<title>Leaflet Maps Side by Side</title>
<link rel="stylesheet" href="/javascript/leaflet/leaflet.css" type="text/css" />
<!--[if lte IE 8]><link rel="stylesheet" href="/javascript/leaflet/leaflet.ie.css" /><![endif]-->
<style type="text/css">
body {
margin: 0;
}
/* set the two maps side by side */
#mapA {
width: 50%;
height: 100%;
}
#mapB {
width: 50%;
height: 100%;
left: 50%;
top: 0;
position: absolute;
}
/* the cursor */
#cursor {
position: absolute;
z-index: 100;
}
/* map title bar along the top */
.title {
position: absolute;
z-index: 2;
opacity: 0.75;
top: 0px;
text-align: center;
font-weight: bold;
background-color: white;
border-bottom-right-radius: 10em;
border-bottom-left-radius: 10em;
}
/* position the individual title bars */
#mapATitle {
width: 50%;
}
#mapBTitle {
width: 50%;
left: 50%;
}
</style>
<script src="/javascript/prototype/prototype.js" type="text/javascript"></script>
<script src="/javascript/leaflet/leaflet.js" type="text/javascript"></script>
<script type="text/javascript">
var mapA;
var mapB;
window.onload = function init(){
// predefined map layers
var mapnik = new L.TileLayer("http://tile.openstreetmap.org/{z}/{x}/{y}.png",
{
attribution: 'Map Data &amp; Map Image &copy; <a href="http://www.openstreetmap.org/">OpenStreetMap</a> Contributors. <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC BY-SA 2.0</a>',
maxZoom: 18
});
var tah = new L.TileLayer("http://tah.openstreetmap.org/Tiles/tile/{z}/{x}/{y}.png",
{
attribution: 'Maps Data &amp; Map Image &copy; <a href="http://www.openstreetmap.org/">OpenStreetMap</a> Contributors. <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC BY-SA 2.0</a>',
maxZoom: 18
});
// make the map objects
var startLocation = new L.LatLng(-33.85, 151.20);
var startZoom = 10;
mapA = new L.Map('mapA',
{
center: startLocation,
zoom: startZoom,
layers: [mapnik]
});
mapB = new L.Map('mapB',
{
center: startLocation,
zoom: startZoom,
layers: [tah]
});
// set move events to update the other map when we move this one
mapA.on('moveend', function(e) {
mapB.setView(mapA.getCenter(), mapA.getZoom());
});
mapB.on('moveend', function(e) {
mapA.setView(mapB.getCenter(), mapB.getZoom());
});
// update the location of the cursor
function updateCursorA(e) {
updateCursor(e, (window.innerWidth / 2));
}
function updateCursorB(e) {
updateCursor(e, -(window.innerWidth / 2));
}
function updateCursor(e, offset){
// the 15 is here to position to the center of the cursor icon in, not the top left of the cursor image
$('cursor').top = e.clientY - 15;
$('cursor').left = offset + e.clientX - 15;
$('cursor').setStyle({
left: $('cursor').left,
top: $('cursor').top
});
}
document.getElementById('mapA').onmousemove = updateCursorA;
document.getElementById('mapB').onmousemove = updateCursorB;
}
</script>
</head>
<body id="body">
<div id="mapA"></div>
<div id="mapB"></div>
<div id="mapATitle" class="title">OSM Mapnik</div>
<div id="mapbTitle" class="title">OSM Osmarender</div>
<!--
The following license applies to the following cross.png file originally from
http://gitorious.org/opensuse/art/blobs/master/cursors/dmz/pngs/32x32/cross.png
(c) 2007-2010 Novell, Inc.
This work is licenced under the Creative Commons Attribution-Share Alike 3.0
United States License. To view a copy of this licence, visit
http://creativecommons.org/licenses/by-sa/3.0/ or send a letter to Creative
Commons, 171 Second Street, Suite 300, San Francisco, California 94105, USA.
-->
<img id="cursor" src="cross.png"/>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment