Описание тега jqvmap

При инициализации карты вы можете указать параметры, чтобы изменить ее внешний вид.

jQuery('#vmap').vectorMap(
{
    map: 'world_en',
    backgroundColor: '#a5bfdd',
    borderColor: '#818181',
    borderOpacity: 0.25,
    borderWidth: 1,
    color: '#f4f3f0',
    enableZoom: true,
    hoverColor: '#c9dfaf',
    hoverOpacity: null,
    normalizeFunction: 'linear',
    scaleColors: ['#b6d6ff', '#005ace'],
    selectedColor: '#c9dfaf',
    selectedRegion: null,
    showTooltip: true,
    onRegionClick: function(element, code, region)
    {
        var message = 'You clicked "'
            + region 
            + '" which has the code: '
            + code.toUpperCase();

        alert(message);
    }
});

map - world_ru Карта, которую вы хотите загрузить. Необходимо включить файл javascript с названием нужной карты. Доступные карты с этой библиотекой: world_en, usa_en, europe_en и germany_en

backgroundColor - #a5bfdd Цвет фона контейнера карты в любом формате, совместимом с CSS.

borderColor - #818181 Цвет границы, чтобы использовать для контуров объектов карты.

borderOpacity - 0,5 Непрозрачность границы, чтобы использовать для выделения объектов карты (используйте любое значение от 0 до 1, например 0,5, по умолчанию 0,25)

borderWidth - 3 Ширина границы, используемая для выделения объектов карты (по умолчанию 1)

color - #f4f3f0 Цвет регионов карты.

цвета Цвета отдельных регионов карты. Клавиши объектов цветов являются кодами стран в соответствии со стандартом ISO 3166-1 alpha-2. Клавиши цветов должны быть в нижнем регистре.

enableZoom - логическое значение Включить ли масштабирование карты ( true или false, по умолчанию true)

hoverColor - #c9dfaf Цвет области при наведении указателя мыши на нее.

hoverOpacity - 0,5 Непрозрачность области при наведении указателя мыши на нее.

normalizeFunction - 'linear' Эта функция может использоваться для улучшения результатов визуализации данных с нелинейной природой. Функция получает необработанное значение в качестве первого параметра и должна возвращать значение, которое будет использоваться при расчете цвета, которым будет закрашена конкретная область.

scaleColors - ['#b6d6ff', '#005ace'] Этот параметр определяет цвета, в которые будут окрашены области при установке значений параметров. Array scaleColors может иметь более двух элементов. Элементы должны быть строками, представляющими цвета в шестнадцатеричном формате RGB.

selectedRegion - mo Это регион, который вы хотите предварительно выбрать (двухбуквенный код ISO, по умолчанию null)

Названия и коды регионов

showTooltip - boolean Показывать ли всплывающие подсказки при наведении курсора мыши ( true или false, по умолчанию true)

onLabelShow - функция (элемент, метка, код) Функция обратного вызова, которая будет вызываться перед показом метки. Обозначение объекта DOM и код страны будут переданы обратному вызову в качестве аргументов.

onRegionOver - функция (элемент, код, регион) Функция обратного вызова, которая будет вызываться, когда курсор мыши входит в путь к области. Код страны будет передан обратному вызову в качестве аргумента.

onRegionOut - функция (элемент, код, регион) Функция обратного вызова, которая будет вызываться, когда курсор мыши покидает путь к области. Код страны будет передан обратному вызову в качестве аргумента.

onRegionClick - функция (элемент, код, регион) Функция обратного вызова, которая будет вызываться, когда пользователь щелкает путь к региону. Код страны будет передан обратному вызову в качестве аргумента.

Динамическое обновление

Большинство параметров можно изменить после инициализации с помощью следующего кода:

jQuery('#vmap').vectorMap('set', 'colors', {us: '#0000ff'});

Вместо цветов можно использовать любой параметр, кроме обратных вызовов. Обратные вызовы можно добавлять и удалять с помощью стандартных шаблонов jQuery для работы с событиями.

Вы можете определить функцию обратного вызова при инициализации JQVMap:

jQuery('#vmap').vectorMap(
{
    onLabelShow: function(event, label, code)
    {

    },
    onRegionOver: function(event, code, region)
    {

    },
    onRegionOut: function(event, code, region)
    {

    },
    onRegionClick: function(event, code, region)
    {

    }
});

Или позже, используя стандартный механизм jQuery:

jQuery('#vmap').bind('labelShow.jqvmap', 
    function(event, label, code)
    {

    }
);
jQuery('#vmap').bind('regionMouseOver.jqvmap', 
    function(event, code, region)
    {

    }
);
jQuery('#vmap').bind('regionMouseOut.jqvmap',
    function(event, code, region)
    {

    }
);
jQuery('#vmap').bind('regionClick.jqvmap',
    function(event, code, region)
    {

    }
);

Учтите тот факт, что вы можете использовать стандартные функции событий jQuery, такие как event.preventDefault() или возвращать false из обратного вызова, чтобы предотвратить поведение JQVMap по умолчанию (отображение метки или изменение цвета страны при наведении курсора). В следующем примере, когда пользователь наводит курсор мыши на Канаду, метка не отображается, и цвет страны не изменяется. При этом этикетка для России будет иметь нестандартный текст.

jQuery('#vmap').vectorMap(
{
    onLabelShow: function(event, label, code)
    {
        if (code == 'ca')
        {
            event.preventDefault();
        }
        else if (code == 'ru')
        {
            label.text('Bears, vodka, balalaika');
        }
    },
    onRegionOver: function(event, code)
    {
        if (code == 'ca')
        {
            event.preventDefault();
        }
    },
});

Визуализация данных

Здесь я хочу продемонстрировать, как можно визуализировать некоторые географические данные с помощью JQVMap. Визуализируем информацию о ВВП в 2010 году по каждой стране. Сначала нам нужны данные. Пусть это будет сайт Международного валютного фонда. Там мы можем получить информацию в формате xsl, который можно преобразовать сначала в csv, а затем в json с помощью любого языка сценариев. Теперь у нас есть файл gdp-data.js с таким содержанием (глобальные переменные - зло, я знаю, но просто для упрощения):

var sample_data = {"af":16.63,"al":11.58,"dz":158.97,...};

Затем подключите его к странице и добавьте код для визуализации:

    var max = 0,
        min = Number.MAX_VALUE,
        cc,
        startColor = [200, 238, 255],
        endColor = [0, 100, 145],
        colors = {},
        hex;

//find maximum and minimum values
for (cc in gdpData)
{
    if (parseFloat(gdpData[cc]) > max)
    {
        max = parseFloat(gdpData[cc]);
    }
    if (parseFloat(gdpData[cc]) < min)
    {
        min = parseFloat(gdpData[cc]);
    }
}

//set colors according to values of GDP
for (cc in gdpData)
{
    if (gdpData[cc] > 0)
    {
        colors[cc] = '#';
        for (var i = 0; i<3; i++)
        {
            hex = Math.round(startColor[i] 
                + (endColor[i] 
                - startColor[i])
                * (gdpData[cc] / (max - min))).toString(16);

            if (hex.length == 1)
            {
                hex = '0'+hex;
            }

            colors[cc] += (hex.length == 1 ? '0' : '') + hex;
        }
    }
}

//initialize JQVMap
jQuery('#vmap').vectorMap(
{
    colors: colors,
    hoverOpacity: 0.7,
    hoverColor: false
});

Пользовательские карты

Для получения информации о создании ваших собственных карт для использования с этой библиотекой ознакомьтесь с нашим проектом Github по адресу https://github.com/manifestinteractive/jqvmap.