D3 Examples - Side by side Leaflet (Toner comparison)

xxxxxxxxxx
 
<html xmlns="https://www.w3.org/1999/xhtml">
  <!--
    This file is licenced CC0 https://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="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
​
      (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
      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>
​
​
    