issue.xpub.nl/08/Research/ciao.urca.tv/leaf_structure.js

//map settings
var map = L.map('map', { crs: L.CRS.Simple });
map.fitBounds( [[0,0], [1000,1000]] );
map.setView( [0, 0], 0);

var hash = new L.Hash(map);

// var popup = L.popup();

// function onMapClick(e) {
//     popup
//       .setLatLng(e.latlng)
//       .setContent(e.latlng.toString())
//       .openOn(map);
//   }

// map.on('click', onMapClick);

//control size for each zoom's layer
var ss = document.getElementsByClassName("subsub");
var texts = document.getElementsByClassName("text");
var fonts = document.getElementsByClassName("themes");
var sfonts = document.getElementsByClassName("sthemes");
var pdfs = document.getElementsByName("pdf")
var videos = document.getElementsByName("yt");
var vis = document.getElementsByName("vis");
var visb = document.getElementsByName("visb");
var xmap = document.getElementsByName("xpubmap");

function layer1() {
  for (var i = 0; i < texts.length; i++) {   //text
    var element = texts[i];
    element.style.fontSize = "3px";
  }

  for (var i = 0; i < fonts.length; i++) {   //themes
    var element = fonts[i];
    element.style.fontSize = "5px";
  }

  for (var i = 0; i < sfonts.length; i++) {   //subthemes
    var element = sfonts[i];
    element.style.fontSize = "3px";
  }  

  for (var i = 0; i < ss.length; i++) {   //subsub
    var element = ss[i];
    element.style.fontSize = "1px";
  }

  for (var i = 0; i < videos.length; i++) {  //videos
    var element = videos[i];
    element.width = "20";
    element.height = "15";
  }

  for (var i = 0; i < pdfs.length; i++) {    //pdfs
    var element = pdfs[i];
        element.width = "7";
        element.height = "9";
  }

  for (var i = 0; i < vis.length; i++) {    //pdfs
    var element = vis[i];
        element.width = "15";
        element.height = "11";
  }

  for (var i = 0; i < visb.length; i++) {    //pdfs
    var element = visb[i];
        element.width = "28";
        element.height = "20";
  }

  for (var i = 0; i < xmap.length; i++) {  //videos
    var element = xmap[i];
    element.width = "30";
    element.height = "25";
  }

}

function layer2() {
  for (var i = 0; i < texts.length; i++) {     //text
    var element = texts[i];
    element.style.fontSize = "5px";
  }

  for (var i = 0; i < fonts.length; i++) {     //themes
    var element = fonts[i];
    element.style.fontSize = "13px";
  }

  for (var i = 0; i < sfonts.length; i++) {    //subthemes
    var element = sfonts[i];
    element.style.fontSize = "6px";
  }  

  for (var i = 0; i < ss.length; i++) {        //subsub
    var element = ss[i];
    element.style.fontSize = "2px";
  }

  for (var i = 0; i < videos.length; i++) {    //videos
    var element = videos[i];
    element.width = "40";
    element.height = "30";
  }

  for (var i = 0; i < pdfs.length; i++) {     //pdfs
    var element = pdfs[i];
    element.width = "10";
    element.height = "14";
  }

  for (var i = 0; i < vis.length; i++) {      //img small
    var element = vis[i];
        element.width = "28";
        element.height = "20";
  }

  for (var i = 0; i < visb.length; i++) {     //img big
    var element = visb[i];
        element.width = "56";
        element.height = "40";
  }

  for (var i = 0; i < xmap.length; i++) {     //maps
    var element = xmap[i];
    element.width = "60";
    element.height = "55";
  }

}

function layer3() {
    for (var i = 0; i < texts.length; i++) {    //text
    var element = texts[i];
    element.style.fontSize = "11px";
  }

  for (var i = 0; i < fonts.length; i++) {     //themes
    var element = fonts[i];
    element.style.fontSize = "20px";
  }

  for (var i = 0; i < sfonts.length; i++) {    //subthemes
    var element = sfonts[i];
    element.style.fontSize = "13px";
  }  

  for (var i = 0; i < ss.length; i++) {        //subsub
    var element = ss[i];
    element.style.fontSize = "7px";
  }

  for (var i = 0; i < videos.length; i++) {    //videos
    var element = videos[i];
    element.width = "100";
    element.height = "80";
  }

  for (var i = 0; i < pdfs.length; i++) {      //pdfs
    var element = pdfs[i];
    element.width = "20";
    element.height = "24";
  }  
    for (var i = 0; i < vis.length; i++) {     //img 1
    var element = vis[i];
        element.width = "56";
        element.height = "40";
  }
  for (var i = 0; i < visb.length; i++) {      //img 2
    var element = visb[i];
        element.width = "111";
        element.height = "82";
  }  

  for (var i = 0; i < xmap.length; i++) {     //map
    var element = xmap[i];
    element.width = "150";
    element.height = "140";
  }
}

