[SOLUCIONADO] Añadir listado de países a jVectorMap

JUMASOL · #1 (**permalink**) 21/09/2013, 11:48

Hola.

Estoy intentando hacer que en jVector pueda establecerse un listado de países que, en hover, activen las zonas.

Podéis ver el mapa que estoy usando en

http://jvectormap.com/maps/world/world/

Pues bien, se trataría de añadir un listado de países en cualqueir zona del mapa a modo de botones de tal suerte que pasando por encima el cursor cambien de color al tiempo que activan también las regiones.

He buscado y rebuscado, y encontrado este post:

http://stackoverflow.com/questions/1...using-a-button

Pero por más que intento insertar lo que dice en el código que tengo, no funciona de ninguna manera.

Parte del código es el que sigue. Si pudieseis explicar la solución que dan en stackoverlfow os lo agradecería

Código:

/**
 * jVectorMap version 0.2.3
 *
 * Copyright 2011-2012, Kirill Lebedev
 * Licensed under the MIT license.
 *
 */
(function( $ ){
  var apiParams = {
        colors: 1,
        values: 1,
        backgroundColor: 1,
        scaleColors: 1,
        normalizeFunction: 1
      },
      apiEvents = {
        onLabelShow: 'labelShow',
        onRegionOver: 'regionOver',
        onRegionOut: 'regionOut',
        onRegionClick: 'regionClick',
        onMarkerLabelShow: 'markerLabelShow',
        onMarkerOver: 'markerOver',
        onMarkerOut: 'markerOut',
        onMarkerClick: 'markerClick'
      };
      
  $.fn.vectorMap = function(options) {
    var defaultParams = {
          map: 'world_en',
          color: '#6383d3',
          hoverColor: '#323637',
          onRegionClick: function(event, code) {
        if (code === 'ES') {
            window.location = 'xxx'
        }
        else if (code === 'CA') {
            window.location = 'xxx'
        }
        else if (code === 'US') {
            window.location = 'xxx'
        }
    },
          normalizeFunction: 'linear'
        },
        
        map,
        methodName,
        event;

    if (options === 'addMap') {
      WorldMap.maps[arguments[1]] = arguments[2];
    } else if (options === 'set' && apiParams[arguments[1]]) {
      methodName = arguments[1].charAt(0).toUpperCase()+arguments[1].substr(1);
      this.data('mapObject')['set'+methodName].apply(this.data('mapObject'), Array.prototype.slice.call(arguments, 2));
    } else {
      $.extend(defaultParams, options);
      defaultParams.container = this;
      this.css({
        position: 'relative',
        overflow: 'hidden'
      });
      map = new WorldMap(defaultParams);
      this.data('mapObject', map);
      for (event in apiEvents) {
        if (defaultParams[event]) {
          this.bind(apiEvents[event]+'.jvectormap', defaultParams[event]);
        }
      }
    }
  };
  
  
  var VectorCanvas = function(width, height) {
    this.mode = window.SVGAngle ? 'svg' : 'vml';
    if (this.mode == 'svg') {
      this.createSvgNode = function(nodeName) {
        return document.createElementNS(this.svgns, nodeName);
      }
    } else {
      try {
        if (!document.namespaces.rvml) {
          document.namespaces.add("rvml","urn:schemas-microsoft-com:vml");
        }
        this.createVmlNode = function (tagName) {
          return document.createElement('<rvml:' + tagName + ' class="rvml">');
        };
      } catch (e) {
        this.createVmlNode = function (tagName) {
          return document.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">');
        };
      }
      document.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)");
    }
    if (this.mode == 'svg') {
      this.canvas = this.createSvgNode('svg');
    } else {
      this.canvas = this.createVmlNode('group');
      this.canvas.style.position = 'absolute';
    }
    this.setSize(width, height);
  }

  VectorCanvas.prototype = {
    svgns: "http://www.w3.org/2000/svg",
    mode: 'svg',
    width: 0,
    height: 0,
    canvas: null,

........................

JUMASOL · #2 (**permalink**) 22/09/2013, 03:50

Por si sirve de ayuda, el código en el archivo es:

Código:

<html>
<head>
  <title>jVectorMap demo</title>
  <link rel="stylesheet" media="all" href="../jquery-jvectormap.css"/>
  <script src="assets/jquery-1.7.2.min.js"></script>
  <script src="../jquery-jvectormap.js"></script>
  <script src="assets/jquery-jvectormap-world-en.js"></script>
  <script>
    $(function(){
      $('#map').vectorMap({map: 'world_en'});
    })
  </script>
</head>
<body>
  <div id="map" style="width: 900px; height: 600px"></div>
  

</body>
</html>

Hay alguna forma correcta de articular esta solución aquí tal y como muestra la respuesta en el otro foro:

"Once you've set the handle"

var mapObject = $('#your_map_div_id').vectorMap('get', 'mapObject');

Just use the built in function setSelectedRegions (mind the "s"):

mapObject.setSelectedRegions(your_region_code); //to set
mapObject.setSelectedRegions({your_region_code:fal se}); //to unset

JUMASOL · #3 (**permalink**) 22/09/2013, 12:18

He encontrado este sistema:

http://www.jscraft.net/demo/plugins/craftmap/

Que no es el mismo, pero que sirve para ilustrar lo que estoy buscando.

Se trataría de tal listado, pero en lugar de ir a una marca, se activaría la región como en

http://jvectormap.com/

Coincidiendo cada país de la lista con la región correspondiente.

¿Es posible?

JUMASOL · #4 (**permalink**) 23/09/2013, 06:23

¿Alguna forma de relacionar los enlaces con la regiones??

He buscado y encontrado referencia a setHovered(true) setHovered(false) pero no sé cómo implementarlo.

¿Alguien conoce algún tutorial específico sobre esta cuestión o caso práctica aplicable a esto mismo?

caricatos · #5 (**permalink**) 23/09/2013, 07:14

Hola:

Un poco me fastidia no poder ayudarte porque estás usando una librería que no conozco, cuando creo que hice algo tal vez similar a lo que pretendes pero sin librerías... y lo he mostrado en mi Mapa de España...

Todo depende de cómo obtienes las distintas áreas... desde un fichero xml o svg o php, o simple texto plano podría ayudarte... evito usar json porque me interesa que mis páginas sean accesibles y no conozco la forma de usar json y conseguir resultados sin la dependencia de javascript...

Si tienes esos resulados, podría intentar ayudarte.

Saludos

JUMASOL · #6 (**permalink**) 23/09/2013, 08:08

Hola caricatos.

Gracias por tu interés.