Jvectormap - установить цвет при наведении для каждого региона?

Я хотел бы установить отдельные области и цвета наведения для подключаемого модуля JVectorMap и оставить области без данных белыми по умолчанию.

До сих пор я удалял данные масштаба и заменял их цветовыми кодами (как показано в коде ниже). Это здорово, но я не знаю, как добавить данные при наведении.

Если возможно, я также хотел бы добавить данные для document.body.style.cursor, чтобы я мог отключать отдельные регионы (где, например, сущность заблокирована от торговли), чтобы она не кажутся активной ссылкой.

Вы также заметите, что у меня есть код для открытия панели. Это для отображения полного всплывающего окна с индивидуальным содержимым для каждого региона, для которого у меня есть данные. Это унаследованный код, поэтому, честно говоря, я не уверен, как он работает.

Если я что-то забыл, пожалуйста, дайте мне знать.

jQuery.noConflict();
jQuery(function(){
    var $ = jQuery;   
    $('#map_custom').vectorMap({
        map: 'world_mill_en',   
        backgroundColor : "#b8b8b8",
        regionStyle : {
            initial : {
                fill : "white",
                "fill-opacity" : 1,
                stroke : "none",
                "stroke-width" : 0,
                "stroke-opacity" : 1
            },
            hover : {
                "fill-opacity": 0.7,
            },
            selectedHover : {}
        },
        onRegionOver: function (event, code, region) {
            document.body.style.cursor = "pointer";
        },
        onRegionOut: function (element, code, region) {
            document.body.style.cursor = "default";

        },  
        onRegionClick: function(event, code, region){   
            if (code == "CA") {window.location = 'CalRamic-distributors-Canada.html'}
                if (code == "US") {window.location = 'CalRamic-distributors-USA.html'}
                    if (code == "IE") {
                        $(".panel").hide("fast");
                        $("#ireland").show("slow");   
                        document.getElementById('test_data').innerHTML=code;
                    }
                    if (code == "GB") {
                        $(".panel").hide("fast");
                        $("#unitedkingdom").show("slow");     
                        document.getElementById('test_data').innerHTML=code;
                    }
                    if (code == "ES") {
                        $(".panel").hide("fast");
                        $("#spain").show("slow");     
                        document.getElementById('test_data').innerHTML=code;
                    }
                    if (code == "PT") {
                        $(".panel").hide("fast");
                        $("#portugal").show("slow");      
                        document.getElementById('test_data').innerHTML=code;
                    }
                    if (code == "IL") {
                        $(".panel").hide("fast");
                        $("#israel").show("slow");    
                        document.getElementById('test_data').innerHTML=code;
                    }   
        // I've got a LOT more countries in my code, but you don't need all of them
        else if (code){
            event.preventDefault();     
        }
    },      
    series: {
        regions: [{
            values: sample_data
        }]
    }
});

  /* Close the Panel */
        $("body").click(function(e) {       
            if (e.target.id == "close" || $(e.target).parents("#close").size()) 
            {               
                 $(".panel").hide("slow");
            }
        });

})

В настоящее время этот код извлекает данные о цвете из файла sample_data.js, который имеет следующий формат:

    var sample_data = {
      "CA": '#0071a4',
      "US": '#0071a4',
      "IE": '#0071a4',
      "GB": '#0071a4',
      "ES": '#0071a4',
    }

Я продвинулся довольно далеко для новичка благодаря здешнему сообществу, но меня попросили пойти дальше с jvectormap, чем когда-либо прежде. И, к сожалению, я опасен только этим программным кодом, поэтому я обращаюсь к экспертам.


jquery maps jvectormap jquery-plugins
person Tuhd    schedule 01.05.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Во-первых, это всего лишь предложение, вы должны избавиться от сумасшедшей логики if и сделать ее функцией, которая является обобщенной.

Например:

function panelHandler(element, hideSpeed, showSpeed){
  $('.panel').hide(hideSpeed);
  $(element).show(showSpeed);
  $('#test_data').innerHTML('code');
}

if (code == "IE") {
    panelHandler("#unitedKingdom", "slow", "fast");
}

if (code == "GB") {
   panelHandler("#spain", "slow", "fast");
}

etc...

Что касается вашего вопроса, просто прикрепите нужные настройки класса соответственно. Затем вы проверяете это событие и выполняете его так:

$('#selector').css('cursor', 'pointer');

Надеюсь, это поможет. Если вам нужно что-то более подробное, то дайте мне знать, и я могу помочь с этим.

person Ronny    schedule 03.05.2013
comment
Спасибо, что нашли время, чтобы просмотреть это! У меня есть несколько вопросов. Нужно ли полностью удалять onRegionClick: function(event, code, region){ часть кода или она останется? и то же самое с битами onRegionOver: и onRegionOut:? Последний вопрос, я не уверен, что понимаю последний фрагмент кода и как его проверить. Я не могу найти нигде в коде, где регионы вызываются конкретно с каким-либо фрагментом кода CSS, только некоторые глобальные классы, которые применяются ко всем регионам. Есть ли способ вызвать курсоры и цвет наведения, используя вместо этого sample_data? - person Tuhd; 07.05.2013