I want to add a circular marker to an ammap map. The marker should be centered on Berlin, which has latitude 52.523407 and longitude 13.4114 (you can verify these coordinates here).
Here's the source code of a page that attempts this. A jsFiddle example is also avaialble.
<html>
<head>
<script src="ammap.js" type="text/javascript"></script>
<script src="germanyLow.js" type="text/javascript"></script>
<script type="text/javascript">
var dataPoints = [{
latitude: 52.523407,
longitude: 13.4114,
type: 'bubble',
color: '#CC0000',
fixedSize: false,
alpha: 0.5,
height: 50,
width: 50
}];
AmCharts.ready(function() {
// create AmMap object
var map = new AmCharts.AmMap();
// set path to images
map.pathToImages = "images/map";
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");
});
</script>
</head>
<body>
<div id="mapdiv" style="width: 600px; height: 400px;"></div>
</body>
</html>
If you open this page you see the following. I've added the black arrow myself to indicate where the circle should be located. As you can see the centre of the circle is about 150km north-west of it should be. If I add other markers they are also positioned about 150 km NW of where I would expect them to be. Am I doing something wrong, or is this a bug?
You should add "centered: false" attribute to your MapImage:
Here's your updated fiddle:
http://jsfiddle.net/amcharts/6c5U3/591/