Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/maps.js"></script>
<script src="https://www.amcharts.com/lib/4/geodata/worldLow.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

<div id="chartdiv"></div>
              
            
!

CSS

              
                body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
  width: 100%;
  height: 400px;
}

              
            
!

JS

              
                
/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 *
 * For more information visit:
 * https://www.amcharts.com/
 *
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

/**
 * Define SVG path for target icon
 */
var targetSVG = "M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z";

// Create map instance
var chart = am4core.create("chartdiv", am4maps.MapChart);
chart.geodata = am4geodata_worldLow;
chart.projection = new am4maps.projections.Miller();

// Create map polygon series
var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
polygonSeries.exclude = ["AQ"];
polygonSeries.useGeodata = true;

// create capital markers
var imageSeries = chart.series.push(new am4maps.MapImageSeries());
imageSeries.id = "markers";

// define template
var imageSeriesTemplate = imageSeries.mapImages.template;

var circle = imageSeriesTemplate.createChild(am4core.Sprite);
circle.scale = 0.4;
circle.fill = new am4core.InterfaceColorSet().getFor("alternativeBackground");
circle.path = targetSVG;

imageSeriesTemplate.propertyFields.latitude = "latitude";
imageSeriesTemplate.propertyFields.longitude = "longitude";
imageSeriesTemplate.nonScaling = true;
imageSeriesTemplate.horizontalCenter = "middle";
imageSeriesTemplate.verticalCenter = "middle";
imageSeriesTemplate.width = 8;
imageSeriesTemplate.height = 8;
imageSeriesTemplate.tooltipText = "{title}";
imageSeriesTemplate.fill = am4core.color("#000");

// set zoom events
imageSeries.events.on("datavalidated", updateImageVisibility);
chart.events.on("zoomlevelchanged", updateImageVisibility);
chart.events.on("dragged", updateImageVisibility);


function updateImageVisibility(ev) {
	var chart = ev.target.baseSprite;
	var series = chart.map.getKey("markers");
	var count = 0;
	var imagesWithinBounds = [];
	series.mapImages.each(function(image) {
		var point = chart.geoPointToSVG({ longitude: image.longitude, latitude: image.latitude })
		image.disabled = true;
		if (chart.fitsToBounds(point)) {
			count++;
			imagesWithinBounds.push(image);
		}
	});
	// 20 is max number of images to be seen
	if (count < 20) {
		for (var i = 0; i < imagesWithinBounds.length; i++) {
			imagesWithinBounds[i].disabled = false;
		}
	}
}


