Search code examples
jqueryjvectormap

Auto zoom a region on click event in jvectormap

I have the jvectormap of Australia. On click of a particular state in the map, it should zoom out that particular state in the same map. Is there any way to achieve this without using multi-map.

Solution

  • Yes, of course - you mean zoom-in? Use the setFocus method of the map object:

      onRegionClick: function(e,  code,  isSelected,  selectedRegions){
    $('#map').vectorMap('get','mapObject').setFocus({region: code});
  }

    EDIT:

    The setFocus method is documented here: jVectorMap API Documentation - Map

    This is an extract of setFocus (credits: Kirill Lebedev, the great author of jVectorMap):

      /**
   * setFocus set the map's viewport to the specific point and set zoom of the map 
      to the specific level. Point and zoom level could be defined 
      in two ways: using the code of some region to focus on or a central point
      and zoom level as numbers.
   * @param This method takes a configuration object as the single argument. 
     The options passed to it are the following:
   *   @param {Array} params.regions Array of region codes to zoom to.
   *   @param {String} params.region Region code to zoom to.
   *   @param {Number} params.scale Map scale to set.
   *   @param {Number} params.lat Latitude to set viewport to.
   *   @param {Number} params.lng Longitude to set viewport to.
   *   @param {Number} params.x Number from 0 to 1 specifying the horizontal 
        coordinate of the central point of the viewport.
   *   @param {Number} params.y Number from 0 to 1 specifying the vertical 
        coordinate of the central point of the viewport.
   *   @param {Boolean} params.animate Indicates whether or not to animate 
        the scale change and transition.
   */

    Some of the options are mutually exclusive, for example if you provide Latitude & Longitude, obviously x & y values (map coordinates in pixel) will be ignored. Moreover: similarly, if you provide a region code or a set of region codes, Latitude & Longitude, as well x & y values, they will be all ignored.

    To get the animation effect, you should provide the option animate: true to the parameter object.

    Example:

    $('#map').vectorMap('get','mapObject').setFocus({region: code, animate: true});

    To get a nice and smooth effect, you should play with the scale parameter, this because a user could zoom-in the map, then click on a region, and then, for this reason, the zoom effect into the region would be not so noticeable as desired. or whatever else, also depending from your initial zoom level.

    So, you may study the user interface, plan the user interaction, and do do some tests with the scale option to get the desired effect (sorry, i can't help further, as you haven't provided any source code).

    Start from here and try to get your final desired animation effect:

    // Zoom in to the Eyers Rock:
var zParams = {scale: 5, lat: -25.360790, lng: 131.016800, x: 0.5, y: 0.5, animate: true};
$('#map').vectorMap('get','mapObject').setFocus(zParams);