World capitals map

HTML

<link rel="stylesheet" href="http://www.ammap.com/lib/ammap.css" type="text/css">
<script src="http://www.ammap.com/lib/ammap.js" type="text/javascript"></script>
<script src="http://www.ammap.com/lib/maps/js/germanyLow.js" type="text/javascript"></script>
<div style="width:100%;">
    <div id="listdiv" style="width:200px; overflow:auto; height:370px; float:right;"></div>
    <div id="mapdiv" style="height: 370px;"></div>            
</div>

JavaScript

// request #3275 
    var dataPoints = [{
            latitude: 52.523407,
            longitude: 13.4114,
            type: 'bubble',
            color: '#CC0000',

            fixedSize: false,
            alpha: 0.5,
            height: 50,
            width: 50,
        centered: false
    }];

    AmCharts.ready(function() {
        // create AmMap object
        var map = new AmCharts.AmMap();
        // set path to images
        map.pathToImages = "https://upload.wikimedia.org/wikipedia/en/thumb/e/e0/WPVG_icon_2016.svg/1024px-WPVG_icon_2016.svg.png";
        
        var dataProvider = {
            mapVar: AmCharts.maps.germanyLow,
            getAreasFromMap:true,
            images: dataPoints
        }; 

        // pass data provider to the map object
        map.dataProvider = dataProvider;
    
        map.areasSettings = {
            autoZoom: true,
            selectedColor: "#CC0000"
        };
    
        // write the map to container div
        map.write("mapdiv");               
        
    });