CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Dave Mackintosh
Dave Mackintosh

Reputation: 2796

Google Maps, Ellipse inside rectangle bounds

I'm using the great Google Maps Shapes library to draw ellipses on my map with four given points, trouble is the ellipse is breaking the boundaries of the "rectangle/square" I envisaged.

[edit- updated image]

See this graphic for an example of how it's breaking the boundaries:

enter image description here

The pink points are the bounding rectangle I want (ignore the green ones)

How do I keep this ellipse inside those bounds (the goal here being it matches the outer reaches of the blue/gree and orange line originating from the centre.)

[edit]

The placement of some markers but these will change depending on user input

_s.OVAL_MARKERS = [
    // Top
    new google.maps.LatLng(51.583487043925224, -0.16044229844476376),
    // Right
    new google.maps.LatLng(51.58339184515312, -0.16013348842307096),
    // Bottom
    new google.maps.LatLng(51.58317916077958, -0.16026707625337622),
    // Left
    new google.maps.LatLng(51.583331361647325, -0.16064041535150864)
];

The code I'm using to create the oval (modified for this posting for clarity of variables)

var b = new _g.LatLngBounds();

_s.OVAL_MARKERS.forEach(function (m) {
    b.extend(m);
});

var major_axis = _gs.computeDistanceBetween(
    b.getNorthEast(),
    new _g.LatLng(
        b.getSouthWest().lat(),
        b.getNorthEast().lng()
    )
) / 2;
var minor_axis = _gs.computeDistanceBetween(
    new _g.LatLng(b.getCenter().lat(), b.getSouthWest().lng()),
    new _g.LatLng(b.getCenter().lat(), b.getNorthEast().lng())
) / 2;

Upvotes: 0

Views: 975

Answers (1)

Sébastien Renauld
Sébastien Renauld

Reputation: 19662

Your minor axis calculation is completely wrong. Right now, you're making an ellipse that will pass through all four points. Instead of doing this, what you will need to do is to compute the distance between the edges. In other words:

var minorAxis = _gs.computeDistanceBetween(_m[1], _m[3]);
var majorAxis = _gs.computeDistanceBetween(_m[1], _m[2]);

(Assuming that 1 is a vertex connected to 2 and 3)

This will give you smaller axis lengths, which is what you are looking for. The next step is to define the orientation of it. I have never drawn an ellipse in Google Maps, so I won't be able to help you on that one.

http://mathworld.wolfram.com/Ellipse.html for some useful ellipse info, by the way, including a list of formulas to bound eclipses to various shapes.

Upvotes: 1

Related Questions