function layer4() {
  for (var i = 0; i < texts.length; i++) {     //text
    var element = texts[i];
    element.style.fontSize = "17px";
  }

  for (var i = 0; i < fonts.length; i++) {     //themes
    var element = fonts[i];
    element.style.fontSize = "30px";
  }

  for (var i = 0; i < sfonts.length; i++) {    //subthemes
    var element = sfonts[i];
    element.style.fontSize = "16px";
  }  

  for (var i = 0; i < ss.length; i++) {        //subsub
    var element = ss[i];
    element.style.fontSize = "8px";
  }


  for (var i = 0; i < videos.length; i++) {    //videos    
    var element = videos[i];
    element.width = "210";
    element.height = "160";
  }
  for (var i = 0; i < pdfs.length; i++) {      //pdfs
    var element = pdfs[i];
    element.width = "40";
    element.height = "50";
  }
  for (var i = 0; i < vis.length; i++) {     //img 1   
    var element = vis[i];
        element.width = "111";
        element.height = "82";
  }
  for (var i = 0; i < visb.length; i++) {     //img 2 
    var element = visb[i];
        element.width = "297";
        element.height = "210";
  }  

  for (var i = 0; i < xmap.length; i++) {      //map
    var element = xmap[i];
    element.width = "250";
    element.height = "240";
  }
}
function layer5() {
  for (var i = 0; i < fonts.length; i++) {    //themes
    var element = fonts[i];
    element.style.fontSize = "25px";
  }

  for (var i = 0; i < sfonts.length; i++) {   //subthemes
    var element = sfonts[i];
    element.style.fontSize = "25px";
  }  

  for (var i = 0; i < ss.length; i++) {       //subsub
    var element = ss[i];
    element.style.fontSize = "15px";
  }

  for (var i = 0; i < videos.length; i++) {    //videos
    var element = videos[i];
    element.width = "360";
    element.height = "300";
  }
  for (var i = 0; i < pdfs.length; i++) {      //pdfs
    var element = pdfs[i];
    element.width = "58";
    element.height = "70";
  }
  for (var i = 0; i < vis.length; i++) {     //img 1  
    var element = vis[i];
        element.width = "297";
        element.height = "210";
  }

  for (var i = 0; i < visb.length; i++) {     //img 2 
    var element = visb[i];
        element.width = "600";
        element.height = "424";
  } 

  for (var i = 0; i < xmap.length; i++) {     //map
    var element = xmap[i];
    element.width = "600";
    element.height = "590";
  }
    
}

function layer6() {
  for (var i = 0; i < texts.length; i++) {     //text
    var element = texts[i];
    element.style.fontSize = "35px";
  }

  for (var i = 0; i < fonts.length; i++) {     //themes
    var element = fonts[i];
    element.style.fontSize = "90px";
  }

  for (var i = 0; i < sfonts.length; i++) {    //subthemes
    var element = sfonts[i];
    element.style.fontSize = "45px";
  }  

  for (var i = 0; i < ss.length; i++) {        //subsub
    var element = ss[i];
    element.style.fontSize = "20px";
  }
  for (var i = 0; i < videos.length; i++) {    //videos
    var element = videos[i];
    element.width = "460";
    element.height = "400";
  }
  for (var i = 0; i < pdfs.length; i++) {      //pdfs
    var element = pdfs[i];
    element.width = "76";
    element.height = "90";
  }
    for (var i = 0; i < vis.length; i++) {     //img 1  
    var element = vis[i];
        element.width = "600";
        element.height = "424";
  }  

  for (var i = 0; i < visb.length; i++) {      //img 2 
    var element = visb[i];
        element.width = "1131";
        element.height = "800";
  }  

  for (var i = 0; i < xmap.length; i++) {      //map
    var element = xmap[i];
    element.width = "1100";
    element.height = "1000";
  }
 
}

function layer7() {
  for (var i = 0; i < texts.length; i++) {     //text
    var element = texts[i];
    element.style.fontSize = "45px";
  }

  for (var i = 0; i < fonts.length; i++) {     //themes
    var element = fonts[i];
    element.style.fontSize = "90px";
  }

  for (var i = 0; i < sfonts.length; i++) {   //subthemes
    var element = sfonts[i];
    element.style.fontSize = "45px";
  }  

  for (var i = 0; i < ss.length; i++) {       //subsub
    var element = ss[i];
    element.style.fontSize = "30px";
  }

  for (var i = 0; i < videos.length; i++) {    //videos
    var element = videos[i];
    element.width = "700";
    element.height = "600";
  }
  for (var i = 0; i < pdfs.length; i++) {      //pdfs
    var element = pdfs[i];
    element.width = "76";
    element.height = "90";
  }
    for (var i = 0; i < vis.length; i++) {     //img 1  
    var element = vis[i];
        element.width = "1131";
        element.height = "800";
  }  

  for (var i = 0; i < visb.length; i++) {       //img 2 
    var element = visb[i];
        element.width = "1400";
        element.height = "990";
  }     
}

map.on('zoomend', function(ev){
    if (map.getZoom() == 0) {
      layer1();
    } else if (map.getZoom() == 1) { 
      layer2();
    } else if (map.getZoom() == 2) { 
      layer3();
    } else if (map.getZoom() == 3) { 
      layer4();
    } else if (map.getZoom() == 4){ 
      layer5();
    } else if (map.getZoom() == 5){
      layer6();
    } else {
      layer7();
    }
});