ImageMapster: Manually resize when browser resizes

by Barry Schnell

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/imagemapster/1.6.0/jquery.imagemapster.min.js"></script>
<div class="content">
  <p>This demo shows how you can manually adjust the map when the browser window resizes. Because there is a certain amount of work involved, we want to wait until the window isn't changing size any more to actually call the resize.</p>

  <p>You can adjust the <i>resizeTime</i> and <i>resizeDelay</i> variables in this example to change how responsive it will be to resize events. Shorter time are more responsive, but can be processor intensive, and might not work well in older browsers.</p>
</div>
<img src="https://raw.githubusercontent.com/jamietre/ImageMapster/main/examples/images/usa_map_720.png" usemap="#usa" style="width:100%;">

<map id="usa_image_map" name="usa">
  <area href="#" state="TX" full="Texas" shape="poly"...

CSS

.content {
  padding: 6px;
  font-size: 13px;
  font-family: 'Arial', 'Helvetica';
}

p {
  padding-bottom: 10px;
}

JavaScript

var resizeTime = 100; // total duration of the resize effect, 0 is instant
var resizeDelay = 100; // time to wait before checking the window size again
// the shorter the time, the more reactive it will be.
// short or 0 times could cause problems with old browsers.

$('img').mapster({
  mapKey: 'state'
});

// Resize the map to fit within the boundaries provided

function resize(maxWidth, maxHeight) {
  var image = $('img'),
    imgWidth = image.width(),
    imgHeight = image.height(),
    newWidth = 0,
    newHeight = 0;

  if (imgWidth / maxWidth > imgHeight / maxHeight) {
    newWidth = maxWidth;
  } else {
    newHeight = maxHeight;
  }
  image.mapster('resize', newWidth, newHeight, resizeTime);
}

// Track window resizing events, but only actually call the map resize when the
// window isn't being resized any more

function onWindowResize() {

  var curWidth = $(window).width(),
    curHeight = $(window).height(),
    checking = false;
  if (checking) {
    return;
  }
  checking = true;
  window.setTimeout(function() {
    var newWidth = $(window).width(),
      newHeight = $(window).height();
    if (newWidth === curWidth &&
      newHeight === curHeight) {
      resize(newWidth, newHeight);
    }
    checking = false;
  }, resizeDelay);
}

$(window).bind('resize', onWindowResize);