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);

function updateImageVisibility(ev) {
  var chart = ev.target.baseSprite;
  var series = chart.map.getKey("markers");
  series.mapImages.each(function(image) {
    if (image.dataItem.dataContext.minZoomLevel) {
      if (image.dataItem.dataContext.minZoomLevel >= chart.zoomLevel) {
        image.hide();
      }
      else {
        image.show();
      }
    }
  });
}


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