Leaflet warped-to-iframe

For update marker position

by Magnus Sälgö

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css">
<script src="https://raw.githubusercontent.com/digidem/leaflet-side-by-side/gh-pages/leaflet-side-by-side.js"></script>
<script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css">
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<h1>POC test koppla gamla kartor till modern karta i Leaflet</h1>
<ll>
<li><a target=_blank href="https://github.com/salgo60/WikidataBygdeband/issues/9">WikidataBygdeband Issue 9</a> Fundering stöd för gamla kartor i Bygdeband</li>
<li>Använder <a target=_blank href="https://github.com/wikimaps-dev/warped-to-iframe">wikimaps-dev/warped-to-iframe</a> by <a target=_blank href=https://github.com/Abbe98>Abbe</a> se <a href="https://www.youtube.com/watch?v=BWq_j6NWOic" target=_blank>video</a> nedan. Se även  warper.wmflabs.org <a href="https://warper.wmflabs.org/maps/geosearch" target=_blank >Exempel sök kartor</a></li>
  <li><a href="https://commons.wikimedia.org/wiki/Category:Georeferenced_maps_in_Wikimaps_Warper" target=_blank>Georeferenced maps in Wikimaps Warper in Wikicommons</a><br /></li>
  <li>version 0.1 enkel variant och hämtar bara <a hrtef="https://github.com/wikimaps-dev/warped-to-iframe target=_blanked>warped-to-iframe"</a> Hårdkodade nr på kartorna. </li>
  <li>Saker man skulle kunna ha 
    <ol>
    <li><a href="http://lab.digital-democracy.org/leaflet-side-by-side/" target=_blank>Split screen</a> skapat med  <a href="https://github.com/digidem/leaflet-side-by-side" target=_blank> leaflet-side-by-side</a> </li>
      <li>Hämta kartor via spatial sökning dvs. nära mig....se exempel <a href="https://warper.wmflabs.org/maps/geosearch" target=_blank >warper.wmflabs</a></li>
     ...

CSS

body {
   color: #444;
   background: #e2ecff;
   /* fallback for old browsers */
   background: -webkit-linear-gradient(to left, #9ab8f4, #e2ecff);
   /* Chrome 10-25, Safari 5.1-6 */
   background: linear-gradient(to left, #9ab8f4, #e2ecff);
   /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
   font-family: 'Dosis', sans-serif;
   background-repeat: no-repeat;
   background-size: cover;
   min-height: 100vh;
   font-size: 16px;
   padding-left: 10px;
 }
iframe{
width: 80%; height: 500px }

 #map {
        width: 100%;
    }
 #video {
        position: relative;
        top: 40px;

    }
.Extra {
  font-size: 12px;
    } 
.Wikicommon {
    }
.ThisMap {
    }    
 .selectList {
        font-size: 12px;
        padding-left: 10px;
        padding-top: 10px;
        padding-bottom 10px;
    }   


    
li a:hover {
   background: lightgreen;
 }

JavaScript

$(function(){ 
	console.log("DOM ready")
	console.log(top.location.search)
});

function valMapList() {
  var pageid = document.getElementById("mapList").value;
  
  url = "https://tools.wmflabs.org/warped-to-iframe/map.php?opacity=true&lang=sv&pageid=" + pageid
  console.log(url);
  document.getElementById('mapFrame').src = url;
  urlcommons = "<a target=_blank href='https://commons.wikimedia.org/?curid=" + pageid + "'>Map on Wikicommons</a>"
$('#Commons').html(urlcommons)  
}

function valDjList() {
  var pageid = document.getElementById("selectListD").value;
  
  url = "https://tools.wmflabs.org/warped-to-iframe/map.php?opacity=true&lang=sv&pageid=" + pageid
  console.log(url);
  document.getElementById('mapFrame').src = url;
  urlcommons = "<a target=_blank href='https://commons.wikimedia.org/?curid=" + pageid + "'>Map on Wikicommons</a>"
	$('#Commons').html(urlcommons)  
  }

function valLjungList() {
  var pageid = document.getElementById("selectListLj").value;
  
  url = "https://tools.wmflabs.org/warped-to-iframe/map.php?opacity=true&lang=sv&pageid=" + pageid
  console.log(url);
  document.getElementById('mapFrame').src = url;
  urlcommons = "<a target=_blank href='https://commons.wikimedia.org/?curid=" + pageid + "'>Map on Wikicommons</a>"
  $('#Commons').html(urlcommons)  
}

</script>