final-map

use this for latest work

by grassed

HTML

<div class="mask">
  <div class="header">
    <h1>The Jungle</h1>
  </div>
  <div class="colleft">
    <div class="col1">
     
<!-- select background image -->
      <div>
        <label> Select Aerial Image:<select id="ImgList">
     <option value="http://www.jhini.in/test/maps/images/background/aerial_2017.jpg">2017</option>
 <option value="http://www.jhini.in/test/maps/images/background/aerial_2016.jpg">2016</option>
 <option value="http://www.jhini.in/test/maps/images/background/aerial_2012.jpg">2012</option>
 <option value="http://www.jhini.in/test/maps/images/background/aerial_2009.jpg">2009</option>
 <option value="http://www.jhini.in/test/maps/images/background/aerial_2004.jpg">2004</option>
 <option value="http://www.jhini.in/test/maps/images/background/aerial_2000.jpg">2000</option>
 <option value="http://www.jhini.in/test/maps/images/background/aerial_1997.jpg">1997</option>
 <option value="http://www.jhini.in/test/maps/images/background/aerial_1994.jpg">1994</option>
 <option value="http://www.jhini.in/test/maps/images/background/aerial_1990.jpg">1990</option>
 <option value="http://www.jhini.in/test/maps/images/background/aerial_1988.jpg">1988</option>
 <option value="http://www.jhini.in/test/maps/images/background/aerial_1983.jpg">1983</option>
 <option value="http://www.jhini.in/test/maps/images/background/aerial_1981.jpg">1981</option>
 <option value="http://www.jhini.in/test/maps/images/background/aerial_1980.jpg">1980</option>
 <option value="http://www.jhini.in/test/maps/images/background/aerial_1975.jpg">1975</option>
 <option value="http://www.jhini.in/test/maps/images/background/aerial_1969.jpg">1969</option>
 <option value="http://www.jhini.in/test/maps/images/background/aerial_1965.jpg">1965</option>
 <option value="http://www.jhini.in/test/maps/images/background/aerial_1961.jpg">1961</option>
</select>
</label>
      </div>
      <div class="b">
      <h3>
      Select Overlay
      </h3>
        <a class="toggle button2" id="button1"...

CSS

/* The container */
.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.mask {
  position: relative;
  /*overflow: hidden; */
  margin: 0px auto;
  width: 100%;
}

.header {
  float: left;
  width: 100%;
}

.colleft {
  position: relative;
  width: 100%;
  right: 29%;
}

.col1 {
  position: relative;
  overflow: hidden;
  float: left;
  width: 27%;
  left: 101%;
}

.col2 {
  position: relative;
  /*overflow: hidden;*/
  float: left;
  width: 69%;
  left: 3%;
}

.footer {
  float: left;
  width: 100%;
}

body {
  padding: 0px;
  margin: 0px;
  font-size: 90%;
}

* {
  margin: 0;
  padding: 0;
}

.imgbox {
  display: grid;
  height: 100%;
}

.center-fit {
  max-width: 100%;
  max-height: 100vh;
  margin:...

JavaScript

// toggle element
var show = function(elem) {
  elem.style.display = 'block';
};
var hide = function(elem) {
  elem.style.display = 'none';
};
var toggle = function(elem) {
  // If the element is visible, hide it
  if (window.getComputedStyle(elem).display === 'block') {
    hide(elem);
    return;
  }
  // Otherwise, show it
  show(elem);
};
// Listen for click events
document.addEventListener('click', function(event) {
  // Make sure clicked element is our toggle
  if (!event.target.classList.contains('toggle')) return;
  // Prevent default link behavior
  event.preventDefault();
  // Get the content
  var content = document.querySelector(event.target.hash);
  if (!content) return;
  // Toggle the content
  toggle(content);
}, false);
// end toggle element

//change button color
$(function() {
  $('.button2').on('click', function() {
    $(this).toggleClass('myClass');
  });
});


// dropdown
function setImg() {
  var img = document.getElementById("background_image");
  img.src = this.value;
  return false;
}
document.getElementById("ImgList").onchange = setImg;


// checkbox
function toggleVisibility(id) {
   var el = document.getElementById(id);
    
   if (el.style.visibility=="visible") { 
          el.style.visibility="hidden";
     }
     else {
          el.style.visibility="visible";
     }
 }