Closed jarben closed 5 years ago
Currently only circle is supported. And not in the plan yet.
ok, thanks for info!
Like this?
Yeah, that would be great to be able to do this. Is this generated using mark points @chaegumi? The issue with that is that you need to get centroids of regions manually..
All code here, you can read it yourself.
var geoCoordMap = {
"Xiamen" : [118.1, 24.46],
"Beijing" : [116.46, 39.92],
"Hangzhou" : [120.19, 30.26],
"Hong Kong" : [114.1667, 22.25],
"Macao" : [113.5, 22.2],
"Nan'an" : [118.386085, 24.956862],
"Shanghai" : [121.48, 31.22]
};
var latlong = {};
latlong.AD = {
'latitude' : 42.5,
'longitude' : 1.5
};
latlong.AE = {
'latitude' : 24,
'longitude' : 54
};
latlong.AF = {
'latitude' : 33,
'longitude' : 65
};
latlong.AG = {
'latitude' : 17.05,
'longitude' : -61.8
};
latlong.AI = {
'latitude' : 18.25,
'longitude' : -63.1667
};
latlong.AL = {
'latitude' : 41,
'longitude' : 20
};
latlong.AM = {
'latitude' : 40,
'longitude' : 45
};
latlong.AN = {
'latitude' : 12.25,
'longitude' : -68.75
};
latlong.AO = {
'latitude' : -12.5,
'longitude' : 18.5
};
latlong.AP = {
'latitude' : 35,
'longitude' : 105
};
latlong.AQ = {
'latitude' : -90,
'longitude' : 0
};
latlong.AR = {
'latitude' : -34,
'longitude' : -64
};
latlong.AS = {
'latitude' : -14.3333,
'longitude' : -170
};
latlong.AT = {
'latitude' : 47.3333,
'longitude' : 13.3333
};
latlong.AU = {
'latitude' : -27,
'longitude' : 133
};
latlong.AW = {
'latitude' : 12.5,
'longitude' : -69.9667
};
latlong.AZ = {
'latitude' : 40.5,
'longitude' : 47.5
};
latlong.BA = {
'latitude' : 44,
'longitude' : 18
};
latlong.BB = {
'latitude' : 13.1667,
'longitude' : -59.5333
};
latlong.BD = {
'latitude' : 24,
'longitude' : 90
};
latlong.BE = {
'latitude' : 50.8333,
'longitude' : 4
};
latlong.BF = {
'latitude' : 13,
'longitude' : -2
};
latlong.BG = {
'latitude' : 43,
'longitude' : 25
};
latlong.BH = {
'latitude' : 26,
'longitude' : 50.55
};
latlong.BI = {
'latitude' : -3.5,
'longitude' : 30
};
latlong.BJ = {
'latitude' : 9.5,
'longitude' : 2.25
};
latlong.BM = {
'latitude' : 32.3333,
'longitude' : -64.75
};
latlong.BN = {
'latitude' : 4.5,
'longitude' : 114.6667
};
latlong.BO = {
'latitude' : -17,
'longitude' : -65
};
latlong.BR = {
'latitude' : -10,
'longitude' : -55
};
latlong.BS = {
'latitude' : 24.25,
'longitude' : -76
};
latlong.BT = {
'latitude' : 27.5,
'longitude' : 90.5
};
latlong.BV = {
'latitude' : -54.4333,
'longitude' : 3.4
};
latlong.BW = {
'latitude' : -22,
'longitude' : 24
};
latlong.BY = {
'latitude' : 53,
'longitude' : 28
};
latlong.BZ = {
'latitude' : 17.25,
'longitude' : -88.75
};
latlong.CA = {
'latitude' : 54,
'longitude' : -100
};
latlong.CC = {
'latitude' : -12.5,
'longitude' : 96.8333
};
latlong.CD = {
'latitude' : 0,
'longitude' : 25
};
latlong.CF = {
'latitude' : 7,
'longitude' : 21
};
latlong.CG = {
'latitude' : -1,
'longitude' : 15
};
latlong.CH = {
'latitude' : 47,
'longitude' : 8
};
latlong.CI = {
'latitude' : 8,
'longitude' : -5
};
latlong.CK = {
'latitude' : -21.2333,
'longitude' : -159.7667
};
latlong.CL = {
'latitude' : -30,
'longitude' : -71
};
latlong.CM = {
'latitude' : 6,
'longitude' : 12
};
latlong.CN = {
'latitude' : 35,
'longitude' : 105
};
latlong.CO = {
'latitude' : 4,
'longitude' : -72
};
latlong.CR = {
'latitude' : 10,
'longitude' : -84
};
latlong.CU = {
'latitude' : 21.5,
'longitude' : -80
};
latlong.CV = {
'latitude' : 16,
'longitude' : -24
};
latlong.CX = {
'latitude' : -10.5,
'longitude' : 105.6667
};
latlong.CY = {
'latitude' : 35,
'longitude' : 33
};
latlong.CZ = {
'latitude' : 49.75,
'longitude' : 15.5
};
latlong.DE = {
'latitude' : 51,
'longitude' : 9
};
latlong.DJ = {
'latitude' : 11.5,
'longitude' : 43
};
latlong.DK = {
'latitude' : 56,
'longitude' : 10
};
latlong.DM = {
'latitude' : 15.4167,
'longitude' : -61.3333
};
latlong.DO = {
'latitude' : 19,
'longitude' : -70.6667
};
latlong.DZ = {
'latitude' : 28,
'longitude' : 3
};
latlong.EC = {
'latitude' : -2,
'longitude' : -77.5
};
latlong.EE = {
'latitude' : 59,
'longitude' : 26
};
latlong.EG = {
'latitude' : 27,
'longitude' : 30
};
latlong.EH = {
'latitude' : 24.5,
'longitude' : -13
};
latlong.ER = {
'latitude' : 15,
'longitude' : 39
};
latlong.ES = {
'latitude' : 40,
'longitude' : -4
};
latlong.ET = {
'latitude' : 8,
'longitude' : 38
};
latlong.EU = {
'latitude' : 47,
'longitude' : 8
};
latlong.FI = {
'latitude' : 62,
'longitude' : 26
};
latlong.FJ = {
'latitude' : -18,
'longitude' : 175
};
latlong.FK = {
'latitude' : -51.75,
'longitude' : -59
};
latlong.FM = {
'latitude' : 6.9167,
'longitude' : 158.25
};
latlong.FO = {
'latitude' : 62,
'longitude' : -7
};
latlong.FR = {
'latitude' : 46,
'longitude' : 2
};
latlong.GA = {
'latitude' : -1,
'longitude' : 11.75
};
latlong.GB = {
'latitude' : 54,
'longitude' : -2
};
latlong.GD = {
'latitude' : 12.1167,
'longitude' : -61.6667
};
latlong.GE = {
'latitude' : 42,
'longitude' : 43.5
};
latlong.GF = {
'latitude' : 4,
'longitude' : -53
};
latlong.GH = {
'latitude' : 8,
'longitude' : -2
};
latlong.GI = {
'latitude' : 36.1833,
'longitude' : -5.3667
};
latlong.GL = {
'latitude' : 72,
'longitude' : -40
};
latlong.GM = {
'latitude' : 13.4667,
'longitude' : -16.5667
};
latlong.GN = {
'latitude' : 11,
'longitude' : -10
};
latlong.GP = {
'latitude' : 16.25,
'longitude' : -61.5833
};
latlong.GQ = {
'latitude' : 2,
'longitude' : 10
};
latlong.GR = {
'latitude' : 39,
'longitude' : 22
};
latlong.GS = {
'latitude' : -54.5,
'longitude' : -37
};
latlong.GT = {
'latitude' : 15.5,
'longitude' : -90.25
};
latlong.GU = {
'latitude' : 13.4667,
'longitude' : 144.7833
};
latlong.GW = {
'latitude' : 12,
'longitude' : -15
};
latlong.GY = {
'latitude' : 5,
'longitude' : -59
};
latlong.HK = {
'latitude' : 22.25,
'longitude' : 114.1667
};
latlong.HM = {
'latitude' : -53.1,
'longitude' : 72.5167
};
latlong.HN = {
'latitude' : 15,
'longitude' : -86.5
};
latlong.HR = {
'latitude' : 45.1667,
'longitude' : 15.5
};
latlong.HT = {
'latitude' : 19,
'longitude' : -72.4167
};
latlong.HU = {
'latitude' : 47,
'longitude' : 20
};
latlong.ID = {
'latitude' : -5,
'longitude' : 120
};
latlong.IE = {
'latitude' : 53,
'longitude' : -8
};
latlong.IL = {
'latitude' : 31.5,
'longitude' : 34.75
};
latlong.IN = {
'latitude' : 20,
'longitude' : 77
};
latlong.IO = {
'latitude' : -6,
'longitude' : 71.5
};
latlong.IQ = {
'latitude' : 33,
'longitude' : 44
};
latlong.IR = {
'latitude' : 32,
'longitude' : 53
};
latlong.IS = {
'latitude' : 65,
'longitude' : -18
};
latlong.IT = {
'latitude' : 42.8333,
'longitude' : 12.8333
};
latlong.JM = {
'latitude' : 18.25,
'longitude' : -77.5
};
latlong.JO = {
'latitude' : 31,
'longitude' : 36
};
latlong.JP = {
'latitude' : 36,
'longitude' : 138
};
latlong.KE = {
'latitude' : 1,
'longitude' : 38
};
latlong.KG = {
'latitude' : 41,
'longitude' : 75
};
latlong.KH = {
'latitude' : 13,
'longitude' : 105
};
latlong.KI = {
'latitude' : 1.4167,
'longitude' : 173
};
latlong.KM = {
'latitude' : -12.1667,
'longitude' : 44.25
};
latlong.KN = {
'latitude' : 17.3333,
'longitude' : -62.75
};
latlong.KP = {
'latitude' : 40,
'longitude' : 127
};
latlong.KR = {
'latitude' : 37,
'longitude' : 127.5
};
latlong.KW = {
'latitude' : 29.3375,
'longitude' : 47.6581
};
latlong.KY = {
'latitude' : 19.5,
'longitude' : -80.5
};
latlong.KZ = {
'latitude' : 48,
'longitude' : 68
};
latlong.LA = {
'latitude' : 18,
'longitude' : 105
};
latlong.LB = {
'latitude' : 33.8333,
'longitude' : 35.8333
};
latlong.LC = {
'latitude' : 13.8833,
'longitude' : -61.1333
};
latlong.LI = {
'latitude' : 47.1667,
'longitude' : 9.5333
};
latlong.LK = {
'latitude' : 7,
'longitude' : 81
};
latlong.LR = {
'latitude' : 6.5,
'longitude' : -9.5
};
latlong.LS = {
'latitude' : -29.5,
'longitude' : 28.5
};
latlong.LT = {
'latitude' : 55,
'longitude' : 24
};
latlong.LU = {
'latitude' : 49.75,
'longitude' : 6
};
latlong.LV = {
'latitude' : 57,
'longitude' : 25
};
latlong.LY = {
'latitude' : 25,
'longitude' : 17
};
latlong.MA = {
'latitude' : 32,
'longitude' : -5
};
latlong.MC = {
'latitude' : 43.7333,
'longitude' : 7.4
};
latlong.MD = {
'latitude' : 47,
'longitude' : 29
};
latlong.ME = {
'latitude' : 42.5,
'longitude' : 19.4
};
latlong.MG = {
'latitude' : -20,
'longitude' : 47
};
latlong.MH = {
'latitude' : 9,
'longitude' : 168
};
latlong.MK = {
'latitude' : 41.8333,
'longitude' : 22
};
latlong.ML = {
'latitude' : 17,
'longitude' : -4
};
latlong.MM = {
'latitude' : 22,
'longitude' : 98
};
latlong.MN = {
'latitude' : 46,
'longitude' : 105
};
latlong.MO = {
'latitude' : 22.1667,
'longitude' : 113.55
};
latlong.MP = {
'latitude' : 15.2,
'longitude' : 145.75
};
latlong.MQ = {
'latitude' : 14.6667,
'longitude' : -61
};
latlong.MR = {
'latitude' : 20,
'longitude' : -12
};
latlong.MS = {
'latitude' : 16.75,
'longitude' : -62.2
};
latlong.MT = {
'latitude' : 35.8333,
'longitude' : 14.5833
};
latlong.MU = {
'latitude' : -20.2833,
'longitude' : 57.55
};
latlong.MV = {
'latitude' : 3.25,
'longitude' : 73
};
latlong.MW = {
'latitude' : -13.5,
'longitude' : 34
};
latlong.MX = {
'latitude' : 23,
'longitude' : -102
};
latlong.MY = {
'latitude' : 2.5,
'longitude' : 112.5
};
latlong.MZ = {
'latitude' : -18.25,
'longitude' : 35
};
latlong.NA = {
'latitude' : -22,
'longitude' : 17
};
latlong.NC = {
'latitude' : -21.5,
'longitude' : 165.5
};
latlong.NE = {
'latitude' : 16,
'longitude' : 8
};
latlong.NF = {
'latitude' : -29.0333,
'longitude' : 167.95
};
latlong.NG = {
'latitude' : 10,
'longitude' : 8
};
latlong.NI = {
'latitude' : 13,
'longitude' : -85
};
latlong.NL = {
'latitude' : 52.5,
'longitude' : 5.75
};
latlong.NO = {
'latitude' : 62,
'longitude' : 10
};
latlong.NP = {
'latitude' : 28,
'longitude' : 84
};
latlong.NR = {
'latitude' : -0.5333,
'longitude' : 166.9167
};
latlong.NU = {
'latitude' : -19.0333,
'longitude' : -169.8667
};
latlong.NZ = {
'latitude' : -41,
'longitude' : 174
};
latlong.OM = {
'latitude' : 21,
'longitude' : 57
};
latlong.PA = {
'latitude' : 9,
'longitude' : -80
};
latlong.PE = {
'latitude' : -10,
'longitude' : -76
};
latlong.PF = {
'latitude' : -15,
'longitude' : -140
};
latlong.PG = {
'latitude' : -6,
'longitude' : 147
};
latlong.PH = {
'latitude' : 13,
'longitude' : 122
};
latlong.PK = {
'latitude' : 30,
'longitude' : 70
};
latlong.PL = {
'latitude' : 52,
'longitude' : 20
};
latlong.PM = {
'latitude' : 46.8333,
'longitude' : -56.3333
};
latlong.PR = {
'latitude' : 18.25,
'longitude' : -66.5
};
latlong.PS = {
'latitude' : 32,
'longitude' : 35.25
};
latlong.PT = {
'latitude' : 39.5,
'longitude' : -8
};
latlong.PW = {
'latitude' : 7.5,
'longitude' : 134.5
};
latlong.PY = {
'latitude' : -23,
'longitude' : -58
};
latlong.QA = {
'latitude' : 25.5,
'longitude' : 51.25
};
latlong.RE = {
'latitude' : -21.1,
'longitude' : 55.6
};
latlong.RO = {
'latitude' : 46,
'longitude' : 25
};
latlong.RS = {
'latitude' : 44,
'longitude' : 21
};
latlong.RU = {
'latitude' : 60,
'longitude' : 100
};
latlong.RW = {
'latitude' : -2,
'longitude' : 30
};
latlong.SA = {
'latitude' : 25,
'longitude' : 45
};
latlong.SB = {
'latitude' : -8,
'longitude' : 159
};
latlong.SC = {
'latitude' : -4.5833,
'longitude' : 55.6667
};
latlong.SD = {
'latitude' : 15,
'longitude' : 30
};
latlong.SE = {
'latitude' : 62,
'longitude' : 15
};
latlong.SG = {
'latitude' : 1.3667,
'longitude' : 103.8
};
latlong.SH = {
'latitude' : -15.9333,
'longitude' : -5.7
};
latlong.SI = {
'latitude' : 46,
'longitude' : 15
};
latlong.SJ = {
'latitude' : 78,
'longitude' : 20
};
latlong.SK = {
'latitude' : 48.6667,
'longitude' : 19.5
};
latlong.SL = {
'latitude' : 8.5,
'longitude' : -11.5
};
latlong.SM = {
'latitude' : 43.7667,
'longitude' : 12.4167
};
latlong.SN = {
'latitude' : 14,
'longitude' : -14
};
latlong.SO = {
'latitude' : 10,
'longitude' : 49
};
latlong.SR = {
'latitude' : 4,
'longitude' : -56
};
latlong.ST = {
'latitude' : 1,
'longitude' : 7
};
latlong.SV = {
'latitude' : 13.8333,
'longitude' : -88.9167
};
latlong.SY = {
'latitude' : 35,
'longitude' : 38
};
latlong.SZ = {
'latitude' : -26.5,
'longitude' : 31.5
};
latlong.TC = {
'latitude' : 21.75,
'longitude' : -71.5833
};
latlong.TD = {
'latitude' : 15,
'longitude' : 19
};
latlong.TF = {
'latitude' : -43,
'longitude' : 67
};
latlong.TG = {
'latitude' : 8,
'longitude' : 1.1667
};
latlong.TH = {
'latitude' : 15,
'longitude' : 100
};
latlong.TJ = {
'latitude' : 39,
'longitude' : 71
};
latlong.TK = {
'latitude' : -9,
'longitude' : -172
};
latlong.TM = {
'latitude' : 40,
'longitude' : 60
};
latlong.TN = {
'latitude' : 34,
'longitude' : 9
};
latlong.TO = {
'latitude' : -20,
'longitude' : -175
};
latlong.TR = {
'latitude' : 39,
'longitude' : 35
};
latlong.TT = {
'latitude' : 11,
'longitude' : -61
};
latlong.TV = {
'latitude' : -8,
'longitude' : 178
};
latlong.TW = {
'latitude' : 23.5,
'longitude' : 121
};
latlong.TZ = {
'latitude' : -6,
'longitude' : 35
};
latlong.UA = {
'latitude' : 49,
'longitude' : 32
};
latlong.UG = {
'latitude' : 1,
'longitude' : 32
};
latlong.UM = {
'latitude' : 19.2833,
'longitude' : 166.6
};
latlong.US = {
'latitude' : 38,
'longitude' : -97
};
latlong.UY = {
'latitude' : -33,
'longitude' : -56
};
latlong.UZ = {
'latitude' : 41,
'longitude' : 64
};
latlong.VA = {
'latitude' : 41.9,
'longitude' : 12.45
};
latlong.VC = {
'latitude' : 13.25,
'longitude' : -61.2
};
latlong.VE = {
'latitude' : 8,
'longitude' : -66
};
latlong.VG = {
'latitude' : 18.5,
'longitude' : -64.5
};
latlong.VI = {
'latitude' : 18.3333,
'longitude' : -64.8333
};
latlong.VN = {
'latitude' : 16,
'longitude' : 106
};
latlong.VU = {
'latitude' : -16,
'longitude' : 167
};
latlong.WF = {
'latitude' : -13.3,
'longitude' : -176.2
};
latlong.WS = {
'latitude' : -13.5833,
'longitude' : -172.3333
};
latlong.YE = {
'latitude' : 15,
'longitude' : 48
};
latlong.YT = {
'latitude' : -12.8333,
'longitude' : 45.1667
};
latlong.ZA = {
'latitude' : -29,
'longitude' : 24
};
latlong.ZM = {
'latitude' : -15,
'longitude' : 30
};
latlong.ZW = {
'latitude' : -20,
'longitude' : 30
};
latlong.cnBJ = {
'latitude' : 39.92,
'longitude' : 116.46
};
latlong.cnSH = {
'latitude' : 31.22,
'longitude' : 121.48
};
latlong.cnHZ = {
'latitude' : 30.26,
'longitude' : 120.19
};
latlong.cnXM = {
'latitude' : 24.46,
'longitude' : 118.1
};
latlong.cnNA = {
'latitude' : 24.956862,
'longitude' : 118.386085
};
latlong.cnHK = {
'latitude' : 22.25,
'longitude' : 114.1667
};
latlong.OS1 = {
'latitude' : 47.8136355,
'longitude' : -69.1608618
};
latlong.OS2 = {
'latitude' : -13.9193513,
'longitude' : -41.0735985
};
latlong.OS3 = {
'latitude' : 45.0708708,
'longitude' : 9.2909206
};
latlong.OS4 = {
'latitude' : 1.3667,
'longitude' : 103.8
};
latlong.OS5 = {
'latitude' : 28.6471948,
'longitude' : 76.9531798
};
latlong.OS6 = {
'latitude' : 25.0741032,
'longitude' : 55.0897605
};
latlong.OS7 = {
'latitude' : -26.1714402,
'longitude' : 28.0050052
};
var mapData = [
{
'code' : 'AR',
'name' : 'Argentina',
'value' : 1,
'color' : '#86a965'
},
{
'code' : 'AU',
'name' : 'Australia',
'value' : 1,
'color' : '#8aabb0'
}, {
'code' : 'AT',
'name' : 'Austria',
'value' : 1,
'color' : '#d8854f'
},
{
'code' : 'BD',
'name' : 'Bangladesh',
'value' : 1,
'color' : '#eea638'
}, {
'code' : 'BY',
'name' : 'Belarus',
'value' : 1,
'color' : '#d8854f'
}, {
'code' : 'BE',
'name' : 'Belgium',
'value' : 1,
'color' : '#d8854f'
},
{
'code' : 'BO',
'name' : 'Bolivia',
'value' : 1,
'color' : '#86a965'
},
{
'code' : 'BR',
'name' : 'Brazil',
'value' : 1,
'color' : '#86a965'
}, {
'code' : 'BN',
'name' : 'Brunei',
'value' : 1,
'color' : '#eea638'
}, {
'code' : 'BG',
'name' : 'Bulgaria',
'value' : 1,
'color' : '#d8854f'
},
{
'code' : 'KH',
'name' : 'Cambodia',
'value' : 1,
'color' : '#eea638'
},
{
'code' : 'CA',
'name' : 'Canada',
'value' : 1,
'color' : '#a7a737'
},
{
'code' : 'CL',
'name' : 'Chile',
'value' : 1,
'color' : '#86a965'
},
// {'code':'CN' , 'name':'China', 'value':1, 'color':'#eea638'},
{
'code' : 'cnBJ',
'name' : 'Beijing',
'value' : 1,
'color' : '#86a965'
}, {
'code' : 'cnSH',
'name' : 'Shanghai',
'value' : 1,
'color' : '#86a965'
}, {
'code' : 'cnHZ',
'name' : 'Hangzhou',
'value' : 1,
'color' : '#86a965'
},
// {'code':'cnXM', 'name':'Xiamen', 'value':1, 'color':'#a6c84c'},
// {'code':'cnNA', 'name':'Nan\'an', 'value':1, 'color':'#ddb926'},
//{'code':'cnHK', 'name':'Hong Kong', 'value':1, 'color':'#86a965'},
{
'code' : 'CO',
'name' : 'Colombia',
'value' : 1,
'color' : '#86a965'
},
{
'code' : 'CR',
'name' : 'Costa Rica',
'value' : 1,
'color' : '#a7a737'
},
{
'code' : 'HR',
'name' : 'Croatia',
'value' : 1,
'color' : '#d8854f'
},
{
'code' : 'CZ',
'name' : 'Czech Rep.',
'value' : 1,
'color' : '#d8854f'
}, {
'code' : 'DK',
'name' : 'Denmark',
'value' : 1,
'color' : '#d8854f'
},
{
'code' : 'DO',
'name' : 'Dominican Rep.',
'value' : 1,
'color' : '#a7a737'
}, {
'code' : 'EC',
'name' : 'Ecuador',
'value' : 1,
'color' : '#86a965'
}, {
'code' : 'EG',
'name' : 'Egypt',
'value' : 1,
'color' : '#de4c4f'
}, {
'code' : 'SV',
'name' : 'El Salvador',
'value' : 1,
'color' : '#a7a737'
},
{
'code' : 'FI',
'name' : 'Finland',
'value' : 1,
'color' : '#d8854f'
}, {
'code' : 'FR',
'name' : 'France',
'value' : 1,
'color' : '#d8854f'
},
{
'code' : 'DE',
'name' : 'Germany',
'value' : 1,
'color' : '#d8854f'
},
{
'code' : 'GR',
'name' : 'Greece',
'value' : 1,
'color' : '#d8854f'
}, {
'code' : 'GT',
'name' : 'Guatemala',
'value' : 1,
'color' : '#a7a737'
},
{
'code' : 'GY',
'name' : 'Guyana',
'value' : 1,
'color' : '#86a965'
},
{
'code' : 'HK',
'name' : 'Hong Kong, China',
'value' : 1,
'color' : '#eea638'
}, {
'code' : 'HU',
'name' : 'Hungary',
'value' : 1,
'color' : '#d8854f'
},
{
'code' : 'IN',
'name' : 'India',
'value' : 1,
'color' : '#eea638'
}, {
'code' : 'ID',
'name' : 'Indonesia',
'value' : 1,
'color' : '#eea638'
}, {
'code' : 'IR',
'name' : 'Iran',
'value' : 1,
'color' : '#eea638'
}, {
'code' : 'IQ',
'name' : 'Iraq',
'value' : 1,
'color' : '#eea638'
}, {
'code' : 'IE',
'name' : 'Ireland',
'value' : 1,
'color' : '#d8854f'
},
{
'code' : 'IT',
'name' : 'Italy',
'value' : 1,
'color' : '#d8854f'
},
{
'code' : 'JP',
'name' : 'Japan',
'value' : 1,
'color' : '#eea638'
},
{
'code' : 'KE',
'name' : 'Kenya',
'value' : 1,
'color' : '#de4c4f'
}, {
'code' : 'KP',
'name' : 'Korea, Dem. Rep.',
'value' : 1,
'color' : '#eea638'
}, {
'code' : 'KR',
'name' : 'Korea, Rep.',
'value' : 1,
'color' : '#eea638'
},
{
'code' : 'LB',
'name' : 'Lebanon',
'value' : 1,
'color' : '#eea638'
},
{
'code' : 'MY',
'name' : 'Malaysia',
'value' : 1,
'color' : '#eea638'
},
{
'code' : 'MX',
'name' : 'Mexico',
'value' : 1,
'color' : '#a7a737'
},
{
'code' : 'MA',
'name' : 'Morocco',
'value' : 1,
'color' : '#de4c4f'
}, {
'code' : 'MZ',
'name' : 'Mozambique',
'value' : 1,
'color' : '#de4c4f'
}, {
'code' : 'MM',
'name' : 'Myanmar',
'value' : 1,
'color' : '#eea638'
},
{
'code' : 'NL',
'name' : 'Netherlands',
'value' : 1,
'color' : '#d8854f'
}, {
'code' : 'NZ',
'name' : 'New Zealand',
'value' : 1,
'color' : '#8aabb0'
},
{
'code' : 'NO',
'name' : 'Norway',
'value' : 1,
'color' : '#d8854f'
}, {
'code' : 'PK',
'name' : 'Pakistan',
'value' : 1,
'color' : '#eea638'
},
{
'code' : 'PY',
'name' : 'Paraguay',
'value' : 1,
'color' : '#86a965'
}, {
'code' : 'PE',
'name' : 'Peru',
'value' : 1,
'color' : '#86a965'
}, {
'code' : 'PH',
'name' : 'Philippines',
'value' : 1,
'color' : '#eea638'
}, {
'code' : 'PL',
'name' : 'Poland',
'value' : 1,
'color' : '#d8854f'
}, {
'code' : 'PT',
'name' : 'Portugal',
'value' : 1,
'color' : '#d8854f'
},
{
'code' : 'RO',
'name' : 'Romania',
'value' : 1,
'color' : '#d8854f'
},
{
'code' : 'SA',
'name' : 'Saudi Arabia',
'value' : 1,
'color' : '#eea638'
},
{
'code' : 'SG',
'name' : 'Singapore',
'value' : 1,
'color' : '#eea638'
}, {
'code' : 'SK',
'name' : 'Slovak Republic',
'value' : 1,
'color' : '#d8854f'
}, {
'code' : 'SI',
'name' : 'Slovenia',
'value' : 1,
'color' : '#d8854f'
},
{
'code' : 'ZA',
'name' : 'South Africa',
'value' : 1,
'color' : '#de4c4f'
}, {
'code' : 'ES',
'name' : 'Spain',
'value' : 1,
'color' : '#d8854f'
}, {
'code' : 'LK',
'name' : 'Sri Lanka',
'value' : 1,
'color' : '#eea638'
},
{
'code' : 'SR',
'name' : 'Suriname',
'value' : 1,
'color' : '#86a965'
},
{
'code' : 'SE',
'name' : 'Sweden',
'value' : 1,
'color' : '#d8854f'
}, {
'code' : 'CH',
'name' : 'Switzerland',
'value' : 1,
'color' : '#d8854f'
}, {
'code' : 'SY',
'name' : 'Syria',
'value' : 1,
'color' : '#eea638'
}, {
'code' : 'TW',
'name' : 'Taiwan',
'value' : 1,
'color' : '#eea638'
},
{
'code' : 'TZ',
'name' : 'Tanzania',
'value' : 1,
'color' : '#de4c4f'
}, {
'code' : 'TH',
'name' : 'Thailand',
'value' : 1,
'color' : '#eea638'
},
{
'code' : 'TN',
'name' : 'Tunisia',
'value' : 1,
'color' : '#de4c4f'
}, {
'code' : 'TR',
'name' : 'Turkey',
'value' : 1,
'color' : '#d8854f'
},
{
'code' : 'UG',
'name' : 'Uganda',
'value' : 1,
'color' : '#de4c4f'
},
{
'code' : 'AE',
'name' : 'United Arab Emirates',
'value' : 1,
'color' : '#eea638'
}, {
'code' : 'GB',
'name' : 'United Kingdom',
'value' : 1,
'color' : '#d8854f'
}, {
'code' : 'US',
'name' : 'United States',
'value' : 1,
'color' : '#a7a737'
}, {
'code' : 'UY',
'name' : 'Uruguay',
'value' : 1,
'color' : '#86a965'
},
{
'code' : 'VE',
'name' : 'Venezuela',
'value' : 1,
'color' : '#86a965'
}, {
'code' : 'VN',
'name' : 'Vietnam',
'value' : 1,
'color' : '#eea638'
}
];
var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
var XMData = [
[{
name : 'Beijing'
}, {
name : 'Xiamen',
value : 150
}
],
[{
name : 'Shanghai'
}, {
name : 'Xiamen',
value : 90
}
],
[{
name : 'Hangzhou'
}, {
name : 'Xiamen',
value : 80
}
],
[{
name : 'Hong Kong'
}, {
name : 'Xiamen',
value : 60
}
]
];
var OSData = [{
'code' : 'OS1',
'name' : 'North America regional warehouse: Saint-Hubert, Canada',
'value' : 1,
'color' : '#fff'
}, {
'code' : 'OS2',
'name' : 'South America regional warehouse: Porto Alegre, Brasil',
'value' : 1,
'color' : '#fff'
}, {
'code' : 'OS3',
'name' : 'Europe regional warehouse: Stradella, Italy',
'value' : 1,
'color' : '#fff'
}, {
'code' : 'OS4',
'name' : 'South East Asia regional warehouse: Singapore',
'value' : 1,
'color' : '#fff'
}, {
'code' : 'OS5',
'name' : 'North Asia regional warehouse: Delhi, India',
'value' : 1,
'color' : '#fff'
}, {
'code' : 'OS6',
'name' : 'Middle East regional warehouse: Dubai, U.A.E.',
'value' : 1,
'color' : '#fff'
}, {
'code' : 'OS7',
'name' : 'Africa regional warehouse: Johannesburg, South Africa',
'value' : 1,
'color' : '#fff'
},
];
var convertData1 = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push([{
name : dataItem[0].name,
coord : fromCoord
}, {
name : dataItem[1].name,
coord : toCoord,
value : dataItem[1].value
}
]);
}
}
return res;
}
option = {
backgroundColor : '#404a59',
title : {
text : 'Global Agents',
left : 'center',
top : 'top',
textStyle : {
color : '#fff'
}
},
legend : {
orient : 'vertical',
y : 'bottom',
x : 'right',
data : ['FK Xiamen Headquarters', 'FK Nanan Factory', 'Dealers', 'Oversea Warehouse'],
textStyle : {
color : '#fff'
}
},
tooltip : {
trigger : 'item',
formatter : '{b}'
},
geo : {
name : 'Global Distributors',
type : 'map',
map : 'world',
roam : true,
label : {
emphasis : {
show : false
}
},
itemStyle : {
normal : {
areaColor : '#323c48',
borderColor : '#111'
},
emphasis : {
areaColor : '#2a333d'
}
}
},
series : [{
type : 'lines',
zlevel : 2,
effect : {
show : true,
period : 6,
trailLength : 0,
symbol : planePath,
symbolSize : 15
},
lineStyle : {
normal : {
color : '#f00',
width : 1,
opacity : 0.4,
curveness : 0.2
}
},
label : {
normal : {
show : true,
position : 'start',
formatter : function (params) {
// console.log(params);
return '' + params.data[0].name + ' to ' + params.data[1].name + ' ' + params.data[1].value + ' minutes';
}
}
},
data : convertData1(XMData)
}, {
name : 'FK Xiamen Headquarters',
type : 'scatter',
zlevel : 11,
coordinateSystem : 'geo',
symbol : 'path://M480,480V192H256V0H32v480H0v32h512v-32H480z M64,32h64v64H64V32z M64,128h64v64H64V128z M64,224h64v64H64V224zM64,320h64v64H64V320z M192,480H96v-64h96V480z M224,384h-64v-64h64V384z M224,288h-64v-64h64V288z M224,192h-64v-64h64V192z M224,96h-64V32h64V96z M288,224h64v64h-64V224z M288,320h64v64h-64V320z M416,480h-96v-64h96V480z M448,384h-64v-64h64V384z M448,288h-64v-64h64V288z',
symbolSize : 20,
data : [{
name : 'Xiamen',
value : [
latlong.cnXM.longitude,
latlong.cnXM.latitude,
1
]
}
],
itemStyle : {
normal : {
symbol : 'diamond',
color : '#0073de'
}
}
}, {
name : 'FK Nanan Factory',
type : 'scatter',
zlevel : 5,
coordinateSystem : 'geo',
symbol : 'path://M384,288v-96l-128,96v-96l-128,96V160H0v352h128h384V192L384,288z M224,416h-64v-32h64V416z M224,352h-64v-32h64V352zM352,416h-64v-32h64V416z M352,352h-64v-32h64V352z M480,416h-64v-32h64V416z M480,352h-64v-32h64V352z',
symbolSize : 20,
data : [{
name : "Nan'an",
value : [
latlong['cnNA'].longitude,
latlong['cnNA'].latitude,
1
]
}
],
itemStyle : {
normal : {
symbol : 'triangle',
color : '#ddb926'
}
}
}, {
name : 'Dealers',
type : 'scatter',
coordinateSystem : 'geo',
symbolSize : 5,
data : mapData.map(function (itemOpt) {
return {
name : itemOpt.name,
value : [
latlong[itemOpt.code].longitude,
latlong[itemOpt.code].latitude,
itemOpt.value
],
label : {
emphasis : {
position : 'right',
show : false,
formatter : '{a}'
}
}
};
}),
itemStyle : {
normal : {
color : '#f00'
}
}
}, {
name : 'Oversea Warehouse',
type : 'scatter',
coordinateSystem : 'geo',
symbol : 'path://M496,144c-65.781,24.219-115.906,41.469-160,96c-39.281,48.594-96,65.438-160,33.406V448h-32V16c0-8.844,7.156-16,16-16s16,7.156,16,16c35.531,51.656,97.281,63.094,160,64C432,81.406,496,144,496,144z M208,356.25v32.563c37.75,7.719,64,24.094,64,43.188c0,26.5-50.156,48-112,48S48,458.5,48,432c0-19.094,26.25-35.469,64-43.188V356.25C53.875,366.313,16,394.5,16,432c0,47.094,59.219,80,144,80s144-32.906,144-80C304,394.5,266.125,366.313,208,356.25z',
symbolSize : 20,
data : OSData.map(function (itemOpt) {
return {
name : itemOpt.name,
value : [
latlong[itemOpt.code].longitude,
latlong[itemOpt.code].latitude,
itemOpt.value
],
label : {
emphasis : {
position : 'right',
show : false,
formatter : '{a}'
}
}
};
}),
itemStyle : {
normal : {
color : '#fff'
}
}
}
]
};
Thanks @chaegumi ! Yeah, using scatter is probably a better option that mark points..
One improvement that @pissang suggested is using coordinate system to get centroid geo cords of regions:
var model = chart.getModel();
var geo = chart.getModel().getComponent('series').coordinateSystem; // if your series[0] is geo
var geoCord = geo.getRegion(regionName).center; // regionName as specified in geojson
The only thing is that you need to do this after your load your chart first time and then chart.setOption() again. There doesn't seem to be a way to get into the coordinateSystem component without running it first time as far as I understand..
Anyway, thanks for your suggestion!
Version 3.1.7
I'm not able to find any options for legend symbols on map. It has showLegendSymbol:true|false to show or hide but I can't find any way to change symbol size, color, symbol shape etc.
Is it supported somehow or planned in future? Would be a good alternative to markpoints as these symbols are automatically getting centroid position from the region.