Widget:MapLegend

From Dark and Light Wiki
Jump to: navigation, search
<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>citys</label>
<input type="checkbox" id="map-toggle--" class="toggle-one" value="" checked>
     <label for="map-toggle--"></label>

<script> RLQ.push(function () {

 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'
 }).appendTo('#content');
 $('.map-container').
   each(function () {
     var pos = $(this).offset(),
       top = pos.top,
       left = pos.left,
       width = $(this).width(),
       height = $(this).height(),
       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 lon = ((e.clientX + $(document).scrollLeft() - left) * widthCoords / width + borderL).toFixed(1),
           lat = ((e.clientY + $(document).scrollTop() - top) * heightCoords / height + borderT).toFixed(1);
         $(tooltipCoords).text(lat + ', ' + lon).css({
           left: e.clientX + 20,
           top: e.clientY
         }).show();
       }).
       mouseleave(function () {
         $(tooltipCoords).hide();
       });
   });

}); </script>