ClubWiki:Using GMaps: Difference between revisions

From TEHCC Wiki
Jump to navigation Jump to search
(→‎Pins: Update for new Maps Extension)
m (Text replacement - "http://tehcc.org/clubwiki/" to "https://tehcc.org/clubwiki/")
 
(29 intermediate revisions by 2 users not shown)
Line 1: Line 1:
This wiki site uses a MediaWiki extension called Maps. It's full syntax description can be found at its [https://www.semantic-mediawiki.org/wiki/Category:Maps_examples home site]. Here we will just describe the basic features typically used for this site for simplicity for our users
This wiki site uses a MediaWiki extension called Maps. It's full syntax description can be found at its [https://www.semantic-mediawiki.org/wiki/Category:Maps_examples home site]. Here we will just describe the basic features typically used for this site for simplicity for our users.


== Basic use ==
== Basic use ==
Line 26: Line 26:
* kmlrezoom (yes/no center on drawn kmls; default is no)
* kmlrezoom (yes/no center on drawn kmls; default is no)
* gkml (list URLs to kmls separated by a comma)
* gkml (list URLs to kmls separated by a comma)
* markercluster (automatically groups crowded pins and zooms on click; default no)
* icon (Default icon to use for all markers/pins - only can apparently use an image on this site without the "File:" prefix)


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


