i'm pretty sure i'm one line away from my script working, but i can't figure out what goes wrong. i'm working on a local html page and i'm trying to use the svgMap library to create a map of all the movies i've seen. the data comes from a google sheets i made, which i retrieve through the opensheet library. so far so good, i get this JSON :
[{"Pays":"USA","Nb_films":"1005"},{"Pays":"France","Nb_films":"278"},{"Pays":"UK","Nb_films":"220"},{"Pays":"Canada","Nb_films":"71"},{"Pays":"Allemagne","Nb_films":"68"},{"Pays":"Belgique","Nb_films":"35"},{"Pays":"Japon","Nb_films":"33"},{"Pays":"Australie","Nb_films":"31"},{"Pays":"Italie","Nb_films":"30"},{"Pays":"Espagne","Nb_films":"23"},{"Pays":"Chine","Nb_films":"18"},{"Pays":"Inde","Nb_films":"16"},{"Pays":"Nouvelle-Zélande","Nb_films":"13"},{"Pays":"Suède","Nb_films":"11"},{"Pays":"Danemark","Nb_films":"10"},{"Pays":"Irlande","Nb_films":"10"},{"Pays":"Mexique","Nb_films":"8"},{"Pays":"Afrique du Sud","Nb_films":"7"},{"Pays":"Pays-Bas","Nb_films":"7"},{"Pays":"Corée du Sud","Nb_films":"6"},{"Pays":"Suisse","Nb_films":"6"},{"Pays":"Tchéquie","Nb_films":"6"},{"Pays":"Norvège","Nb_films":"4"},{"Pays":"Autriche","Nb_films":"3"},{"Pays":"Chili","Nb_films":"3"},{"Pays":"Grèce","Nb_films":"3"},{"Pays":"Hongrie","Nb_films":"3"},{"Pays":"Luxembourg","Nb_films":"3"},{"Pays":"Russie","Nb_films":"3"},{"Pays":"Union soviétique","Nb_films":"3"},{"Pays":"Hong Kong","Nb_films":"2"},{"Pays":"Pologne","Nb_films":"2"},{"Pays":"Portugal","Nb_films":"2"},{"Pays":"Sénégal","Nb_films":"2"},{"Pays":"Thaïlande","Nb_films":"2"},{"Pays":"Émirats Arabes Unis","Nb_films":"2"},{"Pays":"Argentine","Nb_films":"1"},{"Pays":"Arménie","Nb_films":"1"},{"Pays":"Brésil","Nb_films":"1"},{"Pays":"Indonésie","Nb_films":"1"},{"Pays":"Iran","Nb_films":"1"},{"Pays":"Islande","Nb_films":"1"},{"Pays":"Israël","Nb_films":"1"},{"Pays":"Kenya","Nb_films":"1"},{"Pays":"Lettonie","Nb_films":"1"},{"Pays":"Martinique","Nb_films":"1"},{"Pays":"Philippines","Nb_films":"1"},{"Pays":"Roumanie","Nb_films":"1"},{"Pays":"Singapour","Nb_films":"1"}]
now i have to link the two together, but that's where i'm completely stuck! here's my code so far:
<!DOCTYPE HTML>
<html>
<head>
<title>Films map</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/svg-pan-zoom.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/StephanWagner/[email protected]/dist/svgMap.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/StephanWagner/[email protected]/dist/svgMap.min.css" rel="stylesheet">
</head>
<body>
<div id="cartedesfilms"></div>
<script>
var countryCodes = {
AF: 'Afghanistan',
AX: 'Îles Åland',
AL: 'Albanie',
DZ: 'Algérie',
AS: 'Samoa américaines',
AD: 'Andorre',
AO: 'Angola',
AI: 'Anguilla',
AQ: 'Antarctique',
AG: 'Antigua-et-Barbuda',
AR: 'Argentine',
AM: 'Arménie',
AW: 'Aruba',
AU: 'Australie',
AT: 'Autriche',
AZ: 'Azerbaïdjan',
BS: 'Bahamas',
BH: 'Bahreïn',
BD: 'Bangladesh',
BB: 'Barbade',
BY: 'Biélorussie',
BE: 'Belgique',
BZ: 'Belize',
BJ: 'Bénin',
BM: 'Bermudes',
BT: 'Bhoutan',
BO: 'Bolivie',
BA: 'Bosnie-Herzégovine',
BW: 'Botswana',
BR: 'Brésil',
IO: 'Territoire britannique de l’océan Indien',
VG: 'Îles Vierges britanniques',
BN: 'Brunéi Darussalam',
BG: 'Bulgarie',
BF: 'Burkina Faso',
BI: 'Burundi',
KH: 'Cambodge',
CM: 'Cameroun',
CA: 'Canada',
CV: 'Cap-Vert',
BQ: 'Pays-Bas caribéens',
KY: 'Îles Caïmans',
CF: 'République centrafricaine',
TD: 'Tchad',
CL: 'Chili',
CN: 'Chine',
CX: 'Île Christmas',
CC: 'Îles Cocos',
CO: 'Colombie',
KM: 'Comores',
CG: 'Congo-Brazzaville',
CK: 'Îles Cook',
CR: 'Costa Rica',
HR: 'Croatie',
CU: 'Cuba',
CW: 'Curaçao',
CY: 'Chypre',
CZ: 'Tchéquie',
CD: 'Congo-Kinshasa',
DK: 'Danemark',
DJ: 'Djibouti',
DM: 'Dominique',
DO: 'République dominicaine',
EC: 'Équateur',
EG: 'Égypte',
SV: 'El Salvador',
GQ: 'Guinée équatoriale',
ER: 'Érythrée',
EE: 'Estonie',
ET: 'Éthiopie',
FK: 'Îles Malouines',
FO: 'Îles Féroé',
FM: 'États fédérés de Micronésie',
FJ: 'Fidji',
FI: 'Finlande',
FR: 'France',
GF: 'Guyane française',
PF: 'Polynésie française',
TF: 'Terres australes françaises',
GA: 'Gabon',
GM: 'Gambie',
GE: 'Géorgie',
DE: 'Allemagne',
GH: 'Ghana',
GI: 'Gibraltar',
GR: 'Grèce',
GL: 'Groenland',
GD: 'Grenade',
GP: 'Guadeloupe',
GU: 'Guam',
GT: 'Guatemala',
GN: 'Guinée',
GW: 'Guinée-Bissau',
GY: 'Guyana',
HT: 'Haïti',
HN: 'Honduras',
HK: 'Hong Kong',
HU: 'Hongrie',
IS: 'Islande',
IN: 'Inde',
ID: 'Indonésie',
IR: 'Iran',
IQ: 'Irak',
IE: 'Irlande',
IM: 'Île de Man',
IL: 'Israël',
IT: 'Italie',
CI: 'Côte d’Ivoire',
JM: 'Jamaïque',
JP: 'Japon',
JE: 'Jersey',
JO: 'Jordanie',
KZ: 'Kazakhstan',
KE: 'Kenya',
KI: 'Kiribati',
XK: 'Kosovo',
KW: 'Koweït',
KG: 'Kirghizistan',
LA: 'Laos',
LV: 'Lettonie',
LB: 'Liban',
LS: 'Lesotho',
LR: 'Libéria',
LY: 'Libye',
LI: 'Liechtenstein',
LT: 'Lituanie',
LU: 'Luxembourg',
MO: 'R.A.S. chinoise de Macao',
MK: 'Macédoine',
MG: 'Madagascar',
MW: 'Malawi',
MY: 'Malaisie',
MV: 'Maldives',
ML: 'Mali',
MT: 'Malte',
MH: 'Îles Marshall',
MQ: 'Martinique',
MR: 'Mauritanie',
MU: 'Maurice',
YT: 'Mayotte',
MX: 'Mexique',
MD: 'Moldavie',
MC: 'Monaco',
MN: 'Mongolie',
ME: 'Monténégro',
MS: 'Montserrat',
MA: 'Maroc',
MZ: 'Mozambique',
MM: 'Myanmar (Birmanie)',
NA: 'Namibie',
NR: 'Nauru',
NP: 'Népal',
NL: 'Pays-Bas',
NC: 'Nouvelle-Calédonie',
NZ: 'Nouvelle-Zélande',
NI: 'Nicaragua',
NE: 'Niger',
NG: 'Nigéria',
NU: 'Niue',
NF: 'Île Norfolk',
KP: 'Corée du Nord',
MP: 'Îles Mariannes du Nord',
NO: 'Norvège',
OM: 'Oman',
PK: 'Pakistan',
PW: 'Palaos',
PS: 'Territoires palestiniens',
PA: 'Panama',
PG: 'Papouasie-Nouvelle-Guinée',
PY: 'Paraguay',
PE: 'Pérou',
PH: 'Philippines',
PN: 'Îles Pitcairn',
PL: 'Pologne',
PT: 'Portugal',
PR: 'Porto Rico',
QA: 'Qatar',
RE: 'La Réunion',
RO: 'Roumanie',
RU: 'Russie',
RW: 'Rwanda',
SH: 'Sainte-Hélène',
KN: 'Saint-Christophe-et-Niévès',
LC: 'Sainte-Lucie',
PM: 'Saint-Pierre-et-Miquelon',
VC: 'Saint-Vincent-et-les-Grenadines',
WS: 'Samoa',
SM: 'Saint-Marin',
ST: 'Sao Tomé-et-Principe',
SA: 'Arabie saoudite',
SN: 'Sénégal',
RS: 'Serbie',
SC: 'Seychelles',
SL: 'Sierra Leone',
SG: 'Singapour',
SX: 'Saint-Martin (partie néerlandaise)',
SK: 'Slovaquie',
SI: 'Slovénie',
SB: 'Îles Salomon',
SO: 'Somalie',
ZA: 'Afrique du Sud',
GS: 'Géorgie du Sud et îles Sandwich du Sud',
KR: 'Corée du Sud',
SS: 'Soudan du Sud',
ES: 'Espagne',
LK: 'Sri Lanka',
SD: 'Soudan',
SR: 'Suriname',
SJ: 'Svalbard et Jan Mayen',
SZ: 'Swaziland',
SE: 'Suède',
CH: 'Suisse',
SY: 'Syrie',
TW: 'Taïwan',
TJ: 'Tadjikistan',
TZ: 'Tanzanie',
TH: 'Thaïlande',
TL: 'Timor oriental',
TG: 'Togo',
TK: 'Tokélaou',
TO: 'Tonga',
TT: 'Trinité-et-Tobago',
TN: 'Tunisie',
TR: 'Turquie',
TM: 'Turkménistan',
TC: 'Îles Turques-et-Caïques',
TV: 'Tuvalu',
UG: 'Ouganda',
UA: 'Ukraine',
AE: 'Émirats Arabes Unis',
GB: 'UK',
US: 'USA',
UM: 'Îles mineures éloignées des États-Unis',
VI: 'Îles Vierges des États-Unis',
UY: 'Uruguay',
UZ: 'Ouzbékistan',
VU: 'Vanuatu',
VA: 'Vatican',
VE: 'Venezuela',
VN: 'Vietnam',
WF: 'Wallis-et-Futuna',
EH: 'Sahara occidental',
YE: 'Yémen',
ZM: 'Zambie',
ZW: 'Zimbabwe'
}
var inverseCountryCodes = {};
for(i in countryCodes){
inverseCountryCodes[countryCodes[i]] = i;
};
function fairelaliste(){
var listedespays = [];
fetch("https://opensheet.elk.sh/1jQn8yFvEqP1anLttNUCtlLbaeByEJD6TVSaJLrkYLb4/CARTE").then((res) => res.json()).then((data) => {
data.forEach((row) => {
var codepays = "";
var filmspays = 0;
var donneespays= {};
codepays = inverseCountryCodes[row.Pays];
filmspays = row.Nb_films;
donneespays = {[codepays]: {nbfilms: filmspays}};
listedespays.push(donneespays);
});
return listedespays;
});
};
new svgMap({
targetElementID: 'cartedesfilms',
initialZoom:'1',
maxZoom:'25',
mouseWheelZoomEnabled:'true',
colorMax: '#a64d79',
colorMin: '#f9cb9c',
colorNoData: '#efefef',
flagType:'emoji',
noDataText:'pas de films',
countryNames: countryCodes,
data: {
data: {
nbfilms: {
name: 'nombre de films vus',
format: '{0}',
thousandSeparator: ' ',
thresholdMax: 100,
thresholdMin: 1
}
},
applyData: 'nbfilms',
values: fairelaliste()
}
});
</script>
</body>
</html>
as you can see, first the code uses the countryCodes object to associate ISO codes to country names and vice versa, then i build a function that fetches the json and supposedly injects the right formatting into the 'values' property in the svgMap JSON. but i'm having trouble getting the fairelaliste() function to work.
the right formatting for the 'values' property for svgMap should be:
values{
US:{
nbfilms: 1005
},
FR:{
nbfilms: 278
}
//etc
}
so my function supposedly gets the iso code from the country name (codepays variable), then the number of films (filmspays variable), and injects both of those into a new array, then for every element in that array i use the ISO code to select the JSON parameter corresponding to the desired country, then i inject the nbfilms number where it should be... but i'm not sure i'm allowed to do that, lmao? the map becomes black so something's happening but the console tells me there's errors when reading the ISO code variable?
ex:
Uncaught TypeError: Cannot read properties of undefined (reading 'US') at l.getTooltipContent (svgMap.min.js:2:12743) at l. (svgMap.min.js:2:10746) the same error repeats for every country when i hover over them on the map.
Thanks for helping :(
EDIT: i edited the fairelaliste function because i realized i posted the wrong version, sorry!
CodePudding user response:
All countries need to be added directly to you values object.
Your values var is actually an array of objects. You should rather add all country items like this.
var codepays = "";
var filmspays = 0;
var donneespays= {};
codepays = inverseCountryCodes[row.Pays];
filmspays = row.Nb_films;
if(codepays){
listedespays[codepays]={nbfilms: filmspays};
}
Besides, you are initializing the new map instantly while the listedespays data isn't yet retrieved (via fetch() request).
Just include your map initialisation new svgMap({...})
in your fairelaliste()
call.
Working example
var countryCodes = {
AF: 'Afghanistan',
AX: 'Îles Åland',
AL: 'Albanie',
DZ: 'Algérie',
AS: 'Samoa américaines',
AD: 'Andorre',
AO: 'Angola',
AI: 'Anguilla',
AQ: 'Antarctique',
AG: 'Antigua-et-Barbuda',
AR: 'Argentine',
AM: 'Arménie',
AW: 'Aruba',
AU: 'Australie',
AT: 'Autriche',
AZ: 'Azerbaïdjan',
BS: 'Bahamas',
BH: 'Bahreïn',
BD: 'Bangladesh',
BB: 'Barbade',
BY: 'Biélorussie',
BE: 'Belgique',
BZ: 'Belize',
BJ: 'Bénin',
BM: 'Bermudes',
BT: 'Bhoutan',
BO: 'Bolivie',
BA: 'Bosnie-Herzégovine',
BW: 'Botswana',
BR: 'Brésil',
IO: 'Territoire britannique de l’océan Indien',
VG: 'Îles Vierges britanniques',
BN: 'Brunéi Darussalam',
BG: 'Bulgarie',
BF: 'Burkina Faso',
BI: 'Burundi',
KH: 'Cambodge',
CM: 'Cameroun',
CA: 'Canada',
CV: 'Cap-Vert',
BQ: 'Pays-Bas caribéens',
KY: 'Îles Caïmans',
CF: 'République centrafricaine',
TD: 'Tchad',
CL: 'Chili',
CN: 'Chine',
CX: 'Île Christmas',
CC: 'Îles Cocos',
CO: 'Colombie',
KM: 'Comores',
CG: 'Congo-Brazzaville',
CK: 'Îles Cook',
CR: 'Costa Rica',
HR: 'Croatie',
CU: 'Cuba',
CW: 'Curaçao',
CY: 'Chypre',
CZ: 'Tchéquie',
CD: 'Congo-Kinshasa',
DK: 'Danemark',
DJ: 'Djibouti',
DM: 'Dominique',
DO: 'République dominicaine',
EC: 'Équateur',
EG: 'Égypte',
SV: 'El Salvador',
GQ: 'Guinée équatoriale',
ER: 'Érythrée',
EE: 'Estonie',
ET: 'Éthiopie',
FK: 'Îles Malouines',
FO: 'Îles Féroé',
FM: 'États fédérés de Micronésie',
FJ: 'Fidji',
FI: 'Finlande',
FR: 'France',
GF: 'Guyane française',
PF: 'Polynésie française',
TF: 'Terres australes françaises',
GA: 'Gabon',
GM: 'Gambie',
GE: 'Géorgie',
DE: 'Allemagne',
GH: 'Ghana',
GI: 'Gibraltar',
GR: 'Grèce',
GL: 'Groenland',
GD: 'Grenade',
GP: 'Guadeloupe',
GU: 'Guam',
GT: 'Guatemala',
GN: 'Guinée',
GW: 'Guinée-Bissau',
GY: 'Guyana',
HT: 'Haïti',
HN: 'Honduras',
HK: 'Hong Kong',
HU: 'Hongrie',
IS: 'Islande',
IN: 'Inde',
ID: 'Indonésie',
IR: 'Iran',
IQ: 'Irak',
IE: 'Irlande',
IM: 'Île de Man',
IL: 'Israël',
IT: 'Italie',
CI: 'Côte d’Ivoire',
JM: 'Jamaïque',
JP: 'Japon',
JE: 'Jersey',
JO: 'Jordanie',
KZ: 'Kazakhstan',
KE: 'Kenya',
KI: 'Kiribati',
XK: 'Kosovo',
KW: 'Koweït',
KG: 'Kirghizistan',
LA: 'Laos',
LV: 'Lettonie',
LB: 'Liban',
LS: 'Lesotho',
LR: 'Libéria',
LY: 'Libye',
LI: 'Liechtenstein',
LT: 'Lituanie',
LU: 'Luxembourg',
MO: 'R.A.S. chinoise de Macao',
MK: 'Macédoine',
MG: 'Madagascar',
MW: 'Malawi',
MY: 'Malaisie',
MV: 'Maldives',
ML: 'Mali',
MT: 'Malte',
MH: 'Îles Marshall',
MQ: 'Martinique',
MR: 'Mauritanie',
MU: 'Maurice',
YT: 'Mayotte',
MX: 'Mexique',
MD: 'Moldavie',
MC: 'Monaco',
MN: 'Mongolie',
ME: 'Monténégro',
MS: 'Montserrat',
MA: 'Maroc',
MZ: 'Mozambique',
MM: 'Myanmar (Birmanie)',
NA: 'Namibie',
NR: 'Nauru',
NP: 'Népal',
NL: 'Pays-Bas',
NC: 'Nouvelle-Calédonie',
NZ: 'Nouvelle-Zélande',
NI: 'Nicaragua',
NE: 'Niger',
NG: 'Nigéria',
NU: 'Niue',
NF: 'Île Norfolk',
KP: 'Corée du Nord',
MP: 'Îles Mariannes du Nord',
NO: 'Norvège',
OM: 'Oman',
PK: 'Pakistan',
PW: 'Palaos',
PS: 'Territoires palestiniens',
PA: 'Panama',
PG: 'Papouasie-Nouvelle-Guinée',
PY: 'Paraguay',
PE: 'Pérou',
PH: 'Philippines',
PN: 'Îles Pitcairn',
PL: 'Pologne',
PT: 'Portugal',
PR: 'Porto Rico',
QA: 'Qatar',
RE: 'La Réunion',
RO: 'Roumanie',
RU: 'Russie',
RW: 'Rwanda',
SH: 'Sainte-Hélène',
KN: 'Saint-Christophe-et-Niévès',
LC: 'Sainte-Lucie',
PM: 'Saint-Pierre-et-Miquelon',
VC: 'Saint-Vincent-et-les-Grenadines',
WS: 'Samoa',
SM: 'Saint-Marin',
ST: 'Sao Tomé-et-Principe',
SA: 'Arabie saoudite',
SN: 'Sénégal',
RS: 'Serbie',
SC: 'Seychelles',
SL: 'Sierra Leone',
SG: 'Singapour',
SX: 'Saint-Martin (partie néerlandaise)',
SK: 'Slovaquie',
SI: 'Slovénie',
SB: 'Îles Salomon',
SO: 'Somalie',
ZA: 'Afrique du Sud',
GS: 'Géorgie du Sud et îles Sandwich du Sud',
KR: 'Corée du Sud',
SS: 'Soudan du Sud',
ES: 'Espagne',
LK: 'Sri Lanka',
SD: 'Soudan',
SR: 'Suriname',
SJ: 'Svalbard et Jan Mayen',
SZ: 'Swaziland',
SE: 'Suède',
CH: 'Suisse',
SY: 'Syrie',
TW: 'Taïwan',
TJ: 'Tadjikistan',
TZ: 'Tanzanie',
TH: 'Thaïlande',
TL: 'Timor oriental',
TG: 'Togo',
TK: 'Tokélaou',
TO: 'Tonga',
TT: 'Trinité-et-Tobago',
TN: 'Tunisie',
TR: 'Turquie',
TM: 'Turkménistan',
TC: 'Îles Turques-et-Caïques',
TV: 'Tuvalu',
UG: 'Ouganda',
UA: 'Ukraine',
AE: 'Émirats Arabes Unis',
GB: 'UK',
US: 'USA',
UM: 'Îles mineures éloignées des États-Unis',
VI: 'Îles Vierges des États-Unis',
UY: 'Uruguay',
UZ: 'Ouzbékistan',
VU: 'Vanuatu',
VA: 'Vatican',
VE: 'Venezuela',
VN: 'Vietnam',
WF: 'Wallis-et-Futuna',
EH: 'Sahara occidental',
YE: 'Yémen',
ZM: 'Zambie',
ZW: 'Zimbabwe'
}
var inverseCountryCodes = {};
for (i in countryCodes) {
inverseCountryCodes[countryCodes[i]] = i;
};
fairelaliste();
function fairelaliste() {
//var listedespays = [];
var listedespays = {};
fetch("https://opensheet.elk.sh/1jQn8yFvEqP1anLttNUCtlLbaeByEJD6TVSaJLrkYLb4/CARTE").then((res) => res.json()).then((data) => {
data.forEach((row) => {
var codepays = "";
var filmspays = 0;
var donneespays = {};
codepays = inverseCountryCodes[row.Pays];
filmspays = row.Nb_films;
if (codepays) {
listedespays[codepays] = {
nbfilms: filmspays
};
}
});
// listedespays is complete – now you can initialize the map
new svgMap({
targetElementID: 'cartedesfilms',
initialZoom: '1',
maxZoom: '25',
mouseWheelZoomEnabled: 'true',
colorMax: '#a64d79',
colorMin: '#f9cb9c',
colorNoData: '#efefef',
flagType: 'emoji',
noDataText: 'pas de films',
countryNames: countryCodes,
data: {
data: {
nbfilms: {
name: 'nombre de films vus',
format: '{0}',
thousandSeparator: ' ',
thresholdMax: 100,
thresholdMin: 1
}
},
applyData: 'nbfilms',
values: listedespays
}
});
});
};
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/svg-pan-zoom.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/StephanWagner/[email protected]/dist/svgMap.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/StephanWagner/[email protected]/dist/svgMap.min.css" rel="stylesheet">
<div id="cartedesfilms"></div>