Side by side Leaflet (Toner comparison)

Side by side leaflet (Toner comparison)

Comparison of Stamen Design's previous Toner style with new Toner data as of 2014.

Borrowed from Andrew Harvey's gist here and his live demo.

Extended with Leaflet-hash by Michael Evans

Adapted to function on bl.ocks.org by Alan McConchie

<html xmlns="https://www.w3.org/1999/xhtml">
  
  <head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <title>Leaflet Maps Side by Side</title>
    <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" type="text/css" />
    <style type="text/css">
        body {
            margin: 0;
            font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
        }

/* 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;
        }

/* position the individual title bars */
        #mapATitle {
            width: 50%;
        }

#mapBTitle {
            width: 50%;
            left: 50%;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.1/leaflet.min.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/turban/leaflet.sync/l.map.sync.js" type="text/javascript"></script>
    <script src="zepto.min.js" type="text/javascript"></script>
    <script src="prototype.js" type="text/javascript"></script>
    <script src="leaflet-hash.js" type="text/javascript"></script>
    <script src="l.control.geosearch.js" type="text/javascript"></script>
    <script src="l.geosearch.provider.nominatim.js" type="text/javascript"></script>
    <link rel="stylesheet" href="l.geosearch.toner.css" type="text/css" />
    <script type="text/javascript">
var mapA;
var mapB;
window.onload = function init(){
  // predefined map layers

var provider = "https://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png";

var mediaQuery = "(-webkit-min-device-pixel-ratio: 1.5),\
                    (min--moz-device-pixel-ratio: 1.5),\
                    (-o-min-device-pixel-ratio: 3/2),\
                    (min-resolution: 1.5dppx)";

if (window.devicePixelRatio > 1 ||
      (window.matchMedia && window.matchMedia(mediaQuery).matches)) {
    // replace the last "." with "@2x."
    provider = provider.replace(/\.(?!.*\.)/, "@2x.")
  }

var tonernew = new L.TileLayer(provider,
    {
      attribution: 'Map tiles by <a href="https://stamen.com">Stamen Design</a>, under <a href="https://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="https://openstreetmap.org">OpenStreetMap</a>, under <a href="https://opendatacommons.org/licenses/odbl/">ODbL</a>.',
      maxZoom: 18
    });

var tonerold = new L.TileLayer("https://tilefarm.stamen.com/toner/{z}/{x}/{y}.png",
    {
      attribution: 'Map tiles by <a href="https://stamen.com">Stamen Design</a>, under <a href="https://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="https://openstreetmap.org">OpenStreetMap</a>, under <a href="https://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.',
      maxZoom: 18
    });

// give these layers names so users can reference them in the URI
  var mapLayers = new Array();
  mapLayers['tonernew'] = tonernew;
  mapLayers['tonerold'] = tonerold;

var mapADefaultLayer = tonerold;
  var mapBDefaultLayer = tonernew;

// make the map objects

var startLocation = new L.LatLng(0,0);

var startZoom = 2;

if (!location.hash) {
    location.hash = "#2/0/0";
  }

mapA = new L.Map('mapA',
    {
      //center: startLocation,
      //zoom: startZoom,
      layers: [mapADefaultLayer]
    });
  mapB = new L.Map('mapB',
    {
      //center: startLocation,
      //zoom: startZoom,
      layers: [mapBDefaultLayer],
      zoomControl: false
    });

var hash = new L.Hash(mapA);

/*
  new L.Control.GeoSearch({
    provider: new L.GeoSearch.Provider.Nominatim(),
    showMarker: false
  }).addTo(mapA);
*/

mapA.sync(mapB);
  mapB.sync(mapA);

// 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">Toner old</div>
    <div id="mapbTitle" class="title">Toner 2014</div>

<!--
      The following license applies to the following cross.png file originally from
      https://gitorious.org/opensuse/art/blobs/master/cursors/dmz/pngs/32x32/cross.png

This work is licenced under the Creative Commons Attribution-Share Alike 3.0
      United States License. To view a copy of this licence, visit
      https://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>

Modified http://cdn.leafletjs.com/leaflet-0.7.1/leaflet-src.js to a secure url

Updated missing url https://cdn.rawgit.com/turban/Leaflet.Sync/master/L.Map.Sync.js to https://cdn.jsdelivr.net/gh/turban/leaflet.sync/l.map.sync.js

https://cdn.leafletjs.com/leaflet-0.7.1/leaflet-src.js

https://cdn.rawgit.com/turban/Leaflet.Sync/master/L.Map.Sync.js