缩放图像和标记缩放

Question

I have an image (of a country) that acts like a map. On this image I've placed city markers. I need to zoom in/out the image, but keep the markers in same place.

I'm scaling the image with this:

var $map = $('#map-img'),
    $mapW = $map.width(),
    $mapH = $map.height();

$(document).on('click', '.zoom', function(e){
    e.preventDefault();

    var $this = $(this),
        type,
        scale = 1,
        scale_factor = 0.125,


    //css transform map
    $map.css({
        '-moz-transform':  'scale(' + scale + ')',
        '-webkit-transform':   'scale(' + scale + ')',
        '-o-transform':  'scale(' + scale + ')',
        '-ms-transform':  'scale(' + scale + ')',
        'transform':  'scale(' + scale + ')'
    });

    // recalculate width and height of map
    $map_data = $map[0].getBoundingClientRect();

    var $mH  = $map_data.height;
    var $mW  = $map_data.width;

    $('.point').each(function(k, obj){

        var $this = $(this);

        // calculate top / left position from element css without 'px'
        var $top_px = ($this.css('top').replace(/[^-\d\.]/g, '') / $mapH) * 100;
        var $left_px = ($this.css('left').replace(/[^-\d\.]/g, '') / $mapW) *100;

        $this.css({
            'top' : $top_px +'%',
            'left' : $left_px +'%'
        });

    });

});

Currently when I click on zoom, the map image scales, but markers stay in same place.

