//tile
<section class="tile">

  //tile header
  <div class="tile-header nopadding">
    <div class="controls">
      <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
      <a href="#" class="remove"><i class="fa fa-times"></i></a>
    </div>
  </div>
  // /tile header

  //tile body
  <div class="tile-body tab-content nopadding" style="padding-bottom: 1px;">
                      
    <div class="tab-pane fade in active" id="gdpContainer">
      <div id="gdp" style="height: 570px;"></div>
    </div>

    <div class="tab-pane fade" id="markersContainer">
      <div id="markers" style="height: 570px;"></div>
    </div>

    <div class="tab-pane fade" id="unemploymentContainer">
      <div id="unemployment" style="height: 570px;"></div>
      <div id="value" class="slider-value"></div>
      <div class="noUiSlider margin-15" id="slider"></div>
    </div>

    <div class="tab-pane fade" id="regionsContainer">
      <div id="regions" style="height: 570px;"></div>
    </div>

    <div class="tab-pane fade" id="franceContainer">
      <div id="france" style="height: 570px;"></div>
    </div>

    <div class="tab-pane fade" id="colorsContainer">
      <div id="colors" style="height: 570px;"></div>
      <button id="randomColors" class="btn btn-greensea margin-15">Random Colors</button>
    </div>

    <div class="tab-pane fade" id="mallContainer">
      <div id="mall" style="height: 570px;"></div>
    </div>

    <div class="tab-pane fade" id="reverseContainer">
      <div id="reverse" style="height: 570px;"></div>
    </div>

  </div>
  // /tile body

  //tile footer
  <div class="tile-footer nopadding">

    <ul class="nav nav-pills">
      <li class="active"><a href="#gdpContainer" data-toggle="pill" data-id="gdp">GDP by country visualization</a></li>
      <li><a href="#markersContainer" data-toggle="pill" data-id="markers">Markers on the world map</a></li>
      <li><a href="#unemploymentContainer" data-toggle="pill" data-id="unemployment">USA unemployment</a></li>
      <li><a href="#regionsContainer" data-toggle="pill" data-id="regions">Regions selection</a></li> 
      <li><a href="#franceContainer" data-toggle="pill" data-id="france">France elections</a></li> 
      <li><a href="#colorsContainer" data-toggle="pill" data-id="colors">Random colors</a></li> 
      <li><a href="#mallContainer" data-toggle="pill" data-id="mall">Map of the mall</a></li> 
      <li><a href="#reverseContainer" data-toggle="pill" data-id="reverse">Reverse projection</a></li>                  
    </ul>

  </div>
  // /tile footer

</section>
// /tile

//****************************//
//*********** jquery *********//
//****************************//

// GDP by country visualization
var initGdpMap = function(){
  $('#gdp').vectorMap({
    map: 'world_mill_en',
    series: {
      regions: [{
        values: gdpData,
        scale: ['#C8EEFF', '#0071A4'],
        normalizeFunction: 'polynomial'
      }]
    },
    onLabelShow: function(e, el, code){
      el.html(el.html()+' (GDP - '+gdpData[code]+')');
    }
  });
};

initGdpMap();

