SMusatov
/
gentelella
mirror of https://github.com/ColorlibHQ/gentelella.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
							<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>JQVMap - World Map</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">

    <link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../dist/jquery.vmap.js"></script>

    <script type="text/javascript" src="../dist/maps/continents/jquery.vmap.asia.js"></script>
    <script type="text/javascript" src="../dist/maps/continents/jquery.vmap.europe.js"></script>
    <script type="text/javascript" src="../dist/maps/continents/jquery.vmap.australia.js"></script>
    <script type="text/javascript" src="../dist/maps/continents/jquery.vmap.africa.js"></script>
    <script type="text/javascript" src="../dist/maps/continents/jquery.vmap.north-america.js"></script>
    <script type="text/javascript" src="../dist/maps/continents/jquery.vmap.south-america.js"></script>

    <script type="text/javascript" src="js/jquery.vmap.sampledata.js"></script>

    <script>
      jQuery(document).ready(function () {
        $('h2').each(function () {
          $(this).click(function () {
            $('.tab-selected').removeClass('tab-selected');
            $(this).addClass('tab-selected');
            $('.map').css('z-index', '0');
            $('#vmap-' + this.id).parent().css('z-index', '1');
          });
        });
        $('h2:first').addClass('tab-selected');
        $('.map:first').css('z-index', '1');

        jQuery('#vmap-asia').vectorMap({
          map: 'asia_en',
          backgroundColor: '#333333',
          color: '#ffffff',
          hoverOpacity: 0.7,
          selectedColor: '#666666',
          enableZoom: true,
          showTooltip: true,
          values: sample_data,
          scaleColors: ['#C8EEFF', '#006491'],
          normalizeFunction: 'polynomial'
        });
        jQuery('#vmap-europe').vectorMap({
          map: 'europe_en',
          backgroundColor: '#333333',
          color: '#ffffff',
          hoverOpacity: 0.7,
          selectedColor: '#666666',
          enableZoom: true,
          showTooltip: true,
          values: sample_data,
          scaleColors: ['#C8EEFF', '#006491'],
          normalizeFunction: 'polynomial'
        });
        jQuery('#vmap-australia').vectorMap({
          map: 'australia_en',
          backgroundColor: '#333333',
          color: '#ffffff',
          hoverOpacity: 0.7,
          selectedColor: '#666666',
          enableZoom: true,
          showTooltip: true,
          values: sample_data,
          scaleColors: ['#C8EEFF', '#006491'],
          normalizeFunction: 'polynomial'
        });
        jQuery('#vmap-africa').vectorMap({
          map: 'africa_en',
          backgroundColor: '#333333',
          color: '#ffffff',
          hoverOpacity: 0.7,
          selectedColor: '#666666',
          enableZoom: true,
          showTooltip: true,
          values: sample_data,
          scaleColors: ['#C8EEFF', '#006491'],
          normalizeFunction: 'polynomial'
        });
        jQuery('#vmap-northamerica').vectorMap({
          map: 'north-america_en',
          backgroundColor: '#333333',
          color: '#ffffff',
          hoverOpacity: 0.7,
          selectedColor: '#666666',
          enableZoom: true,
          showTooltip: true,
          values: sample_data,
          scaleColors: ['#C8EEFF', '#006491'],
          normalizeFunction: 'polynomial'
        });
        jQuery('#vmap-southamerica').vectorMap({
          map: 'south-america_en',
          backgroundColor: '#333333',
          color: '#ffffff',
          hoverOpacity: 0.7,
          selectedColor: '#666666',
          enableZoom: true,
          showTooltip: true,
          values: sample_data,
          scaleColors: ['#C8EEFF', '#006491'],
          normalizeFunction: 'polynomial'
        });
      });
    </script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      h2 {
        background: none repeat scroll 0 0 #cccccc;
        border: 1px solid #aaaaaa;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        float: left;
        padding: 5px;
        font-size: 20px;
        font-weight: normal;
        cursor: pointer;
      }

      h2.tab-selected {
        background: #888888;
        border: 1px solid #000000;
      }

      .map {
        position: absolute;
        z-index: 0;
        left: 0;
        top: 35px;
      }
    </style>
  </head>
  <body>
    <h2 id="asia">Asia</h2>

    <div class="map">
      <div id="vmap-asia" style="width: 600px; height: 400px;"></div>
    </div>
    <h2 id="europe">Europe</h2>

    <div class="map">
      <div id="vmap-europe" style="width: 600px; height: 400px;"></div>
    </div>
    <h2 id="australia">Australia</h2>

    <div class="map">
      <div id="vmap-australia" style="width: 600px; height: 400px;"></div>
    </div>
    <h2 id="africa">Africa</h2>

    <div class="map">
      <div id="vmap-africa" style="width: 600px; height: 400px;"></div>
    </div>
    <h2 id="northamerica">North America</h2>

    <div class="map">
      <div id="vmap-northamerica" style="width: 600px; height: 400px;"></div>
    </div>
    <h2 id="southamerica">South America</h2>

    <div class="map">
      <div id="vmap-southamerica" style="width: 600px; height: 400px;"></div>
    </div>
  </body>
</html>