Mapping Component

Link to article: Mapping Component.

Module Styles

• (none)

Inline Styles

• font-weight:bold;

Includes

• (none)

CSS Classes

• mainmap

• subtitle

• mainmap

• subtitle

• mainmap

• subtitle

• mainmap

• mainmap

• subtitle

• mainmap

• subtitle

Page Source

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

+ 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/fragment%3Afacilities-map/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:

[[div class="mainmap"]]
[[image https://scp-wiki.wdfiles.com/local--files/fragment%3Afacilities-map/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]]

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:

[[collapsible show="+ Basics" hide="- 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/fragment%3Afacilities-map/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 [[span style="font-weight:bold;"]]https://scp-wiki.wdfiles.com/local--files/fragment%3Afacilities-map/Map-World.png[[/span]] 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.
[[/collapsible]]

[[collapsible show="+ Advanced Icons" hide="- 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:

[[div class="mainmap"]]
[[image https://scp-wiki.wdfiles.com/local--files/fragment%3Afacilities-map/Map-World.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 |
size=3 |
textclass=subtitlemap |
text= 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.
[[/div]]

[[/collapsible]]

[[collapsible show="+ Pop out Maps" hide="- 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:
[[div class="mainmap"]]
[[image https://scp-wiki.wdfiles.com/local--files/fragment%3Afacilities-map/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/fragment%3Afacilities-map/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]]

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/fragment%3Afacilities-map/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/fragment%3Afacilities-map/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/fragment%3Afacilities-map/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.
[[/collapsible]]