Reputation: 320
I am building a map using the usaLow.js map. On map init, I call a json method that returns this data:
[{latitude: "40.4258686",longitude: "-86.9080655"}]
With this data I add to the map's data provider (mapData) with this:
mapData.images = [];
for(var i = 0; i < resp.length; ++i){
mapData.images.push({
type: "circle",
color:"#FF0000",
latitude: parseFloat(resp[i].latitude),
longitude: parseFloat(resp[i].longitude)
});
}
map.validateData();
This location should be in Indiana, but this is where I see the marker:
Do lat/long coordinates need to be converted when not using world maps? If so, how can that be done?
edit: Fixed JSON string typo
Upvotes: 6
Views: 2220
Reputation: 21
I know this is kind of an old question, but I came up with a solution that might help someone else using AmCharts.maps.usa2High.
If I know that I'm plotting a point in Alaska or Hawaii I can take real lat/lng and scale/translate it to a lat/lng that works on the Ammap. To do this I just needed 2 points on the Ammap In Alaska's case, Anchorage and Juneau. Using the Ammap dev tools I was able to approximate these locations. Here is how I made it work. I used a tool called Big.js to do the math more accurately - https://github.com/MikeMcl/big.js/
Note: locations is an array that holds my addresses.
var lat = results[0].geometry.location.lat();
var lng = results[0].geometry.location.lng();
if(locations[index].state.toLowerCase() == 'ak' || locations[index].state.toLowerCase() == 'alaska'){
//Use 2 points to translate the coordinates
//anchorage
//normal coords
var ax1 = new Big(61.2180556);
var ay1 = new Big(-149.90027780000003);
//ammap coords
var bx1 = new Big(20.7413);
var by1 = new Big(-115.1221);
//juneau
//normal coords
var ax2 = new Big(58.3019444);
var ay2 = new Big(-134.41972220000002);
//ammap coords
var bx2 = new Big(18.9596);
var by2 = new Big(-109.7574);
//find the scale of Ammaps Alaska vs. actual lat/lng coords
var latScale = (bx1.minus(bx2)).div(ax1.minus(ax2));
var lngScale = (by1.minus(by2)).div(ay1.minus(ay2));
//get the new translated point by using the 2 existing points and
lat = bx2.plus(latScale.times((new Big(lat)).minus(ax2)));
lng = by2.plus(lngScale.times((new Big(lng)).minus(ay2)));
}
if(locations[index].state.toLowerCase() == 'hi' || locations[index].state.toLowerCase() == 'hawaii'){
//Use 2 points to translate the coordinates
//honolulu
//normal coords
var ax1 = new Big(21.3069444);
var ay1 = new Big(-157.85833330000003);
//ammap coords
var bx1 = new Big(24.1081);
var by1 = new Big(-104.5377);
//normal coords
var ax2 = new Big(20.7983626);
var ay2 = new Big(-156.33192529999997);
//ammap coords
var bx2 = new Big(23.5082);
var by2 = new Big(-102.5078);
//find the scale of Ammaps Hawaii vs. actual lat/lng coords
var latScale = (bx1.minus(bx2)).div(ax1.minus(ax2));
var lngScale = (by1.minus(by2)).div(ay1.minus(ay2));
//get the new translated point by using the 2 existing points and
lat = bx2.plus(latScale.times((new Big(lat)).minus(ax2)));
lng = by2.plus(lngScale.times((new Big(lng)).minus(ay2)));
}
Upvotes: 1
Reputation: 8595
It seems like you are using a non-calibrated US map. (usaLow.js) This map is distorted for visual purposes and thus not compatible with real latitude/longitude coordinates.
To work around that, you will need to use one of the maps that are calibrated. The options are these:
It is Mercator-calibrated for mainland US. The markers should plot OK, except for Alaska and Hawaii, that area displaced.
This map is fully compatible with coordinates, including Alaska and Hawaii. However, it might not look as appealing:
Both of those maps are bundled with JavaScript Maps.
Upvotes: 9