javascripthtmljqueryjvectormapshadowbox

Display different html content dependant on JVectormap region in shadowbox.js


Ive created a world map using JVectorMap and am wanting to open a box using Shadowbox.js displaying various information about each highlighted country - In this example it's specifically MENA countries.

I need help with displaying a different message depending on which of the highlighted countries is clicked - its currently the same message for all.

So far I can display html content for the countries highlighted in the image onclick:

enter image description here

Here is my code so far:


  <div id="world-map" style="width: 600px; height: 400px"></div>
  <script type="text/javascript">

    $(function(){
      
      var codes = ['DZ','EG','IR','IQ','IL','JO','KW','LB','LY','MA','OM','QA','SA','TN','AE','YE']; // Regions in MENA
      
      $('#world-map').vectorMap({
        map: 'world_mill_en',
        zoomMax: 20,
        backgroundColor: '#505050',
        regionStyle: {
          initial: {
            fill: '#F6F5F4'
          },
          hover: {
            fill: '#F6F5F4',
            "fill-opacity": 1
          },
          selected: {
            fill: '#7B8B9B'
          },
          selectedHover: {
            cursor: 'pointer',
            fill: '#002142'
          }
        },
        selectedRegions: ['DZ','EG','IR','IQ','IL','JO','KW','LB','LY','MA','OM','QA','SA','TN','AE','YE'], onRegionClick: function (event, code) {
          
          if($.inArray(code,codes) > -1) {
            Shadowbox.open({ 
              content: '<p style="color: white; font-size: 16px;">CONTENT</p>',
              player:     "html",
              title:      "Middle East and North Africa",
              height:     400,
              width:      640
            });
          }
        }
      });
    });
    </script>

How could I change the CONTENT if say country 'SA' is clicked?

Any help appreciated


Solution

  • In case is helps anyone I used a switch statement for each item in the array:

    selectedRegions: ['DZ','EG','IR','IQ','IL','JO','KW','LB','LY','MA','OM','QA','SA','TN','AE','YE'], onRegionClick: function (event, code) {
              
              var codesInArray = $.inArray(code,codes);
    
              switch (codesInArray){
                case 0: //Algeria
                  Shadowbox.open({ 
                    content: '<p style="color: white; font-size: 16px;">ALGERIA</p>',
                    player:     "html",
                    title:      "Middle East and North Africa",
                    height:     400,
                    width:      640
                });
                break;
    
                case 1: //EGYPT
                  Shadowbox.open({ 
                    content: '<p style="color: white; font-size: 16px;">Egypt</p>',
                    player:     "html",
                    title:      "Middle East and North Africa",
                    height:     400,
                    width:      640
                });
                break; 
    
                case 2: //IRAN
                  Shadowbox.open({ 
                    content: '<p style="color: white; font-size: 16px;">iran</p>',
                    player:     "html",
                    title:      "Middle East and North Africa",
                    height:     400,
                    width:      640
                });
                break;
    
                case 5: //Joran
                  Shadowbox.open({ 
                    content: '<p style="color: white; font-size: 16px;">Jordan</p>',
                    player:     "html",
                    title:      "Middle East and North Africa",
                    height:     400,
                    width:      640
                });
                break;
    
                case 11: //Qatar
                  Shadowbox.open({ 
                    content: '<p style="color: white; font-size: 16px; text-align: center;"><span style="font-weight: bold; font-size: 25px;">Qatar Skills Academy</span><br>Barwa Commercial Avenue<br>Building 39<br>Doha<br>Qatar</p>',
                    player:     "html",
                    title:      "Middle East and North Africa",
                    height:     400,
                    width:      640
                });
                break;
    
                default: 
                return;
              }