To get the map to display I had to change the value of the mapVar property from "worldLow" to AmCharts.maps.worldLow.
Map will not display on screen, svg tag is inserted
-
19-07-2023 - |
Pergunta
I have taken the tutorial from the ammaps site, and placed it in a html page. When map.write is called and SVG tag is inserted where it is supposed to be, however I never see anything in the browser. I have checked and the JS files are loading and in the correct order. I am not getting any errors in the console either. Below you will find the code I am using:
<html>
<head>
<style>
#chartdiv {
width : 100%;
height : 500px;
}
</style>
</head>
<body>
<div id = "mapdiv" style="width: 600px; height: 400px;">
</div>
<script src="../libs/jquery-1.10.2.min.js"></script>
<script src="../libs/ammaps/ammap.js"></script>
<script src="../libs/ammaps/maps/js/worldLow.js"></script>
<script>
AmCharts.ready(function() {
console.log("AmCharts.ready");
var map = new AmCharts.AmMap();
map.pathToImages = "ammap/images/";
var dataProvider = {
//map: "worldLow",
mapVar: "worldLow",
getAreasFromMap:true
};
map.dataProvider = dataProvider;
map.areasSettings = {
autoZoom: true,
selectedColor: "#CC0000"
};
map.smallMap = new AmCharts.SmallMap();
map.write("mapdiv");
});
</script>
</body>
</html>
UPDATE: I discovered by changing the map property of the dataProvider object from map to mapVar results in me seing the map navigation controls, still no map though
Solução
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow