2

I am unable to get region name from code of region. My region click event work fine and I also get code properly. My code is:

<div id="map" style="width: 600px; height: 400px"></div>
<script type="text/javascript">
    $(function () {
        new jvm.MultiMap({
            container: $('#map'),
            maxLevel: 1,
            main: {
                map: 'us_lcc_en'
            },
            mapUrlByCode: function (code, multiMap) {
                return 'js/counties/jquery-jvectormap-data-' +
                   code.toLowerCase() + '-' +
                   multiMap.defaultProjection + '-en.js';
            }
        });


        $('#map').bind('regionClick.jvectormap', function (event, code) {
            var map = $('#map').vectorMap('get', 'mapObject');
            alert(map.getRegionName(code));
        });
    });
</script>
2
  • var map = $('#map').vectorMap('get', 'mapObject'); alert(map.getRegionName(code)); These lines are not working... Mar 16, 2016 at 12:36
  • I have posted a working solution below. you can have a look. accepted answer does not even seems to execute. it will give error. If you can check my answer it will be great as it may help other people also that may go through same problem. I have used this in my project so just think of posting it. May 15, 2018 at 3:17

3 Answers 3

2

HTML CODE

<div id="map2" style="width: 100%; height: 400px"></div>

Jquery Code

  $('#map2').vectorMap({
        map: 'world_mill_en',
        series: {
        regions: [{
            scale: ['#C8EEFF', '#0071A4'],
            normalizeFunction: 'polynomial',
            values: gdpData
          }]
        },
        onRegionClick: function (event, code) {


          ******* Code To Show Region Name *******

          /* Here We are getting Map Object */
          var map=$('#map2').vectorMap('get', 'mapObject');

          /* Here Using Map Object we are using Inbuilt GetRegionName 
          function TO Get Regionname for a region Code */

          var regionName = map.getRegionName(code);
          console.log("Code: "+code+"<br/>");
          console.log("Region Name: "+regionName+"<br/>");

          ******* Code To Show Region Name *******
        }

      });
1
  • This doesn't answer the original question as the OP is asking about a MultiMap and this answer is for a plain vectorMap. My answer below can accomplish what the OP is asking. Aug 31, 2020 at 20:03
0

I could not figure out how to get the region name from the onRegionClick for a multi map. This is my hack to get what is needed.

            var drillDownUSMap;
            var stateCode;
            var countyName;

            $(document).ready(function () {
                drillDownUSMap = new jvm.MultiMap({
                    container: $('#map'),
                    maxLevel: 1,
                    main: {
                        map: 'us_lcc_en',
                        onRegionClick: function (e, code) {
                            var map = $('#map div').vectorMap('get', 'mapObject');
                            var regionName = map.getRegionName(code);
                            stateCode = code.toLowerCase();
                            console.log(regionName)
                        }
                    },
                    mapUrlByCode: function (code, multiMap) {
                        return 'js/counties/jquery-jvectormap-data-' +
                            code.toLowerCase() + '-' +
                            multiMap.defaultProjection + '-en.js';
                    },
                    mapNameByCode: function (code, multiMap) {
                        return code.toLowerCase() + '_' +
                            multiMap.defaultProjection + '_en';
                    }
                });

                $(document).on('click', '.jvectormap-region.jvectormap-element', function (evt) {
                    var regionElem = $(this);
                    var stateJSFileName = stateCode + "_" + drillDownUSMap.defaultProjection + "_en";
                    var regionCode = regionElem.attr('data-code');
                    if (drillDownUSMap.maps[stateJSFileName]) {
                        countyName = drillDownUSMap.maps[stateJSFileName].regions[regionCode].config.name;
                        if (regionElem.hasClass("selected-region")) {
                            regionElem.removeClass("selected-region");
                        } else {
                            regionElem.addClass("selected-region");
                        }
                    }
                });

            });
-1

Add this code

onRegionClick:function(event, code) {                        
        var name = (code);                        
        alert(name);                    
        }

All Script Like This

 <div id="map" style="width: 600px; height: 400px"></div>
<script type="text/javascript">
    $(function () {
        new jvm.MultiMap({
            container: $('#map'),
            maxLevel: 1,
            main: {
                map: 'us_lcc_en'
            },
            mapUrlByCode: function (code, multiMap) {
                return 'js/counties/jquery-jvectormap-data-' +
                   code.toLowerCase() + '-' +
                   multiMap.defaultProjection + '-en.js';
            }
        });


     onRegionClick:function(event, code) {                        
        var name = (code);                        
        alert(name);                    
        }
    });
</script>
1
  • 1
    How can you use on regionclick outside of map block. I mean on region click in your code is under only $(function () { block how it can even execute. i have improved this in my answer below May 15, 2018 at 3:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.