$(function(){
$(function(){
$(".container1").mapael({
map : {
// Set the name of the map to display
name : "france_departments",
}
});
});
$(".container2").mapael({
map : {
name : "france_departments"
// Set default plots and areas style
, defaultPlot : {
attrs : {
fill: "#004a9b"
, opacity : 0.6
}
, attrsHover : {
opacity : 1
}
, text : {
attrs : {
fill : "#505444"
}
, attrsHover : {
fill : "#000"
}
}
}
, defaultArea: {
attrs : {
fill : "#f4f4e8"
, stroke: "#ced8d0"
}
, attrsHover : {
fill: "#a4e100"
}
, text : {
attrs : {
fill : "#505444"
}
, attrsHover : {
fill : "#000"
}
}
}
},
// Customize some areas of the map
areas: {
"department-56" : {
text : {content : "Morbihan", attrs : {"font-size" : 10}},
tooltip: {content : "Morbihan
Bretagne"}
},
"department-21" : {
attrs : {
fill : "#488402"
}
, attrsHover : {
fill: "#a4e100"
}
}
},
// Add some plots on the map
plots : {
// Image plot
'paris' : {
type : "image",
url: "http://www.neveldo.fr/mapael/marker.png",
width: 12,
height: 40,
latitude : 48.86,
longitude: 2.3444,
attrs : {
opacity : 1
},
attrsHover: {
transform : "s1.5"
}
},
// Circle plot
'lyon' : {
type: "circle",
size:50,
latitude :45.758888888889,
longitude: 4.8413888888889,
tooltip: {content : "City : Lyon
Rhône-Alpes"},
text : {content : "Lyon"}
},
// Square plot
'rennes' : {
type :"square",
size :20,
latitude : 48.114166666667,
longitude: -1.6808333333333,
tooltip: {content : "City : Rennes
Bretagne"},
text : {content : "Rennes"}
},
// Plot positioned by x and y instead of latitude, longitude
'myplot' : {
x : 300,
y: 200,
text : {
content : "My plot"
, position: "bottom"
, attrs : {"font-size" : 10, fill : "#004a9b", opacity: 0.6}
, attrsHover : {fill : "#004a9b", opacity: 1}
},
},
'Bordeaux' : {
type: "circle",
size:30,
latitude :44.834763,
longitude: -0.580991,
attrs : {
opacity : 1
},
text : {
content : "33",
position : "inner",
attrs : {
"font-size" : 16
, "font-weight" : "bold"
, fill : "#fff"
},
attrsHover : {
"font-size" : 16
, "font-weight" : "bold"
, fill : "#fff"
}
}
}
}
});
$(".container3").mapael({
map : {
name : "world_countries",
defaultArea: {
attrs : {
fill : "#f4f4e8"
, stroke: "#ced8d0"
}
}
// Default attributes can be set for all links
, defaultLink: {
factor : 0.4
, attrsHover : {
stroke: "#a4e100"
}
}
, defaultPlot : {
text : {
attrs : {
fill:"#000"
},
attrsHover : {
fill:"#000"
}
}
}
},
plots : {
'paris' : {
latitude :48.86,
longitude :2.3444,
tooltip: {content : "Paris
Population: 500000000"}
},
'newyork' : {
latitude :40.667,
longitude :-73.833,
tooltip: {content : "New york
Population: 200001"}
},
'sanfrancisco' : {
latitude: 37.792032,
longitude: -122.394613,
tooltip: {content : "San Francisco"}
},
'brasilia' : {
latitude :-15.781682,
longitude :-47.924195,
tooltip: {content : "Brasilia
Population: 200000001"}
},
'roma': {
latitude :41.827637,
longitude :12.462732,
tooltip: {content : "Roma"}
},
'miami' : {
latitude: 25.789125,
longitude: -80.205674,
tooltip: {content : "Miami"}
},
// Size=0 in order to make plots invisible
'tokyo': {
latitude :35.687418,
longitude :139.692306,
size:0,
text : {content : 'Tokyo'}
},
'sydney' : {
latitude :-33.917,
longitude :151.167,
size:0,
text : {content : 'Sydney'}
},
'plot1': {
latitude :22.906561,
longitude :86.840170,
size:0,
text : {content : 'Plot1', position : 'left', margin:5}
},
'plot2': {
latitude :-0.390553,
longitude :115.586762,
size:0,
text : {content : 'Plot2'}
},
'plot3': {
latitude :44.065626,
longitude :94.576079,
size:0,
text : {content : 'Plot3'}
}
},
// Links allow you to connect plots between them
links: {
'parisnewyork' : {
// The curve can be inverted by setting a negative factor
factor : -0.3
, between : ['paris', 'newyork']
, attrs : {
"stroke-width" : 2
}
, tooltip: {content : "Paris - New-York"}
}
, 'parissanfrancisco' : {
factor : -0.5
, between : ['paris', 'sanfrancisco']
, attrs : {
"stroke-width" : 4
}
, tooltip: {content : "Paris - San - Francisco"}
}
, 'parisbrasilia' : {
factor : -0.8
, between : ['paris', 'brasilia']
, attrs : {
"stroke-width" : 1
}
, tooltip: {content : "Paris - Brasilia"}
}
, 'romamiami' : {
factor : 0.2
, between : ['roma', 'miami']
, attrs : {
"stroke-width" : 4
}
, tooltip: {content : "Roma - Miami"}
}
, 'sydneyplot1' : {
factor : -0.2
, between : ['sydney', 'plot1']
, attrs : {
stroke: "#a4e100",
"stroke-width" : 3,
"stroke-linecap":"round",
opacity:0.6
}
, tooltip: {content : "Sydney - Plot1"}
}
, 'sydneyplot2' : {
factor : -0.1
, between : ['sydney', 'plot2']
, attrs : {
stroke: "#a4e100",
"stroke-width" : 8,
"stroke-linecap":"round",
opacity:0.6
}
, tooltip: {content : "Sydney - Plot2"}
}
, 'sydneyplot3' : {
factor : 0.2
, between : ['sydney', 'plot3']
, attrs : {
stroke: "#a4e100",
"stroke-width" : 4,
"stroke-linecap":"round",
opacity:0.6
}
, tooltip: {content : "Sydney - Plot3"}
}
, 'sydneytokyo' : {
factor : 0.2
, between : ['sydney', 'tokyo']
, attrs : {
stroke: "#a4e100",
"stroke-width" : 6,
"stroke-linecap":"round",
opacity:0.6
}
, tooltip: {content : "Sydney - Plot2"}
}
}
});
$(".container4").mapael({
map : {
name : "france_departments"
// Enable zoom on the map
, zoom : {
enabled : true
}
// Set default plots and areas style
, defaultPlot : {
attrs : {
fill: "#004a9b"
, opacity : 0.6
}
, attrsHover : {
opacity : 1
}
, text : {
attrs : {
fill : "#505444"
}
, attrsHover : {
fill : "#000"
}
}
}
, defaultArea: {
attrs : {
fill : "#f4f4e8"
, stroke: "#ced8d0"
}
, attrsHover : {
fill: "#a4e100"
}
, text : {
attrs : {
fill : "#505444"
}
, attrsHover : {
fill : "#000"
}
}
}
},
// Customize some areas of the map
areas: {
"department-56" : {
text : {content : "Morbihan", attrs : {"font-size" : 10}},
tooltip: {content : "Morbihan (56)"}
},
"department-21" : {
attrs : {
fill : "#488402"
}
, attrsHover : {
fill: "#a4e100"
}
}
},
// Add some plots on the map
plots : {
// Image plot
'paris' : {
type : "image",
url: "http://www.neveldo.fr/mapael/marker.png",
width: 12,
height: 40,
latitude : 48.86,
longitude: 2.3444,
attrs : {
opacity : 1
},
attrsHover: {
transform : "s1.5"
}
},
// Circle plot
'lyon' : {
type: "circle",
size:50,
latitude :45.758888888889,
longitude: 4.8413888888889,
value : 700000,
tooltip: {content : "City : Lyon"},
text : {content : "Lyon"}
},
// Square plot
'rennes' : {
type :"square",
size :20,
latitude : 48.114166666667,
longitude: -1.6808333333333,
tooltip: {content : "City : Rennes"},
text : {content : "Rennes"}
},
// Plot positioned by x and y instead of latitude, longitude
'myplot' : {
x : 300,
y: 200,
text : {
content : "My plot"
, position: "bottom"
, attrs : {"font-size" : 10, fill : "#004a9b", opacity: 0.6}
, attrsHover : {fill : "#004a9b", opacity: 1}
},
}
}
});
$(".container5").mapael({
map : {
name : "france_departments",
defaultArea: {
attrs : {
stroke : "#fff",
"stroke-width" : 1
},
attrsHover : {
"stroke-width" : 2
}
}
},
legend : {
area : {
title :"Population of France by department",
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 : "Nord (59)
Population : 2617939"}
},
"department-75": {
value: "2268265",
href : "#",
tooltip: {content : "Paris (75)
Population : 2268265"}
},
"department-13": {
value: "2000550",
href : "#",
tooltip: {content : "Bouches-du-Rhône (13)
Population : 2000550"}
},
"department-69": {
value: "1756069",
href : "#",
tooltip: {content : "Rhône (69)
Population : 1756069"}
},
"department-92": {
value: "1590749",
href : "#",
tooltip: {content : "Hauts-de-Seine (92)
Population : 1590749"}
},
"department-93": {
value: "1534895",
href : "#",
tooltip: {content : "Seine-Saint-Denis (93)
Population : 1534895"}
},
"department-62": {
value: "1489209",
href : "#",
tooltip: {content : "Pas-de-Calais (62)
Population : 1489209"}
},
"department-33": {
value: "1479277",
href : "#",
tooltip: {content : "Gironde (33)
Population : 1479277"}
},
"department-78": {
value: "1435448",
href : "#",
tooltip: {content : "Yvelines (78)
Population : 1435448"}
},
"department-77": {
value: "1347008",
href : "#",
tooltip: {content : "Seine-et-Marne (77)
Population : 1347008"}
},
"department-94": {
value: "1340868",
href : "#",
tooltip: {content : "Val-de-Marne (94)
Population : 1340868"}
},
"department-44": {
value: "1317685",
href : "#",
tooltip: {content : "Loire-Atlantique (44)
Population : 1317685"}
},
"department-76": {
value: "1275952",
href : "#",
tooltip: {content : "Seine-Maritime (76)
Population : 1275952"}
},
"department-31": {
value: "1268370",
href : "#",
tooltip: {content : "Haute-Garonne (31)
Population : 1268370"}
},
"department-38": {
value: "1233759",
href : "#",
tooltip: {content : "Isère (38)
Population : 1233759"}
},
"department-91": {
value: "1233645",
href : "#",
tooltip: {content : "Essonne (91)
Population : 1233645"}
},
"department-95": {
value: "1187836",
href : "#",
tooltip: {content : "Val-d'Oise (95)
Population : 1187836"}
},
"department-67": {
value: "1115226",
href : "#",
tooltip: {content : "Bas-Rhin (67)
Population : 1115226"}
},
"department-06": {
value: "1094579",
href : "#",
tooltip: {content : "Alpes-Maritimes (06)
Population : 1094579"}
},
"department-57": {
value: "1066667",
href : "#",
tooltip: {content : "Moselle (57)
Population : 1066667"}
},
"department-34": {
value: "1062617",
href : "#",
tooltip: {content : "Hérault (34)
Population : 1062617"}
},
"department-83": {
value: "1026222",
href : "#",
tooltip: {content : "Var (83)
Population : 1026222"}
},
"department-35": {
value: "1015470",
href : "#",
tooltip: {content : "Ille-et-Vilaine (35)
Population : 1015470"}
},
"department-29": {
value: "929286",
href : "#",
tooltip: {content : "Finistère (29)
Population : 929286"}
},
"department-974": {
value: "829903",
href : "#",
tooltip: {content : "La Réunion (974)
Population : 829903"}
},
"department-60": {
value: "823668",
href : "#",
tooltip: {content : "Oise (60)
Population : 823668"}
},
"department-49": {
value: "808298",
href : "#",
tooltip: {content : "Maine-et-Loire (49)
Population : 808298"}
},
"department-42": {
value: "766729",
href : "#",
tooltip: {content : "Loire (42)
Population : 766729"}
},
"department-68": {
value: "765634",
href : "#",
tooltip: {content : "Haut-Rhin (68)
Population : 765634"}
},
"department-74": {
value: "760979",
href : "#",
tooltip: {content : "Haute-Savoie (74)
Population : 760979"}
},
"department-54": {
value: "746502",
href : "#",
tooltip: {content : "Meurthe-et-Moselle (54)
Population : 746502"}
},
"department-56": {
value: "744663",
href : "#",
tooltip: {content : "Morbihan (56)
Population : 744663"}
},
"department-30": {
value: "726285",
href : "#",
tooltip: {content : "Gard (30)
Population : 726285"}
},
"department-14": {
value: "699561",
href : "#",
tooltip: {content : "Calvados (14)
Population : 699561"}
},
"department-45": {
value: "674913",
href : "#",
tooltip: {content : "Loiret (45)
Population : 674913"}
},
"department-64": {
value: "674908",
href : "#",
tooltip: {content : "Pyrénées-Atlantiques (64)
Population : 674908"}
},
"department-85": {
value: "654096",
href : "#",
tooltip: {content : "Vendée (85)
Population : 654096"}
},
"department-63": {
value: "649643",
href : "#",
tooltip: {content : "Puy-de-Dôme (63)
Population : 649643"}
},
"department-17": {
value: "640803",
href : "#",
tooltip: {content : "Charente-Maritime (17)
Population : 640803"}
},
"department-01": {
value: "614331",
href : "#",
tooltip: {content : "Ain (01)
Population : 614331"}
},
"department-22": {
value: "612383",
href : "#",
tooltip: {content : "Côtes-d'Armor (22)
Population : 612383"}
},
"department-37": {
value: "605819",
href : "#",
tooltip: {content : "Indre-et-Loire (37)
Population : 605819"}
},
"department-27": {
value: "603194",
href : "#",
tooltip: {content : "Eure (27)
Population : 603194"}
},
"department-80": {
value: "583388",
href : "#",
tooltip: {content : "Somme (80)
Population : 583388"}
},
"department-51": {
value: "579533",
href : "#",
tooltip: {content : "Marne (51)
Population : 579533"}
},
"department-72": {
value: "579497",
href : "#",
tooltip: {content : "Sarthe (72)
Population : 579497"}
},
"department-71": {
value: "574874",
href : "#",
tooltip: {content : "Saône-et-Loire (71)
Population : 574874"}
},
"department-84": {
value: "555240",
href : "#",
tooltip: {content : "Vaucluse (84)
Population : 555240"}
},
"department-02": {
value: "555094",
href : "#",
tooltip: {content : "Aisne (02)
Population : 555094"}
},
"department-25": {
value: "542509",
href : "#",
tooltip: {content : "Doubs (25)
Population : 542509"}
},
"department-21": {
value: "538505",
href : "#",
tooltip: {content : "Côte-d'Or (21)
Population : 538505"}
},
"department-50": {
value: "517121",
href : "#",
tooltip: {content : "Manche (50)
Population : 517121"}
},
"department-26": {
value: "499313",
href : "#",
tooltip: {content : "Drôme (26)
Population : 499313"}
},
"department-66": {
value: "457238",
href : "#",
tooltip: {content : "Pyrénées-Orientales (66)
Population : 457238"}
},
"department-28": {
value: "440291",
href : "#",
tooltip: {content : "Eure-et-Loir (28)
Population : 440291"}
},
"department-86": {
value: "438566",
href : "#",
tooltip: {content : "Vienne (86)
Population : 438566"}
},
"department-73": {
value: "428751",
href : "#",
tooltip: {content : "Savoie (73)
Population : 428751"}
},
"department-24": {
value: "426607",
href : "#",
tooltip: {content : "Dordogne (24)
Population : 426607"}
},
"department-971": {
value: "409905",
href : "#",
tooltip: {content : "Guadeloupe (971)
Population : 409905"}
},
"department-972": {
value: "400535",
href : "#",
tooltip: {content : "Martinique (972)
Population : 400535"}
},
"department-40": {
value: "397766",
href : "#",
tooltip: {content : "Landes (40)
Population : 397766"}
},
"department-88": {
value: "392846",
href : "#",
tooltip: {content : "Vosges (88)
Population : 392846"}
},
"department-81": {
value: "387099",
href : "#",
tooltip: {content : "Tarn (81)
Population : 387099"}
},
"department-87": {
value: "384781",
href : "#",
tooltip: {content : "Haute-Vienne (87)
Population : 384781"}
},
"department-79": {
value: "380569",
href : "#",
tooltip: {content : "Deux-Sèvres (79)
Population : 380569"}
},
"department-11": {
value: "365854",
href : "#",
tooltip: {content : "Aude (11)
Population : 365854"}
},
"department-16": {
value: "364429",
href : "#",
tooltip: {content : "Charente (16)
Population : 364429"}
},
"department-89": {
value: "353366",
href : "#",
tooltip: {content : "Yonne (89)
Population : 353366"}
},
"department-03": {
value: "353124",
href : "#",
tooltip: {content : "Allier (03)
Population : 353124"}
},
"department-47": {
value: "342500",
href : "#",
tooltip: {content : "Lot-et-Garonne (47)
Population : 342500"}
},
"department-41": {
value: "340729",
href : "#",
tooltip: {content : "Loir-et-Cher (41)
Population : 340729"}
},
"department-07": {
value: "324885",
href : "#",
tooltip: {content : "Ardèche (07)
Population : 324885"}
},
"department-18": {
value: "319600",
href : "#",
tooltip: {content : "Cher (18)
Population : 319600"}
},
"department-53": {
value: "317006",
href : "#",
tooltip: {content : "Mayenne (53)
Population : 317006"}
},
"department-10": {
value: "311720",
href : "#",
tooltip: {content : "Aube (10)
Population : 311720"}
},
"department-61": {
value: "301421",
href : "#",
tooltip: {content : "Orne (61)
Population : 301421"}
},
"department-08": {
value: "291678",
href : "#",
tooltip: {content : "Ardennes (08)
Population : 291678"}
},
"department-12": {
value: "288364",
href : "#",
tooltip: {content : "Aveyron (12)
Population : 288364"}
},
"department-39": {
value: "271973",
href : "#",
tooltip: {content : "Jura (39)
Population : 271973"}
},
"department-19": {
value: "252235",
href : "#",
tooltip: {content : "Corrèze (19)
Population : 252235"}
},
"department-82": {
value: "248227",
href : "#",
tooltip: {content : "Tarn-et-Garonne (82)
Population : 248227"}
},
"department-70": {
value: "247311",
href : "#",
tooltip: {content : "Haute-Saône (70)
Population : 247311"}
},
"department-36": {
value: "238261",
href : "#",
tooltip: {content : "Indre (36)
Population : 238261"}
},
"department-65": {
value: "237945",
href : "#",
tooltip: {content : "Hautes-Pyrénées (65)
Population : 237945"}
},
"department-43": {
value: "231877",
href : "#",
tooltip: {content : "Haute-Loire (43)
Population : 231877"}
},
"department-973": {
value: "231167",
href : "#",
tooltip: {content : "Guyane (973)
Population : 231167"}
},
"department-58": {
value: "226997",
href : "#",
tooltip: {content : "Nièvre (58)
Population : 226997"}
},
"department-55": {
value: "200509",
href : "#",
tooltip: {content : "Meuse (55)
Population : 200509"}
},
"department-32": {
value: "195489",
href : "#",
tooltip: {content : "Gers (32)
Population : 195489"}
},
"department-52": {
value: "191004",
href : "#",
tooltip: {content : "Haute-Marne (52)
Population : 191004"}
},
"department-46": {
value: "181232",
href : "#",
tooltip: {content : "Lot (46)
Population : 181232"}
},
"department-2B": {
value: "168869",
href : "#",
tooltip: {content : "Haute-Corse (2B)
Population : 168869"}
},
"department-04": {
value: "165155",
href : "#",
tooltip: {content : "Alpes-de-Haute-Provence (04)
Population : 165155"}
},
"department-09": {
value: "157582",
href : "#",
tooltip: {content : "Ariège (09)
Population : 157582"}
},
"department-15": {
value: "154135",
href : "#",
tooltip: {content : "Cantal (15)
Population : 154135"}
},
"department-90": {
value: "146475",
href : "#",
tooltip: {content : "Territoire de Belfort (90)
Population : 146475"}
},
"department-2A": {
value: "145998",
href : "#",
tooltip: {content : "Corse-du-Sud (2A)
Population : 145998"}
},
"department-05": {
value: "142312",
href : "#",
tooltip: {content : "Hautes-Alpes (05)
Population : 142312"}
},
"department-23": {
value: "127919",
href : "#",
tooltip: {content : "Creuse (23)
Population : 127919"}
},
"department-48": {
value: "81281",
href : "#",
tooltip: {content : "Lozère (48)
Population : 81281"}
}
}
});
});