Upload 4 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+vietnam_map.jfif filter=lfs diff=lfs merge=lfs -text

provinces.json

@@ -0,0 +1,280 @@
+[
+  {
+    "name": "Hà Nội",
+    "mergedName": "Hà Nội",
+    "center": "Hà Nội",
+    "naturalArea": "3.359,8",
+    "population": "8.587,1",
+    "coords": "434,327,440,318,445,332,461,336,472,338,479,345,484,333,481,314,491,314,499,318,502,326,500,338,505,348,512,357,497,362,500,371,499,382,512,394,488,400,484,410,472,401,463,386,452,377,454,362,443,354,429,356,423,348,432,342,426,340"
+  },
+  {
+    "name": "Huế",
+    "mergedName": "Huế",
+    "center": "Huế",
+    "naturalArea": "4.947,1",
+    "population": "1.166,5",
+    "coords": "643,911,637,899,657,895,672,878,696,896,675,889,700,902,718,922,715,928,728,934,735,925,737,929,744,926,750,937,761,943,737,940,725,955,720,955,711,965,702,955,696,961,675,962,661,959,643,949,637,938,631,926"
+  },
+  {
+    "name": "Lai Châu",
+    "mergedName": "Lai Châu",
+    "center": "Lai Châu",
+    "naturalArea": "9.068,7",
+    "population": "489,3",
+    "coords": "199,213,207,218,214,236,223,245,223,234,231,228,232,209,241,207,253,196,255,184,243,180,229,175,231,162,226,153,219,160,213,153,207,144,196,135,189,151,178,156,177,166,168,168,166,177,149,172,143,159,113,142,107,145,104,138,98,136,86,160,103,162,115,171,122,180,134,187,139,195,142,206,151,209,155,215,165,216,195,228"
+  },
+  {
+    "name": "Điện Biên",
+    "mergedName": "Điện Biên",
+    "center": "Điện Biên",
+    "naturalArea": "9.539,9",
+    "population": "646,2",
+    "coords": "194,231,197,217,207,220,210,235,225,242,227,283,210,303,201,309,213,327,211,350,194,349,191,354,189,363,186,378,170,371,161,354,154,349,150,334,138,327,145,319,148,307,141,306,159,286,154,270,142,271,138,256,130,276,120,279,117,246,100,240,102,231,93,222,69,205,57,187,63,182,73,184,72,173,84,164,102,163,111,173,121,181,130,185,138,199,138,208,148,208,153,219,165,216"
+  },
+  {
+    "name": "Sơn La",
+    "mergedName": "Sơn La",
+    "center": "Sơn La",
+    "naturalArea": "14109,8",
+    "population": "1.313,3",
+    "coords": "217,391,231,390,237,400,244,400,240,391,250,388,250,376,277,369,282,361,297,364,302,372,312,370,320,385,329,388,347,400,359,408,372,408,375,393,387,390,398,387,402,379,377,355,383,346,378,334,371,316,362,308,348,304,333,313,323,308,314,299,318,277,311,269,300,274,279,274,255,265,243,247,237,235,223,233,226,280,204,308,214,328,210,349,196,349,187,378,202,385,211,379"
+  },
+  {
+    "name": "Lạng Sơn",
+    "mergedName": "Lạng Sơn",
+    "center": "Lạng Sơn",
+    "naturalArea": "8.310,2",
+    "population": "807,3",
+    "coords": "529,183,541,177,553,185,568,182,572,191,583,192,586,206,582,211,586,223,582,235,589,241,591,232,606,236,616,244,627,241,622,251,631,259,643,266,652,268,664,280,651,290,654,301,636,316,624,304,616,301,607,283,595,287,575,281,565,292,559,302,548,302,536,296,529,283,541,271,527,259,521,227,533,215,539,200"
+  },
+  {
+    "name": "Quảng Ninh",
+    "mergedName": "Quảng Ninh",
+    "center": "Quảng Ninh",
+    "naturalArea": "6.207,9",
+    "population": "1.381,2",
+    "coords": "621,329,624,317,652,305,651,289,663,281,673,278,675,284,702,281,708,275,720,278,737,293,738,308,693,353,679,379,630,393,607,382,598,373,595,363,585,356,560,349,571,334,604,340"
+  },
+  {
+    "name": "Thanh Hoá",
+    "mergedName": "Thanh Hoá",
+    "center": "Thanh Hoá",
+    "naturalArea": "11.114,7",
+    "population": "3.3739,5",
+    "coords": "348,402,362,408,374,405,396,411,405,408,425,424,452,436,514,472,514,481,503,490,500,507,490,525,487,546,482,554,485,570,470,566,454,546,440,545,432,537,422,539,425,530,408,508,414,493,387,483,390,468,383,468,384,457,371,454,354,456,356,438,344,432,321,429,326,417,339,418"
+  },
+  {
+    "name": "Nghệ An",
+    "mergedName": "Nghệ An",
+    "center": "Nghệ An",
+    "naturalArea": "16.486,5",
+    "population": "3.442",
+    "coords": "372,507,365,496,375,484,389,485,414,494,410,507,426,532,426,541,435,539,441,547,454,547,472,568,488,571,482,578,482,593,469,598,469,611,478,623,487,644,475,650,475,659,454,655,445,655,426,653,416,653,410,643,389,638,362,632,341,613,329,607,311,592,286,578,279,580,262,568,274,557,286,556,289,547,289,536,277,524,292,523,308,519,320,522,332,527,347,528,353,519"
+  },
+  {
+    "name": "Hà Tĩnh",
+    "mergedName": "Hà Tĩnh",
+    "center": "Hà Tĩnh",
+    "naturalArea": "5.994,4",
+    "population": "1.323,7",
+    "coords": "408,651,402,669,411,680,419,693,426,695,426,704,434,707,445,702,464,732,487,722,509,720,518,734,542,737,547,729,566,731,560,722,559,713,548,716,544,707,529,693,520,696,485,645,469,657"
+  },
+  {
+    "name": "Cao Bằng",
+    "mergedName": "Cao Bằng",
+    "center": "Cao Bằng",
+    "naturalArea": "6.700,4",
+    "population": "547,9",
+    "coords": "428,127,448,138,458,156,475,144,481,147,485,168,497,172,517,168,521,177,530,183,539,175,551,184,568,184,574,165,578,153,585,159,600,133,563,115,547,126,533,112,512,112,493,118,472,100,457,96"
+  },
+
+  {
+    "name": { "1": "Tuyên Quang", "2": "Hà Giang" },
+    "naturalArea": { "1": "5.867,9", "2": "7.927,5" },
+    "population": { "1": "812,2", "2": "899,9" },
+    "mergedName": "Tuyên Quang",
+    "center": "Tuyên Quang",
+    "coords": "321,146,340,131,360,132,373,120,369,99,378,96,376,86,385,90,400,80,417,78,420,71,427,66,447,78,459,102,429,126,449,138,465,177,447,203,458,239,452,271,459,293,449,296,433,298,407,268,384,224,364,209,358,201,348,204,345,191,334,183,327,165,333,162"
+  },
+  {
+    "name": { "1": "Lào Cai", "2": "Yên Bái" },
+    "naturalArea": { "1": "6.364,2", "2": "6.892,7" },
+    "population": { "1": "779,9", "2": "855,5" },
+    "mergedName": "Lào Cai",
+    "center": "Yên Bái",
+    "coords": "231,231,234,214,248,202,253,190,247,179,232,180,234,166,226,152,239,134,258,156,275,170,282,148,292,134,307,133,318,148,332,159,333,185,346,192,346,205,359,201,369,213,392,236,403,259,405,270,385,283,381,294,384,307,372,315,361,307,349,305,334,315,314,300,318,271,302,274,271,269,248,254"
+  },
+  {
+    "name": { "1": "Bắc Kạn", "2": "Thái Nguyên" },
+    "naturalArea": { "1": "4.860", "2": "3.522" },
+    "population": { "1": "326,5", "2": "1.350,3" },
+    "mergedName": "Thái Nguyên",
+    "center": "Thái Nguyên",
+    "coords": "459,184,450,199,451,221,459,240,454,263,451,279,459,290,481,311,498,318,504,306,514,302,514,284,525,281,528,293,537,275,528,260,522,242,520,227,534,213,538,201,531,183,523,177,520,168,507,168,490,169,480,157,480,145,466,153,459,159"
+  },
+  {
+    "name": { "1": "Vĩnh Phúc", "2": "Phú Thọ", "3": "Hoà Bình" },
+    "naturalArea": { "1": "1.236", "2": "3.534,6", "3":"4.590,3" },
+    "population": { "1": "1.211,3", "2": "1.530,8","3":"880,5" },
+    "mergedName": "Phú Thọ",
+    "center": "Phú Thọ",
+    "coords":"408,408,395,409,374,405,376,391,392,390,403,382,379,358,382,348,374,321,382,310,379,295,382,281,408,272,429,293,444,296,459,290,483,311,483,336,481,346,468,336,451,336,444,324,436,316,429,328,427,340,426,354,444,358,451,364,451,376,463,390,469,402,483,411,490,430,483,424,475,429,475,438,462,432,453,435,430,427"
+  },
+  {
+    "name": { "1": "Bắc Ninh", "2": "Bắc Giang" },
+    "naturalArea": { "1": "822,7", "2": "3.895,9" },
+    "population": { "1": "1517,4", "2": "1922,7" },
+    "mergedName": "Bắc Ninh",
+    "center": "Bắc Giang",
+    "coords":"508,359,523,359,541,361,544,352,544,341,549,332,564,329,571,334,579,334,592,334,602,335,614,335,621,329,626,319,629,310,623,301,608,287,597,292,588,284,577,284,568,292,562,304,552,305,544,301,531,293,525,280,514,283,517,298,504,308,499,317,504,328,501,337,505,349"
+  },
+  {
+    "name": { "1": "Hưng Yên", "2": "Thái Bình" },
+    "naturalArea": { "1": "930,2", "2": "1.584,6" },
+    "population": { "1": "1.301", "2": "1.882,3" },
+    "mergedName": "Hưng Yên",
+    "center": "Hưng Yên",
+    "coords":"523,405,529,417,535,424,541,432,541,441,549,435,559,444,570,441,576,448,574,433,574,420,576,409,564,403,558,396,540,396,531,388,523,377,528,365,517,358,504,362,501,376,501,385,508,393,514,400"
+  },
+  {
+    "name": { "1": "Hải Dương", "2": "TP Hải Phòng" },
+    "naturalArea": { "1": "1.668,3", "2": "1.526,5" },
+    "population": { "1": "1.956,9", "2": "2105" },
+    "mergedName": "Thành phố Hải Phòng",
+    "center": "Thành phố Hải Phòng",
+    "coords":"537,395,529,388,522,379,528,370,526,359,538,361,546,355,544,343,550,334,561,331,574,335,558,346,571,353,580,356,594,367,591,383,598,391,583,394,591,401,583,404,570,401,558,392,547,394"
+  },
+  {
+    "name": { "1": "Hà Nam", "2": "Ninh Bình", "3": "Nam Định" },
+    "naturalArea": { "1": "861,9", "2": "1.411,8", "3": "1.668,8" },
+    "population": { "1": "885,9", "2": "1.017,1", "3":"1.887,1" },
+    "mergedName": "Ninh Bình",
+    "center": "Ninh Bình",
+    "coords":"474,452,495,467,505,472,516,475,519,485,528,484,537,476,546,467,553,454,564,454,574,454,567,445,558,445,550,437,541,440,534,433,531,422,526,413,522,404,510,395,495,399,484,408,490,428,475,431,475,440,459,437"
+  },
+  {
+    "name": { "1": "Quảng Bình", "2": "Quảng Trị" },
+    "naturalArea": { "1": "7.998,8", "2": "4.701,2" },
+    "population": { "1": "918,7", "2": "654,2" },
+    "mergedName": "Quảng Trị",
+    "center": "Quảng Bình",
+    "coords":"463,731,472,730,483,724,495,721,508,721,519,733,532,736,544,736,553,731,571,733,558,743,562,760,577,785,586,798,602,811,624,828,636,838,647,859,672,880,662,892,635,900,644,910,630,927,623,931,614,924,609,907,595,913,585,915,585,897,576,892,571,883,571,849,558,849,553,838,543,826,543,811,534,814,522,808,504,792,493,776,478,767,465,745"
+
+  },
+  {
+    "name": { "1": "Quảng Nam", "2": "TP Đà Nẵng" },
+    "naturalArea": { "1": "10.574,9", "2": "1.284,7" },
+    "population": { "1": "1.526,1", "2": "1.245,2" },
+    "mergedName": "Đà Nẵng",
+    "center": "Thành phố Đà Nẵng",
+    "coords":"650,985,665,979,674,969,689,961,699,958,710,966,717,958,725,958,729,945,743,943,753,952,767,964,774,975,788,984,795,1003,811,1024,820,1032,827,1041,815,1042,795,1048,780,1051,770,1066,777,1078,765,1078,755,1092,747,1071,738,1062,726,1060,710,1051,699,1039,683,1038,677,1024,666,1029,654,1012,642,996"
+  },
+  {
+    "name": { "1": "Kon Tum", "2": "Quảng Ngãi" },
+    "naturalArea": { "1": "9.677,3", "2": "5.155,2" },
+    "population": { "1": "591,3", "2": "1.248,1" },
+    "mergedName": "Quảng Ngãi",
+    "center": "Quảng Ngãi",
+    "coords":"675,1219,690,1208,701,1193,716,1181,741,1175,767,1163,782,1149,786,1134,798,1134,811,1131,817,1136,832,1128,862,1127,859,1112,848,1086,844,1071,850,1058,842,1050,836,1038,832,1047,812,1044,788,1050,773,1067,779,1077,764,1080,758,1091,749,1082,749,1073,738,1067,726,1064,716,1055,705,1046,692,1043,702,1062,689,1082,678,1086,689,1100,681,1110,686,1124,678,1157,668,1157,665,1171,660,1193,666,1205"
+  },
+  {
+    "name": { "1": "Gia Lai", "2": "Bình Định" },
+    "naturalArea": { "1": "15.510,1", "2": "6.066,4" },
+    "population": { "1": "1.613,9", "2": "1.506,3" },
+    "mergedName": "Gia Lai",
+    "center": "Bình Định",
+    "coords": "677,1219,691,1207,698,1192,711,1184,727,1181,745,1172,762,1166,774,1160,781,1151,790,1134,802,1134,813,1133,828,1133,840,1127,852,1128,863,1128,867,1146,872,1164,879,1177,881,1189,887,1210,891,1222,888,1232,884,1243,872,1247,866,1258,851,1261,835,1261,838,1283,841,1302,823,1315,816,1327,804,1323,795,1315,789,1300,774,1286,754,1283,741,1282,721,1285,701,1288,686,1294,697,1270,692,1255,682,1240,676,1231"
+  },
+  {
+    "name": { "1": "Ninh Thuận", "2": "Khánh Hoà" },
+    "naturalArea": { "1": "3.355,7", "2": "5.199,6" },
+    "population": { "1": "601,2", "2": "1.260,6" },
+    "mergedName": "Khánh Hoà",
+    "center": "Khánh Hoà",
+    "coords": "811,1489,820,1481,814,1468,819,1450,820,1433,825,1424,820,1412,816,1399,819,1389,829,1386,837,1391,841,1374,848,1364,860,1358,876,1346,897,1349,885,1362,879,1374,878,1383,888,1388,896,1397,878,1394,881,1411,881,1432,881,1450,869,1466,882,1474,872,1495,861,1489,860,1519,848,1527,841,1517,832,1516,826,1504,817,1496"
+  },
+  {
+    "name": { "1": "Lâm Đồng", "2": "Đắk Nông", "3": "Bình Thuận"},
+    "naturalArea": { "1": "9.781,2", "2": "6.509,3", "3":"7.942,6"},
+    "population": { "1": "1.345,0", "2": "681,9", "3":"1.258,8"},
+    "mergedName": "Lâm Đồng",
+    "center": "Lâm Đồng",
+    "coords": "650,1411,652,1431,655,1443,667,1455,671,1473,661,1482,659,1497,671,1497,679,1506,677,1515,694,1521,685,1539,676,1561,683,1564,692,1582,685,1595,691,1615,711,1606,729,1598,739,1598,744,1577,765,1571,775,1576,781,1564,795,1558,799,1545,819,1541,828,1530,845,1526,840,1517,829,1517,823,1505,811,1497,810,1485,819,1478,814,1466,819,1446,819,1428,819,1411,808,1413,793,1414,780,1417,766,1428,756,1425,744,1410,732,1398,741,1389,727,1378,720,1359,686,1362,688,1389,682,1407,674,1414,661,1405"
+  },
+  {
+    "name": { "1": "Đắk Lắk", "2": "Phú Yên" },
+    "naturalArea": { "1": "13.070,4", "2": "5.026,0"},
+    "population": { "1": "1.931,5", "2": "877,7"},
+    "mergedName": "Đắk Lắk",
+    "center": "Đắk Lắk",
+    "coords":"834,1263,834,1276,840,1300,828,1312,817,1329,796,1320,790,1306,777,1290,751,1281,732,1287,711,1287,689,1294,677,1323,683,1344,686,1359,723,1359,726,1376,741,1388,733,1406,747,1412,754,1425,765,1428,774,1418,786,1416,799,1412,817,1412,816,1397,817,1388,835,1391,843,1371,863,1358,878,1346,897,1346,909,1344,906,1332,890,1312,891,1297,881,1281,890,1269,882,1245,870,1252,861,1258,845,1261"
+  },
+  {
+    "name": {
+      "1": "Bà Rịa - Vũng Tàu",
+      "2": "Bình Dương",
+      "3": "TP Hồ Chí Minh"
+    },
+    "naturalArea": { "1": "1.982,6", "2": "2.694,6", "3":"2.095,4"},
+    "population": { "1": "1.187,5", "2": "2.823,4", "3":"9.456,7"},
+    "mergedName": "Thành Phố Hồ Chí Minh",
+    "center": "Thành Phố Hồ Chí Minh",
+    "coords":"551,1566,555,1559,560,1550,551,1538,548,1522,554,1509,562,1500,568,1507,581,1515,580,1527,589,1522,596,1530,620,1531,617,1542,620,1550,610,1560,599,1562,601,1572,611,1590,595,1593,601,1602,613,1607,619,1614,628,1608,638,1605,643,1598,656,1593,659,1602,668,1599,679,1589,685,1595,691,1613,680,1620,665,1625,655,1637,646,1632,635,1641,640,1623,629,1625,617,1625,622,1634,613,1637,601,1629,599,1610,590,1601,577,1602,568,1595,572,1581,563,1571"
+  },
+  {
+    "name": { "1": "Đồng Nai", "2": "Bình Phước" },
+    "naturalArea": { "1": "5.863,6", "2": "6.873,6"},
+    "population": { "1": "3.310,9", "2": "1.045,5"},
+    "mergedName": "Đồng Nai",
+    "center": "Đồng Nai",
+     "coords":"652,1411,652,1433,655,1448,665,1456,671,1474,659,1481,655,1490,662,1498,670,1501,677,1511,694,1522,674,1563,688,1566,692,1581,685,1593,677,1587,667,1600,658,1593,646,1593,637,1602,619,1614,613,1603,596,1599,611,1591,607,1579,601,1563,610,1561,623,1554,617,1539,620,1528,601,1524,590,1522,581,1527,580,1514,563,1501,565,1490,554,1474,558,1463,554,1448,568,1450,587,1450,598,1439,617,1438,635,1418"
+  },
+  {
+    "name": { "1": "Tây Ninh", "2": "Long An" },
+    "naturalArea": { "1": "4.041,7", "2": "4.494,8"},
+    "population": { "1": "1.194,9", "2": "1.743,4"},
+    "mergedName": "Tây Ninh",
+    "center": "Long An",
+    "coords":"455,1572,477,1596,492,1610,504,1617,518,1617,528,1611,542,1611,549,1623,558,1625,562,1632,572,1632,581,1626,593,1620,592,1605,575,1604,566,1596,569,1581,563,1571,549,1565,558,1551,548,1534,548,1518,562,1501,562,1486,540,1485,524,1477,510,1473,501,1489,485,1492,492,1512,489,1528,506,1542,518,1559,530,1565,521,1569,530,1592,512,1589,501,1575,495,1584,480,1565,464,1569"
+  },
+  {
+    "name": { "1": "Cần Thơ", "2": "Sóc Trăng", "3": "Hậu Giang" },
+    "naturalArea": { "1": "1.440,4","2":"3.298,2", "3": "1.622,2"},
+    "population": { "1": "1.258,9", "2":"1.198,8","3": "728,3"},
+    "mergedName": "Cần Thơ",
+    "center": "Cần Thơ",
+    "coords":"440,1711,450,1703,455,1691,444,1678,420,1659,428,1649,434,1655,446,1652,458,1631,471,1635,483,1644,500,1658,489,1666,479,1659,473,1667,491,1682,497,1696,516,1712,530,1736,530,1753,513,1759,491,1769,489,1754,479,1751,462,1751,461,1726,440,1729,434,1718"
+  },
+  {
+    "name": { "1": "Bến Tre", "2": "Vĩnh Long", "3": "Trà Vinh" },
+    "naturalArea": { "1": "2.379,7", "2": "1.525,7", "3":"2.390,8"},
+    "population": { "1": "1.299,3", "2": "1.029,6", "3":"1.019,9"},
+    "mergedName": "Vĩnh Long",
+    "center": "Vĩnh Long",
+    "coords":"474,1669,489,1683,500,1687,509,1696,522,1711,537,1726,552,1734,568,1732,574,1723,575,1713,565,1704,551,1690,537,1675,522,1656,533,1665,548,1678,562,1690,572,1699,580,1704,589,1695,577,1684,589,1675,601,1669,593,1659,557,1648,548,1644,527,1645,513,1644,501,1648,492,1647,500,1657,489,1663,479,1659"
+  },
+  {
+    "name": { "1": "Tiền Giang", "2": "Đồng Tháp" },
+    "naturalArea": { "1": "2.556,4", "2": "3.382,3"},
+    "population": { "1": "1.790,7", "2": "1.600,2"},
+    "mergedName": "Đồng Tháp",
+    "center": "Tiền Giang",
+    "coords":"440,1614,437,1601,428,1598,422,1590,417,1576,429,1581,443,1569,455,1572,474,1596,485,1607,503,1617,516,1617,525,1611,539,1613,548,1622,558,1626,558,1635,574,1634,583,1626,595,1629,599,1647,560,1644,548,1641,534,1646,524,1649,512,1643,504,1647,494,1646,482,1644,474,1632,461,1631,453,1620"  
+  },
+  {
+    "name": { "1": "Bạc Liêu", "2": "Cà Mau" },
+    "naturalArea": { "1": "2.667,9", "2": "5.274,5"},
+    "population": { "1": "925,2", "2": "1.207,4"},
+    "mergedName": "Cà Mau",
+    "center": "Cà Mau",
+    "coords":"373,1739,373,1760,372,1784,372,1798,366,1818,382,1821,378,1828,382,1836,364,1843,373,1848,385,1845,397,1843,405,1837,411,1827,422,1827,428,1815,435,1806,444,1797,452,1786,464,1781,479,1774,492,1769,491,1756,477,1754,465,1751,458,1742,458,1730,440,1729,428,1730,429,1738,428,1751,414,1745,405,1741,396,1736,387,1738"
+  },
+  {
+    "name": { "1": "An Giang", "2": "Kiên Giang" },
+    "naturalArea": { "1": "3.536,8", "2": "6.352"},
+    "population": { "1": "1.906,3", "2": "1.755,3"},
+    "mergedName": "An Giang",
+    "center": "Kiên Giang",
+    "coords":"371,1739,370,1725,374,1707,377,1699,385,1701,400,1690,403,1698,400,1674,383,1669,374,1662,361,1656,352,1662,343,1651,335,1638,335,1626,344,1623,359,1621,370,1621,379,1614,388,1605,398,1600,392,1584,398,1571,413,1579,421,1594,427,1600,435,1600,436,1612,448,1621,459,1630,450,1639,447,1647,438,1651,427,1648,416,1659,427,1665,438,1678,450,1690,447,1703,433,1719,435,1730,426,1743,424,1752,415,1748,397,1736"
+  }
+]

