Widget:MapLegend

	<input type="checkbox" id="map-toggle-all-" class="toggle-all" checked> <label for="map-toggle-all-">Turn all on or off</label>
	<input type="checkbox" id="map-toggle-cave-" class="toggle-cave" checked> <label for="map-toggle-cave-">Turn cave on or off</label>
	<label>Obelisks</label>
<label></label>
	<input type="checkbox" id="map-toggle--" class="toggle-one" value="" checked> <label for="map-toggle--"></label>
<label>Resources</label>
	<input type="checkbox" id="map-toggle--" class="toggle-one" value="" checked> <label for="map-toggle--"></label>

<script> RLQ.push(['jquery', function () {

 var isFandomDesktop = document.body.classList.contains('skin-fandomdesktop');
 var id = ;
 function setVisibility(type, on) {
   if (on) {
     $('#map-' + id).removeClass('hide-' + type);
   } else {
     $('#map-' + id).addClass('hide-' + type);
   }
 }
 $('#map-legend-' + id).on('change', 'input.toggle-one', function () {
   setVisibility(this.value, this.checked);
 });
 $('#map-toggle-all-' + id).on('click', function () {
   $('#map-legend-' + id).find('input.toggle-one').prop('checked', this.checked).each(function () {
     setVisibility(this.value, this.checked);
   });
 });
 $('#map-toggle-cave-' + id).on('click', function () {
   setVisibility('cave', this.checked);
 });

 // shows coords near cursor

var tooltipCoords = $('

').css({

   textAlign: 'center',
   backgroundColor: 'rgba(255, 255, 255, 0.7)',
   textShadow: '1px 1px white',
   color: 'black',
   padding: '3px',
   minWidth: '60px',
   position: 'fixed',
   display: 'none',
   whiteSpace: 'nowrap',
   border: '1px solid black',
   zIndex: 6,
 }).appendTo(isFandomDesktop ? '#content' : '#bodyContent');

 $('.map-container').
   each(function () {
     var $this = $(this),
       widthCoords = parseFloat($this.data('borderright')) - parseFloat($this.data('borderleft')),
       heightCoords = parseFloat($this.data('borderbottom')) - parseFloat($this.data('bordertop')),
       borderT = parseFloat($this.data('bordertop')),
       borderL = parseFloat($this.data('borderleft'));

     $this.
       mousemove(function (e) {
         var pos = $this.offset(),
           top = pos.top,
           left = pos.left,
           lon = ((e.clientX + $(document).scrollLeft() - left) * widthCoords / $this.width() + borderL).toFixed(1),
           lat = ((e.clientY + $(document).scrollTop() - top) * heightCoords / $this.height() + borderT).toFixed(1);

         $(tooltipCoords).text(lat + ', ' + lon).css({
           left: e.clientX + 20,
           top: e.clientY
         }).show();
       }).
       mouseleave(function () {
         $(tooltipCoords).hide();
       });
   });

}]); </script>