Please remember that WiKirby contains spoilers, which you read at your own risk! See our general disclaimer for details.

Help:Creating navmaps

From WiKirby, your independent source of Kirby knowledge.
Jump to navigationJump to search

One of the more fun quirks of WiKirby is the use of navmaps (short for navigation maps) to direct readers to pages in a more visual manner. This page will go into all the necessary detail regarding the creation of navmaps.

What is a navmap?

Essentially, a navmap is an image with hyperlinks embedded into it in various places. When a reader hovers the mouse over the appropriate portion of a navmap, a text box will appear which displays the name of a specific article. Clicking that area of the image will then take the reader to the article in question.

Navmaps are purely cosmetic, serving as a more interesting counterpart to simple lists or tables, but a good navmap depends on the image used, and not all of them would make for a useful map.

Creating a navmap

In order to create a new navmap, the editor will need to define a new template with an appropriate name. All navmap templates ought to contain the word "navmap" or "NavMap" in their title in order to distinguish them from other templates in the editing window, and to make searching for them easier. A good example of a name would be something like Template:Navmap-KSSU (a name which contains the word "Navmap" followed by the abbreviation for Kirby Super Star Ultra).

Once an appropriate name and image is settled on, the editor will need to make some kind of container for the navmap, preferably a simple table. Once this is in place, the editor must then use the <imagemap> container to define the map's parameters.

Once all the parameters are in place, the editor should finish off the template by linking it to the Navigation maps and Formatting templates categories. A documentation page should also be transcluded in order to explain where to insert the map in articles and which articles it should be used for.


Inside the "imagemap" container, the editor will need to define a number of lines with specific parameters as needed. An example of this is displayed in the code below (taken from Template:Navmap-KSSU):

File:KSSU Corkboard.png
rect 24 18 144 98 [[Spring Breeze]]
rect 144 36 262 108 [[Dyna Blade (main game)|Dyna Blade]]
rect 262 22 368 108 [[The Great Cave Offensive]]
rect 372 24 436 78 [[Megaton Punch]]
rect 436 38 508 88 [[Samurai Kirby]]
rect 374 92 502 134 [[Kirby Card Swipe]]
rect 9 108 124 198 [[Gourmet Race]]
rect 124 108 254 202 [[Revenge of Meta Knight]]
rect 254 118 374 216 [[Milky Way Wishes]]
rect 374 140 502 200 [[Kirby on the Draw]]
rect 18 202 148 282 [[Revenge of the King]]
rect 230 232 274 260 [[The True Arena]]
rect 182 220 356 280 [[The Arena]]
rect 374 206 502 254 [[Snack Tracks]]
rect 46 282 206 364 [[Meta Knightmare Ultra]]
rect 214 286 358 366 [[Helper to Hero]]
rect 382 268 434 306 [[Theater]]
rect 382 314 428 362 [[Sound Test]]
rect 436 308 496 370 [[Kirby Super Star Ultra|Back]]

desc none

Taking cues from the above example, here is a brief descriptor of each function, as well as some that do not appear in this specific example:

  • File - In the first line, the editor should define which file will be used for the navmap. This is possibly the most important part of the navmap, as a bad image will result in a bad map. The file in question can be resized or adjusted with additional parameters as usual.
  • rect - All of the lines in the above example use the "rect" function. This creates a rectangular area inside of the navmap where a link can be placed. Each number after the initial word defines a pixel coordinate where the rectangle's border is defined, the numbers correspond to the pixel coordinates as follows (top-left corner x, top-left corner y, bottom-right corner x, bottom-right corner y - for reference, x=0 and y=0 is the top left corner of the whole image). Once the coordinates are defined, the editor must follow with the appropriate link to finish off the rect function.
  • circle (not in example) - This function creates a circular area inside the navmap where a link can be placed. Unlike the "rect" function, only three numbers are inputted. The first two define the x and y coordinates corresponding to the center of the circle, and the third determines the circle's radius from that central point.
  • poly (not in example) - This function allows the editor to draw an irregular or otherwise differently-shaped link area inside the navmap. The editor will need to provide the x and y coordinates of each vertex in sequence, and the wiki will try its best to link these up using straight lines in the order specified.
  • default (not in example) - If desired, this function can be used to determine where the reader should be taken when clicking the image anywhere outside of the other defined areas. No coordinates are necessary for this one; only the link is needed.
  • desc - If desired, this function will allow the editor to place a link to the image itself using a special symbol. This is usually not necessary for a navmap, so the word "none" is used.

Using a map marker

Some navmaps make use of an additional feature which allows the user to define a map marker at a given coordinate on the map. This can be handy for navmaps that have several distinct locations and associated articles which use the map. In order to add map marker functionality to a navmap, the following additional pieces of code should be used:

<div style="position:relative;">

(place above code in front of <imagemap>)

<div style="position:absolute; {{#if:{{{coord1|}}}|top:{{{coord1|0}}}px; left:{{{coord2|0}}}px;|display:none;}}">{{MapMarker}}</div></div>

(place above code just after </imagemap>)

This creates a parameter on the navmap which causes the map marker to appear at the specified coordinates "coord1" (distance down from the top of the image) and "coord2" (distance right from the left end of the image). It is possible to overshoot the parameters and cause the marker to end up off the map somewhere, so be wary of the numbers entered.


  • It should be noted that functions are given priority in descending order. If two or more link areas overlap, the ones higher on the list will supersede those lower on the list.
  • Creating areas in a navmap is much more of an art than a science. As such, the editor should expect to do a lot of preview testing to make sure the links appear where they should, and there are no difficulties in using the map.
  • For more information on navmaps, see this documentation page.
KSA Parasol Waddle Dee Pause Screen Artwork.png