Latitude/Longitude coordinates are not correct in amMap USA map

Question

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

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, Nov 18 '15 at 04: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, Nov 18 '15 at 05: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, Nov 18 '15 at 05:43

score 9 · Accepted Answer · answered Nov 18 '15 at 06:05

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:

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 compatible with coordinates, including Alaska and Hawaii. However, it might not look as appealing:

Both of those maps are bundled with JavaScript Maps.

Allen Rowland · Answer 2 · 2016-06-15T09:46:25.570

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)));

                }

Latitude/Longitude coordinates are not correct in amMap USA map

2 Answers2

Option 1: usa2Low.js

Option 2: usaMercatorLow.js

Linked