Search code examples
javascriptjvectormap

jvectormap show labels only for specific regions


I'm trying to show labels for the only region I highlight on the map.

Here is the code:

var map = $('#map').vectorMap({
    regionsSelectable: true,
    regionsSelectableOne: true,
    series: {
        regions: [{
            scale: ['#cccccc', '#0A6EB4'],
            values: data
        }]
    },
    regionStyle: {
        initial: {
            fill: '#ffffff',
            "fill-opacity": 1,
            stroke: '#cccccc',
            "stroke-width": 0,
            "stroke-opacity": 1
        },
        hover: {
            "fill-opacity": 1,
            cursor: 'pointer'
        },
        selected: {
            fill: '#0A6EB4'
        },
        selectedHover: {
            fill: '#1E4669'
        }
    },
    regionLabelStyle: {
        initial: {
            'font-family': 'Verdana',
            'font-size': '12',
            'font-weight': 'bold',
            cursor: 'default',
            fill: 'black'
        },
        hover: {
            cursor: 'pointer'
        }
    },
    labels: {
        regions: {
            render: function (code) {
                if (activeCountries.hasOwnProperty(code)) {
                    var regions = $("#map").vectorMap("get", "mapObject").regions;
                    console.log(code, regions[code]); //<< ERROR!
                }
            }
        }
    }
});

In the labels.regions.render function I'm able to get the code of the country, I'm able to verify that is a country present in the array activeCountries, but then when I try to retrieve the country name (regions[code].config.name) the regions[code] is undefined, the specific code is missing!

So I can show the labels on the regions that are present in the activeCountries array?

That is what I'm trying to achieve:

enter image description here

The above image is done using Highmaps.

UPDATE Thanks to deblocker that has found the solution.

Now I need only to find a way to add a white shadow to the region text to make it better visible also on dark highlighted regions.


Solution

  • So, I believe You are using a world map, is that correct?

    Some countries are really too small to draw a SVG path in a meaningful way on a world map.

    You can either:

    • Use a map with a higher resolution (and obviously zoom-in until You see that tiny regions)
    • Add markers to easily locate that small countries:

      {
        "BH": {"latLng": [26.066700, 50.557700], "name": "Bahrain"},
        "GI": {"latLng": [36.140751, -5.353585], "name": "Gibraltar"},
        "HK": {"latLng": [22.284681,114.158177], "name": "Hong Kong"},
        "MQ": {"latLng": [14.641528,-61.024174], "name": "Martinique"},
        "MT": {"latLng": [35.937496, 14.375416], "name": "Malta"},
        "MU": {"latLng": [-20.183590,57.941208], "name": "Mauritius"},
        "SG": {"latLng": [1.352083, 103.819836], "name": "Singapore"},
        "GP": {"latLng": [16.265000,-61.551000], "name": "Guadeloupe"}
      }
      


    If You need the region names for the regions in the map, You can get it from the loaded maps:

    Here is the DEMO:

    $(document).ready(function () {
      var map = "world_mill_en",
          regions = {"MN": "#fad"};
      $("#map").vectorMap({
        map: map,
        series: {
          regions: [{
            values: regions,
            attribute: "fill"
          }]
        },
        labels: {
          regions: {
            render: function(code){
              return regions[code] && jvm.Map.maps[map].paths[code].name;
            }
          }
        }
      });
    });
    <html>
    <head>
      <title>jVectorMap Labels</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/jquery-jvectormap.min.css" type="text/css">
      <style>
        .jvectormap-region.jvectormap-element {
          text-shadow: -1px -1px 3px #fff, 1px -1px 3px #fff, -1px 1px 3px #fff, 1px 1px 3px #fff;
        }
      </style>
      <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery-jvectormap.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/tests/assets/jquery-jvectormap-world-mill-en.js"></script>
    </head>
    <body>
      <div id="map" style="width: 600px; height: 400px"></div>
    </body>
    </html>


    BTW, thanks to bjornd for the great jVectorMap.