Insertar esta función

[JUMASOL]

Hola.

Tengo que abrir este nuevo post porque el cerrado como solucionado esta tarde no lo estaba en realidad.

El problema es que tras completar un código para JVectorMaps incluí una un código con la función onRegionClick: function(event, code) para hacer que las regiones del mapa tuvieran un enlace a tal sección del sitio web.

Concretamente así:

Código:

$(document).ready (function() {
$('#map').vectorMap( {
    map: 'world',
    onRegionClick: function(event, code) {
        if (code === 'ZAN') {
            window.location = 'america'
        }
        else if (code === 'ZCA') {
            window.location = 'asia'
        }
        else if (code === 'ZNA') {
            window.location = 'africa'
        }
    }
});
});

Ahora, tras un problema, he tenido que sustituir el código principal por otro que no es compatible con el que veis.

Inicialmente, se encajaba de esta forma en el inicio del código:

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',
          color: '#6383d3',
          hoverColor: '#323637',
          onRegionClick: function(event, code) {
        if (code === 'ZNA') {
            window.location = 'america-del-norte'
        }
        else if (code === 'ZCA') {
            window.location = 'america-central'
        }
        else if (code === 'ZSA') {
             window.location = 'america-de-sur'
        }
        else if (code === 'ZEU') {
             window.location = 'europa'
        }     
        else if (code === 'ZAF') {
             window.location = 'africa'
        }  
        else if (code === 'ZOC') {
             window.location = 'oceania'
        }  
        else if (code === 'ZAS') {
             window.location = 'asia'
        }         
    },

Ahora, con el nuevo script no hay forma de meterlo y que funcione. Concretamente, podéis ver la "equivalencia" del que tengo ahora:

Código:

jvm.WorldMap.maps = {}, jvm.WorldMap.defaultParams = {
    map: "continentes",
    regionsSelectable: !1,
    markersSelectable: !1,
    bindTouchEvents: !0,
    regionStyle: {
        initial: {
            fill: "#6383d3",
            "fill-opacity": 1,
            stroke: "none",
            "stroke-width": 0,
            "stroke-opacity": 1
        },
        hover: {
            fill: "#323637"
        },
        selected: {
            fill: "yellow"
        },
        selectedHover: {}
    },
    markerStyle: {
        initial: {
            fill: "grey",
            stroke: "#505050",
            "fill-opacity": 1,
            "stroke-width": 1,
            "stroke-opacity": 1,
            r: 5
        },
        hover: {
            stroke: "black",
            "stroke-width": 2
        },
        selected: {
            fill: "blue"
        },
        selectedHover: {}
    }
}, jvm.WorldMap.apiEvents = {
    onRegionLabelShow: "regionLabelShow",
    onRegionOver: "regionOver",
    onRegionOut: "regionOut",
    onRegionClick: "regionClick",
    onRegionSelected: "regionSelected",
    onMarkerLabelShow: "markerLabelShow",
    onMarkerOver: "markerOver",
    onMarkerOut: "markerOut",
    onMarkerClick: "markerClick",
    onMarkerSelected: "markerSelected",
    onViewportChange: "viewportChange"
};

Añado el script en otro archivo, me duplica el mapa.

Si queréis ver todo el invento en funcionamiento, podéis entrar en http://jsfiddle.net/3xZ28/117/

Ahora se trata de incluir el código a continuación para vincular las regiones del mapa.

Código:

$(document).ready (function() {
$('#map').vectorMap( {
    map: 'world',
    onRegionClick: function(event, code) {
        if (code === 'ZAN') {
            window.location = 'america'
        }
        else if (code === 'ZCA') {
            window.location = 'asia'
        }
        else if (code === 'ZNA') {
            window.location = 'africa'
        }
    }
});
});

Funciona si lo pones en otro archivo, como os digo, pero me duplica el mapa.

¿Alguno sabe cómo meter onRegionClick: function(event, code) en el script a continuación o en alguna forma que no presente este problema.

Código:

jvm.WorldMap.maps = {}, jvm.WorldMap.defaultParams = {
    map: "continentes",
    regionsSelectable: !1,
    markersSelectable: !1,
    bindTouchEvents: !0,
    regionStyle: {
        initial: {
            fill: "#6383d3",
            "fill-opacity": 1,
            stroke: "none",
            "stroke-width": 0,
            "stroke-opacity": 1
        },
        hover: {
            fill: "#323637"
        },
        selected: {
            fill: "yellow"
        },
        selectedHover: {}
    },
    markerStyle: {
        initial: {
            fill: "grey",
            stroke: "#505050",
            "fill-opacity": 1,
            "stroke-width": 1,
            "stroke-opacity": 1,
            r: 5
        },
        hover: {
            stroke: "black",
            "stroke-width": 2
        },
        selected: {
            fill: "blue"
        },
        selectedHover: {}
    }
}, jvm.WorldMap.apiEvents = {
    onRegionLabelShow: "regionLabelShow",
    onRegionOver: "regionOver",
    onRegionOut: "regionOut",
    onRegionClick: "regionClick",
    onRegionSelected: "regionSelected",
    onMarkerLabelShow: "markerLabelShow",
    onMarkerOver: "markerOver",
    onMarkerOut: "markerOut",
    onMarkerClick: "markerClick",
    onMarkerSelected: "markerSelected",
    onViewportChange: "viewportChange"
};

Gracias.

[JUMASOL]

Otra posibilidad podría ser introducirlo en el siguiente script, que va en un archivo aparte:

Código:

var wrld = {
map: 'continentes',
regionStyle: {
hover: {
"fill": 'red'
}
}
};
function findRegion(robj, rname) {
var code = '';
$.each(robj, function (key) {
if (unescape(encodeURIComponent(robj[key].config.name)) === unescape(encodeURIComponent(rname))) {
code = key;
};
});
return code;
};
$(document).ready(function () {
$('#map').vectorMap(wrld);
var mapObj = $('#map').vectorMap('get', 'mapObject');
$('#countries').on('mouseover mouseout', 'a:first-child', function (event) {
// event.preventDefault();
var elem = event.target,
evtype = event.type,
cntrycode = findRegion(mapObj.regions, $(elem).text());
if (evtype === 'mouseover') {
mapObj.regions[cntrycode].element.setHovered(true);
} else {
mapObj.regions[cntrycode].element.setHovered(false);
};
});
});

Alguna forma de evitar que se duplique el mapa.

Gracias.

[JUMASOL]

¿Me puede explicar alguien por qué se duplica el mapa?