imageSeries.data = [{
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Vienna",
	"latitude": 48.2092,
	"longitude": 16.3728
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Minsk",
	"latitude": 53.9678,
	"longitude": 27.5766
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Brussels",
	"latitude": 50.8371,
	"longitude": 4.3676
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Sarajevo",
	"latitude": 43.8608,
	"longitude": 18.4214
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Sofia",
	"latitude": 42.7105,
	"longitude": 23.3238
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Zagreb",
	"latitude": 45.8150,
	"longitude": 15.9785
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Pristina",
	"latitude": 42.666667,
	"longitude": 21.166667
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Prague",
	"latitude": 50.0878,
	"longitude": 14.4205
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Copenhagen",
	"latitude": 55.6763,
	"longitude": 12.5681
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Tallinn",
	"latitude": 59.4389,
	"longitude": 24.7545
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Helsinki",
	"latitude": 60.1699,
	"longitude": 24.9384
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Paris",
	"latitude": 48.8567,
	"longitude": 2.3510
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Berlin",
	"latitude": 52.5235,
	"longitude": 13.4115
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Athens",
	"latitude": 37.9792,
	"longitude": 23.7166
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Budapest",
	"latitude": 47.4984,
	"longitude": 19.0408
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Reykjavik",
	"latitude": 64.1353,
	"longitude": -21.8952
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Dublin",
	"latitude": 53.3441,
	"longitude": -6.2675
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Rome",
	"latitude": 41.8955,
	"longitude": 12.4823
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Riga",
	"latitude": 56.9465,
	"longitude": 24.1049
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Vaduz",
	"latitude": 47.1411,
	"longitude": 9.5215
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Vilnius",
	"latitude": 54.6896,
	"longitude": 25.2799
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Luxembourg",
	"latitude": 49.6100,
	"longitude": 6.1296
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Skopje",
	"latitude": 42.0024,
	"longitude": 21.4361
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Valletta",
	"latitude": 35.9042,
	"longitude": 14.5189
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Chisinau",
	"latitude": 47.0167,
	"longitude": 28.8497
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Monaco",
	"latitude": 43.7325,
	"longitude": 7.4189
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Podgorica",
	"latitude": 42.4602,
	"longitude": 19.2595
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Amsterdam",
	"latitude": 52.3738,
	"longitude": 4.8910
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Oslo",
	"latitude": 59.9138,
	"longitude": 10.7387
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Warsaw",
	"latitude": 52.2297,
	"longitude": 21.0122
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Lisbon",
	"latitude": 38.7072,
	"longitude": -9.1355
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Bucharest",
	"latitude": 44.4479,
	"longitude": 26.0979
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Moscow",
	"latitude": 55.7558,
	"longitude": 37.6176
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "San Marino",
	"latitude": 43.9424,
	"longitude": 12.4578
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Belgrade",
	"latitude": 44.8048,
	"longitude": 20.4781
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Bratislava",
	"latitude": 48.2116,
	"longitude": 17.1547
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Ljubljana",
	"latitude": 46.0514,
	"longitude": 14.5060
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Madrid",
	"latitude": 40.4167,
	"longitude": -3.7033
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Stockholm",
	"latitude": 59.3328,
	"longitude": 18.0645
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Bern",
	"latitude": 46.9480,
	"longitude": 7.4481
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Kiev",
	"latitude": 50.4422,
	"longitude": 30.5367
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "London",
	"latitude": 51.5002,
	"longitude": -0.1262
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Gibraltar",
	"latitude": 36.1377,
	"longitude": -5.3453
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Saint Peter Port",
	"latitude": 49.4660,
	"longitude": -2.5522
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Douglas",
	"latitude": 54.1670,
	"longitude": -4.4821
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Saint Helier",
	"latitude": 49.1919,
	"longitude": -2.1071
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Longyearbyen",
	"latitude": 78.2186,
	"longitude": 15.6488
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Kabul",
	"latitude": 34.5155,
	"longitude": 69.1952
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Yerevan",
	"latitude": 40.1596,
	"longitude": 44.5090
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Baku",
	"latitude": 40.3834,
	"longitude": 49.8932
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Manama",
	"latitude": 26.1921,
	"longitude": 50.5354
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Dhaka",
	"latitude": 23.7106,
	"longitude": 90.3978
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Thimphu",
	"latitude": 27.4405,
	"longitude": 89.6730
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Bandar Seri Begawan",
	"latitude": 4.9431,
	"longitude": 114.9425
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Phnom Penh",
	"latitude": 11.5434,
	"longitude": 104.8984
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Peking",
	"latitude": 39.9056,
	"longitude": 116.3958
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Nicosia",
	"latitude": 35.1676,
	"longitude": 33.3736
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "T'bilisi",
	"latitude": 41.7010,
	"longitude": 44.7930
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "New Delhi",
	"latitude": 28.6353,
	"longitude": 77.2250
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Jakarta",
	"latitude": -6.1862,
	"longitude": 106.8063
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Teheran",
	"latitude": 35.7061,
	"longitude": 51.4358
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Baghdad",
	"latitude": 33.3157,
	"longitude": 44.3922
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Jerusalem",
	"latitude": 31.7857,
	"longitude": 35.2007
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Tokyo",
	"latitude": 35.6785,
	"longitude": 139.6823
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Amman",
	"latitude": 31.9394,
	"longitude": 35.9349
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Astana",
	"latitude": 51.1796,
	"longitude": 71.4475
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Kuwait",
	"latitude": 29.3721,
	"longitude": 47.9824
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Bishkek",
	"latitude": 42.8679,
	"longitude": 74.5984
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Vientiane",
	"latitude": 17.9689,
	"longitude": 102.6137
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Beyrouth / Beirut",
	"latitude": 33.8872,
	"longitude": 35.5134
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Kuala Lumpur",
	"latitude": 3.1502,
	"longitude": 101.7077
}, {
	"minZoomLevel": 2,
	"svgPath": targetSVG,
	"title": "Ulan Bator",
	"latitude": 47.9138,
	"longitude": 106.9220
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Pyinmana",
	"latitude": 19.7378,
	"longitude": 96.2083
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Kathmandu",
	"latitude": 27.7058,
	"longitude": 85.3157
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Muscat",
	"latitude": 23.6086,
	"longitude": 58.5922
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Islamabad",
	"latitude": 33.6751,
	"longitude": 73.0946
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Manila",
	"latitude": 14.5790,
	"longitude": 120.9726
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Doha",
	"latitude": 25.2948,
	"longitude": 51.5082
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Riyadh",
	"latitude": 24.6748,
	"longitude": 46.6977
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Singapore",
	"latitude": 1.2894,
	"longitude": 103.8500
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Seoul",
	"latitude": 37.5139,
	"longitude": 126.9828
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Colombo",
	"latitude": 6.9155,
	"longitude": 79.8572
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Damascus",
	"latitude": 33.5158,
	"longitude": 36.2939
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Taipei",
	"latitude": 25.0338,
	"longitude": 121.5645
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Dushanbe",
	"latitude": 38.5737,
	"longitude": 68.7738
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Bangkok",
	"latitude": 13.7573,
	"longitude": 100.5020
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Dili",
	"latitude": -8.5662,
	"longitude": 125.5880
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Ankara",
	"latitude": 39.9439,
	"longitude": 32.8560
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Ashgabat",
	"latitude": 37.9509,
	"longitude": 58.3794
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Abu Dhabi",
	"latitude": 24.4764,
	"longitude": 54.3705
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Tashkent",
	"latitude": 41.3193,
	"longitude": 69.2481
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Hanoi",
	"latitude": 21.0341,
	"longitude": 105.8372
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Sanaa",
	"latitude": 15.3556,
	"longitude": 44.2081
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Buenos Aires",
	"latitude": -34.6118,
	"longitude": -58.4173
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Bridgetown",
	"latitude": 13.0935,
	"longitude": -59.6105
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Belmopan",
	"latitude": 17.2534,
	"longitude": -88.7713
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Sucre",
	"latitude": -19.0421,
	"longitude": -65.2559
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Brasilia",
	"latitude": -15.7801,
	"longitude": -47.9292
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Ottawa",
	"latitude": 45.4235,
	"longitude": -75.6979
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Santiago",
	"latitude": -33.4691,
	"longitude": -70.6420
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Bogota",
	"latitude": 4.6473,
	"longitude": -74.0962
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "San Jose",
	"latitude": 9.9402,
	"longitude": -84.1002
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Havana",
	"latitude": 23.1333,
	"longitude": -82.3667
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Roseau",
	"latitude": 15.2976,
	"longitude": -61.3900
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Santo Domingo",
	"latitude": 18.4790,
	"longitude": -69.8908
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Quito",
	"latitude": -0.2295,
	"longitude": -78.5243
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "San Salvador",
	"latitude": 13.7034,
	"longitude": -89.2073
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Guatemala",
	"latitude": 14.6248,
	"longitude": -90.5328
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Ciudad de Mexico",
	"latitude": 19.4271,
	"longitude": -99.1276
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Managua",
	"latitude": 12.1475,
	"longitude": -86.2734
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Panama",
	"latitude": 8.9943,
	"longitude": -79.5188
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Asuncion",
	"latitude": -25.3005,
	"longitude": -57.6362
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Lima",
	"latitude": -12.0931,
	"longitude": -77.0465
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Castries",
	"latitude": 13.9972,
	"longitude": -60.0018
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Paramaribo",
	"latitude": 5.8232,
	"longitude": -55.1679
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Washington",
	"latitude": 38.8921,
	"longitude": -77.0241
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Montevideo",
	"latitude": -34.8941,
	"longitude": -56.0675
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Caracas",
	"latitude": 10.4961,
	"longitude": -66.8983
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Oranjestad",
	"latitude": 12.5246,
	"longitude": -70.0265
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Cayenne",
	"latitude": 4.9346,
	"longitude": -52.3303
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Plymouth",
	"latitude": 16.6802,
	"longitude": -62.2014
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "San Juan",
	"latitude": 18.4500,
	"longitude": -66.0667
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Algiers",
	"latitude": 36.7755,
	"longitude": 3.0597
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Luanda",
	"latitude": -8.8159,
	"longitude": 13.2306
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Porto-Novo",
	"latitude": 6.4779,
	"longitude": 2.6323
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Gaborone",
	"latitude": -24.6570,
	"longitude": 25.9089
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Ouagadougou",
	"latitude": 12.3569,
	"longitude": -1.5352
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Bujumbura",
	"latitude": -3.3818,
	"longitude": 29.3622
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Yaounde",
	"latitude": 3.8612,
	"longitude": 11.5217
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Bangui",
	"latitude": 4.3621,
	"longitude": 18.5873
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Brazzaville",
	"latitude": -4.2767,
	"longitude": 15.2662
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Kinshasa",
	"latitude": -4.3369,
	"longitude": 15.3271
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Yamoussoukro",
	"latitude": 6.8067,
	"longitude": -5.2728
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Djibouti",
	"latitude": 11.5806,
	"longitude": 43.1425
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Cairo",
	"latitude": 30.0571,
	"longitude": 31.2272
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Asmara",
	"latitude": 15.3315,
	"longitude": 38.9183
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Addis Abeba",
	"latitude": 9.0084,
	"longitude": 38.7575
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Libreville",
	"latitude": 0.3858,
	"longitude": 9.4496
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Banjul",
	"latitude": 13.4399,
	"longitude": -16.6775
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Accra",
	"latitude": 5.5401,
	"longitude": -0.2074
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Conakry",
	"latitude": 9.5370,
	"longitude": -13.6785
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Bissau",
	"latitude": 11.8598,
	"longitude": -15.5875
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Nairobi",
	"latitude": -1.2762,
	"longitude": 36.7965
}, {
	"minZoomLevel": 4,
	"svgPath": targetSVG,
	"title": "Maseru",
	"latitude": -29.2976,
	"longitude": 27.4854
}, {
	"svgPath": targetSVG,
	"title": "Monrovia",
	"latitude": 6.3106,
	"longitude": -10.8047
}, {
	"svgPath": targetSVG,
	"title": "Tripoli",
	"latitude": 32.8830,
	"longitude": 13.1897
}, {
	"svgPath": targetSVG,
	"title": "Antananarivo",
	"latitude": -18.9201,
	"longitude": 47.5237
}, {
	"svgPath": targetSVG,
	"title": "Lilongwe",
	"latitude": -13.9899,
	"longitude": 33.7703
}, {
	"svgPath": targetSVG,
	"title": "Bamako",
	"latitude": 12.6530,
	"longitude": -7.9864
}, {
	"svgPath": targetSVG,
	"title": "Nouakchott",
	"latitude": 18.0669,
	"longitude": -15.9900
}, {
	"svgPath": targetSVG,
	"title": "Port Louis",
	"latitude": -20.1654,
	"longitude": 57.4896
}, {
	"svgPath": targetSVG,
	"title": "Rabat",
	"latitude": 33.9905,
	"longitude": -6.8704
}, {
	"svgPath": targetSVG,
	"title": "Maputo",
	"latitude": -25.9686,
	"longitude": 32.5804
}, {
	"svgPath": targetSVG,
	"title": "Windhoek",
	"latitude": -22.5749,
	"longitude": 17.0805
}, {
	"svgPath": targetSVG,
	"title": "Niamey",
	"latitude": 13.5164,
	"longitude": 2.1157
}, {
	"svgPath": targetSVG,
	"title": "Abuja",
	"latitude": 9.0580,
	"longitude": 7.4891
}, {
	"svgPath": targetSVG,
	"title": "Kigali",
	"latitude": -1.9441,
	"longitude": 30.0619
}, {
	"svgPath": targetSVG,
	"title": "Dakar",
	"latitude": 14.6953,
	"longitude": -17.4439
}, {
	"svgPath": targetSVG,
	"title": "Freetown",
	"latitude": 8.4697,
	"longitude": -13.2659
}, {
	"svgPath": targetSVG,
	"title": "Mogadishu",
	"latitude": 2.0411,
	"longitude": 45.3426
}, {
	"svgPath": targetSVG,
	"title": "Pretoria",
	"latitude": -25.7463,
	"longitude": 28.1876
}, {
	"svgPath": targetSVG,
	"title": "Mbabane",
	"latitude": -26.3186,
	"longitude": 31.1410
}, {
	"svgPath": targetSVG,
	"title": "Dodoma",
	"latitude": -6.1670,
	"longitude": 35.7497
}, {
	"svgPath": targetSVG,
	"title": "Lome",
	"latitude": 6.1228,
	"longitude": 1.2255
}, {
	"svgPath": targetSVG,
	"title": "Tunis",
	"latitude": 36.8117,
	"longitude": 10.1761
}];
              
            
!
999px

Console