javascript - Jvectormap show div onRegionClick -
hi trying use jvectormap plugin have found good, cannot create little bit of functionality make amazing...
what need when click on region text appear in predefined div on right hand side. 
as can see in image want when click on united kingdom text show in black box on right hand side.
however have managed make region link.
here link http://s453688288.websitehome.co.uk/wndirect/destination.php
here code
<p>click on links below see key stats regarding ecommerce in country.</p> </div> </div> <div class="green-band"> <div class="row"> <div class="three columns"> <button id="focus-eu">focus on europe</button> </div> <div class="three columns"> <button id="focus-us">focus on usa</button> </div> <div class="three columns"> <button id="focus-au">focus on australia</button> </div> <div class="three columns"> <button id="focus-home">return initial state</button> </div> </div> </div><!-- end green band --> <div id="map1"> <div class="info-box"><h3 class="white">ecommerce info</h3></div> <div class="footer-illustration-map"></div> </div><!-- end #map1 --> <? include("inc/footer.php") ?> <!-- map functionality--> <link rel="stylesheet" media="all" href="maps/jquery-jvectormap.css"/> <script src="maps/jquery-jvectormap.js"></script> <script src="maps/jquery-mousewheel.js"></script> <script src="maps/lib/jvectormap.js"></script> <script src="maps/lib/abstract-element.js"></script> <script src="maps/lib/abstract-canvas-element.js"></script> <script src="maps/lib/abstract-shape-element.js"></script> <script src="maps/lib/svg-element.js"></script> <script src="maps/lib/svg-group-element.js"></script> <script src="maps/lib/svg-canvas-element.js"></script> <script src="maps/lib/svg-shape-element.js"></script> <script src="maps/lib/svg-path-element.js"></script> <script src="maps/lib/svg-circle-element.js"></script> <script src="maps/lib/vml-element.js"></script> <script src="maps/lib/vml-group-element.js"></script> <script src="maps/lib/vml-canvas-element.js"></script> <script src="maps/lib/vml-shape-element.js"></script> <script src="maps/lib/vml-path-element.js"></script> <script src="maps/lib/vml-circle-element.js"></script> <script src="maps/lib/vector-canvas.js"></script> <script src="maps/lib/simple-scale.js"></script> <script src="maps/lib/numeric-scale.js"></script> <script src="maps/lib/ordinal-scale.js"></script> <script src="maps/lib/color-scale.js"></script> <script src="maps/lib/data-series.js"></script> <script src="maps/lib/proj.js"></script> <script src="maps/lib/world-map.js"></script> <script src="maps/tests/assets/jquery-jvectormap-world-mill-en.js"></script> <script> jquery.noconflict(); jquery(function(){ var $ = jquery; $('#focus-au').click(function(){ $('#map1').vectormap('set', 'focus', 'au'); }); $('#focus-us').click(function(){ $('#map1').vectormap('set', 'focus', 3, 0.1, 0.4); }); $('#focus-eu').click(function(){ $('#map1').vectormap('set', 'focus', 3, 0.5, 0.3); }); $('#focus-home').click(function(){ $('#map1').vectormap('set', 'focus', 1, 0, 0); }); $('#map1').vectormap({ map: 'world_mill_en', focuson: { x: 0.5, y: 0.5, scale: 1 }, backgroundcolor: '#ffffff', onregionclick: function(event, code){ if (code == "gb") {window.location = '#reach'} if (code == "us") {label.text('bears, vodka, balalaika');} if (code == "de") {window.location = '/url4'} if (code == "ie") {window.location = '/url5'} }, series: { regions: [{ scale: ['#a6cdd4', '#669ca5'], normalizefunction: 'polynomial', values: { "gl": 0, "af": 0, "al": 0, "dz": 0, "ao": 0, "ag": 0, "ar": 0, "am": 0, "au": 1, "at": 1, "az": 0, "bs": 0, "bh": 0, "bd": 0, "bb": 0, "by": 0, "be": 0, "bz": 0, "bj": 0, "bt": 0, "bo": 0, "ba": 0, "bw": 0, "br": 0, "bn": 0, "bg": 0, "bf": 0, "bi": 0, "kh": 0, "cm": 0, "ca": 1, "cv": 0, "cf": 0, "td": 0, "cl": 0, "cn": 0, "co": 0, "km": 0, "cd": 0, "cg": 0, "cr": 0, "ci": 0, "hr": 0, "cy": 1, "cz": 1, "dk": 0, "dj": 0, "dm": 0, "do": 0, "ec": 0, "eg": 0, "sv": 0, "gq": 0, "er": 0, "ee": 1, "et": 0, "fj": 0, "fi": 0, "fr": 1, "ga": 0, "gm": 0, "ge": 0, "de": 1, "gh": 0, "gr": 0, "gd": 0, "gt": 0, "gn": 0, "gw": 0, "gy": 0, "ht": 0, "hn": 0, "hk": 0, "hu": 1, "is": 0, "in": 0, "id": 0, "ir": 0, "iq": 0, "ie": 1, "il": 0, "it": 1, "jm": 0, "jp": 0, "jo": 0, "kz": 0, "ke": 0, "ki": 0, "kr": 0, "kw": 0, "kg": 0, "la": 0, "lv": 0, "lb": 0, "ls": 0, "lr": 0, "ly": 0, "lt": 0, "lu": 1, "mk": 0, "mg": 0, "mw": 0, "my": 0, "mv": 0, "ml": 0, "mt": 0, "mr": 0, "mu": 0, "mx": 0, "md": 0, "mn": 0, "me": 0, "ma": 0, "mz": 0, "mm": 0, "na": 0, "np": 0, "nl": 1, "nz": 1, "ni": 0, "ne": 0, "ng": 0, "no": 0, "om": 0, "pk": 0, "pa": 0, "pg": 0, "py": 0, "pe": 0, "ph": 0, "pl": 1, "pt": 1, "qa": 0, "ro": 1, "ru": 0, "rw": 0, "ws": 0, "st": 0, "sa": 0, "sn": 0, "rs": 0, "sc": 0, "sl": 0, "sg": 0, "sk": 0, "si": 0, "sb": 0, "za": 0, "es": 1, "lk": 0, "kn": 0, "lc": 1, "vc": 0, "sd": 0, "sr": 0, "sz": 0, "se": 0, "ch": 1, "sy": 0, "tw": 0, "tj": 0, "tz": 0, "th": 0, "tl": 0, "tg": 0, "to": 0, "tt": 0, "tn": 0, "tr": 0, "tm": 0, "ug": 0, "ua": 0, "ae": 0, "gb": 1, "us": 1, "uy": 0, "uz": 0, "vu": 0, "ve": 0, "vn": 0, "ye": 0, "zm": 0, "zw": 0, } }] } }); }) </script>
you need vectormap mapobject, , assign variable:
var map = $('#map1').vectormap('get', 'mapobject'); after which, can access method called getregionname(), passing code.
then append <div>:
onregionclick: function(event, code) { var map = $('#map1').vectormap('get', 'mapobject'); $('.info-box').append('<span>' + map.getregionname(code) + '</span>'); } (where .info-box class of <div> want append to)
Comments
Post a Comment