romania1910.js

var romania_baseoverlay = null;

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

  var hash = new L.Hash(map);
  
  var Esri_NatGeoWorldMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}', {
    attribution: 'Tiles &copy; Esri &mdash; National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC',
    maxZoom: 16
  }).addTo(map);
  
  var USGS_USImageryTopo = L.tileLayer.fallback('https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryTopo/MapServer/tile/{z}/{y}/{x}', {
    maxZoom: 20,
    attribution: 'Tiles courtesy of the <a href="https://usgs.gov/">U.S. Geological Survey</a>'
  });
  
  var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
  });

  romania_baseoverlay = L.tileLayer('layerdata/romania1910/{z}/{x}/{-y}.png', {
    attribution: 'Third Military Survey of the Austro-Hungarian Empire sourced at The Digital Library of Karlovy University: <a href="https://kramerius.cuni.cz/u">https://kramerius.cuni.cz/u</a>'
  }).addTo(map);

  var style1 = {
    "color": "#F4630E",
    "weight": 6,
  };
  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-yellow.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/Romania%20Jewish%20communities%201910_.geojson", {}).addTo(map);
  var geojsonLayer2 = new L.GeoJSON.AJAX("geojson/Romania%20border%201910_.geojson", { style: style1 }).addTo(map);

  var baseMaps = {
    "Esri.NatGeoWorldMap": Esri_NatGeoWorldMap,
    "OpenStreetMap": osm,
    "USGS.USImageryTopo": USGS_USImageryTopo,
  };

  var overlayMaps = {
    "General": {
      "Base": romania_baseoverlay,
    },
    "Romania": {
      "Romania Jewish communities": geojsonLayer1,
      "Romania border": geojsonLayer2,
    },
  };

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

  // Really hacky opacity slider.
  $("span:contains('Base')").html(' Base<br/><input id="slide" type="range" min="0" max="1" step="0.1" value="1.0" oninput="romania_baseoverlay.setOpacity(this.value)">');

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

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

});