You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
2.3 KiB
66 lines
2.3 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
<html> |
|
|
|
<head> |
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
|
<title>amMap example</title> |
|
|
|
<link rel="stylesheet" href="../ammap/ammap.css" type="text/css"> |
|
<script src="../ammap/ammap.js" type="text/javascript"></script> |
|
<!-- map file should be included after ammap.js --> |
|
<script src="../ammap/maps/js/worldLow.js" type="text/javascript"></script> |
|
|
|
<script src="../ammap/themes/black.js" type="text/javascript"></script> |
|
<script> |
|
|
|
AmCharts.theme = AmCharts.themes.black; |
|
// add all your code to this method, as this will ensure that page is loaded |
|
AmCharts.ready(function() { |
|
// create AmMap object |
|
var map = new AmCharts.AmMap(); |
|
|
|
// set path to images |
|
|
|
|
|
/* create data provider object |
|
mapVar tells the map name of the variable of the map data. You have to |
|
view source of the map file you included in order to find the name of the |
|
variable - it's the very first line after commented lines. |
|
|
|
getAreasFromMap indicates that amMap should read all the areas available |
|
in the map data and treat them as they are included in your data provider. |
|
in case you don't set it to true, all the areas except listed in data |
|
provider will be treated as unlisted. |
|
*/ |
|
var dataProvider = { |
|
mapVar: AmCharts.maps.worldLow, |
|
getAreasFromMap:true |
|
}; |
|
// pass data provider to the map object |
|
map.dataProvider = dataProvider; |
|
|
|
/* create areas settings |
|
* autoZoom set to true means that the map will zoom-in when clicked on the area |
|
* selectedColor indicates color of the clicked area. |
|
*/ |
|
map.areasSettings = { |
|
autoZoom: true, |
|
rollOverBrightness:10, |
|
selectedBrightness:20 |
|
}; |
|
|
|
// let's say we want a small map to be displayed, so let's create and add it to the map |
|
map.smallMap = new AmCharts.SmallMap(); |
|
|
|
// write the map to container div |
|
map.write("mapdiv"); |
|
}); |
|
|
|
</script> |
|
</head> |
|
|
|
<body> |
|
<div id="mapdiv" style="width: 100%; background-color:#222222; height: 500px;"></div> |
|
</body> |
|
|
|
</html> |