#6390

by amcharts

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/dark.js"></script>
<div id="mapdiv"></div>

CSS

#mapdiv {
	width		: 100%;
	height		: 500px;
	font-size	: 11px;
}

JavaScript

var map;
            AmCharts.ready(function() {
                map                  = new AmCharts.AmMap();
                map.pathToImages     = "./images/maps/images/";
                map.panEventsEnabled = true;
                map.backgroundColor  = "#535364";
                map.backgroundAlpha  = 1;

                map.zoomControl.panControlEnabled  = true;
                map.zoomControl.zoomControlEnabled = true;
                
                var icon= "M19.671,8.11l-2.777,2.777l-3.837-0.861c0.362-0.505,0.916-1.683,0.464-2.135c-0.518-0.517-1.979,0.278-2.305,0.604l-0.913,0.913L7.614,8.804l-2.021,2.021l2.232,1.061l-0.082,0.082l1.701,1.701l0.688-0.687l3.164,1.504L9.571,18.21H6.413l-1.137,1.138l3.6,0.948l1.83,1.83l0.947,3.598l1.137-1.137V21.43l3.725-3.725l1.504,3.164l-0.687,0.687l1.702,1.701l0.081-0.081l1.062,2.231l2.02-2.02l-0.604-2.689l0.912-0.912c0.326-0.326,1.121-1.789,0.604-2.306c-0.452-0.452-1.63,0.101-2.135,0.464l-0.861-3.838l2.777-2.777c0.947-0.947,3.599-4.862,2.62-5.839C24.533,4.512,20.618,7.163,19.671,8.11z";//this is where I put the SVG info to generate the icon that will represent specific points (eg towns) on a map
                
				var dataProvider     = {
                    mapVar          : AmCharts.maps.worldLow,
                    getAreasFromMap : true,
                    zoomLevel: 3.5,//changed to ensure that the top and bottom of the frame are Scandinavia and the top of Africa
					zoomLongitude: 10,
					zoomLatitude: 55,
					images:[//this will be various points (eg towns) on a map
//{latitude:40.3951, longitude:-73.5619, svgPath:icon, color:"#CC0000", scale:0.5, label:"New York", labelShiftY:2, zoomLevel:5, title:"New York", description:"New York is the most populous city in the United States and the center of the New York Metropolitan Area, one of the most populous metropolitan areas in the world."},
//{latitude:44.1142, longitude:15.2278, svgPath:icon, color:"#CC0000", scale:0.4, zoomLevel:10, title:"Zadar",...