bohemia1865.js

var bohemia_baseoverlay = null;

$(document).ready(function() {
  // Initialize the map on the "map" div with a given center and zoom.
  var map = L.map('map', {
    center: [49.792, 16.210],
    zoom: 7
  });
  
  map.attributionControl.addAttribution('<a href="http://easteurotopo.org/">Topographic Maps of Eastern Europe</a>');

  var hash = new L.Hash(map);

  var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
  }).addTo(map);

  var stamen_watercolor = L.tileLayer('http://tile.stamen.com/watercolor/{z}/{x}/{y}.png', {
    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>'
  });

  var stamen_toner = L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>'
  });

  bohemia_baseoverlay = L.tileLayer('layerdata/bohemia1865/{z}/{x}/{-y}.png', {
    attribution: 'Historical map tiles by <a href="https://goobi-viewer.univie.ac.at/viewer/!metadata/AC03853020/1/LOG_0000/">University of Vienna</a>'
  }).addTo(map);

  mahren_baseoverlay = L.tileLayer('layerdata/mahren/{z}/{x}/{-y}.png', {
    attribution: 'Historical map tiles by <a href="http://kramerius.cuni.cz/uk/view/uuid:44ddfd32-8fe4-11ec-b68f-fa163e4ea95f?page=uuid:478da910-8fe4-11ec-b68f-fa163e4ea95f">Special Karte der Markgrafschaft Mæhren mit den Antheilen des</a>'
  }).addTo(map);

  var style1 = {
    "color": "#F4630E",
    "weight": 3,
  };
  var style2 = {
    "color": "#0F0FDA",
    "weight": 3,
  };
  var style3 = {
    "color": "#F10683",
    "weight": 3,
  };
  var style4 = {
    "color": "#F50B4D",
    "weight": 3,
  };
  var style5 = {
    "color": "#F56905",
    "weight": 3,
  };
  var style6 = {
    "color": "#3410E9",
    "weight": 3,
  };
  var style7 = {
    "color": "#8A2BE2",
    "weight": 3,
  };
  var yellowIcon = new L.Icon({
    iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
    shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34],
    shadowSize: [41, 41]
  });

  var geojsonLayer1 = new L.GeoJSON.AJAX("geojson/Jewish communities of Bohemia_1900.geojson", {}).addTo(map);
  var geojsonLayer2 = new L.GeoJSON.AJAX("geojson/mahren_jewish_communities.geojson", {
    pointToLayer: function(geoJsonPoint, latlng) {
      return L.marker(latlng, { icon: yellowIcon });
    },
  }).addTo(map);

  var baseMaps = {
    "Stamen Toner": stamen_toner,
    "Stamen Watercolor": stamen_watercolor,
    "OpenStreetMap": osm,
  };

  var overlayMaps = {
    "General": {
      "General Karte Konigreiches Bohmen 1865": bohemia_baseoverlay,
      "Karte Marksgraftshaft von Mahren": mahren_baseoverlay,
    },
    "Jews sites": {
      "Jewish sites in Bohemia": geojsonLayer1,
      "Jewish sites of Moravia": geojsonLayer2,
    },
  };

  L.control.groupedLayers(baseMaps, overlayMaps, {collapsed:false}).addTo(map);

  // Really hacky opacity slider.
  $("span:contains('General Karte Konigreiches Bohmen 1865')").html(' General Karte Konigreiches Bohmen 1865<br/><input id="slide" type="range" min="0" max="1" step="0.1" value="1.0" oninput="bohemia_baseoverlay.setOpacity(this.value)">');
  $("span:contains('Karte Marksgraftshaft von Mahren')").html(' Karte Marksgraftshaft von Mahren<br/><input id="slide" type="range" min="0" max="1" step="0.1" value="1.0" oninput="mahren_baseoverlay.setOpacity(this.value)">');

  $('.leaflet-control-layers').hide();
  $('.leaflet-control-layers').css('top','30px');

  btn.onclick = function() {
    $('.leaflet-control-layers').toggle();
  }

  // create notes box.
  const notesBox = L.control({ position: "topleft" });
  notesBox.onAdd = function () {
    let div = L.DomUtil.create("div", "notes");
    return div;
  };
  notesBox.addTo(map);
  let notes = document.querySelector(".notes");
  // Add tab buttons.
  notes.innerHTML = "<div class=\"tab\"><button class=\"tablinks\" onclick=\"openTab(event, 'notes-1')\">Notes</button><!--<button class=\"tablinks\" onclick=\"openTab(event, 'notes-2')\">Another tab</button>--></div>";
  // Add first tab content.
  notes.innerHTML += "<div id=\"notes-1\" class=\"tabcontent\"><p>Tab 1 content.</p></div>";
  // Add second tab content.
  // notes.innerHTML += "<div id=\"notes-2\" class=\"tabcontent\"><p>Tab 2 content.</p></div>";

});