Skip to content

Instantly share code, notes, and snippets.

@sindre
Forked from andrewharvey/leaflet-side-by-side.html
Created September 24, 2012 10:56
Show Gist options
  • Save sindre/3775460 to your computer and use it in GitHub Desktop.
Save sindre/3775460 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>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<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 fosm = new L.TileLayer("/tiles/fosm/mapnik/{z}/{x}/{y}.png",
{
attribution: 'Map Data &amp; Map Image &copy; <a href="http://www.openstreetmap.org/">OpenStreetMap</a> &amp; <a href="http://www.fosm.org/">FOSM</a> Contributors. <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC BY-SA 2.0</a>',
maxZoom: 19
});
var fosmnoadmin = new L.TileLayer("/tiles/fosm/mapnik-noadmin/{z}/{x}/{y}.png",
{
attribution: 'Map Data &amp; Map Image &copy; <a href="http://www.openstreetmap.org/">OpenStreetMap</a> & <a href="http://www.fosm.org/">FOSM</a> Contributors. <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC BY-SA 2.0</a>',
maxZoom: 19
});
var osm = 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 nearmap = new L.TileLayer("http://www.nearmap.com/maps/?z={z}&x={x}&y={y}&nml=Vert",
{
attribution: 'PhotoMaps &copy; <a href="http://www.nearmap.com/">NearMap</a>',
maxZoom: 24
});
// give these layers names so users can reference them in the URI
var mapLayers = new Array();
mapLayers['fosm'] = fosm;
mapLayers['osm'] = osm;
mapLayers['fosm-noadmin'] = fosmnoadmin;
mapLayers['nearmap'] = nearmap;
// define the layer control
var layerControlA = new L.Control.Layers({
'OpenStreetMap.org (remote)': osm,
'NearMap PhotoMap (remote)': nearmap,
'FOSM Mapnik (no admin)': fosmnoadmin,
'FOSM Mapnik': fosm
},
{
},
{
collapsed: true
});
var layerControlB = new L.Control.Layers({
'OpenStreetMap.org (remote)': osm,
'NearMap PhotoMap (remote)': nearmap,
'FOSM Mapnik (no admin)': fosmnoadmin,
'FOSM Mapnik': fosm
},
{
},
{
collapsed: true
});
// take the URI hash i.e. #foo from the end of the URL and parse aruments
var uriHash = location.hash.replace(/^#/, "").split(";");
var uriHashHash = {};
for (var i = 0; i < uriHash.length; ++i) {
var kvPair = uriHash[i].split("=");
if (kvPair.length == 2 ) {
var key = kvPair[0];
var val = kvPair[1];
uriHashHash[key] = val;
}
}
// set the map layers we use as defaults based on the URI hash if given
var mapADefaultLayer = fosm;
var mapBDefaultLayer = osm;
if (uriHashHash['mapa'])
if (mapLayers[uriHashHash['mapa']])
mapADefaultLayer = mapLayers[uriHashHash['mapa']];
if (uriHashHash['mapb'])
if (mapLayers[uriHashHash['mapb']])
mapBDefaultLayer = mapLayers[uriHashHash['mapb']];
// make the map objects
var startLocation = new L.LatLng(-33.85, 151.20);
// if the startLocation is given in the URI as an argument, use that instead
if ((uriHashHash['lat']) && (uriHashHash['lon']) &&
(! isNaN(uriHashHash['lat']-0)) && (! isNaN(uriHashHash['lon']-0)))
startLocation = new L.LatLng(uriHashHash['lat'], uriHashHash['lon']);
var startZoom = 10;
// if the zoom is given in the URI as an argument, use that instead
if ((uriHashHash['zoom']) && (uriHashHash['zoom'] >= 0) && (uriHashHash['zoom'] < 25))
startZoom = uriHashHash['zoom'];
mapA = new L.Map('mapA',
{
center: startLocation,
zoom: startZoom,
layers: [mapADefaultLayer]
});
mapB = new L.Map('mapB',
{
center: startLocation,
zoom: startZoom,
layers: [mapBDefaultLayer]
});
mapA.addControl(layerControlA);
mapB.addControl(layerControlB);
// 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">Map A</div>
<div id="mapbTitle" class="title">Map B</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.
-->
<div><img id="cursor" src="cross.png" alt="X"/></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment