ClubWiki:Using GMaps: Difference between revisions

From TEHCC Wiki
Jump to navigation Jump to search
(→‎Extension options: 15 is closest zoom for terrain)
m (cleaned up some grammer and added examples section)
Line 10: Line 10:
</pre>
</pre>


This site prefers that routes/trails are kept in the KMLs and the pins/markers are specified within the extension on this site. By keeping the pins specified in the wiki markup, it is easier for users of this site to add/remove/modify them.
This site prefers that routes/trails are kept in the KMLs and the pins/markers are specified within the wiki markup on the page. By keeping the pins specified in the wiki markup, it is easier for users of this site to add/remove/modify them.


The specifics of each portion are explained below
The specifics of each portion are explained below
Line 21: Line 21:
* lat (the center latitude on the map)
* lat (the center latitude on the map)
* lon (the center longitude on the map)
* lon (the center longitude on the map)
* zoom (the zoom level; 0 is the furthest away, 21 is the closest in - 15 is closest zoom for terrain)
* zoom (the zoom level; 0 is the furthest away, 21 is the closest in; 15 is closest zoom for terrain)
* type ("normal" or "map", "hybrid", or "satellite"; default is "hybrid")
* type ("normal" or "map", "hybrid", or "satellite"; default is "hybrid")
* controls (''small'' creates +/- zoom buttons, ''medium'' has zoom buttons and pan buttons, ''large'' has pan buttons with a sliding scale for zoom, and ''none'' has no buttons)
* controls (''small'' creates +/- zoom buttons, ''medium'' has zoom buttons and pan buttons, ''large'' has pan buttons with a sliding scale for zoom, and ''none'' has no buttons)
Line 49: Line 49:
  <nowiki></googlemap></nowiki>
  <nowiki></googlemap></nowiki>


These files will be dynamically imported into the map each time the map is loaded. For now any new KMLs must be emailed to the [mailto:webmaster@tehcc.org webmaster] for uploading to the site.
These files will be dynamically imported into the map each time the map is loaded. For now, any new KMLs must be emailed to the [mailto:webmaster@tehcc.org webmaster] for uploading to the site.


== Pins ==
== Pins ==
Line 64: Line 64:
36.502891,-82.468700
36.502891,-82.468700
Intersection to/from [[WPSP_Fall_Creek_Loop_Trail|Fall Creek Loop]]
Intersection to/from [[WPSP_Fall_Creek_Loop_Trail|Fall Creek Loop]]
[[Image:To D Backbone Trail.jpg|150px|Trail head sign]]</pre>
[[Image:To D Backbone Trail.jpg|150px|Trail head sign]]
</googlemap>
</pre>


The above commands can be used many times within a single map to create the pins needed
The above commands can be used many times within a single map to create the pins needed
Line 77: Line 79:
  <nowiki><googlemap lat="36.072635" lon="-79.791975" icon="http://images.wikia.com/walkingdead/images/7/70/Markerfight.png"></nowiki>
  <nowiki><googlemap lat="36.072635" lon="-79.791975" icon="http://images.wikia.com/walkingdead/images/7/70/Markerfight.png"></nowiki>


Full coding:
Full coding example:
  <nowiki><googlemap lat="36.072635" lon="-79.791975" icon="http://images.wikia.com/walkingdead/images/7/70/Markerfight.png"></nowiki>
  <nowiki><googlemap lat="36.072635" lon="-79.791975" icon="http://images.wikia.com/walkingdead/images/7/70/Markerfight.png"></nowiki>
  38.453857, -84.356461, Rick Grimes Shot
  38.453857, -84.356461, Rick Grimes Shot
Line 91: Line 93:


