User:Brammers/Wiki Map Plugin

Wiki map plugin

This is the current work in progress spec for the Wiki map plugin - please use the talk page for disccussion and sugguest changes.

Version 1 - Please see version 2

Command format

The command will be something like

<wiki:map image="filename" caption="World map"
  // Hotspts a square to link to page F02
rect="0,0,50,50" page="F02"
  // Plots a fixed
  // circle of 10px wth a link to 
  // Ceres Cave Page with tooltip saying "Entrance to ceres lab"
spot="100,100" page="Ceres Cave|Entrance to ceres lab"
  // Draws a cricle of 50px linking to Garbage Dump 
circle="500,500,50 page="Garbage dump"
/>

Consider using this plugin - http://www.mediawiki.org/wiki/Extension:ImageMap

What would be nice to have

When you move the mouse over a area, it highlights the area with a white overlay. This would need probably Jquery work to work with the HTML map elements, or a complete ground up approach using Jquery using image overlays and click events. Needs investigating and some prototyping work.

Found a plugin that will do the job - http://plugins.jquery.com/project/maphilight

And the future real nice to have would be

spot="800,800" npc="Grimm" 

Which would pull out the npc template data and render it into a cluetip when the user hovers over the spot, and clicking on the spot would take the user to the Grimm NPC page.

Technical issues

The spot and rect params may have to be numbered, depending how well the wiki can handle multiple attributes of the same name. Same applies to the page attribute

Each map element may have to be (say)

rect="0,0,50,50|F02"

Other things to add?

Use the talk page! ;)

Version 2

After the quick and simple prototype test, we have a way forward. We have a good JQuery map highlight plug-in, and the ImageMap extension is an excellent starting point.

I shall be using the ImageMap extension which will be modified in the following way.

• The extension tag will be renamed to <wiki:map> This is to keep it in line with our naming and also should we wish to use the ImageMap extension in the future on it's own without our modifications, we can. (The name for <wiki:map> is open to suggestions, I'm not 100% sure mixing the THN api wiki namespaces with our own is a good idea, maybe use <ncw:map>?)
• All the code will be moved to the new NC Wiki extension. (See Special:Version)

Class support

There is a need to allow different areas of the map to be highlighted in different colours. There needs to be a way to specify map colours while keeping the syntax simple, and also the colours consistant.

MapClasses page

There will be a page in the MediaWiki namespace called MediaWiki:MapClasses which will contain settings to change the colours and options for each type of map highlight.

The page would look something like this.

default:<The default options - white highlight blue THN outline>
battlezone:<Slight red highlight>
asg:<The ASG would highlight yellow when hovered over>
npc:<White highlight with a red outline>
etc...

The text after a colon would be the meta data to allow the JQuery Map highlight to do it's processing. This would appear in a class attribute for each map area in the html. (See http://davidlynch.org/js/maphilight/docs/demo_simple.html and view the source)

Also it would be possible to put in an extra CSS class name, this would allow JQuery to do some extra processing, like adding a dot to the map if the npc class is specified, and this would be configurable and coded via the MediaWiki:NCwiki.js page. This would give us a lot of flexibility in extending the map plug-in, quickly and easily without needing server access.

Specifying a class

Take the current example:

 <ncw:map>
 image:Wiki-test-map.png
 circle 320 327 20 [[ASG|ASG]]
 rect 15 14 223 222 [[F12]]
 rect 17 222 223 429 [[E12]]
 rect 224 15 431 222 [[F13]]
 rect 223 223 431 431 [[E13]]
 </ncw:map>

To add the classes you would add the name after the shape name...so for example we turned F12 into a battlezone and highlighted the ASG.

 <ncw:map>
 image:Wiki-test-map.png
 circle:asg 320 327 20 [[ASG|ASG]]
 rect:battlezone 15 14 223 222 [[F12]]
 rect 17 222 223 429 [[E12]]
 rect 224 15 431 222 [[F13]]
 rect 223 223 431 431 [[E13]]
 </ncw:map>

So when the user hovers over all the sectors except F12 they highlights in white, and F12 highlights in red. The ASG would highlight in yellow.

Extra options to add

point x,y [[link]]

This draws a circle at a point at a set size. The size is defined in MediaWiki:NCwiki.settings.js (Note: This command is already working!)

hidekey

By default the map will show a key below the map. This will be a template which will transcluded and parsed.

gridsetup start x,start y, end x, end y,x cells, y cells

This will initalise the grid generator

secotor x,y [[Link]]

This will create a square in the right place on the map, based on the settings in the last gridsetup command.