jVectorMap increase (world) map size

I am using the jVectorMap from http://jvectormap.owl-hollow.net/ and everything works fine. But the standard size of the world-en map is very small. If someone wants to hit for example Bosnia and Herzegovina, he needs big glasses! There are zoom Buttons available but then you have to move the map within the container.

I tried to enlarge the div element but it seems that the map has a fixed size. To help开发者_开发问答 me provida a bigger world map:

• is there any chance to get a different standard-zoom when a user enters the map website?
• do I need a bigger world map?

Or what else could I do in order to provide a bigger world map?

Cheers!

Within the file jquery-jvectormap.js is the code:

WorldMap.prototype = {
  transX: 0,
  transY: 0,
  scale: 1,
  baseTransX: 0,
  baseTransY: 0,
  baseScale: 1,

I just changed scale: to 3 and that seems to work

you just have to change these values:

$('#world-map').vectorMap({
        map: 'chile',
           focusOn: {
       x: 0.6,
       y: -0.2,
       scale: 2
     },

To make it a bigger world map, just adjust the size of the container.

If you want to zoom in by default, the zoom buttons are bound to the following bit of code:

this.container.find('.jvectormap-zoomin').click(function(){
    if (map.zoomCurStep < map.zoomMaxStep) {
        var curTransX = map.transX;
        var curTransY = map.transY;
        var curScale = map.scale;
        map.transX -= (map.width / map.scale - map.width / (map.scale * map.zoomStep)) / 2;
        map.transY -= (map.height / map.scale - map.height / (map.scale * map.zoomStep)) / 2;
        map.setScale(map.scale * map.zoomStep);
        map.zoomCurStep++;
        $('#zoomSlider').css('top', parseInt($('#zoomSlider').css('top')) - sliderDelta);
    }
});
this.container.find('.jvectormap-zoomout').click(function(){
    if (map.zoomCurStep > 1) {
        var curTransX = map.transX;
        var curTransY = map.transY;
        var curScale = map.scale;
        map.transX += (map.width / (map.scale / map.zoomStep) - map.width / map.scale) / 2;
        map.transY += (map.height / (map.scale / map.zoomStep) - map.height / map.scale) / 2;
        map.setScale(map.scale / map.zoomStep);
        map.zoomCurStep--;
        $('#zoomSlider').css('top', parseInt($('#zoomSlider').css('top')) + sliderDelta);
    }
});

You could simply copy and adjust that code.

This did it for me

var mapParams = {
            map: 'world_en',
            backgroundColor: '#FAFBFC',
            color: '#f2f4f6',
            borderColor: '#D1D4D7',
            borderOpacity: 0.7,
            values: mapData,
            scaleColors: ["#4671E0", "#5AA6F0"],
            normalizeFunction: 'polynomial',
            onLoad: function(event, map)
            {
                jQuery('#map-email-opens').vectorMap('zoomIn');
            }
        }

        $('#map-email-opens').vectorMap(mapParams);