[Math] Drawing ellipse as google.maps.Polygon with 8 points

geometrypolygonsspherical coordinatesspherical-geometry

In a web page using Google Maps JavaScript API v3 (including Geometry library) I currently draw an ellipse as a "diamond" with 4 corner points by the following JavaScript code:

map screenshot

var NORTH = 0;
var WEST  = -90;
var SOUTH = 180;
var EAST  = 90;

function drawEllipse(map, lat, lng, firstradius, secondradius, color) {

        var center = new google.maps.LatLng(lat, lng);

        var north = computeOffset(center, firstradius, NORTH); 
        var south = computeOffset(center, firstradius, SOUTH); 
        var east = computeOffset(center, secondradius, EAST); 
        var west = computeOffset(center, secondradius, WEST); 

        var corners = [ north, east, south, west ];

        var diamond = new google.maps.Polygon({
                paths: corners,
                strokeColor: color,
                strokeOpacity: 0.9,
                strokeWeight: 1,
                fillColor: color,
                fillOpacity: 0.3,
                map: map
        });
}

As you can see I use Google's computeOffset() method to move once to the north, south, west, east from the given center.

Here is jsFiddle web page – so that you can see the results immediately for yourself.

Could anybody please recommend a way to draw at least 4 more points for the polygon?

How to draw them with computeOffset(), when I am given firstradius, secondradius of the erllipse and latitude, longitude of its center point – and the ellipse is never rotated (it is always "pointing to north").

I think I need to add

var NORTH_WEST = -45;
var NORTH_EAST = 45;
var SOUTH_EAST = 135;
var SOUTHE_WEST = -135;

and then I probably need the distance – but how to calculate it out of firstradius and secondradius?

UPDATE:

I have tried the following thinking: an ellipse is defined by

ellipse

and at NORTH_EAST (which is at 45 degrees from NORTH) we have:

 x = y

So the distance from center to that point at ellipse should be:

   var distance = 1 / Math.sqrt(1 / (firstradius * firstradius) + 
                                1 / (secondradius * secondradius));

   var northEast = computeOffset(center, distance, NORTH_EAST); 

   var northWest = computeOffset(center, distance, NORTH_WEST); 

   var southEast = computeOffset(center, distance, SOUTH_EAST); 

   var southWest = computeOffset(center, distance, SOUTH_WEST); 

    var corners = [ northWest, north, northEast, east, 
                    southEast, south, southWest, west ];

Unfortunately, this does not work and draws a concave "diamond", which you can see (and change by clicking Run button) at the new jsFiddle.

UPDATE: I am copying the Naks' answer (thanks!) below – in case jsFiddle ever disappears:

var mapOptions = {
    zoom: 14,
    center: new google.maps.LatLng(23.12546, 113.26615),
    mapTypeId: google.maps.MapTypeId.TERRAIN
};

var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

function drawEllipse(map, lat, lng, firstradius, secondradius, color) {

    var center = new google.maps.LatLng(lat, lng);
    var center1 = new google.maps.LatLng(lat+0.1, lng);
    var center2 = new google.maps.LatLng(lat, lng+0.1);
    var latConv = google.maps.geometry.spherical.computeDistanceBetween(center,center1)*10;
    var lngConv = google.maps.geometry.spherical.computeDistanceBetween(center,center2)*10;
    var points = [];

    for (var angle = 0; angle < 360; angle += 10){
         var x = lat+((firstradius*Math.cos(angle*(Math.PI/180)))/latConv);
         var y = lng+((secondradius*Math.sin(angle*(Math.PI/180)))/lngConv);
         var point = new google.maps.LatLng(x,y);
         points.push(point);
    }

    var diamond = new google.maps.Polygon({
          paths: points,
          strokeColor: color,
          strokeOpacity: 0.9,
          strokeWeight: 1,
          fillColor: color,
          fillOpacity: 0.3,
          map: map
    });
}

drawEllipse(
    map,
    map.getCenter().lat(), 
    map.getCenter().lng(), 
    850, 
    450, 
    '#990000'
);

Best Answer

It would be difficult to draw an ellipse with only 8 points, as polygon method can only draw straight lines between two point, with 8 points you will end up getting an octagon.

For a smother ellipse I suggest you to use more than 8 points.

Below is the implementation done by calculating a point for every 1° step.

http://jsfiddle.net/z4om3x6s/7/

Related Question