World capitals map

by tiagocarvalho

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/world_low.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

var map;

// 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";

AmCharts.ready(function() {
    map = new AmCharts.AmMap();
    map.pathToImages = "http://www.ammap.com/lib/images/";
    //map.panEventsEnabled = true; // this line enables pinch-zooming and dragging on touch devices
    map.imagesSettings = {
        color:"#666700",
        rollOverColor: "#ffcc00",
        rollOverScale: 3,
        selectedScale: 3,
        selectedColor: "#ffcc00"
    };
    
    map.areasSettings = {
        unlistedAreasColor:"#c1c670"
    };
    
    map.zoomControl.buttonFillColor = "#8a9028";
    map.zoomControl.buttonRollOverColor= "#ffcc00";

    var dataProvider = {
        mapVar: AmCharts.maps.worldLow,
        images: [
            {
            svgPath: targetSVG,
            zoomLevel: 5,
            scale: 0.5,
            title: "Vienna",
            latitude: 48.2092,
            longitude: 16.3728},
        {
            svgPath: targetSVG,
            zoomLevel: 5,
            scale: 0.5,
            title: "Minsk",
            latitude: 53.9678,
            longitude: 27.5766},
        {
            svgPath: targetSVG,
            zoomLevel: 5,
            scale: 0.5,
            title: "Brussels",
            latitude: 50.8371,
            longitude: 4.3676},
        {
            svgPath: targetSVG,
            zoomLevel: 5,
            scale: 0.5,
            title: "Sarajevo",
            latitude: 43.8608,
            longitude: 18.4214},
        {
            svgPath: targetSVG,
            zoomLevel: 5,
            scale: 0.5,
            title: "Sofia",
            latitude: 42.7105,
            longitude: 23.3238},
        {
            svgPath: targetSVG,
            zoomLevel: 5,
            scale: 0.5,
           ...