jVectorMap aumentar (mundo) tamaño del mapa

Question

Estoy usando el jVectorMap desde http://jvectormap.owl-hollow.net/ y todo funciona bien. Pero el tamaño estándar del mapa mundo-en es muy pequeño. Si alguien quiere pegar, por ejemplo, a Bosnia y Herzegovina, ¡necesita grandes anteojos! Hay botones de zoom disponibles, pero luego debes mover el mapa dentro del contenedor.

Traté de agrandar el elemento div pero parece que el mapa tiene un tamaño fijo. que me ayude a Provida una más grande mapa del mundo:

• ¿hay alguna posibilidad de obtener un estándar de zoom diferente cuando un usuario entra en la página web mapa?
• ¿Necesito un mapa mundial más grande?

¿O qué más podría hacer para proporcionar un mapa del mundo más grande?

¡Salud!

Answer 1

Para que sea un mapa mundial más grande, simplemente ajuste el tamaño del contenedor.

Si desea acercar de forma predeterminada, los botones de zoom están obligados a la siguiente trozo de código:

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

Podría simplemente copiar y ajustar ese código.

Answer 2

dentro del archivo jquery-jvectormap.js es el código:

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

que acaba de cambiar de escala: a 3 y que parece funcionar

Answer 3

sólo hay que cambiar estos valores:

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

Answer 4

Esto lo hizo por mí

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