GMap Module Filter capabilities Demo

Submitted by james on January 31, 2006 - 2:24pm

This page will give some demos on what can be done with the gmap filter module. We are still working on doing some significant changes to the way that the macro creator works. However, in the meantime, to use many of the features manual editing of the

(Note: XMaps is no longer compatible with the latest version of the Google Maps API (and therefore the gmap module. Hopefully either XMaps will be updated, or this circles, and dashed line ability will be rolled into the gmap module.)

Javascript is required to view this map.

In order to create this map a number of steps were used
First create a map with macro creator. Then customize it as you see fit. I find it is often easier to create the map and insert it then create the overlays and copy and paste them in one at a time making the changes I would like to make.

Map Layout

The available tags for map charecteristics are:

  • id - an id for a map can only contain alphanumberic and a "-" no other symbols are permitted. Must be unique for each map that will appear on the same page.
  • center - (longitude, latitude) the centre point of the map
  • zoom - (1-23) the zoom of the map.
  • width, height - width and height in pixels the (px) is optional. Theses may alternatively be specified as "%".
  • align - (None|Left|Right|Center) - The alignment of the <div> of the map.
  • control - (None|Large|Small) Whether there is a zoom control and what size it is.
  • type - (Map|Hybrid|Satellite) Map type
  • tcontrol - (On|Off) Whether the map shows the change the map type.

Any of these can be left blank and the default value in the settings will be used.

This map layout above was created with:

id=map1 |center=-123.0963134765625, 49.25884267913592 |zoom=6 |width=100% |height=500px |align=None |control=Large |type=Map|tcontrol=on

Markers

When you click on the map, the macro creator will add markers. you can then customize the markers with a few options:

  • Custom Markers - you can use custom markers for all of the points by inserting a string before the list of points separated from the points by a "::". This must correspond to an image for the icon in the markers directory. It will first see if a series of markers with that name exists (such as number1.png, number2.png...) and if so use it, and if not it will see if the marker with the name exists, and if not it uses the default marker. Included with the module is series markers for "letter", and "number" and some simple one colour markers in a number of different colours.
  • text popup - You can insert text for a point by adding a ":" and the text after the point. This text can contain html, but must not include the symbols "|" or "+" or "]". These can be replace with their html equivalents.

It should be noted that you can have multiple sets of markers on the same map.

The two sets of markers in the sample map were created using the following:

markers=number::-123.16068649291992,49.273964893181876:Kits Pool + -123.15399169921875,49.29658355065509:Second Beach Pool + -123.0355453491211,49.28964229401579:New Brighton Pool|markers=blue::-123.13631057739258,49.27721276406079:Vancouver Aquatic Centre

Styles

For the lines and the shapes there are some styles that can optionally be set. Where these are not set, the defaults for google are used. These styles are separated by a "/" and preceed the points and are separated by the series of points by a ":". The possible style settings are:

  • colour - (eg. "#0000bb") must be 6 digit hex preceeded by the "#". Named colours are not permitted.
  • width - (1+) width of the line in pixels.
  • opacity - (0-1) The opacity of the line.
  • pattern - (eg. "4,4") a pattern for a broken line, first number indicates length of solid, second indicates lenght of break. Multiple breaks are permitted, a even number of numbers must be used. (requires xmaps)
  • text - (eg "seabus") text used to identify the line. (requries xmaps)
  • fillcolor - (eg. "#aa00bb") colour of the filled area for filled shapes (requires xmaps)
  • fillopacity - (0-1) opacity of the filled area for filled shapes (requires xmaps)

Lines

Lines can be created with the macro generator and then the styles above can be used. The seabus line in the above map uses the following:

line=#0000bb/2/1/4,4/Seabus:-123.10884475708008,49.28695509355089 + -123.08464050292969,49.310015464362806

It should be noted that in order to see the text the line must be a certain length on the screen therefore to see "seabus" you must zoom in on the seabus line a couple of time.

Circle/rpolygon (requires xmaps)

A circle is specified with the centre point and then the diameter of the circle separated by a "+" symbol, a third optional parameter, for number of sides can be added. (By default the circle has 32 sides, but you can specify more or less and create a different regular polygon.

A regular polygon uses the same criteria excep that it uses two points the first being the centre, and the second being a point on the regular polygon, agian the number of sides is an optional third parameter. Circles can of course have any style information above added and can be filled.

The circle showing 10 km from the airport is created with the following:

circle=#55ddff/6/0.5:-123.18008422851562,49.19426915204543 + 10

It is often easiest to use the macro creator to set the point for the centre and then edit the macro to make this into a circle.

Polygon (requires xmaps)

A polygon is just a filled line. The following shades in the UBC area:

polygon=-123.24952125549316,49.273124891768525 + -123.25973510742187,49.268084582896336 + -123.2607650756836,49.26433201857972 + -123.25836181640625,49.26298774701013 + -123.25836181640625,49.26192350604598 + -123.25716018676758,49.26108329959868 + -123.25613021850586,49.26013104833168 + -123.25484275817871,49.25951487595601 + -123.25441360473633,49.25873064544246 + -123.25389862060547,49.25727418428457 + -123.25312614440918,49.25688205278321 + -123.25201034545898,49.25620982010423 + -123.25055122375488,49.255257474803116 + -123.24668884277344,49.252008158428836 + -123.23673248291015,49.255985740509985 + -123.22969436645508,49.25817047316041 + -123.23587417602539,49.265508226162716 + -123.24282646179199,49.2644440395575 + -123.2472038269043,49.26825260148869 + -123.24857711791992,49.27323689278344

There seems to be a bug that isn't allowing the style information to be parsed correctly for polygons...

Feeds

The newest ability of maps created with the gmap.module is to have feeds that takes the information from a local rss feed with location information. For a demo see: photo-tips.ca/gmapfeeddemo.