#9361

by amcharts

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/maps/js/worldHigh.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/maps/js/continentsHigh.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="mapdiv"></div>

CSS

#mapdiv {
	width	: 100%;
	height	: 500px;
}

.ammapAlert 
{
    display:table-cell; 
    vertical-align:middle; 
    text-align:center; 
    font-family:verdana,helvetica,arial,sans-serif;
    font-size:12px;
    color:#CC0000;
}

.ammapDescriptionWindow
{
   font-size:11px;
   font-family:verdana,helvetica,arial,sans-serif;    
   background-color:#FFFFFF;
   border-style:solid;
   border-color:#DADADA;
   border-width:1px;
   color:#000000;
   padding:8px;  
}

.ammapDescriptionTitle
{
   font-size:12px;
   font-weight:bold;
   font-family:verdana,helvetica,arial,sans-serif;
   padding-bottom:5px;    
}

.ammapDescriptionWindowCloseButton
{
    
}

.ammapObjectList ul 
{
    padding-left:20px; 
    list-style:square outside; 
    color:#999999;
    font-family:verdana,helvetica,arial,sans-serif;
    font-size: 12px;
}

.ammapObjectList ul ul 
{
    padding-left:14px;
}

.ammapObjectList a 
{
    color:#000000;
}

.ammapObjectList a 
{
    color:#000000;
    text-decoration:none;
    display:block;
    padding:2px;
}

.ammapObjectList a:hover 
{
    color:#CC0000;
    text-decoration:none;
    background:#FFFFFF;
    cursor:pointer;
    display:block;
}

.ammapDescriptionText 
{
	overflow: auto; 
}

JavaScript

/*
 * See http://docs.amcharts.com/3/javascriptmaps/AmCharts
 */

var map;
var continentsDataProvider;

AmCharts.ready(function () {

  map = new AmCharts.AmMap();
  map.zoomControl.zoomControlEnabled = false;
  map.zoomControl.panControlEnabled = false;

  // set path to images
    map.pathToImages = "http://www.amcharts.com/lib/3/images/";

  map.dragMap = false;
  // map.language = 'fr'; // French
  map.language = 'ar'; // Arabic

  var worldDataProvider = {
    // mapVar: AmCharts.maps.worldLow,
    mapVar: AmCharts.maps.worldHigh,
    getAreasFromMap: true
  };

  var colorDefl = '#d8d7d2';

  map.areasSettings = {
    autoZoom: false,
    rollOverOutlineColor: "#000000",
    selectedColor: colorDefl,
    color: colorDefl,
    descriptionWindowWidth: 300,
    descriptionWindowBottom: 20
  };

  var continentsDataProvider = {
    // mapVar: AmCharts.maps.continentsLow,
    mapVar: AmCharts.maps.continentsHigh,

    areas: [
      {
        id: "africa",
        // linkToObject: worldDataProvider,
        selectedColor: "#723C1A",
        description: "Description aaaaa aaaaa aaaa"
      },
      {
        id: "asia",
        //  linkToObject: worldDataProvider,
        selectedColor: "#C8AB67",
        description: "Description aaaaa aaaaa aaaa"
      },
      {
        id: "australia",
        //  linkToObject: worldDataProvider,
        selectedColor: "#93644A",
        // description: 'Currently no profile available for Australia'
        description: "Description aaaaa aaaaa aaaa"
      },
      {
        id: "europe",
        //  linkToObject: worldDataProvider,
        selectedColor: "#003366",
        description: "Description aaaaa aaaaa aaaa",
        descriptionWindowWidth: 345
      },
      {
        id: "north_america",
        //  linkToObject: worldDataProvider,
        selectedColor: "#6699CC",
        description: "Description aaaaa aaaaa aaaa"
      },
      {
        id: "south_america",
        //  linkToObject: worldDataProvider,
       ...