Zing Charts - Place Items on Map

Question

I am trying to put Location markers on an USA map similar to the one in this page

http://www.zingchart.com/blog/2012/07/17/interactive-html5-maps-api/ (Place items on map section.)

I am not able to find the JSON attribute for specifying this (The link on it is taking to the site's home page only). Please help me on how to do this or point me to any documentation on it.

[--EDIT--] I found a function to get the XY coordinates on the map using the Lat/Lon value and vice-versa (zingchart.maps.getXY(mapid, lonlat, itemid)).. But I am still stuck with placing a marker on that XY point.

[--EDIT--] Below answers work as expected. I am trying to put markers on US map. I would like to know how to place markers on Alaska/ Hawaii states with lat/lon info since they are placed below california as a separate polygon though they are geographically above the US.

Balaprasanna, you found maps info in a blog post from 2012. In addition to the answer below, a more up to date maps article can be found in the ZingChart docs at zingchart.com/docs/chart-types/maps — Merrily

Stalfos Stalfos · Accepted Answer · 2014-09-03T21:16:25

I'm on the ZingChart team, and I can definitely help you out with this!

It's critical that you wait until the map has loaded before finding the XY coordinates. Use the ZingChart 'load' API event listener to wait until the chart has loaded:

zingchart.load=function() {
    drawPoints();
};

Inside our drawPoints function, we'll find the longitude and latitude values. If the values are north and east, the numbers will be positive, south and west will be negative. For example, Sao Paulo is located at 46.6333° W, 23.5500° S, so we would use [-46.63, -23.55]. In this map demo, we've placed a marker at Bangalore, which is located at 77.5667° E, 12.9667° N, so we'll use [77.57, 12.97].

var lonlat = [77.57, 12.97];
var bangalore = zingchart.maps.getXY('map', lonlat);

The getXY method returns an array of length 2, with the value at index 0 being the x position and the value at index 1 being the y position for your map.

Now that we have the X Y coordinates for Bangalore in our variable, we can use the addobject API method to place a marker at that location. Below, 'zc' is the same as the id given to the div used to place the chart.

zingchart.exec('zc', 'addobject', {
    type: 'shape',
    data: [{
        x: bangalore[0],
        y: bangalore[1],
        type: "circle",
        size: 3
    }]
});

To see the code in its entirety, view the page source of the map demo provided.

Please let me know if you have any more questions!

Zing Charts - Place Items on Map

1 Answers