marker-plnkr.json

{"index.css":"","map-data/marker-location":"/**\r\n * Marker location\r\n */\r\n\r\n//tslint:disable\r\nexport let marker: Object[] =\r\n[\r\n    { Name: \"USA\", latitude: 38.8833, longitude: -77.0167 },\r\n    { Name: \"Brazil\", latitude: -15.7833, longitude: -47.8667 },\r\n    { Name: \"India\", latitude: 21.0000, longitude: 78.0000 },\r\n    { Name: \"China\", latitude: 35.0000, longitude: 103.0000 },\r\n    { Name: \"Indonesia\", latitude: -6.1750, longitude: 106.8283 }\r\n];\r\nexport let sydneyPlaces: any = [\r\n    {\r\n        'latitude': 33.8568,\r\n        'longitude': 151.2153\r\n    },\r\n    {\r\n        'latitude': 33.8523,\r\n        'longitude': 151.2108\r\n    },\r\n    {\r\n        'latitude': 33.8642,\r\n        'longitude': 151.2166\r\n    },\r\n    {\r\n        'latitude': 33.8731,\r\n        'longitude': 151.2113\r\n    },\r\n    {\r\n        'latitude': 33.7658,\r\n        'longitude': 150.8842\r\n    }\r\n];\r\nexport let topPopulation: any = [\r\n  {\r\n      'name': 'Tokyo',\r\n      'latitude': 35.6894875,\r\n      'longitude': 139.6917064,\r\n      'population': 33200000,\r\n      'Country': 'Japan'\r\n  },\r\n  {\r\n      'name': 'New York',\r\n      'latitude': 40.7127753,\r\n      'longitude': -74.0059728,\r\n      'population': 17800000,\r\n      'Country': 'United States'        \r\n  },\r\n  {\r\n      'name': 'Sao Paulo',\r\n      'latitude': -23.5505199,\r\n      'longitude': -46.6333094,\r\n      'population': 17700000,\r\n      'Country': 'Brazil'\r\n  },\r\n  {\r\n      'name': 'Seoul/Incheon',\r\n      'latitude': 37.566535,\r\n      'longitude': 126.9779692,\r\n      'population': 17500000,\r\n      'Country': 'South Korea',        \r\n  },\r\n  {\r\n      'name': 'Mexico City',\r\n      'latitude': 19.2464696,\r\n      'longitude': -99.1013498,\r\n      'population': 17400000,\r\n      'Country': 'Mexico'\r\n  },\r\n  {\r\n      'name': 'Osaka/Kobe/Kyoto',\r\n      'latitude': 35.0212466,\r\n      'longitude': 135.7555968,\r\n      'population': 16425000,\r\n      'Country': 'Japan'\r\n  },\r\n  {\r\n      'name': 'Manila',\r\n      'latitude': 14.5995124,\r\n      'longitude': 120.9842195,\r\n      'population': 14750000,\r\n      'Country': 'Philippines'\r\n  },\r\n  {\r\n      'name': 'Mumbai',\r\n      'latitude': 19.0759837,\r\n      'longitude': 72.8776559,\r\n      'population': 14350000,\r\n      'Country': 'India'\r\n  },\r\n  {\r\n      'name': 'Delhi',\r\n      'latitude': 28.6139391,\r\n      'longitude': 77.2090212,\r\n      'population': 14300000,\r\n      'Country': 'India'\r\n  },\r\n  {\r\n      'name': 'Jakarta',\r\n      'latitude': -6.17511,\r\n      'longitude': 106.8650395,\r\n      'population': 14250000,\r\n      'Country': 'Indonesia'\r\n  },\r\n  {\r\n      'name': 'Lagos',\r\n      'latitude': 6.5243793,\r\n      'longitude': 3.3792057,\r\n      'population': 13400000,\r\n      'Country': 'Nigeria'\r\n  },\r\n  {\r\n      'name': 'Kolkata',\r\n      'latitude': 22.572646,\r\n      'longitude': 88.363895,\r\n      'population': 12700000,\r\n      'Country': 'India'\r\n  },\r\n  {\r\n      'name': 'Cairo',\r\n      'latitude': 30.0444196,\r\n      'longitude': 31.2357116,\r\n      'population': 12200000,\r\n      'Country': 'Egypt'\r\n  },\r\n  {\r\n      'name': 'Los Angeles',\r\n      'latitude': 34.0522265,\r\n      'longitude': -118.2436596,\r\n      'population': 11789000,\r\n      'Country': 'United States'\r\n  },\r\n  {\r\n      'name': 'Buenos Aires',\r\n      'latitude': -34.6036844,\r\n      'longitude': -58.3815591,\r\n      'population': 11200000,\r\n      'Country': 'Argentina'\r\n  },\r\n  {\r\n      'name': 'Rio de Janeiro',\r\n      'latitude': -22.9068467,\r\n      'longitude': -43.1728965,\r\n      'population': 10800000,\r\n      'Country': 'Brazil'\r\n  },\r\n  {\r\n      'name': 'Moscow',\r\n      'latitude': 55.755826,\r\n      'longitude': 37.6173,\r\n      'population': 10500000,\r\n      'Country': 'Russia'\r\n  },\r\n  {\r\n      'name': 'Shanghai',\r\n      'latitude': 31.2303904,\r\n      'longitude': 121.4737021,\r\n      'population': 10000000,\r\n      'Country': 'China'\r\n  },\r\n  {\r\n      'name': 'Karachi',\r\n      'latitude': 25.0700428,\r\n      'longitude': 67.2847875,\r\n      'population': 9800000,\r\n      'Country': 'Pakistan'\r\n  },\r\n  {\r\n      'name': 'Paris',\r\n      'latitude': 48.856614,\r\n      'longitude': 2.3522219,\r\n      'population': 9645000,\r\n      'Country': 'France'\r\n  },\r\n  {\r\n      'name': 'Istanbul',\r\n      'latitude': 41.0082376,\r\n      'longitude': 28.9783589,\r\n      'population': 9000000,\r\n      'Country': 'Istanbul'\r\n  },\r\n  {\r\n      'name': 'Nagoya',\r\n      'latitude': 35.1814464,\r\n      'longitude': 136.906398,\r\n      'population': 9000000,\r\n      'Country': 'Japan'\r\n  },\r\n  {\r\n      'name': 'Beijing',\r\n      'latitude': 39.9041999,\r\n      'longitude': 116.4073963,\r\n      'population': 8614000,\r\n      'Country': 'China'\r\n  },\r\n  {\r\n      'name': 'Chicago',\r\n      'latitude': 41.8781136,\r\n      'longitude': -87.6297982,\r\n      'population': 8308000,\r\n      'Country': 'United States'\r\n  },\r\n  {\r\n      'name': 'London',\r\n      'latitude': 51.5073509,\r\n      'longitude': -0.1277583,\r\n      'population': 8278000,\r\n      'Country': 'United Kingdom'\r\n  },\r\n]\r\nexport let markerLocation: any = [ {\r\n    'title': 'Vienna',\r\n    'latitude': 48.2092,\r\n    'longitude': 16.3728\r\n  }, {\r\n    'title': 'Minsk',\r\n    'latitude': 53.9678,\r\n    'longitude': 27.5766\r\n  }, {\r\n    'title': 'Brussels',\r\n    'latitude': 50.8371,\r\n    'longitude': 4.3676\r\n  }, {\r\n    'title': 'Sarajevo',\r\n    'latitude': 43.8608,\r\n    'longitude': 18.4214\r\n  }, {\r\n    'title': 'Sofia',\r\n    'latitude': 42.7105,\r\n    'longitude': 23.3238\r\n  }, {\r\n    'title': 'Zagreb',\r\n    'latitude': 45.8150,\r\n    'longitude': 15.9785\r\n  }, {\r\n    'title': 'Pristina',\r\n    'latitude': 42.666667,\r\n    'longitude': 21.166667\r\n  }, {\r\n    'title': 'Prague',\r\n    'latitude': 50.0878,\r\n    'longitude': 14.4205\r\n  }, {\r\n    'title': 'Copenhagen',\r\n    'latitude': 55.6763,\r\n    'longitude': 12.5681\r\n  }, {\r\n    'title': 'Tallinn',\r\n    'latitude': 59.4389,\r\n    'longitude': 24.7545\r\n  }, {\r\n    'title': 'Helsinki',\r\n    'latitude': 60.1699,\r\n    'longitude': 24.9384\r\n  }, {\r\n    'title': 'Paris',\r\n    'latitude': 48.8567,\r\n    'longitude': 2.3510\r\n  }, {\r\n    'title': 'Berlin',\r\n    'latitude': 52.5235,\r\n    'longitude': 13.4115\r\n  }, {\r\n    'title': 'Athens',\r\n    'latitude': 37.9792,\r\n    'longitude': 23.7166\r\n  }, {\r\n    'title': 'Budapest',\r\n    'latitude': 47.4984,\r\n    'longitude': 19.0408\r\n  }, {\r\n    'title': 'Reykjavik',\r\n    'latitude': 64.1353,\r\n    'longitude': -21.8952\r\n  }, {\r\n    'title': 'Dublin',\r\n    'latitude': 53.3441,\r\n    'longitude': -6.2675\r\n  }, {\r\n    'title': 'Rome',\r\n    'latitude': 41.8955,\r\n    'longitude': 12.4823\r\n  }, {\r\n    'title': 'Riga',\r\n    'latitude': 56.9465,\r\n    'longitude': 24.1049\r\n  }, {\r\n    'title': 'Vaduz',\r\n    'latitude': 47.1411,\r\n    'longitude': 9.5215\r\n  }, {\r\n    'title': 'Vilnius',\r\n    'latitude': 54.6896,\r\n    'longitude': 25.2799\r\n  }, {\r\n    'title': 'Luxembourg',\r\n    'latitude': 49.6100,\r\n    'longitude': 6.1296\r\n  }, {\r\n    'title': 'Skopje',\r\n    'latitude': 42.0024,\r\n    'longitude': 21.4361\r\n  }, {\r\n    'title': 'Valletta',\r\n    'latitude': 35.9042,\r\n    'longitude': 14.5189\r\n  }, {\r\n    'title': 'Chisinau',\r\n    'latitude': 47.0167,\r\n    'longitude': 28.8497\r\n  }, {\r\n    'title': 'Monaco',\r\n    'latitude': 43.7325,\r\n    'longitude': 7.4189\r\n  }, {\r\n    'title': 'Podgorica',\r\n    'latitude': 42.4602,\r\n    'longitude': 19.2595\r\n  }, {\r\n    'title': 'Amsterdam',\r\n    'latitude': 52.3738,\r\n    'longitude': 4.8910\r\n  }, {\r\n    'title': 'Oslo',\r\n    'latitude': 59.9138,\r\n    'longitude': 10.7387\r\n  }, {\r\n    'title': 'Warsaw',\r\n    'latitude': 52.2297,\r\n    'longitude': 21.0122\r\n  }, {\r\n    'title': 'Lisbon',\r\n    'latitude': 38.7072,\r\n    'longitude': -9.1355\r\n  }, {\r\n    'title': 'Bucharest',\r\n    'latitude': 44.4479,\r\n    'longitude': 26.0979\r\n  }, {\r\n    'title': 'Moscow',\r\n    'latitude': 55.7558,\r\n    'longitude': 37.6176\r\n  }, {\r\n    'title': 'San Marino',\r\n    'latitude': 43.9424,\r\n    'longitude': 12.4578\r\n  }, {\r\n    'title': 'Belgrade',\r\n    'latitude': 44.8048,\r\n    'longitude': 20.4781\r\n  }, {\r\n    'title': 'Bratislava',\r\n    'latitude': 48.2116,\r\n    'longitude': 17.1547\r\n  }, {\r\n    'title': 'Ljubljana',\r\n    'latitude': 46.0514,\r\n    'longitude': 14.5060\r\n  }, {\r\n    'title': 'Madrid',\r\n    'latitude': 40.4167,\r\n    'longitude': -3.7033\r\n  }, {\r\n    'title': 'Stockholm',\r\n    'latitude': 59.3328,\r\n    'longitude': 18.0645\r\n  }, {\r\n    'title': 'Bern',\r\n    'latitude': 46.9480,\r\n    'longitude': 7.4481\r\n  }, {\r\n    'title': 'Kiev',\r\n    'latitude': 50.4422,\r\n    'longitude': 30.5367\r\n  }, {\r\n    'title': 'London',\r\n    'latitude': 51.5002,\r\n    'longitude': -0.1262\r\n  }, {\r\n    'title': 'Gibraltar',\r\n    'latitude': 36.1377,\r\n    'longitude': -5.3453\r\n  }, {\r\n    'title': 'Saint Peter Port',\r\n    'latitude': 49.4660,\r\n    'longitude': -2.5522\r\n  }, {\r\n    'title': 'Douglas',\r\n    'latitude': 54.1670,\r\n    'longitude': -4.4821\r\n  }, {\r\n    'title': 'Saint Helier',\r\n    'latitude': 49.1919,\r\n    'longitude': -2.1071\r\n  }, {\r\n    'title': 'Kabul',\r\n    'latitude': 34.5155,\r\n    'longitude': 69.1952\r\n  }, {\r\n    'title': 'Yerevan',\r\n    'latitude': 40.1596,\r\n    'longitude': 44.5090\r\n  }, {\r\n    'title': 'Baku',\r\n    'latitude': 40.3834,\r\n    'longitude': 49.8932\r\n  }, {\r\n    'title': 'Manama',\r\n    'latitude': 26.1921,\r\n    'longitude': 50.5354\r\n  }, {\r\n    'title': 'Dhaka',\r\n    'latitude': 23.7106,\r\n    'longitude': 90.3978\r\n  }, {\r\n    'title': 'Thimphu',\r\n    'latitude': 27.4405,\r\n    'longitude': 89.6730\r\n  }, {\r\n    'title': 'Bandar Seri Begawan',\r\n    'latitude': 4.9431,\r\n    'longitude': 114.9425\r\n  }, {\r\n    'title': 'Phnom Penh',\r\n    'latitude': 11.5434,\r\n    'longitude': 104.8984\r\n  }, {\r\n    'title': 'Peking',\r\n    'latitude': 39.9056,\r\n    'longitude': 116.3958\r\n  }, {\r\n    'title': 'Nicosia',\r\n    'latitude': 35.1676,\r\n    'longitude': 33.3736\r\n  }, {\r\n    'title': \"T'bilisi'\",\r\n    'latitude': 41.7010,\r\n    'longitude': 44.7930\r\n  }, {\r\n    'title': 'New Delhi',\r\n    'latitude': 28.6353,\r\n    'longitude': 77.2250\r\n  }, {\r\n    'title': 'Jakarta',\r\n    'latitude': -6.1862,\r\n    'longitude': 106.8063\r\n  }, {\r\n    'title': 'Teheran',\r\n    'latitude': 35.7061,\r\n    'longitude': 51.4358\r\n  }, {\r\n    'title': 'Baghdad',\r\n    'latitude': 33.3157,\r\n    'longitude': 44.3922\r\n  }, {\r\n    'title': 'Jerusalem',\r\n    'latitude': 31.76,\r\n    'longitude': 35.17\r\n  }, {\r\n    'title': 'Tokyo',\r\n    'latitude': 35.6785,\r\n    'longitude': 139.6823\r\n  }, {\r\n    'title': 'Amman',\r\n    'latitude': 31.9394,\r\n    'longitude': 35.9349\r\n  }, {\r\n    'title': 'Astana',\r\n    'latitude': 51.1796,\r\n    'longitude': 71.4475\r\n  }, {\r\n    'title': 'Kuwait',\r\n    'latitude': 29.3721,\r\n    'longitude': 47.9824\r\n  }, {\r\n    'title': 'Bishkek',\r\n    'latitude': 42.8679,\r\n    'longitude': 74.5984\r\n  }, {\r\n    'title': 'Vientiane',\r\n    'latitude': 17.9689,\r\n    'longitude': 102.6137\r\n  }, {\r\n    'title': 'Beyrouth / Beirut',\r\n    'latitude': 33.8872,\r\n    'longitude': 35.5134\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Kuala Lumpur',\r\n    'latitude': 3.1502,\r\n    'longitude': 101.7077\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Ulan Bator',\r\n    'latitude': 47.9138,\r\n    'longitude': 106.9220\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Pyinmana',\r\n    'latitude': 19.7378,\r\n    'longitude': 96.2083\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Kathmandu',\r\n    'latitude': 27.7058,\r\n    'longitude': 85.3157\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Muscat',\r\n    'latitude': 23.6086,\r\n    'longitude': 58.5922\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Islamabad',\r\n    'latitude': 33.6751,\r\n    'longitude': 73.0946\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Manila',\r\n    'latitude': 14.5790,\r\n    'longitude': 120.9726\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Doha',\r\n    'latitude': 25.2948,\r\n    'longitude': 51.5082\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Riyadh',\r\n    'latitude': 24.6748,\r\n    'longitude': 46.6977\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Singapore',\r\n    'latitude': 1.2894,\r\n    'longitude': 103.8500\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Seoul',\r\n    'latitude': 37.5139,\r\n    'longitude': 126.9828\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Colombo',\r\n    'latitude': 6.9155,\r\n    'longitude': 79.8572\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Damascus',\r\n    'latitude': 33.5158,\r\n    'longitude': 36.2939\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Taipei',\r\n    'latitude': 25.0338,\r\n    'longitude': 121.5645\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Dushanbe',\r\n    'latitude': 38.5737,\r\n    'longitude': 68.7738\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Bangkok',\r\n    'latitude': 13.7573,\r\n    'longitude': 100.5020\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Dili',\r\n    'latitude': -8.5662,\r\n    'longitude': 125.5880\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Ankara',\r\n    'latitude': 39.9439,\r\n    'longitude': 32.8560\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Ashgabat',\r\n    'latitude': 37.9509,\r\n    'longitude': 58.3794\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Abu Dhabi',\r\n    'latitude': 24.4764,\r\n    'longitude': 54.3705\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Tashkent',\r\n    'latitude': 41.3193,\r\n    'longitude': 69.2481\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Hanoi',\r\n    'latitude': 21.0341,\r\n    'longitude': 105.8372\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Sanaa',\r\n    'latitude': 15.3556,\r\n    'longitude': 44.2081\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Buenos Aires',\r\n    'latitude': -34.6118,\r\n    'longitude': -58.4173\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Bridgetown',\r\n    'latitude': 13.0935,\r\n    'longitude': -59.6105\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Belmopan',\r\n    'latitude': 17.2534,\r\n    'longitude': -88.7713\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Sucre',\r\n    'latitude': -19.0421,\r\n    'longitude': -65.2559\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Brasilia',\r\n    'latitude': -15.7801,\r\n    'longitude': -47.9292\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Ottawa',\r\n    'latitude': 45.4235,\r\n    'longitude': -75.6979\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Santiago',\r\n    'latitude': -33.4691,\r\n    'longitude': -70.6420\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Bogota',\r\n    'latitude': 4.6473,\r\n    'longitude': -74.0962\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'San Jose',\r\n    'latitude': 9.9402,\r\n    'longitude': -84.1002\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Havana',\r\n    'latitude': 23.1333,\r\n    'longitude': -82.3667\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Roseau',\r\n    'latitude': 15.2976,\r\n    'longitude': -61.3900\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Santo Domingo',\r\n    'latitude': 18.4790,\r\n    'longitude': -69.8908\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Quito',\r\n    'latitude': -0.2295,\r\n    'longitude': -78.5243\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'San Salvador',\r\n    'latitude': 13.7034,\r\n    'longitude': -89.2073\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Guatemala',\r\n    'latitude': 14.6248,\r\n    'longitude': -90.5328\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Ciudad de Mexico',\r\n    'latitude': 19.4271,\r\n    'longitude': -99.1276\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Managua',\r\n    'latitude': 12.1475,\r\n    'longitude': -86.2734\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Panama',\r\n    'latitude': 8.9943,\r\n    'longitude': -79.5188\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Asuncion',\r\n    'latitude': -25.3005,\r\n    'longitude': -57.6362\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Lima',\r\n    'latitude': -12.0931,\r\n    'longitude': -77.0465\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Castries',\r\n    'latitude': 13.9972,\r\n    'longitude': -60.0018\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Paramaribo',\r\n    'latitude': 5.8232,\r\n    'longitude': -55.1679\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Washington D.C.',\r\n    'latitude': 38.8921,\r\n    'longitude': -77.0241\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Montevideo',\r\n    'latitude': -34.8941,\r\n    'longitude': -56.0675\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Caracas',\r\n    'latitude': 10.4961,\r\n    'longitude': -66.8983\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Oranjestad',\r\n    'latitude': 12.5246,\r\n    'longitude': -70.0265\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Cayenne',\r\n    'latitude': 4.9346,\r\n    'longitude': -52.3303\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Plymouth',\r\n    'latitude': 16.6802,\r\n    'longitude': -62.2014\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'San Juan',\r\n    'latitude': 18.4500,\r\n    'longitude': -66.0667\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Algiers',\r\n    'latitude': 36.7755,\r\n    'longitude': 3.0597\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Luanda',\r\n    'latitude': -8.8159,\r\n    'longitude': 13.2306\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Porto-Novo',\r\n    'latitude': 6.4779,\r\n    'longitude': 2.6323\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Gaborone',\r\n    'latitude': -24.6570,\r\n    'longitude': 25.9089\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Ouagadougou',\r\n    'latitude': 12.3569,\r\n    'longitude': -1.5352\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Bujumbura',\r\n    'latitude': -3.3818,\r\n    'longitude': 29.3622\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Yaounde',\r\n    'latitude': 3.8612,\r\n    'longitude': 11.5217\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Bangui',\r\n    'latitude': 4.3621,\r\n    'longitude': 18.5873\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Brazzaville',\r\n    'latitude': -4.2767,\r\n    'longitude': 15.2662\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Kinshasa',\r\n    'latitude': -4.3369,\r\n    'longitude': 15.3271\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Yamoussoukro',\r\n    'latitude': 6.8067,\r\n    'longitude': -5.2728\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Djibouti',\r\n    'latitude': 11.5806,\r\n    'longitude': 43.1425\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Cairo',\r\n    'latitude': 30.0571,\r\n    'longitude': 31.2272\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Asmara',\r\n    'latitude': 15.3315,\r\n    'longitude': 38.9183\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Addis Abeba',\r\n    'latitude': 9.0084,\r\n    'longitude': 38.7575\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Libreville',\r\n    'latitude': 0.3858,\r\n    'longitude': 9.4496\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Banjul',\r\n    'latitude': 13.4399,\r\n    'longitude': -16.6775\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Accra',\r\n    'latitude': 5.5401,\r\n    'longitude': -0.2074\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Conakry',\r\n    'latitude': 9.5370,\r\n    'longitude': -13.6785\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Bissau',\r\n    'latitude': 11.8598,\r\n    'longitude': -15.5875\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Nairobi',\r\n    'latitude': -1.2762,\r\n    'longitude': 36.7965\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Maseru',\r\n    'latitude': -29.2976,\r\n    'longitude': 27.4854\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Monrovia',\r\n    'latitude': 6.3106,\r\n    'longitude': -10.8047\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Tripoli',\r\n    'latitude': 32.8830,\r\n    'longitude': 13.1897\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Antananarivo',\r\n    'latitude': -18.9201,\r\n    'longitude': 47.5237\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Lilongwe',\r\n    'latitude': -13.9899,\r\n    'longitude': 33.7703\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Bamako',\r\n    'latitude': 12.6530,\r\n    'longitude': -7.9864\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Nouakchott',\r\n    'latitude': 18.0669,\r\n    'longitude': -15.9900\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Port Louis',\r\n    'latitude': -20.1654,\r\n    'longitude': 57.4896\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Rabat',\r\n    'latitude': 33.9905,\r\n    'longitude': -6.8704\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Maputo',\r\n    'latitude': -25.9686,\r\n    'longitude': 32.5804\r\n  }, {\r\n\r\n    'zoomLevel': 5,\r\n    'scale': 0.5,\r\n    'title': 'Windhoek',\r\n    'latitude': -22.5749,\r\n    'longitude': 17.0805\r\n  }, {\r\n    'title': 'Niamey',\r\n    'latitude': 13.5164,\r\n    'longitude': 2.1157\r\n  }, {\r\n    'title': 'Abuja',\r\n    'latitude': 9.0580,\r\n    'longitude': 7.4891\r\n  }, {\r\n    'title': 'Kigali',\r\n    'latitude': -1.9441,\r\n    'longitude': 30.0619\r\n  }, {\r\n    'title': 'Dakar',\r\n    'latitude': 14.6953,\r\n    'longitude': -17.4439\r\n  }, {\r\n    'title': 'Freetown',\r\n    'latitude': 8.4697,\r\n    'longitude': -13.2659\r\n  }, {\r\n    'title': 'Mogadishu',\r\n    'latitude': 2.0411,\r\n    'longitude': 45.3426\r\n  }, {\r\n    'title': 'Pretoria',\r\n    'latitude': -25.7463,\r\n    'longitude': 28.1876\r\n  }, {\r\n    'title': 'Mbabane',\r\n    'latitude': -26.3186,\r\n    'longitude': 31.1410\r\n  }, {\r\n    'title': 'Dodoma',\r\n    'latitude': -6.1670,\r\n    'longitude': 35.7497\r\n  }, {\r\n    'title': 'Lome',\r\n    'latitude': 6.1228,\r\n    'longitude': 1.2255\r\n  }, {\r\n    'title': 'Tunis',\r\n    'latitude': 36.8117,\r\n    'longitude': 10.1761\r\n  } ]","systemjs.config.js":"System.config({\r\n    transpiler: \"ts\",\r\n    typescriptOptions: {\r\n            target: \"es5\",\r\n            module: \"commonjs\",\r\n            moduleResolution: \"node\",\r\n            emitDecoratorMetadata: true,\r\n            experimentalDecorators: true,\r\n            \"jsx\": \"react\"\r\n    },\r\n     meta: {\r\n      'typescript': {\r\n        \"exports\": \"ts\"\r\n      },\r\n      '*.json': { loader: 'plugin-json' }\r\n    },\r\n    paths: {\r\n        \"syncfusion:\": \"http://cdn.syncfusion.com/ej2/\"},\r\n    map: {\r\n        app: 'app',\r\n        ts: \"https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js\",\r\n        typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\r\n        \"plugin-json\":\"https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js\",\r\n        \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\r\n        \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\r\n        \"@syncfusion/ej2-splitbuttons\": \"syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js\",\r\n        \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\r\n        \"@syncfusion/ej2-maps\": \"syncfusion:ej2-maps/dist/ej2-maps.umd.min.js\",\r\n        \"@syncfusion/ej2-treemap\": \"syncfusion:ej2-treemap/dist/ej2-treemap.umd.min.js\",\r\n        \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\r\n        \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\r\n        \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\r\n        \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\r\n        \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\r\n        \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",\r\n        \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\r\n        \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",\r\n        \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",\r\n        \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\r\n        \"@syncfusion/ej2-schedule\": \"syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js\",\r\n        \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\",        \r\n        \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\r\n        \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",        \r\n        \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\",\r\n        \"@syncfusion/ej2-documenteditor\": \"syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js\",\r\n        \"@syncfusion/ej2-notifications\": \"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js\",\r\n        \"@syncfusion/ej2-richtexteditor\": \"syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js\",\r\n\t\t\"@syncfusion/ej2-svg-base\": \"syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js\",\r\n        \"@syncfusion/ej2-pivotview\": \"syncfusion:ej2-pivotview/dist/ej2-pivotview.umd.min.js\",\r\n        \"@syncfusion/ej2-heatmap\": \"syncfusion:ej2-heatmap/dist/ej2-heatmap.umd.min.js\",\r\n        \"@syncfusion/ej2-react-base\": \"syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js\",\r\n        \"@syncfusion/ej2-react-buttons\": \"syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js\",\r\n        \"@syncfusion/ej2-react-splitbuttons\": \"syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js\",\r\n        \"@syncfusion/ej2-react-charts\": \"syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js\",\r\n        \"@syncfusion/ej2-react-maps\": \"syncfusion:ej2-react-maps/dist/ej2-react-maps.umd.min.js\",\r\n        \"@syncfusion/ej2-react-treemap\": \"syncfusion:ej2-react-treemap/dist/ej2-react-treemap.umd.min.js\",\r\n        \"@syncfusion/ej2-react-circulargauge\": \"syncfusion:ej2-react-circulargauge/dist/ej2-react-circulargauge.umd.min.js\",\r\n        \"@syncfusion/ej2-react-lineargauge\": \"syncfusion:ej2-react-lineargauge/dist/ej2-react-lineargauge.umd.min.js\",\r\n        \"@syncfusion/ej2-react-calendars\": \"syncfusion:ej2-react-calendars/dist/ej2-react-calendars.umd.min.js\",\r\n        \"@syncfusion/ej2-react-dropdowns\": \"syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js\",\r\n        \"@syncfusion/ej2-react-grids\": \"syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js\",\r\n        \"@syncfusion/ej2-react-inputs\": \"syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js\",\r\n        \"@syncfusion/ej2-react-lists\": \"syncfusion:ej2-react-lists/dist/ej2-react-lists.umd.min.js\",\r\n        \"@syncfusion/ej2-react-navigations\": \"syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js\",\r\n        \"@syncfusion/ej2-react-popups\": \"syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js\",\r\n        \"@syncfusion/ej2-react-schedule\": \"syncfusion:ej2-react-schedule/dist/ej2-react-schedule.umd.min.js\",\r\n        \"@syncfusion/ej2-react-documenteditor\": \"syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js\",\r\n        \"@syncfusion/ej2-react-notifications\": \"syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.min.js\",\r\n        \"@syncfusion/ej2-react-richtexteditor\": \"syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js\",\r\n        \"@syncfusion/ej2-react-pivotview\": \"syncfusion:ej2-react-pivotview/dist/ej2-react-pivotview.umd.min.js\",\r\n        \"@syncfusion/ej2-react-heatmap\": \"syncfusion:ej2-react-heatmap/dist/ej2-react-heatmap.umd.min.js\",\r\n        \"react-dom\":\"https://unpkg.com/react-dom@15.5.4/dist/react-dom.min.js\",\r\n        \"react\":\"https://unpkg.com/react@15.5.4/dist/react.min.js\",\r\n    },\r\n    packages: {\r\n        'app': { main: 'index', defaultExtension: 'tsx' },\r\n    }\r\n});\r\n\r\nSystem.import('app');","index.html":"<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <title>Maps · MarkerMaps · Essential JS 2 for React · Syncfusion</title>\r\n    <meta charset=\"utf-8\" />\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\" />\r\n    <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\">\r\n    <!-- {{:meta}} -->\r\n    <meta name=\"author\" content=\"Syncfusion\" />\r\n    <script type=\"text/javascript\">\r\n        var themeName = location.hash || 'material';\r\n        themeName = themeName.replace('#','');\r\n        window.ripple = (themeName === \"material\")\r\n        document.write('<link href=\"http://cdn.syncfusion.com/ej2/' + themeName + '.css\" rel=\"stylesheet\">');\r\n    </script>\r\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\" />\r\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\r\n    <script src=\"systemjs.config.js\"></script>\r\n    <link href=\"index.css\" rel=\"stylesheet\" />\r\n     <style>\r\n        #loader {\r\n            color: #008cff;\r\n            height: 40px;\r\n            left: 45%;\r\n            position: absolute;\r\n            top: 45%;\r\n            width: 30%;\r\n        }\r\n        body {\r\n            touch-action:none;\r\n        }\r\n        .body {\r\n            font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n        }\r\n\r\n        .e-view {\r\n            bottom: 0;\r\n            left: 0;\r\n            overflow: hidden;\r\n            position: absolute;\r\n            right: 0;\r\n            top: 0;\r\n        }\r\n\r\n        .sb-left {\r\n            float: left;\r\n        }\r\n\r\n        .sb-right {\r\n            float: right;\r\n        }\r\n\r\n        .sb-block {\r\n            display: block;\r\n        }\r\n\r\n        .sb-table {\r\n            display: table;\r\n        }\r\n\r\n        .sb-table-cell {\r\n            display: table-cell;\r\n            vertical-align: middle;\r\n        }\r\n\r\n        /*sample header*/\r\n\r\n\r\n        .sb-header {\r\n            height: 48px;\r\n            background: #FFFFFF;\r\n            box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12);\r\n            z-index: 1001;\r\n            opacity: 100;\r\n        }\r\n\r\n\r\n        .sb-header-left, .sb-header-right {\r\n            height: 100%;\r\n        }\r\n\r\n        #sb-header-text {\r\n            padding-left: 22px;\r\n            opacity: 0.87;\r\n            font-family: Roboto;\r\n            font-weight: 500;\r\n            font-size: 15px;\r\n            color: #000000;\r\n            text-align: left;\r\n        }\r\n\r\n        .header-logo {\r\n            float: left;\r\n            padding-left: 8px;\r\n            padding-right: 22px;\r\n        }\r\n\r\n        .footer-logo {\r\n            background: url(https://ej2.syncfusion.com/home/images/footer-logo.svg) no-repeat right;\r\n            height: 40px;\r\n            width: 140px;\r\n        }\r\n\r\n        .sb-header-splitter {\r\n            float: left;\r\n            border-left: 1px solid rgb(196, 196, 196);\r\n            height: 32px;\r\n            margin-top: 8px;\r\n            padding-left: 22 px;\r\n        }\r\n\r\n        .sb-header-settings {\r\n            display: none;\r\n        }\r\n\r\n        .product-style a{\r\n        padding-right: 15px;\r\n        font-family:Roboto;\r\n        font-weight: 500;\r\n        font-size: 13px;\r\n        color: #363636;\r\n        text-align: center;\r\n        text-decoration: none;\r\n        }\r\n        .product-style a:hover {\r\n            color:#3C78EF;\r\n        }\r\n\r\n        .sb-download-btn a {\r\n            text-decoration: none;\r\n        }\r\n\r\n        .sb-download-text {\r\n            color: #FFFFFF;\r\n        }\r\n\r\n        .sb-download-wrapper {\r\n            padding-right: 27px;\r\n        }\r\n\r\n        .sb-download-btn:hover .sb-download-btn:focus .sb-download-btn.active {\r\n            border-radius: 2px;\r\n            font-family: \"Roboto\";\r\n            font-weight: bold;\r\n            color: #FFFFFF;\r\n        }\r\n\r\n        .sb-download-btn:hover {\r\n            background: #006CE6;\r\n        }\r\n\r\n        .sb-download-btn:focus {\r\n            background: #0051CB;\r\n        }\r\n\r\n        .sb-download-btn.active {\r\n            background: #0036B1;\r\n        }\r\n\r\n        .sb-download-btn {\r\n            background-color: #3C78EF;\r\n            opacity: 100;\r\n            border-radius: 2px;\r\n            font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n            font-weight: 500;\r\n            line-height: 18px;\r\n            height: 32px;\r\n            border-color: transparent;\r\n        }\r\n\r\n        .sb-bread-crumb {\r\n            padding-left: 20px;\r\n            padding-top: 24px;\r\n            padding-bottom: 10px;\r\n        }\r\n\r\n        .category-allcontrols a, .category-text a, .crumb-sample {\r\n            display: table;\r\n            opacity: 0.87;\r\n            font-family: Roboto;\r\n            font-weight: 500;\r\n            font-size: 15px;\r\n            color: #3C78EF;\r\n            text-align: left;\r\n            text-decoration: none;\r\n        }\r\n\r\n        .sb-bread-crumb .sb-bread-crumb-text>div {\r\n            font-size: 15px;\r\n            font-weight: 500;\r\n            padding-right: 8px;\r\n            cursor: default;\r\n            display: table-cell;\r\n        }\r\n\r\n        .sb-bread-crumb-text>div.seperator {\r\n            font-weight: 700;\r\n            font-size: 15px;\r\n            vertical-align: bottom;\r\n        } \r\n\r\n        .content {\r\n        overflow: auto;\r\n        height: calc(100% - 50px);\r\n        top: 50px;\r\n        }\r\n\r\n\r\n        .sample-content {\r\n            top: 48px;\r\n            background: #FFFFFF;\r\n        }\r\n\r\n        .div {\r\n        display: block;\r\n        }\r\n\r\n        .control-section {\r\n            padding-left: 4px;\r\n        }\r\n\r\n        .crumb-sample {\r\n            color: #000000;\r\n            line-height: 18px;\r\n        }\r\n\r\n        #description {\r\n            padding-bottom: 16px;\r\n            padding-left: 20px;\r\n            opacity: 0.75;\r\n            font-family: Roboto;\r\n            font-size: 13px;\r\n            color: #000000;\r\n            text-align: left;\r\n            padding-top: 14px;\r\n        }\r\n\r\n        #action-description {\r\n            padding-left: 20px;\r\n            padding-bottom: 15px;\r\n            opacity: 0.75;\r\n            font-family: Roboto;\r\n            font-size: 13px;\r\n            color: #000000;\r\n            text-align: left;\r\n        }\r\n\r\n        #description-section {\r\n            padding-left: 20px;\r\n            padding-top: 30px;\r\n            opacity: 0.87;\r\n            font-family:Roboto;\r\n            font-weight: 700;\r\n            font-size: 15px;\r\n            color: #000000;\r\n            text-align: left;\r\n        }\r\n\r\n\r\n\r\n    </style>\r\n</head>\r\n\r\n<body class='e-view ej2-new' aria-busy=\"true\">\r\n        <div class=\"sample-browser\">\r\n            <div id='sample-header' class=\"sb-header\" role=\"banner\">\r\n                <div class='sb-header-left sb-left sb-table'>\r\n                    <div class='sb-header-item sb-table-cell'>\r\n                        <div class=\"header-logo\">\r\n                            <a href=\"https://ej2.syncfusion.com/home/react.html\" target=\"\" rel=\"noopener noreferrer\">\r\n                                <div class=\"footer-logo\"> </div>\r\n                            </a>\r\n                        </div>\r\n    \r\n                    </div>\r\n                    <div class=\"sb-header-splitter sb-download-splitter\"></div>\r\n                    <div class='sb-header-item sb-table-cell'>\r\n                        <div id='sb-header-text' class='e-sb-header-text'>\r\n    \r\n                            <span class='sb-header-text-left'>Essential JS 2 for React</span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class='sb-header-right sb-right sb-table'>\r\n                    <div class='sb-header-item sb-table-cell'>\r\n                        <div class='product-style'>\r\n                            <div><a href=\"https://www.syncfusion.com/products/react/maps\">PRODUCT DETAILS</a></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class='sb-header-item sb-table-cell'>\r\n                        <div class=\"sb-header-item sb-table-cell sb-download-wrapper\">\r\n                            <a href=\"https://www.syncfusion.com/downloads/essential-js2\" target=\"_blank\">\r\n                                <button id=\"download-now\" class=\"sb-download-btn\">\r\n                                    <span class=\"sb-download-text\">DOWNLOAD</span>\r\n                                </button>\r\n                            </a>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n    \r\n            </div>\r\n            <div class ='content e-view'>\r\n            <div class='sample-content'>\r\n                <div id=\"sample-bread-crumb\" class=\"sb-bread-crumb\">\r\n                    <div class=\"sb-bread-crumb-text\">\r\n                        <div class=\"category-allcontrols\"><a href=\"https://ej2.syncfusion.com/react/demos\"><span>All Controls</span></a></div>\r\n                        <div class=\"category-seperator sb-icons\"> / </div>\r\n                        <div class=\"category-text bread-ctext\"><a href=\"https://ej2.syncfusion.com/react/demos/#/material/maps/default.html\"><span>Maps</span></a></div>\r\n                        <div class=\"category-seperator sb-icons\"> / </div>\r\n                        <div class=\"crumb-sample\">MarkerMaps</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"control-content\">\r\n                <div id=\"action-description\">\r\n                        <p>\r\n                            \n                <p>\n                This sample visualizes the top 25 populated cities in the world by displaying the markers in their locations.\n               </p>\n                \r\n                        </p>\r\n                    </div>\r\n                    <div class=\"container-fluid\">\r\n                        <div class=\"control-section\">\r\n                            <div id='sample'>\r\n                                <div id='loader'>Loading....</div>\r\n                            </div>\r\n                    \r\n                        </div>\r\n                    </div>\r\n                    <div id=\"description-section\">Description</div>    \r\n                    <div id=\"description\">\r\n                        <p>\r\n                           \n                <p>\n                   In this example, you can see how to render the data labels for each shape in a map. Data labels are used to display the values of the shapes. You can use the <code>autoFill</code> property in the <code>shapeSettings</code> to apply the default palette colors to the shapes.\n            \n                </p>\n                <p>\n                Tooltip is enabled in this example. To see the tooltip in action, hover the mouse over a shape or tap a shape in touch enabled devices.\n                </p>\n            <br>\n                <p style=\"{{fontweight:\" 500}}=\"\">Injecting Module</p>\n                <p>\n                 Maps component features are segregated into individual feature-wise modules. To use a data label, inject the <code>DataLabel</code> module using the <code>Maps.Inject(DataLabel)</code> method.\n                </p>\n            \r\n                         </p>     \r\n                    </div>    \r\n                </div>             \r\n            </div>\r\n                \r\n            </div>\r\n        </div>\r\n          \r\n</body>\r\n</html>\r\n","app/index.tsx":"\r\n/**\r\n * Projection sample\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport * as ReactDOM from \"react-dom\";\r\nimport { MapAjax } from '@syncfusion/ej2-maps';\r\nimport {\r\n    MapsComponent, Inject, ILoadedEventArgs, MapsTheme, LayersDirective, LayerDirective,\r\n    ProjectionType, MapsTooltip, Marker, MarkersDirective, MarkerDirective\r\n} from '@syncfusion/ej2-react-maps';\r\nimport { Browser } from '@syncfusion/ej2-base';\r\nimport { SampleBase } from './sample-base';\r\nimport { topPopulation } from '../map-data/marker-location';\r\nconst SAMPLE_CSS = `\r\n    .control-fluid {\r\n\t\tpadding: 0px !important;\r\n    }`;\r\nexport class MarkerMaps extends SampleBase<{}, {}> {\r\n    private mapInstance: MapsComponent;\r\n    render() {\r\n        return (\r\n            <div className='control-pane'>\r\n                <style>\r\n                    {SAMPLE_CSS}\r\n                </style>\r\n                <div className='control-section row'>\r\n                    <div className='col-md-12'>\r\n                        <MapsComponent id=\"maps\" loaded={this.onMapsLoad.bind(this)} load={this.load} ref={m => this.mapInstance = m}\r\n                            useGroupingSeparator = {true}\r\n                            format = {\"n\"}\r\n                            zoomSettings={{\r\n                                enable: false\r\n                            }}\r\n                            titleSettings={{\r\n                                text: 'Top 25 populated cities in the world',\r\n                                textStyle: {\r\n                                    size: '16px'\r\n                                }\r\n                            }}\r\n                        >\r\n                            <Inject services={[Marker, MapsTooltip]} />\r\n                            <LayersDirective>\r\n                                <LayerDirective shapeData={new MapAjax(location.origin + location.pathname + 'src/maps/map-data/world-map.json')}\r\n                                    shapePropertyPath='name'\r\n                                    shapeDataPath='Country'\r\n                                    dataSource={ topPopulation }\r\n                                    shapeSettings={{\r\n                                        fill: '#C3E6ED'\r\n                                    }}\r\n                                ><MarkersDirective>\r\n                                        <MarkerDirective visible={true}\r\n                                            animationDuration={0}\r\n                                                shape='Circle'\r\n                                                fill= 'white'\r\n                                                width= {4}\r\n                                                border= {{\r\n                                                   color: '#285255',\r\n                                                   width: 2\r\n                                                }}\r\n                                            dataSource={ topPopulation }\r\n                                            tooltipSettings={{\r\n                                                template: '<div id=\"markertooltiptemplate\" style=\"width: 170px;opacity: 90%;background: rgba(53, 63, 76, 0.90);box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.40);padding:10px;border: 1px #abb9c6;border-radius: 4px;\">'+\r\n                                                '<div style=\"font-size:13px;color:#ffffff;font-weight: 500;\"><center>${name}</center></div>'+\r\n                                                '<hr style=\"margin-top: 2px;margin-bottom:5px;border:0.5px solid #DDDDDD\">'+\r\n                                                '<div><span style=\"font-size:13px;color:#cccccc\">Country : </span><span style=\"font-size:13px;color:#ffffff;font-weight: 500;\">${Country}</span></div>'+\r\n                                                '<div><span style=\"font-size:13px;color:#cccccc\">Population : </span><span style=\"font-size:13px;color:#ffffff;font-weight: 500;\">${population}</span></div></div>',\r\n                                                visible: true,\r\n                                                valuePath: 'population'\r\n                                            }}\r\n                                        >\r\n                                        </MarkerDirective>\r\n                                    </MarkersDirective>\r\n                                </LayerDirective>\r\n                            </LayersDirective>\r\n                        </MapsComponent>\r\n                    </div>\r\n                    <div style={{float: 'right', marginright: '10px'}}>Source: \r\n                        <a href=\"http://www.citymayors.com/statistics/largest-cities-population-125.html\" target=\"_blank\">www.citymayors.com</a>\r\n                    </div>\r\n                    <div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        )\r\n    }\r\n    public onMapsLoad(args: ILoadedEventArgs): void {\r\n        let maps: Element = document.getElementById('maps');\r\n        maps.setAttribute('title', '');\r\n    };\r\n    public load(args: ILoadedEventArgs): void {\r\n        let selectedTheme: string = location.hash.split('/')[1];\r\n        selectedTheme = selectedTheme ? selectedTheme : 'Material';\r\n        args.maps.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)) as MapsTheme;\r\n    };\r\n}\nReactDOM.render(<MarkerMaps />, document.getElementById('sample'));","app/sample-base.tsx":"import * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nimport { RouteComponentProps } from 'react-router-dom';\r\nimport { enableRipple } from '@syncfusion/ej2-base';\r\n\r\nenableRipple((window as any).ripple);\r\nexport class SampleBase<P, S> extends React.PureComponent<RouteComponentProps<any> & P, S>{\r\n    public rendereComplete(): void {\r\n        /**custom render complete function */\r\n    }\r\n    componentDidMount(): void {\r\n        setTimeout(() => {\r\n            this.rendereComplete();\r\n        }\r\n        );\r\n    }\r\n}"}