#7598

by amcharts

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script type="text/javascript" src="http://extra.amcharts.com/support/7598/russiaWithCrimeaLow.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>
<br />
<input type="button" value="Get current zoom" onclick="getCurrentZoom();" />
<br />
<br />
<div id="zoom"></div>

CSS

body {
    font-family: Verdana;
    font-size: 12px;
    padding: 10px;
}
#chartdiv {
    width : 579px;
    height : 377px;
}
#zoom {
    width: 579px;
    height: 100px;
}

JavaScript

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

var map = AmCharts.makeChart("chartdiv", {
    "type": "map",
        "theme": "none",
        "pathToImages": "http://www.amcharts.com/lib/3/images/",

        "dataProvider": {
            "map": "russiaWithCrimeaLow",
            "zoomLatitude": 68.057665,
            "zoomLongitude": 94.893951,
            "zoomLevel": 0.91172,
            "getAreasFromMap": true,
            "images": [{
                svgPath: targetSVG,
                zoomLevel: 5,
                scale: 0.5,
                title: "Moscow",
                latitude: 55.7558,
                longitude: 37.6176
            }, {
                svgPath: targetSVG,
                zoomLevel: 5,
                scale: 0.5,
                title: "St. Petersburg",
                latitude: 59.934280,
                longitude: 30.335099
            }]
    },
    "areasSettings": {
        "autoZoom": true,
        "selectedColor": "#CC0000"
    },
    "zoomControl": {
        "minZoomLevel": 0.5
    }
});

function getCurrentZoom() {
    var dev = map.getDevInfo();
    if (dev.zoomLatitude) {
        var info = '';
        info += '"zoomLatitude": ' + dev.zoomLatitude + '<br />';
        info += '"zoomLongitude": ' + dev.zoomLongitude + '<br />';
        info += '"zoomLevel": ' + dev.zoomLevel + '<br />';
        document.getElementById('zoom').innerHTML = info;
    }
}