compare.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>HDM Compare</title>
   5   <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
   6   <link rel="stylesheet" href="http://yohanboniface.github.io/Leaflet.EditInOSM/Leaflet.EditInOSM.css" />
   7   <script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
   8   <script src="http://mlevans.github.io/leaflet-hash/javascripts/leaflet-hash.js"></script>
   9   <script src="http://yohanboniface.github.io/Leaflet.EditInOSM/Leaflet.EditInOSM.js"></script>
  10   <style type='text/css'>
  11       body { margin:0; padding:0; }
  12       #map-hdm { position:absolute; top:0; bottom:0; width:50%; }
  13       #map-2u { position:absolute; top:0; bottom:0; right: 0; width:50%; }
  14   </style>
  15 </head>
  16 <body>
  17 <div id="content">
  18
  19 <div class='wrapper'>
  20     <div class='layer' id='map-2u'></div>
  21     <div class='layer' id='map-hdm'></div>
  22     <div class="separator">
  23         <div class="before">2U</div>
  24         <div class="after">HDM</div>
  25     </div>
  26 </div>
  27 </div>
  28
  29 <script>
  30 var startPoint = [19.6718, -72.1304];
  31 var mapHDM = L.map('map-hdm', {zoomControl:false}).setView(startPoint, 13);
  32 L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {maxZoom: 20}).addTo(mapHDM);
  33 var map2U = L.map('map-2u', {zoomControl: false,editInOSMControl:true}).setView(startPoint, 13);
  34 L.tileLayer('http://{s}.layers.openstreetmap.fr/2u/{z}/{x}/{y}.png', {maxZoom: 20}).addTo(map2U);
  35 var hashHDM = new L.Hash(mapHDM);
  36 var hash2U = new L.Hash(map2U);
  37 </script>
  38 </body>
  39 </html>