// Markers on the world map
var initMarkersMap = function() {
  $('#markers').vectorMap({
    map: 'world_mill_en',
    scaleColors: ['#C8EEFF', '#0071A4'],
    normalizeFunction: 'polynomial',
    hoverOpacity: 0.7,
    hoverColor: false,
    markerStyle: {
      initial: {
        fill: '#F8E23B',
        stroke: '#383f47'
      }
    },
    backgroundColor: '#383f47',
    markers: [
      {latLng: [41.90, 12.45], name: 'Vatican City'},
      {latLng: [43.73, 7.41], name: 'Monaco'},
      {latLng: [-0.52, 166.93], name: 'Nauru'},
      {latLng: [-8.51, 179.21], name: 'Tuvalu'},
      {latLng: [43.93, 12.46], name: 'San Marino'},
      {latLng: [47.14, 9.52], name: 'Liechtenstein'},
      {latLng: [7.11, 171.06], name: 'Marshall Islands'},
      {latLng: [17.3, -62.73], name: 'Saint Kitts and Nevis'},
      {latLng: [3.2, 73.22], name: 'Maldives'},
      {latLng: [35.88, 14.5], name: 'Malta'},
      {latLng: [12.05, -61.75], name: 'Grenada'},
      {latLng: [13.16, -61.23], name: 'Saint Vincent and the Grenadines'},
      {latLng: [13.16, -59.55], name: 'Barbados'},
      {latLng: [17.11, -61.85], name: 'Antigua and Barbuda'},
      {latLng: [-4.61, 55.45], name: 'Seychelles'},
      {latLng: [7.35, 134.46], name: 'Palau'},
      {latLng: [42.5, 1.51], name: 'Andorra'},
      {latLng: [14.01, -60.98], name: 'Saint Lucia'},
      {latLng: [6.91, 158.18], name: 'Federated States of Micronesia'},
      {latLng: [1.3, 103.8], name: 'Singapore'},
      {latLng: [1.46, 173.03], name: 'Kiribati'},
      {latLng: [-21.13, -175.2], name: 'Tonga'},
      {latLng: [15.3, -61.38], name: 'Dominica'},
      {latLng: [-20.2, 57.5], name: 'Mauritius'},
      {latLng: [26.02, 50.55], name: 'Bahrain'},
      {latLng: [0.33, 6.73], name: 'São Tomé and Príncipe'}
    ]
  });    
};

initMarkersMap();

// USA unemployment
var initUnemploymentMap = function() {
  $.getJSON('js/plugins/jvectormaps/json/us-unemployment.json', function(data){
    
    var val = 2009;
        statesValues = jvm.values.apply({}, jvm.values(data.states)),
        metroPopValues = Array.prototype.concat.apply([], jvm.values(data.metro.population)),
        metroUnemplValues = Array.prototype.concat.apply([], jvm.values(data.metro.unemployment));

    $('#unemployment').vectorMap({
      map: 'us_aea_en',
      markers: data.metro.coords,
      series: {
        markers: [{
          attribute: 'fill',
          scale: ['#FEE5D9', '#A50F15'],
          values: data.metro.unemployment[val],
          min: jvm.min(metroUnemplValues),
          max: jvm.max(metroUnemplValues)
        },{
          attribute: 'r',
          scale: [5, 20],
          values: data.metro.population[val],
          min: jvm.min(metroPopValues),
          max: jvm.max(metroPopValues)
        }],
        regions: [{
          scale: ['#DEEBF7', '#08519C'],
          attribute: 'fill',
          values: data.states[val],
          min: jvm.min(statesValues),
          max: jvm.max(statesValues)
        }]
      },
      onMarkerLabelShow: function(event, label, index){
        label.html(
           '<b>'+data.metro.names[index]+'</b><br/>'+'<b>Population: </b>'+data.metro.population[val][index]+'<br/>'+'<b>Unemployment rate: </b>'+data.metro.unemployment[val][index]+'%'
        );
      },
      onRegionLabelShow: function(event, label, code){
        label.html(
          '<b>'+label.html()+'</b><br/>'+'<b>Unemployment rate: </b>'+data.states[val][code]+'%'
        );
      }
    });

    var mapObject = $('#unemployment').vectorMap('get', 'mapObject');

    $("#slider").noUiSlider({
      range: [2005,2009],
      start: 2009,
      handles: 1,
      step: 1,
      serialization: {
        to: [ $('#value'), 'text' ],
        resolution: 1
      },
      slide: function(e) {
        val = $(this).val();
        mapObject.series.regions[0].setValues(data.states[val]);
        mapObject.series.markers[0].setValues(data.metro.unemployment[val]);
        mapObject.series.markers[1].setValues(data.metro.population[val]);
      }
    });
  });
};

initUnemploymentMap();

