Responsive image map resizing with imageMapster: do I misunderstand what scaleMap does?

Question

When an image is styled with CSS to grow or shrink to occupy available space in the container DIV, what steps must be taken to keep the image-map area coordinates in sync with the changing image size?

img {
    /*  border: 2px dotted red; */
    width:100% !important;
    max-width: none !important;
    height: auto !important;
}
div {width: 100%; height: auto}

Does the plugin's scaleMap: true property handle this scenario? Or must additional steps be taken? I haven't been able to get it to work using scaleMap alone, but perhaps I'm misunderstanding what scaleMap does. Does it handle situations where the user drags the browser window wider or narrower, and changes in orientation on a tablet device?

http://jsfiddle.net/juvyh/1309/

Answer 1

The documentation is not exactly clear. scaleMap will scale the imagemap to match the size of the image as initially rendered. So using css like width: 200px; height: 400px; to present an image that's not actually that size will work fine, and resize the image map.

However, it doesn't handle user-initiated scaling events after the page has been initially loaded. So css like width: 100%; isn't a good idea. It will adjust the image map on the first load, but then nothing will happen if the user resizes the viewport. The intent was to deal with images that are not displayed at their native sizes, rather than responsive design.

However, you can use ImageMapster in a responsive design, but you need to tell it when to resize an image. There's an example on the "demos" page under "Fiddle with it":

"How do I get the imagemap to adjust to the size of the browser window automatically?

• Resize the map when the user resizes

The code basically captures & buffers resize events, and then calls ImageMapster's resize method in response. This will probably become a native feature in the next version, so you can just use proportional css; for now you can just copy the technique in the example.

Answer 2

Only an addedum to orginal answer (that is absolutly right).

Try to put a image size limiter that receive the original size of the map when it's loaded. This "trick" avoid overscaling the original image in certain circumstance. For example if the map is embedded in a column of a WP builder...

Some like this one:

 // Resize the areamap to fit within the boundaries provided
        var resizeTime   = 100;     // total duration of the resize effect, 0 is instant
        var resizeDelay  = 100; 
        var originalMaxWidthMap  = image.outerWidth(); // addedum
        var originalMaxHeightMap = image.outerHeight(); // addedum
        function resize(maxWidth,maxHeight) {
            let imgWidth = image.width(),
            imgHeight = image.height(),
            newWidth=0,
            newHeight=0;

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

Answer 3

exist one solution for maintance original form

   var time = 300;     
   var resizeDelay = 100;   
   var savedWidth = $('img').width();
   var savedHeigth = $('img').height(); 
   var savedWindowWidth = $(window).width();
   var savedWindowHeight = $(window).height();
   function resize(newWinWidth, newWinHeight) {          
       var newImgWidth = 0;
       var newImgHeight = 0;
       newImgWidth = (newWinWidth * savedWidth) / savedWindowWidth;  
       if($(window).height< savedWindowHeight){
           newImgHeight = (newWinHeight * savedHeigth) / savedWindowHeight;
       }
       if (savedWindowWidth === $j(window).width()) {
           $('img').mapster('resize', savedWidth, savedHeigth, time);
       }
       else {
           $('img').mapster('resize', newImgWidth, newImgHeight, time);
       }
   }
   function onWindowResize() {
       var curWidth = $j(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);