Latest Neocron News and Information

  • New test server patch #563 has been released to Vedeena

Difference between revisions of "Neocron Wiki:Map Plugin Guide"

From Neocron Wiki
Jump to: navigation, search
(I thinks thats most of the guide done for now)
 
(10 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
== About ==
 
== About ==
  
The NC-Wiki Map plug-in is based on a Imagemap Mediawiki plug-in written by, except a lot of enhancements have been added by, such as.
+
The NC-Wiki Map plug-in is based on a [http://www.mediawiki.org/wiki/Extension:ImageMap Imagemap Mediawiki plug-in] written by [http://en.wikipedia.org/wiki/User:Tim_Starling Tim Starling]. A lot of extra enhancements and customisations have been added to the plugin by [[User:Brammers|Brammers]].
  
* Spot highlighting when you hover over an area (This was achieved using the JQuery Maphighlight plug-in)
+
These enhancements include:-
* Extra functions to overlay new symbols onto an existing map, while keeping the original intact
+
 
* Ability to customise each area on the map with different colours and sizes
+
* Spot highlighting when you hover over an area (This was achieved using the [http://plugins.jquery.com/project/maphilight JQuery Maphighlight plug-in])
* Dynamic key generation
+
* Extra functions to overlay new symbols onto an existing map, while keeping the original image intact.
 +
* Ability to customise each area on the map with different colours and sizes.
 +
* Dynamic key generation.
  
 
=== Browser Compatibility ===
 
=== Browser Compatibility ===
Line 12: Line 14:
 
The Map Plug-in is compatible with IE7 and Firefox 2. For best results please use Firefox.
 
The Map Plug-in is compatible with IE7 and Firefox 2. For best results please use Firefox.
  
There is no support for IE6. (Seriously if you are using IE6, upgrade to IE7 or use Firefox) If you use any other browser, support is limited but we will try and address any bugs, however please don't be offended if you are told to upgrade or change your browser.
+
The plugin works with IE6, however there is no support for IE6. (Seriously if you are using IE6, upgrade to IE7 or use Firefox) If you use any other browser, support is limited but we will try and address any bugs, however please don't be offended if you are told to upgrade or change your browser.
  
 
=== Future enhancements ===
 
=== Future enhancements ===
  
Do you have an idea to improve the plug-in? Please leave your ideas on the Talk page.
+
Do you have an idea to improve the plug-in? Please leave your ideas on the [[Neocron_Wiki_talk:Map_Plugin_Guide|Talk page]].
  
 
== How to add new points ==
 
== How to add new points ==
Line 26: Line 28:
 
Ok you come across one of the fantastic map page, but it's missing something you know. Lets look at sector [[A 06]]. You know [[Mrs Sung]] is in this sector, but the NPC isn't shown there and you want to add it. Here is the sector without the NPC marked.
 
Ok you come across one of the fantastic map page, but it's missing something you know. Lets look at sector [[A 06]]. You know [[Mrs Sung]] is in this sector, but the NPC isn't shown there and you want to add it. Here is the sector without the NPC marked.
  
(Example)
+
<ncw:map class="example">
 +
Image:A_06.png|
 +
 
 +
point:genrep 118 84 [[Genrep]]
 +
point:city_entrance_nc 164 136 [[Neocron]]
 +
rect:factory 57 89 92 122 [[Simmons Factory]]
 +
 
 +
rect 10 0 217 10 [[B_06]]
 +
rect 217 10 227 227 [[A_07]]
 +
rect 217 0 227 10 [[B_07]]
 +
</ncw:map>
  
 
=== Get the URL of the Image ===
 
=== Get the URL of the Image ===
  
If you are using Firefox Right click on the image, and select Copy Image Location
+
If you are using Firefox Right click on the image, and select '''Copy Image''' Location
 
 
(Image needed: Right clicking on graphic and selecting the right option.)
 
  
(Need to add IE7 options)
+
[[Image:Map-Guide1.png|center|frame|Getting the image location in Firefox]]
  
 
=== Starting the map editor===  
 
=== Starting the map editor===  
Line 40: Line 50:
 
Open [http://toolserver.org/~dapete/ImageMapEdit/ImageMapEdit.html?en this link] in a new browser
 
Open [http://toolserver.org/~dapete/ImageMapEdit/ImageMapEdit.html?en this link] in a new browser
  
Put the image URL in the "Lorad from URL - URL" box and click on the load button. The map should be loaded into the editor for you to add points.
+
Put the image URL in the "'''Load from URL - URL'''" box and click on the load button. The map should be loaded into the editor for you to add points.
  
 
=== Adding points ===  
 
=== Adding points ===  
  
It is recommended you only add circles, however please see the advanced editing section for doing rectangles and polygons. The size of the circle isn't important, as the map plug-in will automatically correct the size of the circle .
+
It is recommended you only add circles, however please see the advanced editing section for doing rectangles and polygons. The size of the circle isn't important, as the map plug-in will automatically correct the size of the circle.
  
 
So lets add where Mrs Sung is. I select Circle, click on the map. Then I add the name of the Wiki page which the spot should link to, which is Mrs Sung.
 
So lets add where Mrs Sung is. I select Circle, click on the map. Then I add the name of the Wiki page which the spot should link to, which is Mrs Sung.
Line 50: Line 60:
 
Sometimes the page you are linking to may not exist. Don't worry, this is perfectly normal and acceptable. The wiki allows you or anyone else to write a new article at any time.
 
Sometimes the page you are linking to may not exist. Don't worry, this is perfectly normal and acceptable. The wiki allows you or anyone else to write a new article at any time.
  
(Image of Circle added in the wrong place!)
+
[[Image:Map-Guide2.png|center|frame|The circle marks where I've added the location for Mrs Sung]]
  
'''Note:''' for example purposes only, I've put Mrs Sung south of the Op, which isn't her current correct position.
+
'''Note:''' for example purposes only, I've put Mrs Sung south of the Op, which isn't her normal location.
  
 
=== Copying the information back to the wiki page===  
 
=== Copying the information back to the wiki page===  
  
At the bottom of the page there is a box with your generated points. Copy the bits between '''<nowiki><imagemap></nowiki>''' and '''<nowiki></imagemap></nowiki>''' tags only.
+
At the bottom of the page there is a box with your generated points. Only copy circle, rectangle and polygon tags between '''<nowiki><imagemap></nowiki>''' and '''<nowiki></imagemap></nowiki>''' tags.
  
(Image of selected elements)
+
[[Image:Map-Guide3.png|center|frame|Copying the right elements]]
  
 
Then paste the information just after the '''<nowiki><ncw:map></nowiki>''' tag
 
Then paste the information just after the '''<nowiki><ncw:map></nowiki>''' tag
  
{Image of information inserted into the wiki editor}
+
[[Image:Map-Guide4.png|center|frame|The elemenents added to the map tags]]
 +
 
 +
Now it's time to see the results. Click on Preview, and your new point should appear, but with no graphic marker.
 +
 
 +
[[Image:Map-Guide5.png|center|frame|The new point added...nearly]]
  
Now it's time to see the results. Click on Preview, and your new point should appear.
+
Next we will add the type to the point.
  
 
=== Adding the type to the point ===
 
=== Adding the type to the point ===
  
(Image of previewed map)
+
Since you have not given a type to the point, there is no icon for your new point, just a blue highlight. The type allows you to specify what sort of point your point it is. Since Mrs Sung is a NPC we add the '''npc''' type. For a list of types, and the recommended usage, please see the [[Project:Map Plugin (Types guide)|Map Plugin types guide]]. The format for adding the type is the '''shape name''' followed by a '''colon''' and then the '''type name'''.
 +
 
 +
So
 +
<nowiki>circle 92 150 20 [[Mrs Sung]]</nowiki>
 +
Becomes
 +
<nowiki>circle:npc 92 150 20  [[Mrs Sung]]</nowiki>
 +
 
 +
Click on save...and Mrs Sung is now added to the map.
 +
 
 +
<ncw:map class="example">
 +
Image:A_06.png|
 +
 
 +
circle:npc 92 150 20 [[Mrs Sung]]
  
Now the image of your point is (Image default) a which means you not given the circle a type. The type allows you to specify what sort of point your point it is. Since Mrs Sung is a NPC we add the npc type. For a list of types, and the recommended usage, please see the [[Map Plugin Types Guide]]. The format for adding the type is the '''shape name''' followed by a '''colon''' and then the '''type name'''.
+
point:genrep 118 84 [[Genrep]]
 +
point:city_entrance_nc 164 136 [[Neocron]]
 +
rect:factory 57 89 92 122 [[Simmons Factory]]
  
So
+
rect 10 0 217 10 [[B_06]]
 +
rect 217 10 227 227 [[A_07]]
 +
rect 217 0 227 10 [[B_07]]
 +
</ncw:map>
  
(Example}
+
== Changing points ==
  
Becomes
+
Coming soon!
  
(Example)
+
== Advanced editing ==
  
Click on save...and Mrs Sung is now added to the map.
+
Coming soon!

Latest revision as of 22:56, 9 June 2008

About

The NC-Wiki Map plug-in is based on a Imagemap Mediawiki plug-in written by Tim Starling. A lot of extra enhancements and customisations have been added to the plugin by Brammers.

These enhancements include:-

  • Spot highlighting when you hover over an area (This was achieved using the JQuery Maphighlight plug-in)
  • Extra functions to overlay new symbols onto an existing map, while keeping the original image intact.
  • Ability to customise each area on the map with different colours and sizes.
  • Dynamic key generation.

Browser Compatibility

The Map Plug-in is compatible with IE7 and Firefox 2. For best results please use Firefox.

The plugin works with IE6, however there is no support for IE6. (Seriously if you are using IE6, upgrade to IE7 or use Firefox) If you use any other browser, support is limited but we will try and address any bugs, however please don't be offended if you are told to upgrade or change your browser.

Future enhancements

Do you have an idea to improve the plug-in? Please leave your ideas on the Talk page.

How to add new points

Please note: At some point we will have a Special Page, so please check back regularly for updates. (Tip use the Watch page function)

The wiki has had all the sector pages populated with the basic map information.

Ok you come across one of the fantastic map page, but it's missing something you know. Lets look at sector A 06. You know Mrs Sung is in this sector, but the NPC isn't shown there and you want to add it. Here is the sector without the NPC marked.

GenrepNeocronSimmons FactoryB 06A 07B 07
A 06.png

Key:

  • Map Icon Zone.png Wasteland Zone
  • Map Icon Outpost.png Outpost Zone
  • Map Icon Outpost Factory.png Outpost Zone (Factory)
  • Map Icon Outpost Lab.png Outpost Zone (Lab)
  • Map Icon Outpost Mine.png Outpost Zone (Mine)
  • Map Icon Outpost Fortress.png Outpost Zone (Fortress)
  • Map Icon Zone City.png City
  • Map Icon Factory.png Outpost (Factory)
  • Map Icon Lab.png Outpost (Lab)
  • Map Icon Mine.png Outpost (Mine)
  • Map Icon Fortress.png Outpost (Fortress)
  • Map Icon Gogo.png Go-Guardian
  • Map Icon Genrep.png Genrep
  • Map Icon Asg.png ASG
  • Map Icon Ceres Lab.png Ceres Lab Entrance
  • Map Icon Doy Tunnel.png DoY Tunnel Entrance
  • Map Icon Doy Tunnel.png DoY Tunnel (Up)
  • Map Icon Doy Tunnel.png DoY Tunnel (Down)
  • Map Icon Doy Tunnel.png DoY Tunnel Exit to surface
  • Map Icon Cave.png Entrance to a Dungeon
  • Map Icon Cave.png Entrance to Regants Legacy
  • Map Icon Cave.png Entrance to Gaia Mine
  • Map Icon Interest.png Area of Interest
  • Map Icon Zone Entrance.png Entrance to a City
  • Map Icon Zone Entrance.png Entrance to Neocron
  • Map Icon Zone Entrance.png Entrance to Techhaven
  • Map Icon Zone Entrance.png Entrance to Military Base
  • Map Icon Zone Entrance.png Entrance to Twilight Guardian
  • Map Icon Zone Entrance.png Entrance to Dome Of York
  • Map Icon Npc.png NPC
  • Map Icon Vendor.png Vendor
  • Map Icon Smuggler.png Smuggler

Get the URL of the Image

If you are using Firefox Right click on the image, and select Copy Image Location

Getting the image location in Firefox

Starting the map editor

Open this link in a new browser

Put the image URL in the "Load from URL - URL" box and click on the load button. The map should be loaded into the editor for you to add points.

Adding points

It is recommended you only add circles, however please see the advanced editing section for doing rectangles and polygons. The size of the circle isn't important, as the map plug-in will automatically correct the size of the circle.

So lets add where Mrs Sung is. I select Circle, click on the map. Then I add the name of the Wiki page which the spot should link to, which is Mrs Sung.

Sometimes the page you are linking to may not exist. Don't worry, this is perfectly normal and acceptable. The wiki allows you or anyone else to write a new article at any time.

The circle marks where I've added the location for Mrs Sung

Note: for example purposes only, I've put Mrs Sung south of the Op, which isn't her normal location.

Copying the information back to the wiki page

At the bottom of the page there is a box with your generated points. Only copy circle, rectangle and polygon tags between <imagemap> and </imagemap> tags.

Copying the right elements

Then paste the information just after the <ncw:map> tag

The elemenents added to the map tags

Now it's time to see the results. Click on Preview, and your new point should appear, but with no graphic marker.

The new point added...nearly

Next we will add the type to the point.

Adding the type to the point

Since you have not given a type to the point, there is no icon for your new point, just a blue highlight. The type allows you to specify what sort of point your point it is. Since Mrs Sung is a NPC we add the npc type. For a list of types, and the recommended usage, please see the Map Plugin types guide. The format for adding the type is the shape name followed by a colon and then the type name.

So

circle 92 150 20 [[Mrs Sung]]

Becomes

circle:npc 92 150 20  [[Mrs Sung]]

Click on save...and Mrs Sung is now added to the map.

Mrs SungGenrepNeocronSimmons FactoryB 06A 07B 07
A 06.png

Key:

  • Map Icon Zone.png Wasteland Zone
  • Map Icon Outpost.png Outpost Zone
  • Map Icon Outpost Factory.png Outpost Zone (Factory)
  • Map Icon Outpost Lab.png Outpost Zone (Lab)
  • Map Icon Outpost Mine.png Outpost Zone (Mine)
  • Map Icon Outpost Fortress.png Outpost Zone (Fortress)
  • Map Icon Zone City.png City
  • Map Icon Factory.png Outpost (Factory)
  • Map Icon Lab.png Outpost (Lab)
  • Map Icon Mine.png Outpost (Mine)
  • Map Icon Fortress.png Outpost (Fortress)
  • Map Icon Gogo.png Go-Guardian
  • Map Icon Genrep.png Genrep
  • Map Icon Asg.png ASG
  • Map Icon Ceres Lab.png Ceres Lab Entrance
  • Map Icon Doy Tunnel.png DoY Tunnel Entrance
  • Map Icon Doy Tunnel.png DoY Tunnel (Up)
  • Map Icon Doy Tunnel.png DoY Tunnel (Down)
  • Map Icon Doy Tunnel.png DoY Tunnel Exit to surface
  • Map Icon Cave.png Entrance to a Dungeon
  • Map Icon Cave.png Entrance to Regants Legacy
  • Map Icon Cave.png Entrance to Gaia Mine
  • Map Icon Interest.png Area of Interest
  • Map Icon Zone Entrance.png Entrance to a City
  • Map Icon Zone Entrance.png Entrance to Neocron
  • Map Icon Zone Entrance.png Entrance to Techhaven
  • Map Icon Zone Entrance.png Entrance to Military Base
  • Map Icon Zone Entrance.png Entrance to Twilight Guardian
  • Map Icon Zone Entrance.png Entrance to Dome Of York
  • Map Icon Npc.png NPC
  • Map Icon Vendor.png Vendor
  • Map Icon Smuggler.png Smuggler

Changing points

Coming soon!

Advanced editing

Coming soon!