jVectorMap increase (world) map size

Question

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!

Eurasian

Answer 1

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

Perrins

@Eurasian This should be marked as the answer still relevant in 2016. – Jefferey

Answer 2

you just have to change these values:

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

Chrysoberyl

Welcome to Stack Overflow! Please add some explanation of why/how this code helps the OP. This will help provide an answer future viewers can learn from. See How to Answer for more information. – Khalilahkhalin

You better do not modify the jquery-jvectormap.js code, instead specify the horizontal and vertical (x and y) coordinates like the API show: params.x - Number from 0 to 1 specifying the horizontal coordinate of the central point of the viewport – Koto

Answer 3

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.

Carmel

Answer 4

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);

Weighted