== KML files ==
== KML files ==
Before you specify any markers, you can add URL(s) that point to [http://en.wikipedia.org/wiki/Keyhole_Markup_Language KML] files. Each URL should be on its own line, e.g.
KMLs are now specified within the open command. Using the kml (not sure when this is used) or gkml (the one we seem to need to use) you can add URL(s) that point to [http://en.wikipedia.org/wiki/Keyhole_Markup_Language KML] files. Each URL should be separated by a comma.


<pre><display_map gkml="http://tehcc.org/clubwiki/kml/Pinnacle_Mountain_Tower_Trail.kml,http://other.url/,...">
<pre><display_map gkml="https://tehcc.org/clubwiki/kml/Pinnacle_Mountain_Tower_Trail.kml,http://other.url/,...">
  </display_map></pre>
</display_map></pre>


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 are kept in the above referenced (tehcc.org/clubwiki/kml) folder.  Another warning is to avoid spaces in the KML title as these will not properly link, so use underscores or hyphens to connect the words.
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 are kept in the above referenced (tehcc.org/clubwiki/kml) folder.  Another warning is to avoid spaces in the KML title as these will not properly link, so use underscores or hyphens to connect the words.
Line 48: Line 50:
== Pins ==
== Pins ==
Pins are added by using the following syntax within the <nowiki><display_map></nowiki> tags. The different attributes of the pin are separated by tildes (~).  
Pins are added by using the following syntax within the <nowiki><display_map></nowiki> tags. The different attributes of the pin are separated by tildes (~).  
<pre>
<pre>
location~balloon title~balloon contents~something(pin?)~something else(visited pin?)~label(shows next to pin at all times)
Location~Title~Details~Icon~Visited Icon?~Label~???
location ~ balloon title ~ balloon contents ~ Map Icon (wiki file) ~ Visited Map icon (wiki file) ~ label(shows next to pin at all times)~ something else?
</pre>
</pre>


I'm still trying to see how to do multiple lines of information in the balloon as we did with GoogleMaps.
Full coding showing two pins, the first with a linked title and regular text with a persistent label and the second with no linked title but regular text and a small image:
 
<pre>
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:
<display_map center="36.500667,-82.47797" type="terrain" zoom="15" width="715" height="350">
<pre><display_map center="36.500667,-82.47797" type="terrain" zoom="15" width="715" height="350">
36.50013,-82.47760~[[WPSP Sinking Waters|Sinking Waters]]~Here is the location of the trail head~MarkerA.png~ ~This is where Putin Works
36.50013,-82.47760~[[WPSP Sinking Waters]]~Here is the location of the trail head;
36.502891,-82.468700~Connection~Intersection to/from [[WPSP_Fall_Creek_Loop_Trail|Fall Creek Loop]]<br>[[Image:To D Backbone Trail.jpg|150px|Trail head sign]]
36.502891,-82.468700~Connection~Intersection to/from [[WPSP_Fall_Creek_Loop_Trail|Fall Creek Loop]]<br>[[Image:To D Backbone Trail.jpg|150px|Trail head sign]]
</display_map>
</display_map>
Line 62: Line 65:


<display_map center="36.500667,-82.47797" type="terrain" zoom="15" width="715" height="350">
<display_map center="36.500667,-82.47797" type="terrain" zoom="15" width="715" height="350">
36.50013,-82.47760~[[WPSP Sinking Waters]]~Here is the location of the trail head;
36.50013,-82.47760~[[WPSP Sinking Waters|Sinking Waters]]~Here is the location of the trail head~MarkerA.png~ ~This is where Putin Works
36.502891,-82.468700~Connection~Intersection to/from [[WPSP_Fall_Creek_Loop_Trail|Fall Creek Loop]]<br>[[Image:To D Backbone Trail.jpg|150px|Trail head sign]]
36.502891,-82.468700~Connection~Intersection to/from [[WPSP_Fall_Creek_Loop_Trail|Fall Creek Loop]]<br>[[Image:To D Backbone Trail.jpg|150px|Trail head sign]]
</display_map>
</display_map>


The above commands can be used many times within a single map to create the pins needed. Note that each pin must end with (;) except the last one
The above commands can be used many times within a single map to create the pins needed.


== Pin icons ==
== 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
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. Custom icons are referenced using an image on the wiki without the "File:" prefix (e.g. MarkerA.png)


=== Default Pin Icons ===
=== Default Pin Icons ===
The default icon used for pins can be changed by adding an icon command in the extension options:
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''':  
Add the icon address in quotes to the displat_map tag, using '''icon''':  
<nowiki><googlemap lat="36.072635" lon="-79.791975" icon="http://images.wikia.com/walkingdead/images/7/70/Markerfight.png"></nowiki>
<pre><display_map icon=MarkerG.png>
38.453857,-84.356461~Rick Grimes Shot
38.462857,-84.365461~Rick Grimes Shot
38.444857,-84.347461~Rick Grimes Shot
</display_map></pre>


Full coding example:
<display_map icon=MarkerG.png>
<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
38.462857,-84.365461~Rick Grimes Shot
<nowiki></googlemap></nowiki>
38.444857,-84.347461~Rick Grimes Shot
</display_map>


=== Custom icons ===
=== 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
Custom icons are defined as the fourth of the pin parameters. This site has a list of custom icons that can be used. See the [[#Icons reference]] to know which letters will invoke which icon
 
#Add the following extension '''icons''' option:
##<nowiki><googlemap lat="36.500667" lon="-82.47797" icons="http://tehcc.org/clubwiki/kml/marker{label}.png"></nowiki>
#Prefix the pin coordinates with (X) where 'X' is the letter for the pin icon desired
##<nowiki>(G) 36.502891,-82.468700</nowiki>


Full coding of a custom icon map:
Full coding of a custom icon map:
<pre>
<pre>
<googlemap lat="36.500667" lon="-82.47797"width="715" height="350" icons="http://tehcc.org/clubwiki/kml/marker{label}.png">
<display_map width="auto" height="350">
(E) 36.50013,-82.47760
36.50013,-82.47760~Fall Creek Falls~[[Image:WPSP Fall Creek Falls.jpg|150px|Fall Creek Falls]]~MarkerE.png
Fall Creek Falls
36.502632,-82.482759~Parking along Fall Creek Road~ ~MarkerA.png
[[Image:WPSP Fall Creek Falls.jpg|150px|Fall Creek Falls]]
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]]~MarkerG.png
(A) 36.502632,-82.482759
</display_map>
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>
</pre>
</pre>
<display_map width="auto" height="350">
36.50013,-82.47760~Fall Creek Falls~[[Image:WPSP Fall Creek Falls.jpg|150px|Fall Creek Falls]]~MarkerE.png
36.502632,-82.482759~Parking along Fall Creek Road~ ~MarkerA.png
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]]~MarkerG.png
</display_map>


==== Icons reference ====
==== Icons reference ====
Icons in use at this site
Icons in use at this site
{| class="wikitable" style="text-align: left; border=1"
{| class="wikitable" style="text-align: left; border=1"
!Letter
!Filename
!Icon
!Icon
!Meaning
!Meaning
!Name used in icon lists
|----
|----
|A
|MarkerA.png
|http://tehcc.org/clubwiki/kml/markerA.png
|[[File:MarkerA.png]]
|Parking
|Parking
|Parking
|----
|----
|B
|MarkerB.png
|http://tehcc.org/clubwiki/kml/markerB.png
|[[File:MarkerB.png]]
|Picturesque location
|Picturesque location
|Photo spot
|----
|----
|C
|MarkerC.png
|http://tehcc.org/clubwiki/kml/markerC.png
|[[File:MarkerC.png]]
|Waterfall
|Waterfall
|Waterfall
|----
|----
|D
|MarkerD.png
|http://tehcc.org/clubwiki/kml/markerD.png
|[[File:MarkerD.png]]
|Alternate for picturesque
|Alternate for picturesque
|Other photo spot
|----
|----
|E
|MarkerE.png
|http://tehcc.org/clubwiki/kml/markerE.png
|[[File:MarkerE.png]]
|Overlook
|Overlook
|Overlook
|----
|----
|F
|MarkerF.png
|http://tehcc.org/clubwiki/kml/markerF.png
|[[File:MarkerF.png]]
|Shelter
|Shelter
|Shelter
|----
|----
|G
|MarkerG.png
|http://tehcc.org/clubwiki/kml/markerG.png
|[[File:MarkerG.png]]
|Trailhead/intersection/point of interest
|Trailhead/intersection/point of interest
|Point of interest
|----
|----
|H
|MarkerH.png
|http://tehcc.org/clubwiki/kml/markerH.png
|[[File:MarkerH.png]]
|Campground
|Campground
|Campground
|----
|----
|I
|MarkerI.png
|http://tehcc.org/clubwiki/kml/markerI.png
|[[File:MarkerI.png]]
|Cave
|Cave
|Cave
|----
|----
|J
|MarkerJ.png
|http://tehcc.org/clubwiki/kml/markerJ.png
|[[File:MarkerJ.png]]
|Water crossing - no bridge - rock-hopping
|Water crossing - no bridge - rock-hopping
|Water crossing
|----
|----
|K
|MarkerK.png
|http://tehcc.org/clubwiki/kml/markerK.png
|[[File:MarkerK.png]]
|Bench
|Bench
|Bench
|----
|----
|L
|MarkerL.png
|http://tehcc.org/clubwiki/kml/markerL.png
|[[File:MarkerL.png]]
|Trail bridge
|Trail bridge
|Trail bridge
|----
|----
|M
|MarkerM.png
|http://tehcc.org/clubwiki/kml/markerM.png
|[[File:MarkerM.png]]
|Cell Tower/Antenna
|Cell Tower/Antenna
|Comm tower
|----
|----
|N
|MarkerN.png
|http://tehcc.org/clubwiki/kml/markerN.png
|[[File:MarkerN.png]]
|Cemetery
|Cemetery
|Cemetery
|----
|----
|O
|MarkerO.png
|http://tehcc.org/clubwiki/kml/markerO.png
|[[File:MarkerO.png]]
|Playground
|Playground
|Playground
|----
|----
|Q
|MarkerP.png
|http://tehcc.org/clubwiki/kml/markerQ.png
|[[File:MarkerP.png]]
|Summit Marker
|Summit
|----
|MarkerQ.png
|[[File:MarkerQ.png]]
|Toilet
|Toilet
|Toilet
|----
|----
|R
|MarkerR.png
|http://tehcc.org/clubwiki/kml/markerR.png
|[[File:MarkerR.png]]
|Tunnel
|Tunnel
|Tunnel
|----
|----
|S
|MarkerS.png
|http://tehcc.org/clubwiki/kml/markerS.png
|[[File:MarkerS.png]]
|Picnic Area
|Picnic Area
|Picnic spot
|----
|MarkerT.png
|[[File:MarkerT.png]]
|Trail intersection signpost
|Trail sign
|----
|MarkerU.png
|[[File:MarkerU.png]]
|Trail road crossing
|Road crossing
|----
|MarkerV.png
|[[File:MarkerV.png]]
|Old abandoned structure or foundation
|Old structure
|----
|MarkerW.png
|[[File:MarkerW.png]]
|Horseback riding
|Horseback
|----
|MarkerX.png
|[[File:MarkerX.png]]
|Alien capsule(?!)
|Alien landing
|----
|MarkerY.png
|[[File:MarkerY.png]]
|Rest spot
|Rest
|----
|Marker1.png
|[[File:Marker1.png]]
|Skiing
|Skiing
|----
|Marker2.png
|[[File:Marker2.png]]
|Tower (fire tower - It was the best that could be found)
|Tower
|----
|powerline.png
|[[File:powerline.png]]
|Power Line
|Power line
|----
|treedown.png
|[[File:treedown.png]]
|Blowdowns on trail
|Blowdown
|----
|Rangerstation.png
|[[File:Rangerstation.png]]
|Park ranger station, HQ, or visitor's center
|Rangerstation
|----
|----
|}
|}
Search http://mapicons.nicolasmollet.com/ for other icons to suggest, send to [mailto:webmaster@tehcc.org webmaster] for inclusion
The following sites have been useful for icons. The first are in the format typically used on this site for map pins. The second are shapes that can be made to appear like the first (for consistency)
*http://mapicons.nicolasmollet.com/
*https://www.iconsdb.com/


== Examples ==
== Examples ==
Line 190: Line 275:
*[[Warriors Path State Park]] - Shows multiple KML files in use
*[[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
*[[WPSP Devil's Backbone|Devil's Backbone]] - Multiple KML files and many pins showing pictures and more
== Unexplored Features ==
Here's a list of new capabilities of the map extension that haven't been explored yet but sounds possibly useful for this site
* Drawing of lines, circles, and polygons on a map using coordinates within the tag - information [http://semantic-mediawiki.org/wiki/Maps_examples/Google_Maps_shapes here]
* Polygons on hover over a defined area - information [http://semantic-mediawiki.org/wiki/Maps_examples/Google_Maps_polygons_on_hover here]
* Searching within markers (although their examples don't seem to work - information [http://semantic-mediawiki.org/wiki/Maps_examples/Google_Maps_searchmarkers here]
* Fusion tables(???)
* [[Special:MapEditor|Map Editor]] to create lines, polygons, pin placements, etc.
* Dynamic tables and maps by searching created pages - See example [https://wiki.hackerspaces.org/Category:Pages_with_a_map_rendered_by_the_Maps_extension here] that maps and lists based on individual pages (I would really like this for both the master trails list and map but could also be a good way to handle parks with several trails)

Latest revision as of 11:12, 7 January 2023

This wiki site uses a MediaWiki extension called 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[edit]

The map is invoked by using the following basic structure

<display_map options and KML links>
(optional and multiple possible) pin locations
</display_map>

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[edit]

Available coding options are (full list here):

  • center (location which can be coordinates or place name but place names slows page render; default is centered on all listed pins)
  • width (assumes pixels by default but can also be ex, em, %; default is auto)
  • height (assumes pixels by default but can also be ex, em, %; default is 350)
  • zoom (the zoom level; 0 is the furthest away, 21 is the closest in; 15 is closest zoom for terrain)
  • type ("terrain" or "roadmap", "hybrid", or "satellite"; default is "roadmap")
  • controls (controls to place on the map, list any/all pan, zoom, type, scale, streetview)
  • zoomstyle (not sure yet, but I think we want this for small vs. large maps)
  • typestyle (not sure yet, but I think we want this for small vs. large maps)
  • kmlrezoom (yes/no center on drawn kmls; default is no)
  • gkml (list URLs to kmls separated by a comma)
  • markercluster (automatically groups crowded pins and zooms on click; default no)
  • icon (Default icon to use for all markers/pins - only can apparently use an image on this site without the "File:" prefix)

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:

<display_map center="Warriors Path State Park, TN" zoom="12" width="50%" height="200" type="terrain" controls="scale,type">
</display_map>
Loading map...

KML files[edit]

KMLs are now specified within the open command. Using the kml (not sure when this is used) or gkml (the one we seem to need to use) you can add URL(s) that point to KML files. Each URL should be separated by a comma.

<display_map gkml="https://tehcc.org/clubwiki/kml/Pinnacle_Mountain_Tower_Trail.kml,http://other.url/,...">
</display_map>

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. These are kept in the above referenced (tehcc.org/clubwiki/kml) folder. Another warning is to avoid spaces in the KML title as these will not properly link, so use underscores or hyphens to connect the words.

Pins[edit]

Pins are added by using the following syntax within the <display_map> tags. The different attributes of the pin are separated by tildes (~).

Location~Title~Details~Icon~Visited Icon?~Label~???
location ~ balloon title ~ balloon contents ~ Map Icon (wiki file) ~ Visited Map icon (wiki file) ~ label(shows next to pin at all times)~ something else?

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

<display_map center="36.500667,-82.47797" type="terrain" zoom="15" width="715" height="350">
36.50013,-82.47760~[[WPSP Sinking Waters|Sinking Waters]]~Here is the location of the trail head~MarkerA.png~ ~This is where Putin Works
36.502891,-82.468700~Connection~Intersection to/from [[WPSP_Fall_Creek_Loop_Trail|Fall Creek Loop]]<br>[[Image:To D Backbone Trail.jpg|150px|Trail head sign]]
</display_map>
Loading map...

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

Pin icons[edit]

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. Custom icons are referenced using an image on the wiki without the "File:" prefix (e.g. MarkerA.png)

Default Pin Icons[edit]

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

Add the icon address in quotes to the displat_map tag, using icon:

<display_map icon=MarkerG.png>
38.453857,-84.356461~Rick Grimes Shot
38.462857,-84.365461~Rick Grimes Shot
38.444857,-84.347461~Rick Grimes Shot
</display_map>
Loading map...

Custom icons[edit]

Custom icons are defined as the fourth of the pin parameters. This site has a list of custom icons that can be used. See the #Icons reference to know which letters will invoke which icon

Full coding of a custom icon map:

<display_map width="auto" height="350">
36.50013,-82.47760~Fall Creek Falls~[[Image:WPSP Fall Creek Falls.jpg|150px|Fall Creek Falls]]~MarkerE.png
36.502632,-82.482759~Parking along Fall Creek Road~ ~MarkerA.png
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]]~MarkerG.png
</display_map>
Loading map...

Icons reference[edit]

Icons in use at this site

Filename Icon Meaning Name used in icon lists
MarkerA.png MarkerA.png Parking Parking
MarkerB.png MarkerB.png Picturesque location Photo spot
MarkerC.png MarkerC.png Waterfall Waterfall
MarkerD.png MarkerD.png Alternate for picturesque Other photo spot
MarkerE.png MarkerE.png Overlook Overlook
MarkerF.png MarkerF.png Shelter Shelter
MarkerG.png MarkerG.png Trailhead/intersection/point of interest Point of interest
MarkerH.png MarkerH.png Campground Campground
MarkerI.png MarkerI.png Cave Cave
MarkerJ.png MarkerJ.png Water crossing - no bridge - rock-hopping Water crossing
MarkerK.png MarkerK.png Bench Bench
MarkerL.png MarkerL.png Trail bridge Trail bridge
MarkerM.png MarkerM.png Cell Tower/Antenna Comm tower
MarkerN.png MarkerN.png Cemetery Cemetery
MarkerO.png MarkerO.png Playground Playground
MarkerP.png MarkerP.png Summit Marker Summit
MarkerQ.png MarkerQ.png Toilet Toilet
MarkerR.png MarkerR.png Tunnel Tunnel
MarkerS.png MarkerS.png Picnic Area Picnic spot
MarkerT.png MarkerT.png Trail intersection signpost Trail sign
MarkerU.png MarkerU.png Trail road crossing Road crossing
MarkerV.png MarkerV.png Old abandoned structure or foundation Old structure
MarkerW.png MarkerW.png Horseback riding Horseback
MarkerX.png MarkerX.png Alien capsule(?!) Alien landing
MarkerY.png MarkerY.png Rest spot Rest
Marker1.png Marker1.png Skiing Skiing
Marker2.png Marker2.png Tower (fire tower - It was the best that could be found) Tower
powerline.png Powerline.png Power Line Power line
treedown.png Treedown.png Blowdowns on trail Blowdown
Rangerstation.png Rangerstation.png Park ranger station, HQ, or visitor's center Rangerstation

The following sites have been useful for icons. The first are in the format typically used on this site for map pins. The second are shapes that can be made to appear like the first (for consistency)

Examples[edit]

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

Unexplored Features[edit]

Here's a list of new capabilities of the map extension that haven't been explored yet but sounds possibly useful for this site

  • Drawing of lines, circles, and polygons on a map using coordinates within the tag - information here
  • Polygons on hover over a defined area - information here
  • Searching within markers (although their examples don't seem to work - information here
  • Fusion tables(???)
  • Map Editor to create lines, polygons, pin placements, etc.
  • Dynamic tables and maps by searching created pages - See example here that maps and lists based on individual pages (I would really like this for both the master trails list and map but could also be a good way to handle parks with several trails)