How to add pins to JQVMap?

Question

The question speaks for itself - I've gone through all the documentation but I'm obviously missing something.

Here is my current javascript:

On my page I call Index.initJQVMAP();

Which calls this:

initJQVMAP: function () {
    if (!jQuery().vectorMap) {
        return;
    }

    var showMap = function (name) {
        jQuery('.vmaps').hide();
        jQuery('#vmap_' + name).show();
    }

    var setMap = function (name) {
        var data = {
            map: 'world_en',
            backgroundColor: null,
            borderColor: '#333333',
            borderOpacity: 0.5,
            borderWidth: 1,
            color: '#c6c6c6',
            enableZoom: true,
            hoverColor: '#c9dfaf',
            hoverOpacity: null,
            values: sample_data,
            normalizeFunction: 'linear',
            scaleColors: ['#b6da93', '#909cae'],
            selectedColor: '#c9dfaf',
            selectedRegion: null,
            showTooltip: true,
            onLabelShow: function (event, label, code) {
                if (sample_data[code] > 0)
                    label.append(': ' + sample_data[code] + ' Views');
            },
            onRegionOver: function (event, code) {
                if (code == 'ca') {
                    event.preventDefault();
                }
            },
            onRegionClick: function (element, code, region) {
                var message = 'You clicked "' + region + '" which has the code: ' + code.toUpperCase();
                alert(message);
            },
            pins: { "AF": "pin_for_af", "NA": "pin_for_na" },
            pinMode: 'id'
        };

        data.map = name + '_en';
        var map = jQuery('#vmap_' + name);
        if (!map) {
            return;
        }
        map.width(map.parent().parent().width());
        map.show();
        map.vectorMap(data);
        map.hide();
    }

    setMap("world");
    setMap("usa");
    setMap("europe");
    setMap("russia");
    setMap("germany");
    showMap("world");



    jQuery('#regional_stat_world').click(function () {
        showMap("world");
    });

    jQuery('#regional_stat_usa').click(function () {
        showMap("usa");
    });

    jQuery('#regional_stat_europe').click(function () {
        showMap("europe");
    });
    jQuery('#regional_stat_russia').click(function () {
        showMap("russia");
    });
    jQuery('#regional_stat_germany').click(function () {
        showMap("germany");
    });

    $('#region_statistics_loading').hide();
    $('#region_statistics_content').show();
},

In my HTML I have:

<div style="display:none">
    <div id="pin_for_af"><p>123</p></div>
    <div id="pin_for_na"><p>456</p></div>
</div>

The only part that isn't working is the pins. I have tried changing the case of the region codes but this has no effect.

My code seems to follow the docs available here

Can anyone see what I'm doing wrong. The pins just don't appear at all.

score 1 · Answer 1 · answered Nov 01 '16 at 17:47

I had issues when working with pins with id. I used the example provided here.

In your case it would be something like:

function escapeXml(string) {
    return string.replace(/[<>]/g, function (c) {
      switch (c) {
        case '<': return '\u003c';
        case '>': return '\u003e';
      }
    });
  }

var pins = {
      mo: escapeXml('<div><span>123</span></div>'),
      fl: escapeXml('<div><span>456</span></div>')
    };

And then in the definition of the jqvmap use:

      pins: pins,
      pinMode: 'content',

How to add pins to JQVMap?

1 Answers1