Rogarian: /* Map Customization / Tag Attributes */

2014-03-02T22:09:07Z

Map Customization / Tag Attributes

Rogarian: /* Map Boundries Examples */

2014-02-26T18:02:51Z

Map Boundries Examples

Rogarian: /* Map Customization / Tag Attributes */

2014-02-26T18:02:10Z

Map Customization / Tag Attributes

Rogarian: /* Known Issues */

2014-02-26T18:00:55Z

Known Issues

Rogarian: /* Google Maps is no more! (A brief history) */

2014-02-22T17:53:48Z

Google Maps is no more! (A brief history)

Rogarian: Created page with "TOC == Google Maps is no more! (A brief history) == After Google deprecated version 2 of the Google Maps API all of the maps on the wiki broke. After along and drawn out..."

2014-02-22T16:40:54Z

Created page with "__TOC__ == Google Maps is no more! (A brief history) == After Google deprecated version 2 of the Google Maps API all of the maps on the wiki broke. After along and drawn out..."

New page

__TOC__

== Google Maps is no more! (A brief history) ==

After Google deprecated version 2 of the Google Maps API all of the maps on the wiki broke. After along and drawn out process of trying to convert everything to version 3 of the Google Maps API the thought occurred to me that Google would deprecate v3 of the mapping API in the next 3-6 years and the cycle would repeat! So rather than trusting Google again (fool me once) I decided to look for a stand alone mapping API that wouldn't be dependent on any external services.

After looking at various APIs I settled on the [http://leafletjs.com/ Leaflet] API. It's small, fast and most importantly: completely self contained. After learning the new API and using [http://rogarian.atitd.org/shroomdar2/ Shroomdar 2] as my test bed I was able to get every working. After that I started looking for a [http://www.mediawiki.org/wiki/MediaWiki MediaWiki] mapping extension that used Leaflet and discovered [https://www.mediawiki.org/wiki/Extension:MultiMaps MultiMaps]. By running a local MediaWiki wiki I was able to modify the extension to use the ATITD tile set and coordinate system.

The next step was to install it on the ATITD.org server. That failed. The MultiMaps extension used conventions that required a newer version of PHP than the ATITD.org server was running. So rather than using third-party PHP packages or doing a complete OS upgrade I decided to write a brand new MediaWiki extension. I've tried to make it MOSTLY compatible with the prior Google Map extension syntax. But there are differences. Hopefully these bugs will be slowly ironed out and we'll gain additional functionality. This page is an attempt to document the new extension.

Please use the discussion tab for thoughts or suggestions.

--Rogarian

----

== Known Issues ==

* Tale 4A tileset isn't available (naming convention issue) - Currently shows T6 map instead.

----

== Egypt Maps Introduction ==

The <nowiki><egypt></nowiki> tag allows wiki users to create zoom-able, pan-able maps of Egypt with customized markers.

Simply add the following on a wiki page to create a default map:

<pre>
<egypt>
</egypt>
</pre>

Or for backwards compatibility:
<pre>
<googlemap>
</goolemap>
</pre>

This will generate a map like:
<egypt>
</egypt>

----

== Map Customization / Tag Attributes ==

To customize the map you can set the following tags (attributes):

{| border="1" cellpadding="5"
! style="background:#FFEB8F;" | Command
! style="background:#FFEB8F;" | Default
! style="background:#FFEB8F;" | Description
! style="background:#FFEB8F;" | Options
|-
|tale
|6
|Which Tale to display?
|Legal values: '''1''', '''2''', '''3''', ''4'', '''4b''', '''5''' and '''6'''. Note: Tale 4 (aka T4A) does not work.
|-
|width
|512
|Width of the map in pixels.
|
|-
|height
|1024
|Height of the map in pixels.
|
|-
|lat
|1024
|The center latitude (x) on the map.
|
|-
|lon
|0
|The center longitude (y) on the map.
|
|-
|zoom
|2
|Default zoom level.
|Game Map Legal values: 1 to 8 - only tales T5 and up contains data on levels 7 and 8. Non-game: 1 to 18 (varies based on service and location)
|-
|mode
|game
|Option to change map services.
|Legal values: '''game''' or '''osm''' (OpenStreetMap), '''mapq''' (MapQuest standard) and '''mapqoa''' (Mapquest Open Aerial).
|-
|showposition
|yes
|Show x,y coords under the mouse. Will show latitude and longitude on non-game maps.
|Legal values: '''yes''' and '''no'''.
|-
|showregion
|yes
|Shows the region name under the mouse. Only Tale 6 game map is supported. Note: Does not work on non-game maps.
|Legal values: '''yes''' and '''no'''.
|-
|showmeasure
|yes
|Adds a measuring control to the map to mark a path and show distances in coords. Note: Does not work on non-game maps.
|Legal values: '''yes''' and '''no'''.
|-
|showzoom
|yes
|Adds a zoom control to the map.
|Legal values: '''yes''' and '''no'''.
|-
|showfullscreen
|yes
|Adds a control to allowing viewing the map in full screen mode.
|Legal values: '''yes''' and '''no'''.
|-
|icons
|(see description)
|URL template for custom markers. Default: /wiki/tale5/images/markers/marker{label}.png
|Use "{label}" where the name of the icon will be inserted.
|-
|icon
|(see description)
|URL for markers without an icon specified. Default: /wiki/tale5/images/markers/marker.png
|Default icon to use if one isn't defined.
|-
|iconsize
|32x32
|Height and width of the icons
|
|-
|iconanchor
|10,32
|Height and width of the icon anchor point
|Useful when using non-local markers.
|-
|autosizeicons
|yes
|Automatically adjusts icon size for locally hosted markers. Disable this if using external markers!
|Legal values: '''no''' or '''yes'''
|-
|scrollwheel
|zoom
|Define how the scroll wheel behaves.
|Legal values: '''nothing''' or '''zoom'''.
|-
|mouseoverpopup
|no
|Show marker popups on marker mouseover. 
Note: Usage can make links in popups impossible to click!
|Legal values: '''no''' or '''yes'''
|-
|}

----

== Commands no longer supported ==

{| border="1" cellpadding="3"
! style="background:#5F5B5F;" | Command
! style="background:#5F5B5F;" | Desc
! style="background:#5F5B5F;" | Options
|-
|cursor
|Which mouse cursor to use on the map?
|Legal values: '''pointer''' (hand), ''default'' (standard mouse cursor) and ''crosshair''.
|-
|stroke
|Width of paths, in pixels.
|Does not work in game maps.
|-
|scale
|Show the scale?
|Legal values are ''yes'' and '''no'''.
|-
|overview
|Show the inset navigation map?
|Legal values are ''yes'' and '''no'''.
|-
|selector
|Show the map/hybrid/satellite selector
|Legal values are ''yes'' and '''no'''.
|-
|type
|The type of map to display.
|Game Maps: '''game''' - Shard A, ''gameb'' - Shard B, Normal Google Maps: ''normal'' (or, equivalently, ''map'') - Normal Google Map, ''terrain'', ''hybrid'', and ''satellite''.
|-
|controls
|Zoom and navigation controls.
|Legal values: ''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.
|-
|doubleclick
|What to do when the user double-clicks?
|Legal values: '''recenter''' or ''zoom''.
|-
|zoomstyle
|How does the map zoom?
|Legal values: ''fast'' and '''smooth''', also known as continuous zooming (only works in some browsers).
|-
|}

----

== Markers ==

In the content of the tag, you can define one marker per line.

Each line may or may not start with an icon name in parentheses.

The line should then have the latitude (x), then a comma, optionally a space, then the longitude (y), then a comma, then text for the popup window.

The popup text can include wiki mark-up (and commas). Long sections of text may be split over several lines using a backslash (\) at the end of the line.

A list of markers is available on [[User:Mayanah/map|Mayanahs map page.]]

ATITD.org now hosts local copies of most of the icons Mayanah graciously provided.

These are used by default if the ''icons'' tag is not provided; the icons follow the same naming convention on Mayanahs page.

Click here to show all locally hosted markers: http://www.atitd.org/wiki/tale5/images/markers or visit [[Rogarian/GoogleMapMarkerTest]] which shows all 1461 locally stored pins ('''Warning: will be VERY slow!''').

'''Marker Usage Example:'''

<pre>
<egypt zoom="2" height="512" lon="0" showposition="yes" scrollwheel="nothing">
(GH) 700,600, This text is in the popup!
400, 400, More popup text. It can contain '''wiki markup''' text. \
Also, text can be split over multiple lines as long as the \
last character is a backslash (\). \
It can also contain "quotes". \
 \
[http://www.mediawiki.org/wiki/MediaWiki MediaWiki Link]
(S) 100, 100, Popup Text Goes here
</egypt>>
</pre>

<egypt zoom="2" height="512" lon="0" showposition="yes" scrollwheel="nothing">
(GH) 700,600, This text is in the popup!
400, 400, More popup text. It can contain '''wiki markup''' text. \
Also, text can be split over multiple lines as long as the \
last character is a backslash (\). \
It can also contain "quotes". \
 \
[http://www.mediawiki.org/wiki/MediaWiki MediaWiki Link]
(S) 100, 100, Popup Text Goes here
</egypt>

----

== Customized Icons ==

You can host your own collection of icons on your server, but note that they'll have the same anchor points as ATITD.org's default icon (32x32).

Otherwise make sure you disable '''autosizeicons''' and specify the '''iconsize''' and '''iconanchors'''.

To use your icons, add an icon attribute to your maps like this:

<pre>
<egypt lat="42.711618" lon="-73.205112" zoom="2"
icon="http://myserver.com/standardmarker.png"
icons="http://myserver.com/markers/marker{label}.png"
iconsize="32x32"
iconanchor="10,32"
autosizeicons="no">
</egypt>
</pre>

[[User:Mayanah|Mayanah]] has some instructions for using an alternate set of icons [[User:Mayanah/map|map here]] and a set of [[User:Mayanah/map#Mine_Specific|Mine Specific]] icons and [[User:Mayanah/map#Quarry_Specific|Quarry Specific]]on the same page.

----

== Drawing Commands ==

{| border="1" cellpadding="3"
! style="background:#FFEB8F;" | Command
! style="background:#FFEB8F;" | Description
! style="background:#FFEB8F;" | Options
|-
|line ''path'' option1:value, option2:value, ... optionN:value[\] ''[popup text]''
|Draws a line along a path.
|Path format: coordx1,coordy1:x2,y2:x3,y3:...xN,yN
|-
|rect ''boundary'' option1:value, option2:value, ... optionN:value[\] ''[popup text]''
|Draws a rectangle defined by ''boundary''.
|Boundary: coordx1,coordy1:x2,y2
|-
|poly ''boundary'' option1:value, option2:value, ... optionN:value[\] ''[popup text]''
|Draws a filled in polygon defined by ''boundary''.
|Boundary format: coordx1,coordy1:x2,y2:x3,y3:...xN,yN
|-
|circ x,y radius option1:value, option2:value, ... optionN:value[\] ''[popup text]''
|Draws a filled circle defined by coords and radius.
|Format: coordx1,coordy1 radius
|-
|}

Popup text is ''optional''. They are the same as markers except the popup text begins on the second line.

The popup text can include wiki mark-up (and commas). Lines may be split using a backslash (\).

----

== Drawing Options ==

{| border="1" cellpadding="3"
! style="background:#FFEB8F;" | Option
! style="background:#FFEB8F;" | Type
! style="background:#FFEB8F;" | Default
! style="background:#FFEB8F;" | Desc
|-
|stroke
|Boolean
|true
| Whether to draw stroke along the path. Set it to false to disable borders on polygons or circles.
|-
|color
|String
|'#03f'
|Stroke color.
|-
|weight
|Number
|5
|Stroke width in pixels.
|-
|opacity
|Number
|0.5
|Stroke opacity.
|-
|fill
|Boolean
|depends
|Whether to fill the path with color. Set it to false to disable filling on polygons or circles.
|-
|fillColor
|String
|same as color
|Fill color.
|-
|fillOpacity
|Number
|0.2
|Fill opacity.
|-
|dashArray
|String
|null
|A string that defines the stroke dash pattern. Doesn't work on canvas-powered layers (e.g. Android 2). 
It's a list of comma separated <length>s and <percentage>s that specify the lengths of alternating dashes and gaps. 
If an odd number of values is provided, then the list of values is repeated to yield an even number of values. 
Thus, 5,3,2 is equivalent to 5,3,2,5,3,2.
|-
|lineCap
|String
|null
|A string that defines shape to be used at the end of the stroke. 
Legal values: '''butt''', '''round''' or '''square'''.
|-
|lineJoin
|String
|null
|A string that defines shape to be used at the corners of the stroke. 
Legal values: '''butt''', '''round''' or '''square'''.
|-
|}

Note: ''String'' types must be enclosed in singles quotes: '''string'''

----

==Example Maps==

===Good Default Settings===
<pre>
<egypt zoom=1 width=256 height=512>
</egypt>
</pre>
<egypt zoom=1 width=256 height=512>
</egypt>

----

===Map Drawing Examples===

<pre>
<egypt>
line -1000,4790:-1000,8190:0,8190:0,4790:-1000,4790 color:'#ff0000', lineCap:'round', weight:10
rect 2500,6800:4800,4600 color:'#00ff00', weight:1
poly 2300,-5500:3200,-3400:4500,-6400 color:'#ff00ff', dashArray:'15, 10, 5, 10, 15'\
The Egyptian Triangle? \
Is there such a thing? \
Check [https://www.google.com/search?q=egyptian+triangle Google!]
circ 0,0 450 color:'#000000'
circ -1500,-4000 600 color:'#0000FF', fill:false\
Bullseye
line -1500,-3200:-1500,-4800 color:'#ff0000', opacity:1\
Bullseye
line -2300,-4000:-700,-4000 color:'#ff0000', opacity:1\
Bullseye
</egypt>
</pre>

<egypt>
line -1000,4790:-1000,8190:0,8190:0,4790:-1000,4790 color:'#ff0000', lineCap:'round', weight:10
rect 2500,6800:4800,4600 color:'#00ff00', weight:1
poly 2300,-5500:3200,-3400:4500,-6400 color:'#ff00ff', dashArray:'15, 10, 5, 10, 15'\
The Egyptian Triangle? \
Is there such a thing? \
Check [https://www.google.com/search?q=egyptian+triangle Google!]
circ 0,0 450 color:'#000000'
circ -1500,-4000 600 color:'#0000FF', fill:false\
Bullseye
line -1500,-3200:-1500,-4800 color:'#ff0000', opacity:1\
Bullseye
line -2300,-4000:-700,-4000 color:'#ff0000', opacity:1\
Bullseye
</egypt>

----

===Map Boundries Examples===

<pre>
<egypt showposition=yes>
# Four Corners
line -1000,4025:-1000,4790:200,4790:200,4025:-1000,4025 color:'#ff0000'
# Valley of Kings
line -3070,4190:-3070,8190:-1000,8190:-1000,4190:-3070,4190 color:'#ff0000'
Must draw this on top of adjoining areas so it's on top in the z-order
# Cat's Claw Ridge
line -1000,4790:-1000,8190:0,8190:0,4790:-1000,4790 color:'#0000ff',opacity:1\
This is a pop for the blue line. \
This is the more text for the blue lines popup.
# Cradle of the Sun
line 2700,-1400:2700,740:4900,740:4900,-1400:2700,-1400 color:'#ff0000'
# Midland Valley
line 800,4600:800,5500:1750,5500:1750,4600:800,4600 color:'#ff0000'
# Seven Lakes
line -400,-4100:-400,-100:2700,-100:2700,-4100:-400,-4100 color:'#ff0000'
# Eastern Grounds
line 3505,-8100:3505,-4100:4900,-4100:4900,-8100:3505,-8100 color:'#ff0000'
# Lake of Reeds
line 3450,6000:3450,8190:4990,8190:4990,6000:3450,6000 color:'#ff0000'
# River Plains
line 200,1440:200,4600:1800,4600:1800,1440:200,1440 color:'#ff0000'
# Sinai
line 2170,3700:2170,6000:4200,6000:4200,3700:2170,3700 color:'#ff0000'
# South Egypt
line -910,-8190:-910,-4100:3505,-4100:3505,-8190:-910,-8190 color:'#ff0000'
# Desert of Shades
line -3070,-600:-3070,4025:200,4025:200,-100:-400,-100:-400,-600:-3070,-600 color:'#ff0000'
# Old Egypt
line 200,5200:200,7900:1505,7900:1505,5500:800,5500:800,5200:200,5200 color:'#ff0000'
# Desert of Nomads
line 1505,5500:1505,7600:2170,7600:2170,5200:1750,5200:1750,5500:1505,5500 color:'#ff0000'
</egypt>
</pre>

<egypt showposition=yes>
# Four Corners
line -1000,4025:-1000,4790:200,4790:200,4025:-1000,4025 color:'#ff0000'
# Valley of Kings
line -3070,4190:-3070,8190:-1000,8190:-1000,4190:-3070,4190 color:'#ff0000'
Must draw this on top of adjoining areas so it's on top in the z-order
# Cat's Claw Ridge
line -1000,4790:-1000,8190:0,8190:0,4790:-1000,4790 color:'#0000ff',opacity:1\
This is a pop for the blue line. \
This is the more text for the blue lines popup.
# Cradle of the Sun
line 2700,-1400:2700,740:4900,740:4900,-1400:2700,-1400 color:'#ff0000'
# Midland Valley
line 800,4600:800,5500:1750,5500:1750,4600:800,4600 color:'#ff0000'
# Seven Lakes
line -400,-4100:-400,-100:2700,-100:2700,-4100:-400,-4100 color:'#ff0000'
# Eastern Grounds
line 3505,-8100:3505,-4100:4900,-4100:4900,-8100:3505,-8100 color:'#ff0000'
# Lake of Reeds
line 3450,6000:3450,8190:4990,8190:4990,6000:3450,6000 color:'#ff0000'
# River Plains
line 200,1440:200,4600:1800,4600:1800,1440:200,1440 color:'#ff0000'
# Sinai
line 2170,3700:2170,6000:4200,6000:4200,3700:2170,3700 color:'#ff0000'
# South Egypt
line -910,-8190:-910,-4100:3505,-4100:3505,-8190:-910,-8190 color:'#ff0000'
# Desert of Shades
line -3070,-600:-3070,4025:200,4025:200,-100:-400,-100:-400,-600:-3070,-600 color:'#ff0000'
# Old Egypt
line 200,5200:200,7900:1505,7900:1505,5500:800,5500:800,5200:200,5200 color:'#ff0000'
# Desert of Nomads
line 1505,5500:1505,7600:2170,7600:2170,5200:1750,5200:1750,5500:1505,5500 color:'#ff0000'
</egypt>

---

===All of Egypt, Square===
<pre>
<egypt zoom=1 width=512 height=512>
</egypt>
</pre>
<egypt zoom=1 width=512 height=512>
</egypt>

----
===All of Egypt, Square, No visual controls===
<pre>
<egypt zoom=1 width=512 height=512 showfullscreen=no showzoom=no showposition=no showregion=no showmeasure=no>
</egypt>
</pre>
<egypt zoom=1 width=512 height=512 showfullscreen=no showzoom=no showposition=no showregion=no showmeasure=no>
</egypt>

----

===MapQuest Example===
<pre>
<egypt zoom=11 width=512 height=512 mode=mapqoa lat=29.9792 lon=31.1344>
</egypt>
</pre>
<egypt zoom=11 width=512 height=512 mode=mapqoa lat=29.9792 lon=31.1344>
</egypt>

----

=== All Tales in Table Design ===
{| border="1" style="background:#CFC38E;"
!Tale 5 Shard A
!Tale 4 Shard B
!Tale 4 Shard A
|-
|
<egypt
tale=5
zoom=1
width=256
height=512
showposition=yes
icons="http://www.atitd.org/wiki/tale5/images/markers/marker{label}.png"
iconsize="32x32"
iconanchor="10x32"
>
(GH) 770, 5752, GuildHall @ 764, 5742
</egypt>
|
<egypt
tale=4b
zoom=1
width=256
height=512
showregion=yes
icons="/wiki/tale5/images/markers/marker{label}.png"
iconsize="32x32"
iconanchor="10x32"
>
</egypt>
|
<egypt
tale=4
zoom=1
width=256
height=512
showregion=yes
icons="http://www.atitd.org/wiki/tale5/images/markers/{label}.png"
>
(red_MarkerC) 863, -5339, T4A Compound @ 863, -5339

</egypt>
|-
|}

{| border="1" style="background:#CFC38E;"
!Tale 3
!Tale 2
!Tale 1
|-
|
<egypt
tale=3
zoom=1
width=256
height=512
showposition=yes
>
</egypt>
|
<egypt
tale=2
zoom=1
width=256
height=512
showposition=yes
icons="http://www.atitd.org/wiki/tale5/images/markers/{label}.png"
>

(red_MarkerC) 2372, 5136, Old T2 Compound @ 2372, 5136

</egypt>
|
<egypt
tale=1
zoom=1
width=256
height=512
showposition=yes
>
</egypt>
|-
|}

← Older revision		Revision as of 18:00, 26 February 2014
Line 22:		Line 22:


−	* ~~Tale 4A tileset isn't available (naming convention issue) - Currently shows T6 map instead.~~	+	* None!

← Older revision		Revision as of 17:53, 22 February 2014
Line 6:		Line 6:


−	After looking at various APIs I settled on the [http://leafletjs.com/ Leaflet] API. It's small, fast and most importantly: completely self contained. After learning the new API and using [http://rogarian.atitd.org/shroomdar2/ Shroomdar 2] as my test bed I was able to get every working. After that I started looking for a [http://www.mediawiki.org/wiki/MediaWiki MediaWiki] mapping extension that used Leaflet and discovered [https://www.mediawiki.org/wiki/Extension:MultiMaps MultiMaps]. By running a local MediaWiki wiki I was able to modify the extension to use the ATITD tile set and coordinate system.	+	After looking at various APIs I settled on the [http://leafletjs.com/ Leaflet] API. It's small, fast and most importantly: completely self contained. After learning the new API and using [http://rogarian.atitd.org/shroomdar2/ Shroomdar 2] as my test bed I was able to get every thing working. After that I started looking for a [http://www.mediawiki.org/wiki/MediaWiki MediaWiki] mapping extension that used Leaflet and discovered [https://www.mediawiki.org/wiki/Extension:MultiMaps MultiMaps]. By running a local MediaWiki wiki I was able to modify the extension to use the ATITD tile set and coordinate system.

@@ Line 98: / Line 98: @@
 |showposition
 |yes
-|Show x,y coords under the mouse.  Will show latitude and longitude on non-game maps.
+|Show x,y coords under the mouse.  Will show latitude and longitude on non-game maps.<hr/>Clicking on the coordinates window will bring up an input window.<br />A marker will appear at the entered coordinates.<br />Clicking on the marker will remove it from the map.
 |Legal values: '''yes''' and '''no'''.
 |-

@@ Line 442: / Line 442: @@
 <pre>
-<egypt showposition=yes>
+<egypt>
 # Four Corners
 line -1000,4025:-1000,4790:200,4790:200,4025:-1000,4025 color:'#ff0000'
@@ Line 477: / Line 477: @@
 </pre>
-<egypt showposition=yes>
+<egypt>
 # Four Corners
 line -1000,4025:-1000,4790:200,4790:200,4025:-1000,4025 color:'#ff0000'

@@ Line 64: / Line 64: @@
 |6
 |Which Tale to display?
-|Legal values: '''1''', '''2''', '''3''', ''4'', '''4b''', '''5''' and '''6'''. Note: Tale 4 (aka T4A) does not work.
+|Legal values: '''1''', '''2''', '''3''', '''4''', '''4b''', '''5''' and '''6'''.
 |-
 |width
@@ Line 103: / Line 103: @@
 |showregion
 |yes
-|Shows the region name under the mouse.  Only Tale 6 game map is supported.<br>Note: Does not work on non-game maps.
+|Shows the region name under the mouse.  Only T4 - T6 game maps are supported.<br>Note: Does not work on non-game maps.
 |Legal values: '''yes''' and '''no'''.
 |-

WikiMaps - Revision history

Rogarian: /* Map Customization / Tag Attributes */

Rogarian: /* Map Boundries Examples */

Rogarian: /* Map Customization / Tag Attributes */

Rogarian: /* Known Issues */

Rogarian: /* Google Maps is no more! (A brief history) */

Rogarian: Created page with "__TOC__ == Google Maps is no more! (A brief history) == After Google deprecated version 2 of the Google Maps API all of the maps on the wiki broke. After along and drawn out..."

Rogarian: Created page with "TOC == Google Maps is no more! (A brief history) == After Google deprecated version 2 of the Google Maps API all of the maps on the wiki broke. After along and drawn out..."