The Wiki for Tale 6 is in read-only mode and is available for archival and reference purposes only. Please visit the current Tale 11 Wiki in the meantime.

If you have any issues with this Wiki, please post in #wiki-editing on Discord or contact Brad in-game.

Difference between revisions of "Rogarian/GoogleMapsPageRewrite"

From ATITD6
Jump to navigationJump to search
 
(27 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
__TOC__  
 
__TOC__  
  
This wiki runs a modified version of the [http://www.mediawiki.org/wiki/Extension:Google_Maps Google Maps extension] for [http://www.mediawiki.org/wiki/MediaWiki MediaWiki].  It allows wiki users to create zoom-able, pan-able maps of Egypt with customized markers.  
+
== Google Maps is no more! (A brief history) ==
  
{| border="1"
+
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. 
!Tale 5A Example
+
 
|-
+
 
|<pre>
+
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. 
<googlemap  
+
 
  width=256
+
 
  height=512
+
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 for CentOS (which would mean having to manually apply security patches and updates) or doing a complete OS upgrade/new install I decided to write a brand spanking new MediaWiki extension from scratch using the new API that would work with the current PHP version on the server.  I've tried to make it MOSTLY compatible with the prior Google Map extension.  But there are differences.  Hopefully these bugs will be slowly ironed and and we'll gain additional functionality.  This page is an attempt to document the new extension.
showposition=yes
+
 
showregion=yes
+
 
lat=1010
+
== Known Issues ==
>
+
 
0, 0, This Marker is at 0,0
+
Currently these problems still exist:
</googlemap>
+
 
 +
* <strike>Zoomed and cropped maps do not center properly</strike>
 +
* Some markers are stretched and may be off center
 +
* Only Egyptian tile sets are usable (Can't use Openmap or Google Maps tilesets)
 +
* <strike>Only the T6 map is currently available</strike>  All maps EXCEPT Tale 4A are available.
 +
* Markers require all information on 1 line vs split on various line (dealing with the popup window when clicked)
 +
* Marker tooltips are not functional
 +
 
 +
 
 +
== Egypt Maps 1.0 Introduction ==
 +
 
 +
This wiki now runs a newly written mapping extension by me for [http://www.mediawiki.org/wiki/MediaWiki MediaWiki].  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>
 +
 
 +
 
 +
== 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) (not functional at the moment).
 +
 
 +
 
 +
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">
 +
(GH) 700,600,here goes the title
 +
400, 400, here goes the title, it can contain commas but not wiki markup
 +
(S) 100, 100, Popup Text Goes here
 +
<br><br>
 +
</egypt>
 
</pre>
 
</pre>
|-
 
|
 
<googlemap
 
width=256
 
height=512
 
showposition=yes
 
showregion=yes
 
lat=1010
 
>
 
0, 0, This Marker is at 0,0
 
</googlemap>
 
|}
 
  
  
== Tag Attributes ==
+
<egypt zoom="2" height="512" lon="0" showposition="yes">
 +
(GH) 700,600,here goes the title
 +
400, 400, here goes the title, it can contain commas but not wiki markup
 +
(S) 100, 100, Popup Text Goes here
 +
<br><br>
 +
</egypt>
 +
 
 +
 
 +
== Map Customization / Tag Attributes ==
  
This extension defines a <nowiki><googlemap></nowiki> tag. Legal attributes are ('''boldface''' items are defaults):
+
To customize the map you can set various tags (attributes).
 +
Legal attributes are ('''boldface''' items are defaults):
  
 
{| border="1" cellpadding="5"  
 
{| border="1" cellpadding="5"  
!Command
+
! style="background:#FFEB8F;" | Command
!Desc
+
! style="background:#FFEB8F;" | Desc
!Options
+
! style="background:#FFEB8F;" | Options
 
|-
 
|-
 
|tale
 
|tale
 
|Which Tale to display?
 
|Which Tale to display?
|Legal values: ''1'', ''2'', ''3'', ''4'' and '''5'''.
+
|Legal values: ''1'', ''2'', ''3'', ''4'', ''4b'', ''5'' and '''6'''.  NOTE: Tale 4 does not work.
|-
 
|cursor
 
|Which mouse cursor to use on the map?
 
|Legal values: ''default'' (standard mouse cursor), ''crosshair'', '''pointer''' (hand).
 
 
|-
 
|-
 
|width
 
|width
 
|Width of the map in pixels.
 
|Width of the map in pixels.
|Defaults to '''600''' pixels.
+
|Defaults to '''512''' pixels.
 
|-
 
|-
 
|height
 
|height
 
|Height of the map in pixels.
 
|Height of the map in pixels.
|Defaults to '''400''' pixels.
+
|Defaults to '''1024''' pixels.
 
|-
 
|-
 
|lat
 
|lat
 
|The center latitude (x) on the map.
 
|The center latitude (x) on the map.
|Defaults to '''1010'''.
+
|Defaults to '''1024'''.
 
|-
 
|-
 
|lon
 
|lon
Line 66: Line 108:
 
|zoom
 
|zoom
 
|Default zoom level.
 
|Default zoom level.
|Game Map Legal values: 0 to 8 ('''1''' is default, only the T5 map contains data on levels 7 and 8).
+
|Game Map Legal values: 1 to 8 ('''2''' is default, only the T5 map contains data on levels 7 and 8).
|-
 
|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
+
|showposition or showregion
|Zoom and navigation controls.
+
|Show x,y coords under the mouse and region name.  Currently only Tale 6 maps are supported.
|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.
 
|-
 
|showposition
 
|Show x,y coords under the mouse?
 
 
|Legal values: ''yes'' and '''no'''.
 
|Legal values: ''yes'' and '''no'''.
|-
 
|showregion
 
|Show the region name under of the mouse?
 
|Legal values: ''yes'' and '''no'''.  Requires showpositions=yes; does not work in Tale 1, Tale 2 or Tale 3 maps.
 
 
|-
 
|-
 
|icons
 
|icons
 
|URL template for custom markers.
 
|URL template for custom markers.
|Use "{label}" where the name of the icon will be inserted; defaults to "<nowiki>http://maps.google.com/mapfiles/marker{label}.png</nowiki>").
+
|Use "{label}" where the name of the icon will be inserted; defaults to "'''/wiki/tale5/images/markers/marker{label}.png'''".
 
|-
 
|-
 
|icon
 
|icon
 
|URL for markers without an icon specified.
 
|URL for markers without an icon specified.
|Defaults to http://maps.google.com/mapfiles/marker.png
+
|Defaults to "'''/wiki/tale5/images/markers/marker.png'''" http://www.atitd.org/wiki/tale5/images/markers/marker.png
|-
 
|doubleclick
 
|What to do when the user double-clicks?
 
|Legal values: '''recenter''' or ''zoom''.
 
 
|-
 
|-
|scrollwheel
+
|iconsize
|Define how the scroll wheel behaves.
+
|Height and width of the icons
|Legal values: ''nothing'' or '''zoom'''.
+
|Defaults to: '''32x32'''
|-
 
|zoomstyle
 
|How does the map zoom?
 
|Legal values: ''fast'' and '''smooth''', also known as continuous zooming (only works in some browsers).
 
 
|-
 
|-
 
|}
 
|}
  
  
Other Commands (Not useful for game maps):
+
== Commands no longer supported ==
  
 
{| border="1" cellpadding="3"
 
{| border="1" cellpadding="3"
!Command
+
! style="background:#FFEB8F;" | Command
!Desc
+
! style="background:#FFEB8F;" | Desc
!Options
+
! style="background:#FFEB8F;" | Options
 +
|-
 +
|cursor
 +
|Which mouse cursor to use on the map?
 +
|Legal values: '''pointer''' (hand), ''default'' (standard mouse cursor) and ''crosshair''.
 
|-
 
|-
 
|stroke
 
|stroke
Line 130: Line 155:
 
|Show the map/hybrid/satellite selector
 
|Show the map/hybrid/satellite selector
 
|Legal values are ''yes'' and '''no'''.
 
|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''.
 +
|-
 +
|scrollwheel
 +
|Define how the scroll wheel behaves.
 +
|Legal values: ''nothing'' or '''zoom'''.
 +
|-
 +
|zoomstyle
 +
|How does the map zoom?
 +
|Legal values: ''fast'' and '''smooth''', also known as continuous zooming (only works in some browsers).
 
|-
 
|-
 
|}
 
|}
Line 136: Line 181:
 
All attributes are optional.
 
All attributes are optional.
  
== Icons ==
 
  
You can host your own collection of icons on your server, but note that they'll have the same anchor points as Google's default icon. Check out [http://mapki.com/wiki/Icon_Image_Sets Mapki's collection of icon images] for a bunch of icons you can use. To use your icons, add an icon attribute to your googlemap-tags like this
+
== 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). Check out [http://mapki.com/wiki/Icon_Image_Sets Mapki's collection of icon images] for a bunch of icons you can use. To use your icons, add an icon attribute to your googlemap-tags like this
  
  <nowiki><googlemap lat="42.711618" lon="-73.205112" zoom="2" controls="small"  
+
  <nowiki><egypt lat="42.711618" lon="-73.205112" zoom="2" controls="small"  
 
  icon="http://myserver.com/standardmarker.png"  
 
  icon="http://myserver.com/standardmarker.png"  
 
  icons="http://myserver.com/markers/marker{label}.png"></nowiki>
 
  icons="http://myserver.com/markers/marker{label}.png"></nowiki>
Line 146: Line 192:
 
[[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.
 
[[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.
  
ATITD.org now hosts local copies of all the icons Mayanah has provided.  Simply use: ''icons="/wiki/tale5/images/markers/marker{label}.png"''
 
  
Click here to show all available markers: http://www.atitd.org/wiki/tale5/images/markers
+
==Example Maps==
  
 +
===Good Default Settings===
 +
<pre>
 +
<egypt zoom=1 width=256 height=512>
 +
</egypt>
 +
</pre>
 +
<egypt zoom=1 width=256 height=512>
 +
</egypt>
  
== Markers ==
+
----
 +
 
 +
===Map Drawing Examples===
 +
 
 +
<pre>
 +
<egypt mouseoverpopup=yes>
 +
line -1000,4790:-1000,8190:0,8190:0,4790:-1000,4790  color:'#ff0000', clickable:false
 +
rect 2500,6800:4800,4600 color:'#00ff00', clickable:false, weight:1
 +
poly 2300,-5500:3200,-3400:4500,-6400 color:'#ff00ff', clickable:false
 +
circ 0,0 450 color:'#000000', clickable:false
 +
</egypt>
 +
</pre>
 +
<egypt mouseoverpopup=yes>
 +
line -1000,4790:-1000,8190:0,8190:0,4790:-1000,4790  color:'#ff0000', clickable:false
 +
rect 2500,6800:4800,4600 color:'#00ff00', clickable:false, weight:1
 +
poly 2300,-5500:3200,-3400:4500,-6400 color:'#ff00ff', clickable:false
 +
circ 0,0 450 color:'#000000', clickable:false
 +
</egypt>
 +
 
 +
---
 +
 
 +
===Map Boundries Examples===
 +
 
 +
<pre>
 +
</pre>
 +
<egypt showposition=yes>
 +
line -1000,4790:-1000,8190:0,8190:0,4790:-1000,4790 color:'#ff0000'
 +
 
 +
line 2700,-1400:2700,740:4900,740:4900,-1400:2700,-1400 color:'#ff0000'
 +
 
 +
line 800,4600:800,5500:1750,5500:1750,4600:800,4600 color:'#ff0000'
 +
 
 +
line -400,-4100:-400,-100:2700,-100:2700,-4100:-400,-4100 color:'#ff0000'
  
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; unless you set the "icons" attribute, legal icon names are the upper-case letters of the alphabet. The line should then have the latitude, then a comma, optionally a space, then the longitude, then a comma, then a label for the point. The label can include wiki mark-up (and commas). These are all legal:
+
line 3505,-8100:3505,-4100:4900,-4100:4900,-8100:3505,-8100 color:'#ff0000'
  
<nowiki><googlemap lat="1090" lon="559" zoom="2" controls="small" showposition="yes" showregion="yes" scrollwheel="nothing" icons="/wiki/tale5/images/markers/marker{label}.png" iconsize="32x32">
+
line -1000,4025:-1000,4790:200,4790:200,4025:-1000,4025 color:'#ff0000'
(GH) 600,600,here goes the title
 
400, 400, here goes the title, it can contain commas but not wiki markup
 
(S) 100, 100, here goes the title
 
first line of the caption
 
Second line of the caption, not that the caption can contain wiki markup like [[Resources]]
 
<br><br>
 
</googlemap></nowiki>
 
  
'''Example:'''
+
line 3450,6000:3450,8190:4990,8190:4990,6000:3450,6000 color:'#ff0000'
  
<googlemap lat="1090" lon="559" zoom="2" controls="small" showposition="yes" showregion="yes" scrollwheel="nothing" icons="/wiki/tale5/images/markers/marker{label}.png" iconsize="32x32">
+
line 200,1440:200,4600:1800,4600:1800,1440:200,1440 color:'#ff0000'
(GH) 600,600,here goes the title
 
400, 400, here goes the title, it can contain commas but not wiki markup
 
(S) 100, 100, here goes the title
 
first line of the caption
 
Second line of the caption, not that the caption can contain wiki markup like [[Resources]]
 
<br><br>
 
</googlemap>
 
  
== Tabbed Info Balloons ==
+
line 2170,3700:2170,6000:4200,6000:4200,3700:2170,3700 color:'#ff0000'
  
Each tab should have a plain-text title surrounded by inward-leaning slashes (like /this\) followed by a caption that can include wiki mark-up. Tabs will be attached to the previous marker. Example:
+
line -910,-8190:-910,-4100:3505,-4100:3505,-8190:-910,-8190 color:'#ff0000'
  
<nowiki>
+
line -3070,4190:-3070,8190:-1000,8190:-1000,4190:-3070,4190 color:'#ff0000'
  45.214425, -72.48114
 
  /Info\
 
  This is where Ulysses Grant is buried
 
  /Directions\
 
  [http://maps.google.com Click here] to get driving directions
 
  Or just drive in a random direction
 
  </nowiki>
 
  
That will create a point whose info balloon has two tabs. Note that you can put as much or as little space as you'd like between the title and the caption to make the syntax more readable.
+
line -3070,-600:-3070,4025:200,4025:200,-100:-400,-100:-400,-600:-3070,-600 color:'#ff0000'
  
If a point has a regular caption ''and'' tabbed captions, clicking the point will only show the tabbed captions.
+
line 200,5200:200,7900:1505,7900:1505,5500:800,5500:800,5200:200,5200 color:'#ff0000'
  
==Example Maps==
+
line 1505,5500:1505,7600:2170,7600:2170,5200:1750,5200:1750,5500:1505,5500 color:'#ff0000'
 +
</egypt>
  
===Good Default Settings===
+
---
<pre>
 
<googlemap lat=1010 lon=0 zoom=1 width=256 height=512>
 
</googlemap>
 
</pre>
 
<googlemap lat=1010 lon=0 zoom=1 width=256 height=512>
 
</googlemap>
 
  
 
===All of Egypt, Square===
 
===All of Egypt, Square===
 
<pre>
 
<pre>
<googlemap lat=1010 lon=0 zoom=1 width=512 height=512>
+
<egypt zoom=1 width=512 height=512>
</googlemap>
+
</egypt>
 
</pre>
 
</pre>
<googlemap lat=1010 lon=0 zoom=1 width=512 height=512>
+
<egypt zoom=1 width=512 height=512>
</googlemap>
+
</egypt>
  
 
----
 
----
  
And a real map of egypt:
+
=== All Tales in Table Design ===
<pre>
+
{| border="1" style="background:#CFC38E;"
<googlemap lat="29.980624" lon="31.134653" zoom="14" controls="medium" type="hybrid" selector="yes">
 
29.980624, 31.134653, PYRAMIDS
 
</googlemap>
 
</pre>
 
<googlemap lat="29.980624" lon="31.134653" zoom="14" controls="medium" type="hybrid" selector="yes">
 
29.980624, 31.134653, PYRAMIDS
 
</googlemap>
 
 
 
 
 
== Multiple Maps/Tales Examples ==
 
 
 
{| border="1"
 
 
!Tale 5 Shard A
 
!Tale 5 Shard A
 
!Tale 4 Shard B
 
!Tale 4 Shard B
Line 231: Line 277:
 
|-
 
|-
 
|
 
|
<googlemap
+
<egypt
 
  tale=5
 
  tale=5
type=game
 
lat=1010
 
lon=0
 
 
  zoom=1
 
  zoom=1
 
  width=256
 
  width=256
 
  height=512
 
  height=512
cursor=default
 
scrollwheel=nothing
 
 
  showposition=yes
 
  showposition=yes
showregion=yes
 
 
  icons="/wiki/tale5/images/markers/marker{label}.png"
 
  icons="/wiki/tale5/images/markers/marker{label}.png"
 
  iconsize="32x32"
 
  iconsize="32x32"
  iconanchor="9x32"
+
  iconanchor="10x32"
 
>
 
>
 
(GH) 770, 5752, GuildHall @ 764, 5742
 
(GH) 770, 5752, GuildHall @ 764, 5742
</googlemap>
+
</egypt>
 
|
 
|
<googlemap
+
<egypt
  tale=4
+
  tale=4b
type=gameb
 
lat=1010
 
lon=0
 
 
  zoom=1
 
  zoom=1
 
  width=256
 
  width=256
 
  height=512
 
  height=512
cursor=crosshair
 
scrollwheel=nothing
 
showposition=yes
 
 
  showregion=yes
 
  showregion=yes
 
  icons="/wiki/tale5/images/markers/marker{label}.png"
 
  icons="/wiki/tale5/images/markers/marker{label}.png"
 
  iconsize="32x32"
 
  iconsize="32x32"
  iconanchor="9x32"
+
  iconanchor="10x32"
 
>
 
>
</googlemap>
+
</egypt>
 
|
 
|
<googlemap
+
<egypt
 
  tale=4
 
  tale=4
type=game
 
lat=1010
 
lon=0
 
 
  zoom=1
 
  zoom=1
 
  width=256
 
  width=256
 
  height=512
 
  height=512
cursor=pointer
 
scrollwheel=nothing
 
showposition=yes
 
 
  showregion=yes
 
  showregion=yes
 
  icons="/wiki/tale5/images/markers/{label}.png"
 
  icons="/wiki/tale5/images/markers/{label}.png"
 
  iconsize="20x34"
 
  iconsize="20x34"
  iconanchor="9x32"
+
  iconanchor="10x32"
 
>
 
>
 
(red_MarkerC) 863, -5339, T4A Compound @ 863, -5339
 
(red_MarkerC) 863, -5339, T4A Compound @ 863, -5339
  
</googlemap>
+
</egypt>
|-
 
|
 
tale=5
 
type=game
 
showposition=yes
 
showregion=yes
 
cursor=default
 
|
 
tale=4
 
type=gameb
 
showposition=yes
 
showregion=yes
 
cursor=crosshair
 
|
 
tale=4
 
type=game
 
showposition=yes
 
showregion=yes
 
cursor=pointer
 
 
|-
 
|-
 
|}
 
|}
  
  
{| border="1"
+
{| border="1" style="background:#CFC38E;"
 
!Tale 3
 
!Tale 3
 
!Tale 2
 
!Tale 2
Line 316: Line 325:
 
|-
 
|-
 
|
 
|
<googlemap
+
<egypt
 
  tale=3
 
  tale=3
type=game
 
lat=1010
 
lon=0
 
 
  zoom=1
 
  zoom=1
 
  width=256
 
  width=256
 
  height=512
 
  height=512
scrollwheel=nothing
 
 
  showposition=yes
 
  showposition=yes
icons="/wiki/tale5/images/markers/marker{label}.png"
 
iconsize="32x32"
 
iconanchor="9x32"
 
 
>
 
>
</googlemap>
+
</egypt>
 
|
 
|
<googlemap
+
<egypt
 
  tale=2
 
  tale=2
type=game
 
lat=1010
 
lon=0
 
 
  zoom=1
 
  zoom=1
 
  width=256
 
  width=256
 
  height=512
 
  height=512
scrollwheel=nothing
 
 
  showposition=yes
 
  showposition=yes
 
  icons="/wiki/tale5/images/markers/{label}.png"
 
  icons="/wiki/tale5/images/markers/{label}.png"
 
  iconsize="20x34"
 
  iconsize="20x34"
  iconanchor="9x32"
+
  iconanchor="10x32"
 
>
 
>
  
 
(red_MarkerC) 2372, 5136, Old T2 Compound @ 2372, 5136
 
(red_MarkerC) 2372, 5136, Old T2 Compound @ 2372, 5136
  
</googlemap>
+
</egypt>
 
|
 
|
<googlemap
+
<egypt
 
  tale=1
 
  tale=1
type=game
 
lat=1010
 
lon=0
 
 
  zoom=1
 
  zoom=1
 
  width=256
 
  width=256
 
  height=512
 
  height=512
scrollwheel=nothing
 
 
  showposition=yes
 
  showposition=yes
icons="/wiki/tale5/images/markers/marker{label}.png"
 
iconsize="32x32"
 
iconanchor="9x32"
 
 
>
 
>
</googlemap>
+
</egypt>
|-
 
|
 
tale=3
 
type=game
 
showposition=yes
 
|
 
tale=2
 
type=game
 
showposition=yes
 
|
 
tale=1
 
type=game
 
showposition=yes
 
 
|-
 
|-
 
|}
 
|}

Latest revision as of 18:41, 15 February 2014

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 Leaflet API. It's small, fast and most importantly: completely self contained. After learning the new API and using Shroomdar 2 as my test bed I was able to get every working. After that I started looking for a MediaWiki mapping extension that used Leaflet and discovered 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 for CentOS (which would mean having to manually apply security patches and updates) or doing a complete OS upgrade/new install I decided to write a brand spanking new MediaWiki extension from scratch using the new API that would work with the current PHP version on the server. I've tried to make it MOSTLY compatible with the prior Google Map extension. But there are differences. Hopefully these bugs will be slowly ironed and and we'll gain additional functionality. This page is an attempt to document the new extension.


Known Issues

Currently these problems still exist:

  • Zoomed and cropped maps do not center properly
  • Some markers are stretched and may be off center
  • Only Egyptian tile sets are usable (Can't use Openmap or Google Maps tilesets)
  • Only the T6 map is currently available All maps EXCEPT Tale 4A are available.
  • Markers require all information on 1 line vs split on various line (dealing with the popup window when clicked)
  • Marker tooltips are not functional


Egypt Maps 1.0 Introduction

This wiki now runs a newly written mapping extension by me for MediaWiki. The <egypt> 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:

<egypt>
</egypt>

Or for backwards compatibility:

<googlemap>
</goolemap>

This will generate a map like:


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) (not functional at the moment).


A list of markers is available on 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:

<egypt zoom="2" height="512" lon="0" showposition="yes">
(GH) 700,600,here goes the title
400, 400, here goes the title, it can contain commas but not wiki markup
(S) 100, 100, Popup Text Goes here
<br><br>
</egypt>



Map Customization / Tag Attributes

To customize the map you can set various tags (attributes). Legal attributes are (boldface items are defaults):

Command Desc Options
tale Which Tale to display? Legal values: 1, 2, 3, 4, 4b, 5 and 6. NOTE: Tale 4 does not work.
width Width of the map in pixels. Defaults to 512 pixels.
height Height of the map in pixels. Defaults to 1024 pixels.
lat The center latitude (x) on the map. Defaults to 1024.
lon The center longitude (y) on the map. Defaults to 0.
zoom Default zoom level. Game Map Legal values: 1 to 8 (2 is default, only the T5 map contains data on levels 7 and 8).
showposition or showregion Show x,y coords under the mouse and region name. Currently only Tale 6 maps are supported. Legal values: yes and no.
icons URL template for custom markers. Use "{label}" where the name of the icon will be inserted; defaults to "/wiki/tale5/images/markers/marker{label}.png".
icon URL for markers without an icon specified. Defaults to "/wiki/tale5/images/markers/marker.png" marker.png
iconsize Height and width of the icons Defaults to: 32x32


Commands no longer supported

Command Desc 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.
scrollwheel Define how the scroll wheel behaves. Legal values: nothing or zoom.
zoomstyle How does the map zoom? Legal values: fast and smooth, also known as continuous zooming (only works in some browsers).


All attributes are optional.


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). Check out Mapki's collection of icon images for a bunch of icons you can use. To use your icons, add an icon attribute to your googlemap-tags like this

<egypt lat="42.711618" lon="-73.205112" zoom="2" controls="small" 
 icon="http://myserver.com/standardmarker.png" 
 icons="http://myserver.com/markers/marker{label}.png">

Mayanah has some instructions for using an alternate set of icons map here and a set of Mine Specific icons and Quarry Specificon the same page.


Example Maps

Good Default Settings

<egypt zoom=1 width=256 height=512>
</egypt>


Map Drawing Examples

<egypt mouseoverpopup=yes>
line -1000,4790:-1000,8190:0,8190:0,4790:-1000,4790  color:'#ff0000', clickable:false
rect 2500,6800:4800,4600 color:'#00ff00', clickable:false, weight:1
poly 2300,-5500:3200,-3400:4500,-6400 color:'#ff00ff', clickable:false
circ 0,0 450 color:'#000000', clickable:false
</egypt>

---

Map Boundries Examples


---

All of Egypt, Square

<egypt zoom=1 width=512 height=512>
</egypt>


All Tales in Table Design

Tale 5 Shard A Tale 4 Shard B Tale 4 Shard A


Tale 3 Tale 2 Tale 1