//Regions selection
var initRegionsMap = function() {
  var map,
  markers = [
    {latLng: [52.50, 13.39], name: 'Berlin'},
    {latLng: [53.56, 10.00], name: 'Hamburg'},
    {latLng: [48.13, 11.56], name: 'Munich'},
    {latLng: [50.95, 6.96], name: 'Cologne'},
    {latLng: [50.11, 8.68], name: 'Frankfurt am Main'},
    {latLng: [48.77, 9.17], name: 'Stuttgart'},
    {latLng: [51.23, 6.78], name: 'Düsseldorf'},
    {latLng: [51.51, 7.46], name: 'Dortmund'},
    {latLng: [51.45, 7.01], name: 'Essen'},
    {latLng: [53.07, 8.80], name: 'Bremen'}
  ],
  cityAreaData = [
    887.70,
    755.16,
    310.69,
    405.17,
    248.31,
    207.35,
    217.22,
    280.71,
    210.32,
    325.42
  ]

  map = new jvm.WorldMap({
    container: $('#regions'),
    map: 'de_merc_en',
    regionsSelectable: true,
    markersSelectable: true,
    markers: markers,
    markerStyle: {
      initial: {
        fill: '#4DAC26'
      },
      selected: {
        fill: '#CA0020'
      }
    },
    regionStyle: {
      initial: {
        fill: '#B8E186'
      },
      selected: {
        fill: '#F4A582'
      }
    },
    series: {
      markers: [{
        attribute: 'r',
        scale: [5, 15],
        values: cityAreaData
      }]
    },
    onRegionSelected: function(){
      if (window.localStorage) {
        window.localStorage.setItem(
          'jvectormap-selected-regions',
          JSON.stringify(map.getSelectedRegions())
        );
      }
    },
    onMarkerSelected: function(){
      if (window.localStorage) {
        window.localStorage.setItem(
          'jvectormap-selected-markers',
          JSON.stringify(map.getSelectedMarkers())
        );
      }
    }
  });
  map.setSelectedRegions( JSON.parse( window.localStorage.getItem('jvectormap-selected-regions') || '[]' ) );
  map.setSelectedMarkers( JSON.parse( window.localStorage.getItem('jvectormap-selected-markers') || '[]' ) );
};

initRegionsMap();

//France elections
var initFranceMap = function() {
  $.getJSON('js/plugins/jvectormaps/json/france-elections.json', function(data){
    new jvm.WorldMap({
      map: 'fr_merc_en',
      container: $('#france'),
      series: {
        regions: [{
          scale: {
            '1': '#4169E1',
            '2': '#FF69B4'
          },
          attribute: 'fill',
          values: data['year2012'].results
        }]
      }
    });
  });
};

initFranceMap();

//Random colors
var initColorsMap = function() {
  var palette = ['#66C2A5', '#FC8D62', '#8DA0CB', '#E78AC3', '#A6D854'],
    generateColors = function(){
      var colors = {},
          key;

      for (key in map.regions) {
        colors[key] = palette[Math.floor(Math.random()*palette.length)];
      }
      return colors;
    },
    map;

  map = new jvm.WorldMap({
    map: 'es_merc_en',
    container: $('#colors'),
    series: {
      regions: [{
        attribute: 'fill'
      }]
    }
  });
  
  map.series.regions[0].setValues(generateColors());
  
  $('#randomColors').click(function(e){
    e.preventDefault();
    map.series.regions[0].setValues(generateColors());
  });
};

initColorsMap();