What I want to achieve: On click zoom button (doesn't matter if zoom-in or zoom-out is clicked), I want to scale the image and move markers to their new calculated position, same as google maps.

Could anyone point out an idea? Thank you

Update 1

Now i'm recalculating these, $mapH, $mapW like this (I have edited my code above):

$map_data = $map[0].getBoundingClientRect();
var $mH  = $map_data.height;
var $mW  = $map_data.width;

This because when transform is applied, the actual width and height of an element is not changed, so I use getBoundingClientRect() to get transformed width/height.

My problem here is that, when the image is scaled, i want to move my markers also and here is were I'm stuck.

Update 2

The ratio I'm using is 0.125 and if I multiply this to top / left positions of markers, the markers always move diagonally from top - left to right - bottom, this is not the desired result.

Instead I want to move them from initial marker position to scaled position in every direction -- top, right, bottom, left -- at the same time and evenly.

Answer 1

Hello hellheim and welcome to Stack Overflow!

You set the $mapH and $mapW variables on load but never change them afterwards. Depending on the zoomed size of the map these need to be re-calculated inside the button click routine. Easiest would be to just move the declaration into the event handler:

$(document).on('click', '.zoom', function(e){
    e.preventDefault();

    //css transform map
    $map.css({
      '-moz-transform':  'scale(' + scale + ')',
      '-webkit-transform':   'scale(' + scale + ')',
      '-o-transform':  'scale(' + scale + ')',
      '-ms-transform':  'scale(' + scale + ')',
      'transform':  'scale(' + scale + ')'
    });

    var $map = $('#map-img'),
        $mapW = $map.width(),
        $mapH = $map.height();

    $('.point').each(function(k, obj){

        var $this = $(this);

        // calculate top / left position from element css without 'px'
        var $top_px = ($this.css('top').replace(/[^-\d\.]/g, '') / $mapH) * 100;
        var $left_px = ($this.css('left').replace(/[^-\d\.]/g, '') / $mapW) *100;

        $this.css({
            'top' : $top_px +'%',
            'left' : $left_px +'%'
        });

    });

});

---

Update 1

CSS transform is a very useful function but in my latest Codepen I encountered the problem that the zoomed image's position would not fit my expectations so I instead changed it to alter the image's width and height.

Here's a basic summary of how I would implement the zooming:

1. Store the image's original height and width to reset it later-on

On zoom:

1. Change the width and height of the image based on the zoom factor
2. Change all marker's positions according to the zoom factor

In code this would be:

HTML

<input type="button" class="zoom" data-factor="0.75" value="Zoom out [-]" />
<input type="button" class="zoom" data-factor="1.25" value="Zoom in [+]" />
<input type="button" class="zoom" data-factor="reset"  value="Reset" />

JS

var $map= null,
    originalWidth = baseWidth = 0,
    originalHeight = baseHeight = 0;

$().ready(function() {
  $map = $("#map-img"),
    originalWidth = baseWidth = $map.width(),
    originalHeight = baseHeight = $map.height();
});

$(".zoom").on("click", function() {

  var $this = $(this);

  var scaleFactor= $this.data("factor");

  // in case a numeric value is present, zoom accordingly.
  if (!isNaN(scaleFactor)) {
    var newWidth = baseWidth * scaleFactor;
    var newHeight = baseHeight * scaleFactor;
  } else {
    // reset to original size.
    var newWidth = originalWidth;
    var newHeight = originalHeight; 
    // calculate the scale factor to re-position the markers.
    scaleFactor= originalWidth / baseWidth;
  }

  baseWidth= newWidth;
  baseHeight= newHeight;

  //css transform map
  $map.css({
    width: newWidth + "px",
    height: newHeight + "px"
  });

  $(".point").each(function(k, obj) {
    var $object = $(obj);

    // calculate top / left position from element css without 'px'
    var topPx = $object.css("top").replace(/[^-\d\.]/g, "") * scaleFactor;
    var leftPx = $object.css("left").replace(/[^-\d\.]/g, "") * scaleFactor;

    $object.css({
      top: topPx + "px",
      left: leftPx + "px"
    });
  });
});

Some comments regarding your previous code:

• you don't need to event.preventDefault if you have specific buttons that don't have any other method assigned to it
• I would recommend to prefix variables with "$" in case they represent jQuery-fied objects. $map = $("#map-img"); would be fine, $mapW = $map.width() would be misleading
• don't create variables or methods that you don't need as they just bloat your code. I removed scale and type from the declaration as they are not needed for my code example.

As mentioned above here's a Codepen showing the above code.

---

Update 2

That was a nice exercise! If you want to use transform , you need to first find the vertical and horizontal center of the image. Then on zooming you need to calculate the new position based on the offset to the center of the image and apply the zoom factor to it. On the next zoom, calculate the X and Y positions based on the previous and the current zoom and you are good to go.

Relevant code

This part of the code is calculated as soon as the image has been loaded:

HTML

  <img src="https://mapchart.net/img/world-divided-population-map.png" 
       id="map-img" onload="calculateDimensions()"/>

JS

var $map = null,
  previousZoom = 1;
var horizontalCenter, verticalCenter;

function calculateDimensions() {
  $map = $("#map-img");
  horizontalCenter = $map[0].width / 2;
  verticalCenter = $map[0].height / 2;
  $("#center")
    .css("left", horizontalCenter + "px")
    .css("top", verticalCenter + "px");
}

On zoom we need to apply the right vertical and horizontal offsets based on the element's position compared to the center:

$(".zoom").on("click", function() {
  var $this = $(this);

  var scaleFactor = $this.data("factor");

  $map.css({
    "-moz-transform": "scale(" + scaleFactor + ")",
    "-webkit-transform": "scale(" + scaleFactor + ")",
    "-o-transform": "scale(" + scaleFactor + ")",
    "-ms-transform": "scale(" + scaleFactor + ")",
    transform: "scale(" + scaleFactor + ")"
  });

  // calculate the change rate in reference to the last zoom.
  var changeRatio = scaleFactor / previousZoom;
  previousZoom = scaleFactor;

  $(".point").each(function(k, obj) {
    var $object = $(obj);

    // calculate new top / left position
    var newX =
      ($object[0].offsetLeft - horizontalCenter) * changeRatio +
      horizontalCenter;
    var newY =
      ($object[0].offsetTop - verticalCenter) * changeRatio + verticalCenter;

    $object.css("left", newX + "px");
    $object.css("top", newY + "px");
  });
});

The $("#center") is only added for testing purposes. It simple highlights the center of the image as can be seen in the demo.

Here's the updated Codepen .