Mapping Component

NOTICE:

This is a component page used internally by the SCP Wiki. It is intended to be used and included on other pages.

{$text}

What is this?

This is the Mapping Component, a component made for the Sites Hub Revamp that allows for you to create quasi-interactive maps with features such as:

• A main map
• Many secondary zoom-in maps
• Custom zoomable icons
• Icon subtitles
• Legends
• Support for custom Icon classes

How to use

The code below is the minimal required for a functioning map with an icon and a legends window.

[[include :scp-wiki:component:mapping-source
code=-- |
]]

[[div class="mainmap"]]
[[image https://scp-wiki.wdfiles.com/local--files/jerden-insignia/Map-World.png]]

[[include :scp-wiki:component:mapping-source
facility=-- |
x=51.5 |
y=21.0 |
image=https://scp-wiki.wdfiles.com/local--files/jerden-insignia/template-area.png |
]]

[[div class="subtitle"]]
|| Legends ||
|| [[image https://scp-wiki.wdfiles.com/local--files/jerden-insignia/template-site.png]] || Site||
|| [[image https://scp-wiki.wdfiles.com/local--files/jerden-insignia/template-area.png]] || Area ||
[[/div]]

[[/div]]

Which should give you this map:

{$text}

Legends
	Site
	Area

The step-by-step on what everything does is divided into a couple sections that can be seen down below.

To understand how to create a map following the same model as the one above, just follow this guide:

+ Basics

Creating a Basic Map

[[include :scp-wiki:component:mapping-source
code=-- |
]]

This is what imports the code. You only need one of these.

[[div class="mainmap"]]
[[image https://scp-wiki.wdfiles.com/local--files/jerden-insignia/Map-World.png]]

This section opens the map itself. The only thing you may want to change here is the second line.

The second line defines the image that is used as the main map. Just replace https://scp-wiki.wdfiles.com/local--files/jerden-insignia/Map-World.png with the URL of your image and we are good to go!

---

[[include :scp-wiki:component:mapping-source
facility=-- |
x=51.5 |
y=21.0 |
image=https://scp-wiki.wdfiles.com/local--files/jerden-insignia/template-area.png |
]]

Now, this include places the icon on the map. This include has the following base arguments: facility, x, y, and image.

facility should only be defined as --, as it specifies that you want the include to be an icon. x is a percentage that defines where the icon is gonna be horizontally. y is a percentage that defines where the icon is gonna be vertically. Lastly, image is the URL of the image you're gonna use as your icon.

Other arguments related to icons will be explained in the collapsible below this one.

---

[[div class="subtitle"]]
|| Legends ||
|| [[image https://scp-wiki.wdfiles.com/local--files/jerden-insignia/template-site.png]] || Site||
|| [[image https://scp-wiki.wdfiles.com/local--files/jerden-insignia/template-area.png]] || Area ||
[[/div]]

This is the subtitle window, which should be fairly easy to understand as it is just a glorified table.

Change the links to the URLs of whatever images you are using and replace the text between || || with what that image should mean. You can even change the window's title by replacing Legends with whatever you want.

+ Advanced Icons

Customising Icons to Overlay Text

If you clicked here, you want your icon to display your site's designation, but without having to edit an image for it.

For that purpose, we give you two standard images you can use as an icon for you Site/Area:

Standard Site Icon: https://scp-wiki.wdfiles.com/local--files/jerden-insignia/template-site.png
Standard Area Icon: https://scp-wiki.wdfiles.com/local--files/jerden-insignia/template-area.png

Just put whichever of these two you need in the image argument from earlier and you should be halfway done.

Now, with that out of the way, for the juicy part:

[[include :scp-wiki:component:mapping-source
facility=-- |
x=25 |
y=50 |
image=https://scp-wiki.wdfiles.com/local--files/jerden-insignia/template-site.png |
textclass=numbermap |
text=XXX |
]]

This is the code needed to create an icon with text over it.

This include comes with the same arguments from a regular icon, plus 3 extra ones. The average user is likely to only need 2 of these extra arguments.

The arguments you're likely to use are textclass and text: textclass specifies the class you want for the text on your icon, so you just input either subtitlemap for a nice little text beneath the icon, or numbermap to put custom text on the icon. text is the text. Easy enough, right?

Well, if your text is bigger than 3 digits, it is likely you're gonna need to use the last additional argument mentioned above, which is included below.

[[include :scp-wiki:component:mapping-source
facility=-- |
x=25 |
y=50 |
image=https://scp-wiki.wdfiles.com/local--files/jerden-insignia/template-site.png |
textclass=numbermap |
text=XXX |
font-size=0.3 |
]]

font-size is what we are gonna be calling a dev argument, used mainly for special cases or behind the scenes. You can actually remove it if you won't use it as it will actually default to 0.3.

font-size defines the font size, obviously.

Finally, there is one extra argument, which allows you to change the size of your icon:

size=XX |

For the first one, just replace XX with a number; the default value is 1.5.

Here is both size and subtitlemap in use:

smth

subtitlemap and numbermap are not compatible.

Lastly, recently I've added the ability to add custom classes to icons, which means you can locally code your own special case which you can then apply to icons on the map using the following arguments:

specialcase=-- |
specialclass=SPECIALCLASSNAME |

specialcase gives you the ability to apply your own special case class to the icon, and all you need to do is replace SPECIALCLASSNAME in specialclass with the name of your new class.

+ Pop out Maps

Adding Extra Maps

If you clicked here, you want to add secondary maps to your map:. That's actually pretty easy if you know what you're doing, so here we go:

{$text}

{$text}

159

Legends
	Site
	Area

Try hovering over North America and watch as it takes over your screen :)

For an exact copy of the map above, use this code:

[[div class="mainmap"]]
[[image https://scp-wiki.wdfiles.com/local--files/jerden-insignia/Map-World.png]]

[[include :scp-wiki:component:mapping-source
facility=-- |
x=51.5 |
y=21.0 |
image=https://scp-wiki.wdfiles.com/local--files/jerden-insignia/template-area.png |
]]

[[include :scp-wiki:component:mapping-source
secmap=-- |
sx= 22.5|
sy= 35|
x=10|
y=5|
image=https://scp-wiki.wdfiles.com/local--files/jerden-insignia/Map-North-America.png|
]]

[[include :scp-wiki:component:mapping-source
facility=-- |
x=25 |
y=50 |
image=https://scp-wiki.wdfiles.com/local--files/jerden-insignia/template-site.png |
textclass=numbermap |
text=159 |
]]

[[/div]]

[[div class="subtitle"]]
|| Legends ||
|| [[image https://scp-wiki.wdfiles.com/local--files/jerden-insignia/template-site.png]] || Site||
|| [[image https://scp-wiki.wdfiles.com/local--files/jerden-insignia/template-area.png]] || Area ||
[[/div]]

[[/div]]

For the secondary map, we are interested only in the bit below:

[[include :scp-wiki:component:mapping-source
secmap=-- |
sx= 22.5|
sy= 35|
x=10|
y=5|
image=https://scp-wiki.wdfiles.com/local--files/jerden-insignia/Map-North-America.png|
]]

Here we have 6 arguments, of which you probably already recognized 3 from the Beginners Guide: x, y, and image. secmap, sx, and sy are the new ones.

secmap specifies you want your include to be a secondary map, so just leave that one alone. sx and sy are a tad tricky, as they define, respectively, the width and the height of the area you'll be hovering to make the secondary map appear relative to the total size of the main map. To highlight the hoverable area, just add the argument below and the hoverable area will become a black box:

highlighter=--|

x and y will define, respectively, the horizontal and vertical position of the top left corner of the hoverable area. image is the URL of the secondary map.

Lastly, add a [[/div]] to close the secondary map, otherwise everything will break down.

You should be able to add as many secondary maps as you want.