The goal is to use an array of coordinates to draw a route without using Google Maps. What is the best way to convert standard Latitude/Longitude coordinates to HTML5 canvas coordinates?

The goal is to use an array of coordinates to draw a route without using Google Maps. What is the best way to convert standard Latitude/Longitude coordinates to HTML5 canvas coordinates?

• javascript
• html
• google-maps
• geolocation
• coordinates

Share Improve this question Follow asked Jul 22, 2016 at 13:18 Noel BaronNoel Baron 73666 silver badges1717 bronze badges 3

• Have you looked at the Haversine formula? It will give you distance and angle, which you can convert to x, y easily. – Yimin Rong Commented Jul 22, 2016 at 13:29
• I posted an answer that does it pretty well. – Noel Baron Commented Jul 22, 2016 at 19:50
• 1 Note the weirdness that happens at the date line (i.e. 180th meridian). Fortunately, there aren't too many roads that cross it, currently only Fiji. But, depending on how large an area you want to deal with, you might need to code the special case where the shorter distance uses reversed coordinates. – Yimin Rong Commented Jul 22, 2016 at 20:42

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

I found a fairly simple way to convert lat/lon to points.

1. Get the min/max coordinates of your set.
2. Have your canvas dimensions handy.
3. Use floating point calculation to get percentage of x and y on canvas.
4. Provide points to D3.

See JS Fiddle: https://jsfiddle/12stct3y/

var bounds = {
    "minLon": -81.267555236816,
    "maxLon": -81.261039733887,
    "maxLat": 28.979709625244,
    "minLat": 28.977783203125
}
var dimensions = {
    width:400,
    height:150
}   
function getX(x) {
    var position = (x - bounds.minLon) / (bounds.maxLon - bounds.minLon); 
    return dimensions.width*position;
}
function getY(y) {
  var position = (y - bounds.minLat) / (bounds.maxLat - bounds.minLat); 
    return dimensions.height*position;
}

Not included in fiddle:

1. Rotating to north-based view
2. Creating dimensions based on variable bounds