Map will not display on screen, svg tag is inserted

StackOverflow https://stackoverflow.com/questions/23566349

  •  19-07-2023
  •  | 
  •  

Question

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

Était-ce utile?

La solution

To get the map to display I had to change the value of the mapVar property from "worldLow" to AmCharts.maps.worldLow.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top