script.js

@@ -0,0 +1,257 @@
+const canvas = document.getElementById('mapCanvas');
+const ctx = canvas.getContext('2d');
+
+const img = document.querySelector('.map-container img');
+canvas.width = img.clientWidth;
+canvas.height = img.clientHeight;
+
+const mapElement = document.getElementById('vietnam-map');
+
+let areas = [];
+let locationsData = [];
+
+fetch('provinces.json')
+    .then(response => {
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+        return response.json();
+    })
+    .then(data => {
+        locationsData = data;
+        areas = locationsData.map(location => {
+            if (!location.coords) {
+                console.error('Missing coords for location:', location);
+                return { coords: [], shape: 'poly' };
+            }
+            const coords = location.coords.split(',').map(Number);
+            const shape = 'poly';
+            return { coords, shape };
+        });
+        createMapAreas();
+    })
+    .catch(error => {
+        console.error('Error loading the JSON file:', error);
+    });
+
+function updateCanvasSize() {
+    // Cập nhật kích thước canvas theo kích thước thực của ảnh
+    canvas.width = img.offsetWidth;
+    canvas.height = img.offsetHeight;
+    canvas.style.width = `${img.offsetWidth}px`;
+    canvas.style.height = `${img.offsetHeight}px`;
+}
+
+// Sửa lại event listener resize
+window.addEventListener('resize', () => {
+    updateCanvasSize();
+    createMapAreas();
+});
+
+// Thêm vào sau khi ảnh đã load
+img.addEventListener('load', () => {
+    updateCanvasSize();
+    createMapAreas();
+});
+
+// Sửa lại hàm createMapAreas
+function createMapAreas() {
+    mapElement.innerHTML = '';
+    const scaleX = img.offsetWidth / img.naturalWidth;
+    const scaleY = img.offsetHeight / img.naturalHeight;
+    
+    areas.forEach((area) => {
+        const scaledCoords = area.coords.map((val, index) => {
+            return index % 2 === 0 
+                ? Math.round(val * scaleX) 
+                : Math.round(val * scaleY);
+        });
+        
+        const areaElement = document.createElement('area');
+        areaElement.setAttribute('shape', area.shape);
+        areaElement.setAttribute('coords', scaledCoords.join(','));
+        areaElement.setAttribute('href', 'javascript:void(0)');
+        mapElement.appendChild(areaElement);
+    });
+    
+    setupEventListeners();
+}
+
+const drawOutline = (coords) => {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.beginPath();
+    const scaleX = canvas.width / img.naturalWidth;
+    const scaleY = canvas.height / img.naturalHeight;
+    
+    ctx.moveTo(coords[0] * scaleX, coords[1] * scaleY);
+    for (let i = 2; i < coords.length; i += 2) {
+        ctx.lineTo(coords[i] * scaleX, coords[i + 1] * scaleY);
+    }
+    
+    ctx.closePath();
+    
+    // Thêm fill màu da cam nhạt
+    ctx.fillStyle = 'rgba(255, 165, 0, 0.3)'; // Màu da cam với độ trong suốt 0.3
+    ctx.fill();
+    
+    // Vẽ viền đỏ
+    ctx.strokeStyle = 'red';
+    ctx.lineWidth = 2;
+    ctx.stroke();
+};
+
+const clearOutline = () => {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+};
+
+// Tooltip functionality
+const tooltip = document.querySelector('.tooltip-box');
+
+const showTooltip = (data, event) => {
+    tooltip.style.display = 'block';
+
+    let nameText = '';
+    let areaText = '';
+    let areaTotal = 0;
+    let popText = '';
+    let popTotal = 0;
+
+    if (typeof data.name === 'object' && Object.keys(data.name).length > 1) {
+        // Gộp tên
+        nameText = Object.values(data.name).join(' + ');
+
+        // Diện tích
+        for (const key in data.naturalArea) {
+            const value = parseFloat(data.naturalArea[key].replace('.', '').replace(',', '.'));
+            areaText += `<p>${data.name[key]}: ${data.naturalArea[key]}</p>`;
+            areaTotal += value;
+        }
+
+        // Dân số
+        for (const key in data.population) {
+            const value = parseFloat(data.population[key].replace('.', '').replace(',', '.'));
+            popText += `<p>${data.name[key]}: ${data.population[key]}</p>`;
+            popTotal += value;
+        }
+
+        tooltip.innerHTML = `
+            <h2>${nameText}</h2>
+            <hr>
+            <h3>DIỆN TÍCH TỰ NHIÊN (KM²)</h3>
+            ${areaText}
+            <p><strong>Tổng diện tích:</strong> ${areaTotal.toLocaleString('vi-VN')}</p>
+            <hr>
+            <h3>QUY MÔ DÂN SỐ (NGHÌN NGƯỜI)</h3>
+            ${popText}
+            <p><strong>Tổng dân số:</strong> ${popTotal.toLocaleString('vi-VN')}</p>
+            <hr>
+            <p>Tên tỉnh, thành sau sáp nhập: <span class="highlight">${data.mergedName}</span></p>
+            <p>Trung tâm chính trị - hành chính: <span class="highlight">${data.center}</span></p>
+        `;
+    } else {
+        // Trường hợp chỉ có 1 tỉnh
+        tooltip.innerHTML = `
+            <h2>${data.name}</h2>
+            <hr>
+            <h3>DIỆN TÍCH TỰ NHIÊN (KM²)</h3>
+            <p>${data.name}: ${data.naturalArea}</p>
+            <p><strong>Tổng diện tích:</strong> ${data.naturalArea}</p>
+            <hr>
+            <h3>QUY MÔ DÂN SỐ (NGHÌN NGƯỜI)</h3>
+            <p>${data.name}: ${data.population}</p>
+            <p><strong>Tổng dân số:</strong> ${data.population}</p>
+            <hr>
+        <!-- <p>Tên tỉnh, thành sau sáp nhập: <span class="highlight">${data.mergedName}</span></p>
+            <p>Trung tâm chính trị - hành chính: <span class="highlight">${data.center}</span></p>
+        -->
+        `;
+    }
+
+    // Hiện tooltip trước để lấy kích thước thực
+    tooltip.style.visibility = 'hidden';
+    tooltip.style.display = 'block';
+
+    const tooltipWidth = tooltip.offsetWidth;
+    const tooltipHeight = tooltip.offsetHeight;
+    
+    // Lấy kích thước và vị trí của viewport
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+
+    // Tính toán vị trí tốt nhất cho tooltip
+    let left = event.pageX + 10;
+    let top = event.pageY + 10;
+
+    // Kiểm tra và điều chỉnh vị trí ngang
+    if (left + tooltipWidth > viewportWidth + scrollLeft) {
+        left = event.pageX - tooltipWidth - 10;
+    }
+
+    // Kiểm tra và điều chỉnh vị trí dọc
+    if (top + tooltipHeight > viewportHeight + scrollTop) {
+        top = event.pageY - tooltipHeight - 10;
+        
+        // Nếu vẫn vượt quá phía trên viewport
+        if (top < scrollTop) {
+            // Đặt tooltip ở giữa màn hình theo chiều dọc
+            top = scrollTop + (viewportHeight - tooltipHeight) / 2;
+        }
+    }
+
+    // Đảm bảo tooltip không bị cắt ở các cạnh
+    left = Math.max(scrollLeft + 10, Math.min(left, viewportWidth + scrollLeft - tooltipWidth - 10));
+    top = Math.max(scrollTop + 10, Math.min(top, viewportHeight + scrollTop - tooltipHeight - 10));
+
+    // Áp dụng vị trí và hiện tooltip
+    tooltip.style.left = `${left}px`;
+    tooltip.style.top = `${top}px`;
+    tooltip.style.visibility = 'visible';
+    tooltip.classList.add('active');
+};
+
+// Thêm event listener cho viewport resize
+window.addEventListener('resize', () => {
+    if (tooltip.classList.contains('active')) {
+        tooltip.classList.remove('active');
+    }
+});
+
+const hideTooltip = () => {
+    tooltip.classList.remove('active');
+};
+
+function setupEventListeners() {
+    document.querySelectorAll('area').forEach((area, index) => {
+        area.addEventListener('mouseenter', () => {
+            drawOutline(areas[index].coords);
+        });
+        area.addEventListener('mouseleave', clearOutline);
+
+        area.addEventListener('mouseenter', (event) => {
+            showTooltip(locationsData[index], event);
+        });
+        area.addEventListener('mousemove', (event) => {
+            // Chỉ cập nhật vị trí nếu tooltip không bị overflow
+            const tooltipRect = tooltip.getBoundingClientRect();
+            const viewportHeight = window.innerHeight;
+            const viewportWidth = window.innerWidth;
+            
+            // Chỉ di chuyển tooltip theo chuột khi có đủ không gian
+            if (tooltipRect.width + event.clientX < viewportWidth &&
+                tooltipRect.height + event.clientY < viewportHeight) {
+                tooltip.style.left = `${event.pageX + 10}px`;
+                tooltip.style.top = `${event.pageY + 10}px`;
+            }
+        });
+        area.addEventListener('mouseleave', hideTooltip);
+    });
+
+    document.addEventListener('mousemove', (event) => {
+        if (!event.target.closest('area') && !tooltip.contains(event.target)) {
+            tooltip.style.display = 'none';
+            tooltip.innerHTML = '';
+        }
+    });
+}

style.css

@@ -1,28 +1,132 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
-}
+.container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.map-container {
+    position: relative;
+    width: 100%;
+    max-width: 1000px;
+    /* hoặc kích thước tối đa mong muốn */
+    margin: 0 auto;
+}
+
+.map-container img,
+#mapCanvas {
+    width: 100%;
+    height: auto;
+    display: block;
+}
+
+.map-container img {
+    width: 100%;
+    height: auto;
+    display: block;
+}
+
+#mapCanvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
+
+#vietnam-map {
+    width: 100%;
+    height: 100%;
+}
+
+.tooltip-box {
+    width: 30vw;
+    min-width: 200px;
+    max-width: 350px;
+    background-color: #f0f8ff;
+    opacity: 0.9;
+    border-radius: 12px;
+    padding: 10px;
+    font-family: 'Segoe UI', sans-serif;
+    color: #1a1a1a;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    display: none;
+    position: absolute;
+    text-align: center;
+    z-index: 1000;
+    transition: left 0.1s ease-out, top 0.1s ease-out;
+    pointer-events: none;
+    max-height: 80vh;
+    overflow-y: auto;
+}
+
+.tooltip-box.active {
+    display: block !important;
+}
+
+.tooltip-box h2 {
+    text-align: center;
+    color: #2b55b4;
+    font-size: 25px;
+    margin-bottom: 20px;
+}
+
+.tooltip-box .highlight {
+    color: #2b55b4;
+    font-weight: bold;
+    font-size: 16px;
+}
+
+.tooltip-box hr {
+    margin: 20px 0;
+    border: none;
+    border-top: 1px solid #ccc;
+}
+
+/* Media queries cho điện thoại */
+@media screen and (max-width: 768px) {
+    .tooltip-box {
+        width: 85vw;
+        /* Giảm xuống để phù hợp với màn hình điện thoại */
+        min-width: 150px;
+        max-width: 300px;
+        font-size: 14px;
+        padding: 8px;
+        max-height: 60vh;
+    }
+
+    .tooltip-box h2 {
+        font-size: 16px;
+        margin-bottom: 10px;
+    }
+
+    .tooltip-box h3 {
+        font-size: 14px;
+        margin: 8px 0;
+    }
+
+    .tooltip-box p {
+        margin: 5px 0;
+        font-size: 13px;
+    }
+
+    .tooltip-box hr {
+        margin: 5px 0;
+    }
+
+    .tooltip-box .highlight {
+        font-size: 13px;
+    }
+}
+
+/* Media queries cho điện thoại nhỏ hơn */
+@media screen and (max-width: 375px) {
+    .tooltip-box {
+        width: 90vw;
+        min-width: 120px;
+        max-width: 250px;
+        font-size: 12px;
+        padding: 6px;
+    }
+}

vietnam_map.jfif

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:966cbddf0bb4b28486b51b81f93df86c45a4f6addecc8d88ab3ca39a6cb6ac2a
+size 140208