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
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
Share Improve this question edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked Nov 18, 2015 at 4:19 Anthony VeachAnthony Veach 3202 silver badges10 bronze badges 4- Try adding "centered:false" attribute to the Map Image – bhanu.cs Commented Nov 18, 2015 at 4:38
-
1
Have you checked the console? Unless it's a typo, your response data is invalid JSON. Try this:
[{"latitude": "40.4258686","longitude": "-86.9080655"}]
. You're probably seeing a default location. – sideroxylon Commented Nov 18, 2015 at 4:45 - Hey thanks that is in fact a typo. I didn't include all the data from the JSON object, so I was entering it by hand. – Anthony Veach Commented Nov 18, 2015 at 5:42
- I did try using "centered:false", but that seems to just adjust if the marker uses the top/left values for the top-left of the marker or the center. This distance wouldn't account for that. – Anthony Veach Commented Nov 18, 2015 at 5:43
2 Answers
Reset to default 9It seems like you are using a non-calibrated US map. (usaLow.js) This map is distorted for visual purposes and thus not patible 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:
Option 1: usa2Low.js
It is Mercator-calibrated for mainland US. The markers should plot OK, except for Alaska and Hawaii, that area displaced.
Option 2: usaMercatorLow.js
This map is fully patible with coordinates, including Alaska and Hawaii. However, it might not look as appealing:
Both of those maps are bundled with JavaScript Maps.
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./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)));
}