I have an ammaps map (USALOW) and I am loading it dynamically. How can I get the id to come back for the state I clicked? WHen I add the below code it keeps alerting my undefined:
map.addListener("clickMapObject", function (event) {
alert(event.mapObject.id);
});
Here is my map script:
$.ajax({
url: mapData,
cache: false,
type: 'GET',
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function (data) {
$.each(data, function (index, item) {
//getLabelColor(item.StateCode, assignMapColor(item.Obligation));
newmapdata.push({
id: "US-" + item.GeoCode,
title: item.GeoName,
value: item.GrantTotal,
balloonText: "<b>" + item.GeoName +
"</b>" + "<br>Grant Amount: $" + item.GrantTotal.toLocaleString(),
color: "#0a71b2"
});
});
var map = AmCharts.makeChart("grantsMap", {
type: "map",
"theme": "light",
dragMap: true,
fixedSize: false,
colorSteps: 10,
"responsive": {
"enabled": true,
// Rules
"rules": [
// at 500px wide, we hide baloons
{
"maxWidth": 500,
"overrides": {
"balloon": {
"enabled": false
},
"imagesSettings": {
"labelPosition": "middle",
"labelFontSize": 8
}
}
}
]
},
// End of Rules
"areasSettings": {
"autozoom": true,
outlineColor: "#000000",
"selectable": true
},
dataProvider: {
map: "usaLow",
areas: newmapdata,
getAreasFromMap: true,
images: [
{
label: "AL",
latitude: -40,
longitude: 81,
linkToObject: "US-AL"
}, {
label: "AK",
latitude: -84,
longitude: -130,
linkToObject: "US-AK"
}, {
label: "AZ",
latitude: -4,
longitude: -85,
linkToObject: "US-AZ"
}, {
label: "AR",
latitude: -11,
longitude: 41,
linkToObject: "US-AR"
}, {
label: "CA",
latitude: 70,
longitude: -135,
linkToObject: "US-CA"
}, {
label: "CO",
latitude: 60,
longitude: -42,
linkToObject: "US-CO"
}, {
"label": "CT",
"latitude": 71,
"longitude": 180,
"linkToObject": "US-CT",
//labelBackgroundColor: "#cccccc",
labelBackgroundAlpha: .8
}, {
label: "DE",
//labelBackgroundColor: "#cccccc",
latitude: 38,
longitude: 180,
linkToObject: "US-DE",
labelBackgroundAlpha: .8
}, {
//labelBackgroundColor: "#cccccc",
label: "DC",
latitude: -20,
longitude: 180,
linkToObject: "US-DC",
labelBackgroundAlpha: .8
}, {
label: "FL",
latitude: -78,
longitude: 120,
linkToObject: "US-FL"
}, {
label: "GA",
latitude: -40,
longitude: 102,
linkToObject: "US-GA"
}, {
label: "HI",
latitude: -88.7,
longitude: -35.7,
linkToObject: "US-HI"
}, {
label: "ID",
latitude: 85,
longitude: -85,
linkToObject: "US-ID"
}, {
label: "IL",
latitude: 65,
longitude: 60,
linkToObject: "US-IL"
}, {
label: "IN",
latitude: 67,
longitude: 78,
linkToObject: "US-IN"
}, {
label: "IA",
latitude: 77,
longitude: 35,
linkToObject: "US-IA"
}, {
label: "KS",
latitude: 48,
longitude: 5,
linkToObject: "US-KS"
}, {
label: "KY",
latitude: 42,
longitude: 87,
linkToObject: "US-KY"
}, {
label: "LA",
latitude: -65,
longitude: 43,
linkToObject: "US-LA"
}, {
label: "ME",
latitude: 88.3,
longitude: 168,
linkToObject: "US-ME"
}, {
label: "MD",
//labelBackgroundColor: "#cccccc",
latitude: 10,
longitude: 180,
linkToObject: "US-MD",
labelBackgroundAlpha: .8
}, {
label: "MA",
latitude: 83.5,
longitude: 180,
linkToObject: "US-MA",
labelBackgroundAlpha: .8,
//labelBackgroundColor: "#cccccc",
}, {
label: "MI",
latitude: 82.7,
longitude: 85,
linkToObject: "US-MI"
}, {
label: "MO",
latitude: 48,
longitude: 40,
linkToObject: "US-MO"
}, {
label: "MN",
latitude: 87,
longitude: 28,
linkToObject: "US-MN"
}, {
label: "MS",
latitude: -40,
longitude: 61,
linkToObject: "US-MS"
}, {
label: "MT",
latitude: 88.2,
longitude: -55,
linkToObject: "US-MT"
}, {
label: "NE",
latitude: 75,
longitude: 0,
linkToObject: "US-NE"
}, {
label: "NV",
latitude: 75,
longitude: -107,
linkToObject: "US-NV"
}, {
label: "NH",
//labelBackgroundColor: "#cccccc",
latitude: 86.2,
longitude: 180,
linkToObject: "US-NH",
labelBackgroundAlpha: .8
}, {
label: "NJ",
//labelBackgroundColor: "#cccccc",
latitude: 58,
longitude: 180,
linkToObject: "US-NJ",
labelBackgroundAlpha: .8
}, {
label: "NM",
latitude: -10,
longitude: -46,
linkToObject: "US-NM"
}, {
label: "NY",
latitude: 85,
longitude: 140,
linkToObject: "US-NY"
}, {
label: "NC",
latitude: 23,
longitude: 128,
linkToObject: "US-NC"
}, {
label: "ND",
latitude: 88,
longitude: -5,
linkToObject: "US-ND"
}, {
label: "OH",
latitude: 70,
longitude: 98,
linkToObject: "US-OH"
}, {
label: "OK",
latitude: -6,
longitude: 11,
linkToObject: "US-OK"
}, {
label: "OR",
latitude: 87,
longitude: -122,
linkToObject: "US-OR"
}, {
label: "PA",
latitude: 78,
longitude: 128,
linkToObject: "US-PA"
}, {
label: "RI",
//labelBackgroundColor: "#cccccc",
latitude: 79,
longitude: 180,
linkToObject: "US-RI",
labelBackgroundAlpha: .8
}, {
label: "SC",
latitude: -12,
longitude: 117,
linkToObject: "US-SC"
}, {
label: "SD",
latitude: 84.5,
longitude: -5,
linkToObject: "US-SD"
}, {
label: "TN",
latitude: 12,
longitude: 83,
linkToObject: "US-TN"
}, {
label: "TX",
latitude: -65,
longitude: 0,
linkToObject: "US-TX"
}, {
label: "UT",
latitude: 66,
longitude: -77,
linkToObject: "US-UT"
}, {
label: "VT",
latitude: 87,
longitude: 150.5,
linkToObject: "US-VT"
}, {
label: "VA",
latitude: 55,
longitude: 128,
linkToObject: "US-VA"
}, {
label: "WA",
latitude: 89,
longitude: -112,
linkToObject: "US-WA"
}, {
label: "WV",
latitude: 60,
longitude: 112,
linkToObject: "US-WV"
}, {
label: "WI",
latitude: 85,
longitude: 53,
linkToObject: "US-WI"
}, {
label: "WY",
latitude: 82.5,
longitude: -47,
linkToObject: "US-WY"
}
],
lines: [
{
//DC LINE
latitudes: [66.8921, -20],
longitudes: [135.6241, 173]
}, {
//CT LINE
latitudes: [82.8921, 71],
longitudes: [153.8241, 173]
}, {
//DE LINE
latitudes: [69.0921, 38],
longitudes: [145.2241, 173]
}, {
//MD LINE
latitudes: [69.8921, 10],
longitudes: [136.8241, 172.5]
}, {
//MA LINE
latitudes: [84.0921, 83],
longitudes: [153.8241, 173]
}, {
//NH LINE
latitudes: [86.0921, 86.2],
longitudes: [156.8241, 173]
}, {
//NJ LINE
latitudes: [76.0921, 58],
longitudes: [147.8241, 173]
}, {
//RI LINE
latitudes: [83.0921, 78],
longitudes: [162.8241, 173.5]
}
]
},
zoomControl: {
zoomControlEnabled: true,
panControlEnabled: false
},
"imagesSettings": {
"labelPosition": "middle",
"labelFontSize": 11
}
});
map.addListener("clickMapObject", function (event) {
alert(event.mapObject.id);
document.getElementById("info").innerHTML = '<p> <img src="http://www.cdc.gov/drugresistance/solutions-initiative/infographics/drug-resistant-lab-network-infographic.jpg" /> </p>';
document.getElementById("pdfDownload").innerHTML = event.mapObject.id + '<a href="newsletter_01.pdf" target="_blank">Download</a>'
});
}
});
}
Your states are working correctly, but your images (labels) are returning undefined as the IDs are undefined by default unless set. Giving your images IDs fixes the problem:
images: [{
id: "AL",
label: "AL",
latitude: -40,
longitude: 81,
linkToObject: "US-AL"
}, {
id: "AK",
label: "AK",
latitude: -84,
longitude: -130,
linkToObject: "US-AK"
},
// ...
]
Here's a demo.