derickr/leaflet-side-by-side.html

## leaflet-side-by-side.html
<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>
	<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 & Map Image © <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 & Map Image © <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>