You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

391 lines
9.9 KiB
JavaScript

//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();
}
});