How to draw an arc between two points

3,825 views
Skip to first unread message

sgiddings

unread,
Aug 24, 2010, 2:27:29 PM8/24/10
to Google Maps JavaScript API v3
I need to draw an arc between two points on the map, which are defined
by a third "centre" point, keeping the same radius.

Point A is at (48.596190206866830 : -1.5551704322317228)
Point B is at (48.610335003092956 : -1.6123447775299600)
Centre point is at (48.565630000000006 : -1.6050300000000002)
The radius between the centre point and the outer points is 5 Km

I tried to adapt the polyline circle example but have clearly not
understood what I should do.

Can anyone help me with this ?

geoco...@gmail.com

unread,
Aug 24, 2010, 2:35:30 PM8/24/10
to Google Maps JavaScript API v3
Probably. Where is the map where you tried to adapt it and failed?

-- Larry

sgiddings

unread,
Aug 25, 2010, 3:23:19 AM8/25/10
to Google Maps JavaScript API v3
Hi Larry,

In fact, it was your own page that you put in place to help me with
'donuts' !

http://www.geocodezip.com/v3_polygon_example_donut.html

Simon

On Aug 24, 8:35 pm, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:

Rossko

unread,
Aug 25, 2010, 3:36:18 AM8/25/10
to Google Maps JavaScript API v3
> http://www.geocodezip.com/v3_polygon_example_donut.html

I don't see any attempt on that page to draw arcs ... its your page we
want to see, Larry's works.

geoco...@gmail.com

unread,
Aug 25, 2010, 5:34:46 AM8/25/10
to Google Maps JavaScript API v3
On Aug 25, 12:23 am, sgiddings <mr.s.giddi...@gmail.com> wrote:
> Hi Larry,
>
> In fact, it was your own page that you put in place to help me with
> 'donuts' !
>
> http://www.geocodezip.com/v3_polygon_example_donut.html

But I asked for "the map where you tried to adapt it and failed".

I'm sure I can do it, given time and motivation (it is just math).

-- Larry

geoco...@gmail.com

unread,
Aug 25, 2010, 8:38:24 AM8/25/10
to Google Maps JavaScript API v3
On Aug 25, 2:34 am, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:
> On Aug 25, 12:23 am, sgiddings <mr.s.giddi...@gmail.com> wrote:
>
> > Hi Larry,
>
> > In fact, it was your own page that you put in place to help me with
> > 'donuts' !
>
> >http://www.geocodezip.com/v3_polygon_example_donut.html
>
> But I asked for "the map where you tried to adapt it and failed".
>
> I'm sure I can do it, given time and motivation (it is just math).

The problem as posed is both underspecified (not enough information)
and over specified (too much information). So you have to make some
decisions when you write your code. For this case you may know the
solution, but for a general purpose arc routine, you will need to
address them.

1. You have a radius, center point and two points on the circle. What
if they aren't consistent? Does the arc go through both points or
have the specified radius from the center?

2. There are 2 solutions: big arc and little arc. What determines
which way the arc is drawn, clockwise or counter-clockwise?

sgiddings

unread,
Aug 25, 2010, 11:51:30 AM8/25/10
to Google Maps JavaScript API v3
Hi Larry and Rossko,

Ok, I have the solution, which I will share with you.
I cannot claim any credit as it was Chris Veness (of movable-
type.co.uk fame) who supplied it.

Firstly to clarify the question -
The two points are at the same radius from the centre point.
The arc must extend from the first point and finish at the second
point.
The issue of clockwise or counter-clockwise is probably situation
specific - for myself the direction is counter-clockwise.

Here is his solution as he stated it -
* find bearing b1 from centre point to point A
* find bearing b2 from centre point to point B
* arc[] = point A // initial point in polyline array
* for (brng = b1; brng <= b2; brng += incr)
* {
* p = new point dist r, bearing brng from centre point
* arc[] = p // add this point to polyline array
* }
* draw(arc)

I was able to implement this pseudo code to my specific needs.
Thanks for your help gentlemen.
Simon
On Aug 25, 2:38 pm, "geocode...@gmail.com" <geocode...@gmail.com>

geoco...@gmail.com

unread,
Aug 25, 2010, 12:52:16 PM8/25/10
to Google Maps JavaScript API v3
On Aug 25, 8:51 am, sgiddings <mr.s.giddi...@gmail.com> wrote:
> Hi Larry and Rossko,
>
> Ok, I have the solution, which I will share with you.
> I cannot claim any credit as it was Chris Veness (of movable-
> type.co.uk fame) who supplied it.
>
> Firstly to clarify the question -
> The two points are at the same radius from the centre point.
> The arc must extend from the first point and finish at the second
> point.
> The issue of clockwise or counter-clockwise is probably situation
> specific - for myself the direction is counter-clockwise.
>
> Here is his solution as he stated it -
>     * find bearing b1 from centre point to point A
>     * find bearing b2 from centre point to point B
>     * arc[] = point A // initial point in polyline array
>     * for (brng = b1; brng <= b2; brng += incr)
>     * {
>     *   p = new point dist r, bearing brng from centre point
>     *   arc[] = p // add this point to polyline array
>     * }
>     * draw(arc)
>
> I was able to implement this pseudo code to my specific needs.

Are you going to share your implementation with the group?

-- Larry
> > > > >   -- Larry- Hide quoted text -
>
> - Show quoted text -

sgiddings

unread,
Aug 25, 2010, 1:55:23 PM8/25/10
to Google Maps JavaScript API v3
Still working on the implementation as this was just a small aspect.
Still got a number of other problems to overcome before the code is
stable.

On Aug 25, 6:52 pm, "geocode...@gmail.com" <geocode...@gmail.com>

geoco...@gmail.com

unread,
Aug 25, 2010, 11:36:42 PM8/25/10
to Google Maps JavaScript API v3
On Aug 25, 10:55 am, sgiddings <mr.s.giddi...@gmail.com> wrote:
> Still working on the implementation as this was just a small aspect.
> Still got a number of other problems to overcome before the code is
> stable.

Chris gave good advice. It was much easier that way. I was thinking
of modifying the drawCircle function.

http://www.geocodezip.com/v3_polyline_example_arc.html

If you look closely you can see how the red arc misses the points
because the drawArc function honors the radius rather than the point.

-- Larry
Reply all
Reply to author
Forward
0 new messages