Instantly share code, notes, and snippets.

Embed
What would you like to do?
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>
@kingstakh

This comment has been minimized.

kingstakh commented Apr 11, 2014

How works HashUri? How call this function "take the URI hash i.e. #foo from the end of the URL and parse aruments"?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment