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.
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);
I find the FocusOn{scale - does a nice job of framing your selection. You can step forward or back as you wish with this command.
$(function(){
// var $ = jQuery;
$('#EUmap').vectorMap({
map: 'europe_en',
panOnDrag: true,
focusOn: {
x: 0.5,
y: 0.5,
scale: 1.5,
animate: true
},
series: {
regions: [{
scale: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial',
values: {
"BR": 2023.53,
"CZ": 195.23,
"DM": 0.38,
"FR": 2555.44,
"DE": 3305.9,
"GR": 305.01,
"HU": 132.28,
"IT": 2036.69
}
}]
}
});
})<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.css" type="text/css"><html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.css" type="text/css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqvmap/1.5.1/maps/continents/jquery.vmap.europe.js"></script>
</head>
<body>
<div id="EUmap" style="width: 600px; height: 400px"></div>
</body>
</html>You can use in generate object attribute focusOn with value (country code), example:
focusOn: "UA",
It's work for initial zoom, for any zoom use method setFocus.
Doc on zoom and other : https://jvectormap.com/documentation/javascript-api/jvm-map/