Search code examples
javascriptjquerycssangularjsjvectormap

Scroll control in jVectorMap

I am using jVectorMap, everything works fine without zooming.

But when a user zoomed in the page I need to allow the user to scroll the the map using a vertical and horizontal scroll bar.

I have tried to add overflow-y: scroll; And other many options to do the scrolling but nothing works perfectly.

I can set the width and height of div to get the scroll bar but it is not related with map zoom in and zoom out.

So I am expecting a scroll bar horizontally and vertically which using that user can see the full map if even it is zoomed.

I have seen a map with below image in the internet enter image description here

But No idea how can I add a scroll button control like this in jVector map. Can someone help me to resolve this issue.?

Solution

  • You need two steps:

    1. To understand how the map is translated inside the container, initialize the Map with the onViewportChange event:

      $("#map").vectorMap({
  map: "world_mill",
  // set map properties, series, and so on
  //...
  onViewportChange: function(event, scaleFactor,transX,transY){
    // look at the values here:
    console.log("Viewport changed",scaleFactor,transX,transY);
  }
});

    2. To the point: to apply a map translation, set your desired X and Y panning, at the end invoke the applyTransform function:

      Example:

      var worldMap = $("#map").vectorMap("get", "mapObject");
worldMap.transX = -100;
worldMap.applyTransform();

    Additional information:

    Luckily, jVectorMap will do the range checking for you, so for your pan buttons you can also simply use somethng like: 

    worldMap.transX -= (10 * worldMap.scale); // move left
worldMap.transX += (10 * worldMap.scale); // move right
worldMap.transY -= (10 * worldMap.scale); // move up
worldMap.transY += (10 * worldMap.scale); // move down

    You will find the range check in the applyTransform function in jVectorMap source code.

    Credits: Kirill Lebedev, the great author of jVectorMap.

    Lastly, the re-center button: You can get the center of the map as follows:

    var mapCX = (worldMap.width / 2) * worldMap.scale + worldMap.transX * worldMap.scale;
var mapCY = (worldMap.height / 2) * worldMap.scale + worldMap.transY * worldMap.scale;

    As you haven't provide any source code, I can't help further, but if you have understand the concept, the transformation between your scrollbar range and the map translation is trivial easy.