Full coding of a custom icon map:
Full coding of a custom icon map:
<pre><googlemap version="0.9" lat="36.500667" lon="-82.47797" type="terrain" zoom="15" width="715" height="350" scale="yes" controls="large" icons="http://tehcc.org/clubwiki/kml/marker{label}.png">
<pre>
<googlemap lat="36.500667" lon="-82.47797"width="715" height="350" icons="http://tehcc.org/clubwiki/kml/marker{label}.png">
(E) 36.50013,-82.47760
(E) 36.50013,-82.47760
Fall Creek Falls
Fall Creek Falls
Line 99: Line 102:
(G) 36.502891,-82.468700
(G) 36.502891,-82.468700
Intersection to/from [[WPSP_Fall_Creek_Loop_Trail|Fall Creek Loop]]
Intersection to/from [[WPSP_Fall_Creek_Loop_Trail|Fall Creek Loop]]
[[Image:To D Backbone Trail.jpg|150px|Trail head sign]]</pre>
[[Image:To D Backbone Trail.jpg|150px|Trail head sign]]
</googlemap>
</pre>


==== Icons reference ====
==== Icons reference ====
Line 178: Line 183:
|}
|}
Search http://code.google.com/p/google-maps-icons/ for other icons to suggest, send to [mailto:webmaster@tehcc.org webmaster] for inclusion
Search http://code.google.com/p/google-maps-icons/ for other icons to suggest, send to [mailto:webmaster@tehcc.org webmaster] for inclusion
== Examples ==
Review the markup for these pages for good examples of embedded Google Maps, using most or all of the features described above
*[[Warriors Path State Park]] - Shows multiple KML files in use
*[[WPSP Devil's Backbone|Devil's Backbone]] - Multiple KML files and many pins showing pictures and more

Revision as of 09:26, 10 April 2011

This wiki site uses a MediaWiki extension called Google Maps. It's full syntax description can be found at its home site. Here we will just describe the basic features typically used for this site for simplicity for our users

Basic use

The Google map is invoked by using the following basic structure

<googlemap options>
(optional and multiple possible) KML file locations
(optional and multiple possible) pin locations
</googlemap>

This site prefers that routes/trails are kept in the KMLs and the pins/markers are specified within the wiki markup on the page. By keeping the pins specified in the wiki markup, it is easier for users of this site to add/remove/modify them.

The specifics of each portion are explained below

Extension options

