CODEWITHSUNDEEP
javascriptjqvmap
techansaari
techansaari

Reputation: 371

Selected countries name in jqvmap

I am using jqvmap to display a worldmap and displaying appropriate email info when click on country. It is working fine. I have to display only 6-7 countries. Now I want to display the names of countries on hover as tooltip only for selected countries. here is my code for map

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#vmap').vectorMap({
        map: 'world_en',
        backgroundColor: '#fff',
        color: '#87CEEB',
        hoverOpacity: 0.6,
        selectedColor: '#8B0000',
        enableZoom: true,
        showTooltip: true,
        values: sample_data,
        scaleColors: ['#C8EEFF', '#006491'],
        selectedRegion: null,
        normalizeFunction: 'polynomial',
        onRegionClick: function(element, code, region)
        {
            if (region == "United States of America") {
               document.getElementById('mailblock').innerHTML = 'Contact Information for USA (New York) :';
            }

        }
    });
});
</script>

Upvotes: 0

Views: 2071

Answers (1)

Bj&#246;rn K
Bj&#246;rn K

Reputation: 126

You could do something similar to this (taking your example as granted):

<script type="text/javascript">
jQuery(document).ready(function() {
    // your defined areas where the label is shown
    var areasWithLabel = ['DE', 'US', 'CA', 'RU'];

    jQuery('#vmap').vectorMap({
        // removed your usual settings
        onLabelShow: function(event, label, code) {
            for (area in areasWithLabel  {
               if (area == code) {
                   event.preventDefault();
               }
            }
        }
    });
});
</script>

Basically what you do is check if one of your defined areas is currently hovered over and prevent the default behaviour of that event (showing the label).

You can check one of the examples on the documentation page

Upvotes: 1

Related Questions