File: //usr/local/CyberCP/baseTemplate/static/baseTemplate/assets/widgets/maps/mapael/mapael-demo.js
$(function(){
// Example #1
$(".maparea1").mapael({
map : {
name : "france_departments"
, width : 250
}
});
// Example #2
$(".maparea2").mapael({
map : {
name : "france_departments"
, zoom: {
enabled: true
}
, defaultPlot : {
attrs : {
opacity : 0.6
}
}
},
areas: {
"department-56" : {
text : {content : "56"},
tooltip: {content : "Morbihan (56)"}
}
},
plots : {
'paris' : {
latitude : 48.86,
longitude: 2.3444
},
'lyon' : {
type: "circle",
size:50,
latitude :45.758888888889,
longitude: 4.8413888888889,
value : 700000,
href : "http://fr.wikipedia.org/wiki/Lyon",
tooltip: {content : "<span style=\"font-weight:bold;\">City :</span> Lyon"},
text : {content : "Lyon"}
},
'rennes' : {
type :"square",
size :20,
latitude : 48.114166666667,
longitude: -1.6808333333333,
tooltip: {content : "<span style=\"font-weight:bold;\">City :</span> Rennes"},
text : {content : "Rennes"},
href : "http://fr.wikipedia.org/wiki/Rennes"
}
}
});
$('#refreshmaparea2').on('click', function() {
// Update some plots and areas attributes ...
var updatedOptions = {'areas' : {}, 'plots' : {}};
updatedOptions.areas["department-56"] = {
tooltip : {
content : "Morbihan (56) (2)"
},
attrs: {
fill : "#0088db"
},
text : {content : "56 (2)"}
};
updatedOptions.plots["rennes"] = {
tooltip : {
content : "Rennes (2)"
},
attrs: {
fill : "#f38a03"
}
, text : {position : "top"}
, size : 5
};
// add some new plots ...
var newPlots = {
"Limoge" : {
latitude : 45.834444,
longitude : 1.261667,
text : {content : "Limoge"},
tooltip : {content : "Limoge"}
}
, "Dijon" : {
size:60,
latitude : 47.323056,
longitude : 5.041944,
text : {
content : "Dijon",
position : "left",
margin : 5
}
}
}
// and delete some others ...
var deletedPlots = ["paris", "lyon"];
$(".maparea2").trigger('update', [updatedOptions, newPlots, deletedPlots, {animDuration : 1000}]);
});
// Example #3
$(".maparea3").mapael({
map : {
name : "france_departments",
zoom : {
enabled : true
},
defaultArea: {
attrs : {
fill: "#5ba4ff",
stroke: "#99c7ff",
cursor: "pointer"
},
attrsHover : {
animDuration:0
},
text : {
attrs : {
cursor: "pointer",
"font-size" : 10,
fill :"#000"
},
attrsHover : {
animDuration : 0
}
},
eventHandlers : {
click: function(e, id, mapElem, textElem) {
var newData = {'areas' : {}};
if (mapElem.originalAttrs.fill == "#5ba4ff") {
newData.areas[id] = {
attrs : {
fill : "#0088db"
}
};
} else {
newData.areas[id] = {
attrs : {
fill : "#5ba4ff"
}
};
}
$(".maparea3").trigger('update', [newData]);
}
}
}
},
areas: {
"department-29" : {
text : {content : "dblclick", position : "top"},
attrs : {
fill :"#0088db"
},
tooltip: {content : "Finistère (29)"},
eventHandlers : {
click: function() {},
dblclick: function(e, id, mapElem, textElem) {
var newData = {'areas' : {}};
if (mapElem.originalAttrs.fill == "#5ba4ff") {
newData.areas[id] = {
attrs : {
fill : "#0088db"
}
};
} else {
newData.areas[id] = {
attrs : {
fill : "#5ba4ff"
}
};
}
$(".maparea3").trigger('update', [newData, false, false, 0]);
}
}
}
}
});
// Example #4
$(".maparea4").mapael({
map : {
name : "france_departments",
defaultArea: {
attrs : {
stroke : "#fff",
"stroke-width" : 1
},
attrsHover : {
"stroke-width" : 2
}
}
},
legend : {
area : {
display : true,
title :"Population of France by department",
labelAttrs : {title : "Hide the matching departments"},
slices : [
{
max :300000,
attrs : {
fill : "#97e766"
},
label :"Less than de 300 000 inhabitants"
},
{
min :300000,
max :500000,
attrs : {
fill : "#7fd34d"
},
label :"Between 100 000 and 500 000 inhabitants"
},
{
min :500000,
max :1000000,
attrs : {
fill : "#5faa32"
},
label :"Between 500 000 and 1 000 000 inhabitants"
},
{
min :1000000,
attrs : {
fill : "#3f7d1a"
},
label :"More than 1 million inhabitants"
}
]
}
},
areas: {
"department-59": {
value: "2617939",
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Nord (59)</span><br />Population : 2617939"}
},
"department-75": {
value: "2268265",
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Paris (75)</span><br />Population : 2268265"}
},
"department-13": {
value: "2000550",
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Bouches-du-Rhône (13)</span><br />Population : 2000550"}
},
"department-69": {
value: "1756069",
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Rhône (69)</span><br />Population : 1756069"}
},
"department-92": {
value: "1590749",
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Hauts-de-Seine (92)</span><br />Population : 1590749"}
},
"department-93": {
value: "1534895",
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Seine-Saint-Denis (93)</span><br />Population : 1534895"}
},
"department-62": {
value: "1489209",
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Pas-de-Calais (62)</span><br />Population : 1489209"}
},
"department-33": {
value: "1479277",
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Gironde (33)</span><br />Population : 1479277"}
},
"department-82": {
value: "248227",
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Tarn-et-Garonne (82)</span><br />Population : 248227"}
},
"department-70": {
value: "247311",
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Haute-Saône (70)</span><br />Population : 247311"}
},
"department-36": {
value: "238261",
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Indre (36)</span><br />Population : 238261"}
},
"department-65": {
value: "237945",
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Hautes-Pyrénées (65)</span><br />Population : 237945"}
},
"department-43": {
value: "231877",
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Haute-Loire (43)</span><br />Population : 231877"}
},
"department-973": {
value: "231167",
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Guyane (973)</span><br />Population : 231167"}
},
"department-58": {
value: "226997",
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Nièvre (58)</span><br />Population : 226997"}
},
"department-55": {
value: "200509",
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Meuse (55)</span><br />Population : 200509"}
},
"department-32": {
value: "195489",
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Gers (32)</span><br />Population : 195489"}
},
"department-52": {
value: "191004",
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Haute-Marne (52)</span><br />Population : 191004"}
},
"department-46": {
value: "181232",
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Lot (46)</span><br />Population : 181232"}
},
"department-2B": {
value: "168869",
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Haute-Corse (2B)</span><br />Population : 168869"}
},
"department-04": {
value: "165155",
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Alpes-de-Haute-Provence (04)</span><br />Population : 165155"}
},
"department-09": {
value: "157582",
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Ariège (09)</span><br />Population : 157582"}
},
"department-15": {
value: "154135",
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Cantal (15)</span><br />Population : 154135"}
},
"department-90": {
value: "146475",
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Territoire de Belfort (90)</span><br />Population : 146475"}
},
"department-2A": {
value: "145998",
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Corse-du-Sud (2A)</span><br />Population : 145998"}
},
"department-05": {
value: "142312",
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Hautes-Alpes (05)</span><br />Population : 142312"}
},
"department-23": {
value: "127919",
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Creuse (23)</span><br />Population : 127919"}
},
"department-48": {
value: "81281",
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Lozère (48)</span><br />Population : 81281"}
}
}
});
// Example #5
$(".maparea5").mapael({
map : {
name : "france_departments",
defaultPlot: {
size: 10
},
defaultArea : {
attrsHover: {
fill: "#343434"
, stroke: "#5d5d5d"
, "stroke-width": 1
, "stroke-linejoin": "round"
}
}
},
legend : {
plot :{
display : true,
cssClass: 'cityFrance'
, labelAttrs: {
fill: "#fff"
}
, titleAttrs: {
fill: "#fff"
}
, marginBottom: 20
, marginLeft : 30
, hideElemsOnClick : {
opacity : 0
}
, title: "Population of France by city"
, slices : [
{
size: 4,
type :"circle",
max :20000,
attrs : {
fill : "#89ff72"
},
label :"Less than 20000 inhabitants"
},
{
size: 6,
type :"circle",
min :20000,
max :100000,
attrs : {
fill : "#fffd72"
},
label :"Between 20000 and 100000 inhabitants"
},
{
size: 20,
type :"circle",
min :100000,
max :200000,
attrs : {
fill : "#ffbd54"
},
label :"Between 100000 et 200000 inhabitants"
},
{
size: 40,
type :"circle",
min :200000,
attrs : {
fill : "#ff5454"
},
label :"More than 200000 inhabitants"
}
]
}
},
plots: {
"town-75056" : {
value: "2268265",
latitude: 48.86,
longitude: 2.3444444444444,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Paris (75056)</span><br />Population : 2268265"}
},
"town-13055" : {
value: "859368",
latitude: 43.296666666667,
longitude: 5.3763888888889,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Marseille (13055)</span><br />Population : 859368"}
},
"town-69123" : {
value: "492578",
latitude: 45.758888888889,
longitude: 4.8413888888889,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Lyon (69123)</span><br />Population : 492578"}
},
"town-31555" : {
value: "449328",
latitude: 43.604444444444,
longitude: 1.4419444444444,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Toulouse (31555)</span><br />Population : 449328"}
},
"town-06088" : {
value: "347105",
latitude: 43.701944444444,
longitude: 7.2683333333333,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Nice (06088)</span><br />Population : 347105"}
},
"town-44109" : {
value: "293234",
latitude: 47.217222222222,
longitude: -1.5538888888889,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Nantes (44109)</span><br />Population : 293234"}
},
"town-67482" : {
value: "276401",
latitude: 48.583611111111,
longitude: 7.7480555555556,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Strasbourg (67482)</span><br />Population : 276401"}
},
"town-34172" : {
value: "260572",
latitude: 43.611111111111,
longitude: 3.8766666666667,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Montpellier (34172)</span><br />Population : 260572"}
},
"town-33063" : {
value: "242945",
latitude: 44.837777777778,
longitude: -0.57944444444444,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Bordeaux (33063)</span><br />Population : 242945"}
},
"town-59350" : {
value: "234058",
latitude: 50.631944444444,
longitude: 3.0575,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Lille (59350)</span><br />Population : 234058"}
},
"town-35238" : {
value: "212939",
latitude: 48.114166666667,
longitude: -1.6808333333333,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Rennes (35238)</span><br />Population : 212939"}
},
"town-51454" : {
value: "184011",
latitude: 49.265277777778,
longitude: 4.0286111111111,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Reims (51454)</span><br />Population : 184011"}
},
"town-76351" : {
value: "178070",
latitude: 49.498888888889,
longitude: 0.12111111111111,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Le Havre (76351)</span><br />Population : 178070"}
},
"town-42218" : {
value: "174566",
latitude: 45.433888888889,
longitude: 4.3897222222222,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Saint-Étienne (42218)</span><br />Population : 174566"}
},
"town-83137" : {
value: "166851",
latitude: 43.125,
longitude: 5.9305555555556,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Toulon (83137)</span><br />Population : 166851"}
},
"town-38185" : {
value: "158249",
latitude: 45.186944444444,
longitude: 5.7263888888889,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Grenoble (38185)</span><br />Population : 158249"}
},
"town-21231" : {
value: "155233",
latitude: 47.323055555556,
longitude: 5.0419444444444,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Dijon (21231)</span><br />Population : 155233"}
},
"town-49007" : {
value: "151957",
latitude: 47.472777777778,
longitude: -0.55555555555556,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Angers (49007)</span><br />Population : 151957"}
},
"town-72181" : {
value: "147108",
latitude: 48.004166666667,
longitude: 0.19694444444444,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Le Mans (72181)</span><br />Population : 147108"}
},
"town-69266" : {
value: "146729",
latitude: 45.766111111111,
longitude: 4.8794444444444,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Villeurbanne (69266)</span><br />Population : 146729"}
},
"town-97411" : {
value: "146489",
latitude: -20.878888888889,
longitude: 55.448055555556,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Saint-Denis (97411)</span><br />Population : 146489"}
},
"town-29019" : {
value: "145561",
latitude: 48.39,
longitude: -4.4869444444444,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Brest (29019)</span><br />Population : 145561"}
},
"town-30189" : {
value: "145501",
latitude: 43.836944444444,
longitude: 4.36,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Nîmes (30189)</span><br />Population : 145501"}
},
"town-13001" : {
value: "144884",
latitude: 43.527777777778,
longitude: 5.4455555555556,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Aix-en-Provence (13001)</span><br />Population : 144884"}
},
"town-63113" : {
value: "143669",
latitude: 45.779722222222,
longitude: 3.0869444444444,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Clermont-Ferrand (63113)</span><br />Population : 143669"}
},
"town-87085" : {
value: "141540",
latitude: 45.834444444444,
longitude: 1.2616666666667,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Limoges (87085)</span><br />Population : 141540"}
},
"town-37261" : {
value: "138268",
latitude: 47.392777777778,
longitude: 0.68833333333333,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Tours (37261)</span><br />Population : 138268"}
},
"town-80021" : {
value: "136512",
latitude: 49.891944444444,
longitude: 2.2977777777778,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Amiens (80021)</span><br />Population : 136512"}
},
"town-57463" : {
value: "122928",
latitude: 49.119722222222,
longitude: 6.1769444444444,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Metz (57463)</span><br />Population : 122928"}
},
"town-25056" : {
value: "121038",
latitude: 47.242222222222,
longitude: 6.0213888888889,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Besançon (25056)</span><br />Population : 121038"}
},
"town-66136" : {
value: "119536",
latitude: 42.6975,
longitude: 2.8947222222222,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Perpignan (66136)</span><br />Population : 119536"}
},
"town-45234" : {
value: "117833",
latitude: 47.902222222222,
longitude: 1.9041666666667,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Orléans (45234)</span><br />Population : 117833"}
},
"town-92012" : {
value: "115264",
latitude: 48.835277777778,
longitude: 2.2413888888889,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Boulogne-Billancourt (92012)</span><br />Population : 115264"}
},
"town-76540" : {
value: "113461",
latitude: 49.443055555556,
longitude: 1.1025,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Rouen (76540)</span><br />Population : 113461"}
},
"town-14118" : {
value: "111949",
latitude: 49.182222222222,
longitude: -0.37055555555556,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Caen (14118)</span><br />Population : 111949"}
},
"town-68224" : {
value: "111273",
latitude: 47.748611111111,
longitude: 7.3391666666667,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Mulhouse (68224)</span><br />Population : 111273"}
},
"town-93066" : {
value: "107959",
latitude: 48.935555555556,
longitude: 2.3538888888889,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Saint-Denis (93066)</span><br />Population : 107959"}
},
"town-93066" : {
value: "107959",
latitude: 48.935555555556,
longitude: 2.3538888888889,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Saint-Denis (93066)</span><br />Population : 107959"}
},
"town-54395" : {
value: "107710",
latitude: 48.692777777778,
longitude: 6.1836111111111,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Nancy (54395)</span><br />Population : 107710"}
},
"town-95018" : {
value: "104843",
latitude: 48.947777777778,
longitude: 2.2475,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Argenteuil (95018)</span><br />Population : 104843"}
},
"town-02738" : {
value: "14320",
latitude: 49.655833333333,
longitude: 3.2872222222222,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Tergnier (02738)</span><br />Population : 14320"}
},
"town-01004" : {
value: "14316",
latitude: 45.958055555556,
longitude: 5.3577777777778,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Ambérieu-en-Bugey (01004)</span><br />Population : 14316"}
},
"town-91661" : {
value: "9825",
latitude: 48.701388888889,
longitude: 2.245,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Villebon-sur-Yvette (91661)</span><br />Population : 9825"}
},
"town-63014" : {
value: "9824",
latitude: 45.750833333333,
longitude: 3.1108333333333,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Aubière (63014)</span><br />Population : 9824"}
},
"town-60282" : {
value: "9819",
latitude: 49.187777777778,
longitude: 2.4161111111111,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Gouvieux (60282)</span><br />Population : 9819"}
},
"town-69271" : {
value: "9813",
latitude: 45.744444444444,
longitude: 4.9663888888889,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Chassieu (69271)</span><br />Population : 9813"}
},
"town-33366" : {
value: "9809",
latitude: 44.994722222222,
longitude: -0.44583333333333,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Saint-André-de-Cubzac (33366)</span><br />Population : 9809"}
},
"town-31451" : {
value: "9795",
latitude: 43.458611111111,
longitude: 2.0041666666667,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Revel (31451)</span><br />Population : 9795"}
},
"town-59011" : {
value: "9775",
latitude: 50.529444444444,
longitude: 2.9327777777778,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Annœullin (59011)</span><br />Population : 9775"}
},
"town-13069" : {
value: "9771",
latitude: 43.631388888889,
longitude: 5.1505555555556,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Pélissanne (13069)</span><br />Population : 9771"}
},
"town-91122" : {
value: "9769",
latitude: 48.696666666667,
longitude: 2.1613888888889,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Bures-sur-Yvette (91122)</span><br />Population : 9769"}
},
"town-02381" : {
value: "9756",
latitude: 49.921666666667,
longitude: 4.0838888888889,
href : "#",
tooltip: {content : "<span style=\"font-weight:bold;\">Hirson (02381)</span><br />Population : 9756"}
}
}
});
// Example #6
$(".maparea6").mapael({
map : {
name : "world_countries",
defaultArea: {
attrs : {
stroke : "#fff",
"stroke-width" : 1
}
}
},
legend : {
area : {
display : true,
title :"Population by country",
slices : [
{
max :5000000,
attrs : {
fill : "#6aafe1"
},
label :"Less than de 5000000 inhabitants"
},
{
min :5000000,
max :10000000,
attrs : {
fill : "#459bd9"
},
label :"Between 5000000 and 10000000 inhabitants"
},
{
min :10000000,
max :50000000,
attrs : {
fill : "#2579b5"
},
label :"Between 10000000 and 50000000 inhabitants"
},
{
min :50000000,
attrs : {
fill : "#1a527b"
},
label :"More than 50 million inhabitants"
}
]
},
plot :{
display : true,
title: "Some cities ..."
, slices : [
{
max :500000,
attrs : {
fill : "#f99200"
},
attrsHover :{
transform : "s1.5",
"stroke-width" : 1
},
label :"less than 500 000 inhabitants",
size : 10
},
{
min :500000,
max :1000000,
attrs : {
fill : "#f99200"
},
attrsHover :{
transform : "s1.5",
"stroke-width" : 1
},
label :"Between 500 000 and 1 000 000 inhabitants",
size : 20
},
{
min :1000000,
attrs : {
fill : "#f99200"
},
attrsHover :{
transform : "s1.5",
"stroke-width" : 1
},
label :"More than 1 million inhabitants",
size : 30
}
]
}
},
plots : {
'paris' : {
latitude :48.86,
longitude :2.3444,
value : 500000000,
tooltip: {content : "Paris<br />Population: 500000000"}
},
'newyork' : {
latitude :40.667,
longitude :-73.833,
value : 200001,
tooltip: {content : "New york<br />Population: 200001"}
},
'sydney' : {
latitude :-33.917,
longitude :151.167,
value : 600000,
tooltip: {content : "Sydney<br />Population: 600000"}
},
'brasilia' : {
latitude :-15.781682,
longitude :-47.924195,
value : 200000001,
tooltip: {content : "Brasilia<br />Population: 200000001"}
},
'tokyo': {
latitude :35.687418,
longitude :139.692306,
value : 200001,
tooltip: {content : "Tokyo<br />Population: 200001"}
}
},
areas: {
"AF": {
"value": "35320445",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Afghanistan<\/span><br \/>Population : 35320445"
}
},
"ZA": {
"value": "50586757",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">South Africa<\/span><br \/>Population : 50586757"
}
},
"AL": {
"value": "3215988",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Albania<\/span><br \/>Population : 3215988"
}
},
"DZ": {
"value": "35980193",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Algeria<\/span><br \/>Population : 35980193"
}
},
"DE": {
"value": "81726000",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Germany<\/span><br \/>Population : 81726000"
}
},
"AD": {
"value": "86165",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Andorra<\/span><br \/>Population : 86165"
}
},
"AO": {
"value": "19618432",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Angola<\/span><br \/>Population : 19618432"
}
},
"AG": {
"value": "89612",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Antigua And Barbuda<\/span><br \/>Population : 89612"
}
},
"SA": {
"value": "28082541",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Saudi Arabia<\/span><br \/>Population : 28082541"
}
},
"AR": {
"value": "40764561",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Argentina<\/span><br \/>Population : 40764561"
}
},
"AM": {
"value": "3100236",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Armenia<\/span><br \/>Population : 3100236"
}
},
"AU": {
"value": "22620600",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Australia<\/span><br \/>Population : 22620600"
}
},
"AT": {
"value": "8419000",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Austria<\/span><br \/>Population : 8419000"
}
},
"AZ": {
"value": "9168000",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Azerbaijan<\/span><br \/>Population : 9168000"
}
},
"BS": {
"value": "347176",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Bahamas<\/span><br \/>Population : 347176"
}
},
"BH": {
"value": "1323535",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Bahrain<\/span><br \/>Population : 1323535"
}
},
"BD": {
"value": "150493658",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Bangladesh<\/span><br \/>Population : 150493658"
}
},
"BB": {
"value": "273925",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Barbados<\/span><br \/>Population : 273925"
}
},
"BE": {
"value": "11008000",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Belgium<\/span><br \/>Population : 11008000"
}
},
"BZ": {
"value": "356600",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Belize<\/span><br \/>Population : 356600"
}
},
"BJ": {
"value": "9099922",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Benin<\/span><br \/>Population : 9099922"
}
},
"BT": {
"value": "738267",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Bhutan<\/span><br \/>Population : 738267"
}
},
"BY": {
"value": "9473000",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Belarus<\/span><br \/>Population : 9473000"
}
},
"MM": {
"value": "48336763",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Myanmar<\/span><br \/>Population : 48336763"
}
},
"BO": {
"value": "10088108",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Bolivia, Plurinational State Of<\/span><br \/>Population : 10088108"
}
},
"BA": {
"value": "3752228",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Bosnia And Herzegovina<\/span><br \/>Population : 3752228"
}
},
"BW": {
"value": "2030738",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Botswana<\/span><br \/>Population : 2030738"
}
},
"BR": {
"value": "196655014",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Brazil<\/span><br \/>Population : 196655014"
}
},
"BN": {
"value": "405938",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Brunei Darussalam<\/span><br \/>Population : 405938"
}
},
"BG": {
"value": "7476000",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Bulgaria<\/span><br \/>Population : 7476000"
}
},
"BF": {
"value": "16967845",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Burkina Faso<\/span><br \/>Population : 16967845"
}
},
"BI": {
"value": "8575172",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Burundi<\/span><br \/>Population : 8575172"
}
},
"KH": {
"value": "14305183",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Cambodia<\/span><br \/>Population : 14305183"
}
},
"CM": {
"value": "20030362",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Cameroon<\/span><br \/>Population : 20030362"
}
},
"CA": {
"value": "34482779",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Canada<\/span><br \/>Population : 34482779"
}
},
"CV": {
"value": "500585",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Cape Verde<\/span><br \/>Population : 500585"
}
},
"ZW": {
"value": "12754378",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style=\"font-weight:bold;\">Zimbabwe<\/span><br \/>Population : 12754378"
}
}
}
});
// Example #7
$(".maparea7").mapael({
map : {
name : "usa_states"
},
plots: {
'ny' : {
latitude: 40.717079,
longitude: -74.00116,
tooltip: {content : "New York"}
},
'an' : {
latitude: 61.2108398,
longitude: -149.9019557,
tooltip: {content : "Anchorage"}
},
'sf' : {
latitude: 37.792032,
longitude: -122.394613,
tooltip: {content : "San Francisco"}
},
'pa' : {
latitude: 19.493204,
longitude: -154.8199569,
tooltip: {content : "Pahoa"}
}
}
});
});