Hex Grid construction

3,155 views
Skip to first unread message

Benjamin Mottram

unread,
Oct 11, 2011, 4:56:52 PM10/11/11
to Google Maps JavaScript API v3
Hi everybody,

I need to construct a hex grid in a similar manner to those found on
traditional table top war games .

(e.g. this is an excellent example
http://www.crypticcomet.com/blog/wp-content/uploads/2006/05/HexMapTopo.jpg).

I found a partial solution to this problem but it is only using the
version 2 API, this is the example in the link.

http://econym.org.uk/gmap/example_eshapes.htm

It is the only example that i can find and this uses depreciated
code. So i was hoping out there somewhere someone would have an
example of how to construct something similar? Or has any other tips
or suggestions on how such a thing could be created.

So thanks all in advance.

Ben

geoco...@gmail.com

unread,
Oct 11, 2011, 6:38:34 PM10/11/11
to Google Maps JavaScript API v3
On Oct 11, 1:56 pm, Benjamin Mottram <b.b.a.mott...@googlemail.com>
wrote:
> Hi everybody,
>
> I need to construct a hex grid in a similar manner to those found on
> traditional table top war games .
>
> (e.g. this is an excellent examplehttp://www.crypticcomet.com/blog/wp-content/uploads/2006/05/HexMapTop...).
>
> I found a partial solution to this problem but  it is only using the
> version 2 API, this is the example in the link.
>
> http://econym.org.uk/gmap/example_eshapes.htm
>
> It is the only example that i can find and this uses depreciated
> code.  So i was hoping out there somewhere someone would have an
> example of how to construct something similar?  Or has any other tips
> or suggestions on how such a thing could be created.

The extension he uses for doing this in v2 is referenced in that
example.

You could port it to v3, doesn't look like it would be too hard. But
if all you really want is the hex grid, you can easily make hexagons
with the v3 Polygon class. If you read Mike Williams' code in that
example and just do the same things with the v3 equivalents.

You might be able to use the geometry library to save yourself some
work.

Although thinking about it, it would probably be more efficient to
make a KmlLayer or FusionTablesLayer that contains your hex grid, then
the API will render it as tiles and there will be less overhead on
your map. Does the hex grid need to be clickable or need to handle
mouseover/out events?

-- Larry

Benjamin Mottram

unread,
Oct 12, 2011, 3:25:19 PM10/12/11
to Google Maps JavaScript API v3
Hi Larry.

Thanks for the advice. Actually I had considered the fusion table and
KML route, but I suppose I should be more specific about my particular
challenge.

The hex grid is part of game iam making for my degree, and I will be
honest I am still fairly new to programming so if i gloss over stuff
or miss out the obvious please do accept my apologies in advance.

The hex grid does indeed need to be clickable. The idea being that
the "state" of the hex will change as each turn of the game progresses
(for example change colour). So I was considering that each hex
should be created at its own object?

So I suppose it will need
-to deal with mouse click/over events.
-so that each individual hex can be identified as a unique coordinate
in an x,y grid.
-and that each hex can be treated as an object and have its attributes
changed.

That has massively complicated things... What is the best approach do
you believe?

Ben

On Oct 11, 11:38 pm, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:

geoco...@gmail.com

unread,
Oct 12, 2011, 4:01:05 PM10/12/11
to Google Maps JavaScript API v3
On Oct 12, 12:25 pm, Benjamin Mottram <b.b.a.mott...@googlemail.com>
wrote:
> Hi Larry.
>
> Thanks for the advice.  Actually I had considered the fusion table and
> KML route, but I suppose I should be more specific about my particular
> challenge.
>
> The hex grid is part of game iam making for my degree, and I will be
> honest I am still fairly new to programming so if i gloss over stuff
> or miss out the obvious please do accept my apologies in advance.
>
> The hex grid does indeed need to be clickable.  The idea being that
> the "state" of the hex will change as each turn of the game progresses
> (for example change colour).  So I was considering that each hex
> should be created at its own object?
>
> So I suppose it will need
> -to deal with mouse click/over events.

From your description above, you only talk about click events.
KmlLayer and FusionTablesLayer both handle click events, but not
mouseover events.

> -so that each individual hex can be identified as a unique coordinate
> in an x,y grid.
I'm not sure what that means, do you want to identify the particular
hexagon that was clicked on? If that is the case, you can do that
with KmlLayer or FusionTablesLayer or a polygon.

> -and that each hex can be treated as an object and have its attributes
> changed.

That you might be able to do with the styling options on a
FusionTablesLayer, you won't be able to do it with KmlLayer unless you
dynamically create the kml.

>
> That has massively complicated things...  What is the best approach do
> you believe?

That is up to you. If the hex grid isn't too big, polygons might be
the simplest.
Is the hex grid going to be fixed to the earth, or might it need to
move?

-- Larry

geoco...@gmail.com

unread,
Oct 12, 2011, 7:40:26 PM10/12/11
to Google Maps JavaScript API v3
On Oct 11, 3:38 pm, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:
> On Oct 11, 1:56 pm, Benjamin Mottram <b.b.a.mott...@googlemail.com>
> wrote:
>
>
> > Hi everybody,
>
> > I need to construct a hex grid in a similar manner to those found on
> > traditional table top war games .
>
> > (e.g. this is an excellent examplehttp://www.crypticcomet.com/blog/wp-content/uploads/2006/05/HexMapTop...).
>
> > I found a partial solution to this problem but  it is only using the
> > version 2 API, this is the example in the link.
>
> >http://econym.org.uk/gmap/example_eshapes.htm
>
> > It is the only example that i can find and this uses depreciated
> > code.  So i was hoping out there somewhere someone would have an
> > example of how to construct something similar?  Or has any other tips
> > or suggestions on how such a thing could be created.
>
> The extension he uses for doing this in v2 is referenced in that
> example.
>
> You could port it to v3, doesn't look like it would be too hard.  

Like this (quick brute force port, probably could be improved):
http://www.geocodezip.com/v3_MW_example_eshapes.html

-- Larry

Benjamin Mottram

unread,
Oct 20, 2011, 3:03:17 PM10/20/11
to Google Maps JavaScript API v3
Hi Larry!

Thanks for that and apologies for not seeing your reply sooner, your
work there is a tremendous help.

I am just trying to finesse it more for my requirements but once i
have produced it i post the outcome on here.

Thanks again for your effforts.

Ben.

On Oct 13, 12:40 am, "geocode...@gmail.com" <geocode...@gmail.com>
Reply all
Reply to author
Forward
0 new messages