//Map of the mall
var initMallMap = function() {
  $('#mall').vectorMap({
    map: 'mall',
    backgroundColor: 'transparent',
    markers: [{
      coords: [60, 110],
      name: 'Escalator 1',
      style: {fill: 'yellow'}
    },{
      coords: [260, 95],
      name: 'Escalator 2',
      style: {fill: 'yellow'}
    },{
      coords: [434, 95],
      name: 'Escalator 3',
      style: {fill: 'yellow'}
    },{
      coords: [634, 110],
      name: 'Escalator 4',
      style: {fill: 'yellow'}
    }],
    series: {
      regions: [{
        values: {
          F102: 'SPORTS & OUTDOOR',
          F103: 'HOME DECOR',
          F105: 'FASHION',
          F106: 'OTHER',
          F108: 'BEAUTY & SPA',
          F109: 'FASHION',
          F110: 'BEAUTY & SPA',
          F111: 'URBAN FAVORITES',
          F114: 'SERVICES',
          F166: 'DINING',
          F167: 'FASHION',
          F169: 'DINING',
          F170: 'ENTERTAINMENT',
          F172: 'DINING',
          F174: 'DINING',
          F115: 'KIDS STUFF',
          F117: 'LIFESTYLE',
          F118: 'URBAN FAVORITES',
          F119: 'FASHION',
          F120: 'FASHION',
          F122: 'KIDS STUFF',
          F124: 'KIDS STUFF',
          F125: 'KIDS STUFF',
          F126: 'KIDS STUFF',
          F128: 'KIDS STUFF',
          F129: 'LIFESTYLE',
          F130: 'HOME DECOR',
          F132: 'DINING',
          F133: 'SPORTS & OUTDOOR',
          F134: 'KIDS STUFF',
          F135: 'LIFESTYLE',
          F136: 'LIFESTYLE',
          F139: 'KIDS STUFF',
          F153: 'DINING',
          F155: 'FASHION',
          F156: 'URBAN FAVORITES',
          F157: 'URBAN FAVORITES',
          F158: 'LINGERIE & UNDERWEAR',
          F159: 'FASHION',
          F160: 'FASHION',
          F162: 'FASHION',
          F164: 'FASHION',
          F165: 'FASHION',
          FR01: 'REST ROOMS',
          FR02: 'REST ROOMS',
          FR03: 'REST ROOMS',
          FR04: 'REST ROOMS',
          FFC: 'DINING'
        },
        scale: {
          "FASHION": "#2761ad",
          "LINGERIE & UNDERWEAR": "#d58aa3",
          "BEAUTY & SPA": "#ee549f",
          "URBAN FAVORITES": "#15bbba",
          "SPORTS & OUTDOOR": "#8864ab",
          "KIDS STUFF": "#ef4e36",
          "ENTERTAINMENT": "#e47325",
          "HOME DECOR": "#a2614f",
          "LIFESTYLE": "#8a8934",
          "DINING": "#73bb43",
          "REST ROOMS": "#6c260f",
          "SERVICES": "#504d7c",
          "OTHER": "#c7b789"
        }
      }]
    },
    onRegionLabelShow: function(e, el, code){
      if (el.html() === '') {
        e.preventDefault();
      }
    }
  });
};

initMallMap();

//Reverse projection
var initReverseMap = function() {
  var map,
      markerIndex = 0,
      markersCoords = {};

  map = new jvm.WorldMap({
    map: 'us_lcc_en',
    markerStyle: {
      initial: {
        fill: 'red'
      }
    },
    container: $('#reverse'),
    onMarkerLabelShow: function(e, label, code){
      map.label.text(markersCoords[code].lat.toFixed(2)+', '+markersCoords[code].lng.toFixed(2));
    },
    onMarkerClick: function(e, code){
      map.removeMarkers([code]);
      map.label.hide();
    }
  });

  map.container.click(function(e){
    var latLng = map.pointToLatLng(e.offsetX, e.offsetY),
        targetCls = $(e.target).attr('class');

    if (latLng && (!targetCls || (targetCls && $(e.target).attr('class').indexOf('jvectormap-marker') === -1))) {
      markersCoords[markerIndex] = latLng;
      map.addMarker(markerIndex, {latLng: [latLng.lat, latLng.lng]});
      markerIndex += 1;
    }
  });
};

initReverseMap();

// Resize maps after tab show
$('a[data-toggle="pill"]').on('shown.bs.tab', function (e) {   
  $('.tab-pane').resize();    
});

//  Initialize tabDrop
$('.tabdrop').tabdrop({text: '<i class="fa fa-th-list"></i>'});