Available coding options are:

  • width (in pixels; default is 740)
  • height (in pixels; default is 600)
  • lat (the center latitude on the map)
  • lon (the center longitude on the map)
  • zoom (the zoom level; 0 is the furthest away, 21 is the closest in; 15 is closest zoom for terrain)
  • type ("normal" or "map", "hybrid", or "satellite"; default is "hybrid")
  • controls (small creates +/- zoom buttons, medium has zoom buttons and pan buttons, large has pan buttons with a sliding scale for zoom, and none has no buttons)
  • selector (show the map/hybrid/satellite selector? yes (default) and no.)
  • scale (show the distance scale? yes and no (default).)
  • overview (show the inset navigation map? yes and no (default).)
  • icons (web address if the marker icon is customized. With "{label}" where the name of the icon will be inserted; defaults to "http://maps.google.com/mapfiles/marker{label}.png")
  • icon (web address if the marker icon is not specified; the default icon is http://maps.google.com/mapfiles/marker.png)
  • units ("meters" or "miles"; default is "meters".)

All attributes are optional. If it is not specified the above described default will be assumed.

So the final code to place just a map with no other features might be:

<googlemap lat="36.500667" lon="-82.47797" zoom="12" width="500" height="400" type="map" controls="small">
</googlemap>

KML files

Before you specify any markers, you can add URL(s) that point to KML files. Each URL should be on its own line, e.g.

<googlemap>
http://some.url/
http://other.url/
...
</googlemap>

These files will be dynamically imported into the map each time the map is loaded. For now, any new KMLs must be emailed to the webmaster for uploading to the site.

Pins

Pins are added by using the following syntax within the <googlemap> tags:

lat,lon,balloon title (title will be auto linked to a page on this wiki)
balloon text and/or images, can be multiple lines

Full coding showing two pins, the first with a linked title and regular text and the second with no linked title but regular text and a small image:

<googlemap version="0.9" lat="36.500667" lon="-82.47797" type="terrain" zoom="15" width="715" height="350" scale="yes" controls="large">
36.50013,-82.47760,WPSP Sinking Waters
Here is the location of the trail head
36.502891,-82.468700
Intersection to/from [[WPSP_Fall_Creek_Loop_Trail|Fall Creek Loop]]
[[Image:To D Backbone Trail.jpg|150px|Trail head sign]]
</googlemap>

The above commands can be used many times within a single map to create the pins needed

Pin icons

Icons can be changed by two methods, changing all undefined icons to a specified one or invoking the custom icon list used on this site and then specifying pin by pin which icon to display for the pin

Default Pin Icons

The default icon used for pins can be changed by adding an icon command in the extension options:

1. Add the icon address in quotes to the googlemap tag, using icon:

<googlemap lat="36.072635" lon="-79.791975" icon="http://images.wikia.com/walkingdead/images/7/70/Markerfight.png">

Full coding example:

<googlemap lat="36.072635" lon="-79.791975" icon="http://images.wikia.com/walkingdead/images/7/70/Markerfight.png">
38.453857, -84.356461, Rick Grimes Shot
</googlemap>

Custom icons

This site has a list of custom icons that can be used. See the #Icons reference to know which letters will invoke which icon

  1. Add the following extension icons option:
    1. <googlemap lat="36.500667" lon="-82.47797" icons="http://tehcc.org/clubwiki/kml/marker{label}.png">
  2. Prefix the pin coordinates with (X) where 'X' is the letter for the pin icon desired
    1. (G) 36.502891,-82.468700

Full coding of a custom icon map:

<googlemap lat="36.500667" lon="-82.47797"width="715" height="350" icons="http://tehcc.org/clubwiki/kml/marker{label}.png">
(E) 36.50013,-82.47760
Fall Creek Falls
[[Image:WPSP Fall Creek Falls.jpg|150px|Fall Creek Falls]]
(A) 36.502632,-82.482759
Parking along Fall Creek Road
(G) 36.502891,-82.468700
Intersection to/from [[WPSP_Fall_Creek_Loop_Trail|Fall Creek Loop]]
[[Image:To D Backbone Trail.jpg|150px|Trail head sign]]
</googlemap>

Icons reference

Icons in use at this site

Letter Icon Meaning
A http://tehcc.org/clubwiki/kml/markerA.png Parking
B http://tehcc.org/clubwiki/kml/markerB.png Picturesque location
C http://tehcc.org/clubwiki/kml/markerC.png Waterfall
D http://tehcc.org/clubwiki/kml/markerD.png Alternate for picturesque
E http://tehcc.org/clubwiki/kml/markerE.png Overlook
F http://tehcc.org/clubwiki/kml/markerF.png Shelter
G http://tehcc.org/clubwiki/kml/markerG.png Trailhead/intersection/point of interest
H http://tehcc.org/clubwiki/kml/markerH.png Campground
I http://tehcc.org/clubwiki/kml/markerI.png Cave
J http://tehcc.org/clubwiki/kml/markerJ.png Water crossing - no bridge - rock-hopping
K http://tehcc.org/clubwiki/kml/markerK.png Bench
L http://tehcc.org/clubwiki/kml/markerL.png Trail bridge
M http://tehcc.org/clubwiki/kml/markerM.png Cell Tower/Antenna
N http://tehcc.org/clubwiki/kml/markerN.png Cemetery
O http://tehcc.org/clubwiki/kml/markerO.png Playground
Q http://tehcc.org/clubwiki/kml/markerQ.png Toilet
R http://tehcc.org/clubwiki/kml/markerR.png Tunnel

Search http://code.google.com/p/google-maps-icons/ for other icons to suggest, send to webmaster for inclusion

Examples

Review the markup for these pages for good examples of embedded Google Maps, using most or all of the features described above