JVectorMap map size (world)

Question

I am using jVectorMap from http://jvectormap.owl-hollow.net/ and everything is working fine. But the standard world-en map size is very small. If someone wants to get, for example, to Bosnia and Herzegovina, he needs big points! The zoom buttons are available, but then you need to move the map inside the container.

I tried to enlarge the div element, but the map seems to have a fixed size. To help me introduce a large world map:

• Is there a chance to get a different standard scale when a user logs on to a map website?
• Do I need a larger map of the world?

Or what else can I do to provide a large map of the world?

Hurrah!

Answer 1

The jquery-jvectormap.js file contains the code:

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

I just zoomed out to 3 and it seems to work

Answer 2

you just need to change these values:

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

Answer 3

To make it a larger map of the world, simply adjust the size of the container.

If you want to zoom in by default, the zoom buttons are tied 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 can simply copy and configure this code.

Answer 4

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