User blog:Fujihita/Interactive map with Template:Node tutorial

Introduction
A new event page layout shipped with Interactive map comes out this Fall.

This blog is a step-by-step tutorial on how to create a multi-difficulty interactive map from scratch using Template:Node. This tutorial will cover the usage steps beyond what was covered in the template's documentation.

Each step of the tutorial includes a sample code and the corresponding preview of the code. New code sections added during each step will be denoted in bold, changeable parameters will be denoted in red. Editors are expected to change the red parameters to suit the circumstance

-- Fujihita (talk) 14:58, November 10, 2015 (UTC)

Set Map
Set the background as the above image, the dimension of the background map to 300px

Set Node
Set the nodes on the map by filling out coordinates, node type, and link.

See Template:Node for more information.

Coordinate
To find the  and   coordinates, download the image to any image editor of choice (Photoshop/GIMP), scale the image to down to the dimension (300px) set in the Set Map step.

Alternatively, one can set the coordinate with decent precision via trial and error with Wiki's Preview button

Tabview Link
In tabview model whose hierarchy is: The link for node Z, Easy difficulty should be  instead of. This will work correctly when viewed from the main page.
 * Main page
 * Main page/Sub page 1
 * Main page/Sub page 2

Extra: Enemy pattern list
Insert these pattern lists below the comment  in the appropriate section from the above codes.

{| class="wikitable mw-collapsible mw-collapsed" width="100%" !colspan="2"|Enemy pattern list code !Code !Output

A (Easy)
back to map

Z (Easy)
back to map
 * }

Hide section header
To hide the section header, use  instead of

Final result
{| class="wikitable mw-collapsible mw-collapsed" width="100%" !colspan="2"|Final result code !Code !Output Easy=

Click on the nodes to see pattern info

A (Easy)
back to map

Z (Easy)
back to map


 * -|Medium=

Click on the nodes to see pattern info


 * }