Template:Interactive Map/doc: Difference between revisions

From HorizonXI Wiki
No edit summary
mNo edit summary
 
(14 intermediate revisions by one other user not shown)
Line 1: Line 1:
__TOC__
__TOC__
== The Basics ==
== The Basics ==
This new map provides easy access to all available map images for available HorizonXI content. Currently the map has a small amount of interactive features that both help the user navigate between desired maps and increase convenience. All map images are a compilation from multiple sources. Map images from the Remapster project were prioritized, followed by those from SquareEnix. All maps within Rise of the Zilart, Chains of Promathia, and Treasures of Aht Urhgan. Some interactive map features within Treasures of Aht Urhgan are still under construction, but the maps themselves are available.  
This new map provides easy access to all available map images for available HorizonXI content. Currently the map has interactive features that both help the user navigate between desired maps and increase convenience. All map images are a compilation from multiple sources. Map images from the Remapster project were prioritized, followed by those from SquareEnix. All maps within Rise of the Zilart, Chains of Promathia, and Treasures of Aht Urhgan. Some interactive map features within Treasures of Aht Urhgan are still under construction, but the maps themselves are available.


== Features ==
== Features ==
The map was designed originally to give the user the freedom to quickly switch between connecting maps.
The map was designed originally to give the user the freedom to quickly switch between connecting maps. The HorizonXI watermark at the bottom reinforces that this map was built/designed exclusively for the HorizonXI server.  
{| class="wikitable"
{| class="wikitable"
|-
|-
! Demonstration !! Label !! Description
! Demonstration !! Feature !! Description
|-
|-
| [[File:Zoomdemo.gif]] || Zoom Controls || The user has two options for zooming in/out of any maps - either using the controls available on the map itself, or using the mouse wheel.   
| [[File:Zoomdemo.gif]] || Zoom Controls || The user has two options for zooming in/out of any maps - either using the controls available on the map itself, or using the mouse wheel.   
Line 16: Line 16:
|-
|-
| [[File:Backbuttondemo.gif]] || Back Icon || The back icon allows the user to move to the previous map. This icon only appears when you have a history of viewed maps.  
| [[File:Backbuttondemo.gif]] || Back Icon || The back icon allows the user to move to the previous map. This icon only appears when you have a history of viewed maps.  
|-
| <center>[[File:Ffximap horizonlogo.png]]</center> || HorizonXI Watermark || Purely aesthetic, but reinforcing this map is exclusive to the HorizonXI Wiki.
|}
|}


== Features Under Construction ==
== Showing NPCs & Map Details ==
<div class="float-container">
<div class="float-container-item-left">
[[File:Npcdemo.gif]]
[[File:Npcdemo.gif]]
* The example shown is the current status of NPCs in Upper Jeuno. These NPC layers on the top right of the map are only available if the appropriate tag was place on the specific NPC page, see [[Template:FFXIMap Markers]]. When NPCs are added to the page with the specific wikilink tag a layer is added inside the layer on the top right of the map.
</div>
=== NPCs displayed on Map ===
The example image here shows NPCs, as icons, in Upper Jeuno. This is made possible by adding known points available from the AirSkyBoat project and from HorizonXI players throughout Vana'diel. These icons are organized in categories and available to see on the map by clicking the layers button on the top right. <br><br>
Additionally, when you move the mouse over an NPC on the map (or if you're on mobile just tap the NPC icon once) a tooltip opens and shows you the current HorizonXI image for that NPC, along with the name and current in-game coordinates. Clicking the NPC icon again (or on mobile just tap again) will open that NPCs wiki page in another browser window. <br>
<br>
This feature is about 50% complete, with new wiki editors and users helping contribute daily. If you are interested, just reach out anywhere on our Discord and we will assist with more specifics !
</div>


== How can I contribute? ==
Great question ! First, I would highly encourage anyone excited about editing any portion of the HorizonXI Wiki to check out [[Editing Guidelines]] and [[Editor_Hub]]. These pages house most of the basic knowledge regarding editing/styling Wiki pages. If you're still interested in contributing to the map I would check out [[Template:FFXIMap]] and [[Template:FFXIMap Markers]].
<div class="float-container">
<div class="float-container-item-left">
=== [[Template:FFXIMap]] ===
</div>
This template provides some slightly more detailed technical description of these features, some known fixes we are working through, and the map id number scheme used for all map programming. This page is not only a great reference for map ids but also how to set up your own interactive map for supporting any editing.
</div>
<div class="float-container">
<div class="float-container-item-left">
=== [[Template:FFXIMap Markers]] ===
</div>
This is the current template that demonstrates how to add NPCs to the map. This is the only template we are using at the moment to add things to the map, so follow this if you are interested in adding NPCs that aren't currently displayed.
</div>
== Nerd Alert ==
== Nerd Alert ==
The map is powered by Leaflet, an open-source JavaScript library for interactive map enthusiasts. The software gives us the ability to use available map images and, in the case of the world map, a custom tile server. The bulk of all map related interactive features is housed in a custom extension, built specifically for the HorizonXI Wiki.
The map is powered by Leaflet, an open-source JavaScript library for interactive map enthusiasts. The software gives us the ability to use available map images and, in the case of the world map, a custom tile server. The bulk of all map related interactive features is housed in a custom extension, built specifically for the HorizonXI Wiki.  


== Attribution ==
== Attribution ==
Line 31: Line 51:
''Additional Attribution remarks listed on the bottom right of all maps<br>
''Additional Attribution remarks listed on the bottom right of all maps<br>
''
''
* Author: Shocks (Starfox9507)
'''Author:''' Shocks (Starfox9507),  '''Contributors:''' Hugin, Spiffly, Dejey
* Contributors: Hugin, Spiffly, Dejey  
<br>
 
* Leaflet - https://leafletjs.com
* Leaflet - https://leafletjs.com
* A Tale in the Desert - https://github.com/atitd-community/mediawiki-emap
* A Tale in the Desert - https://github.com/atitd-community/mediawiki-emap

Latest revision as of 22:54, 18 March 2024

The Basics

This new map provides easy access to all available map images for available HorizonXI content. Currently the map has interactive features that both help the user navigate between desired maps and increase convenience. All map images are a compilation from multiple sources. Map images from the Remapster project were prioritized, followed by those from SquareEnix. All maps within Rise of the Zilart, Chains of Promathia, and Treasures of Aht Urhgan. Some interactive map features within Treasures of Aht Urhgan are still under construction, but the maps themselves are available.

Features

The map was designed originally to give the user the freedom to quickly switch between connecting maps. The HorizonXI watermark at the bottom reinforces that this map was built/designed exclusively for the HorizonXI server.

Demonstration Feature Description
Zoomdemo.gif Zoom Controls The user has two options for zooming in/out of any maps - either using the controls available on the map itself, or using the mouse wheel.
Searchdemo.gif Search Icon Use the search icon to open a search bar. Inside the search bar you can search for any map using the name of the map, or the map id. The map id is typically used for wiki editors and can be found here Template:FFXIMap .
Connectiondemo.gif Connections Locations for connections to adjacent maps are displayed when the mouse cursor moves over either a connection or a label for a connection. The demo gif demonstrates how this is displayed on the map. If there are more than one location on the map that connect to the same adjacent map then all connections will be highlighted with the appropriate animation. Battalia Downs demonstrates this well. The actual animation marker is typically placed as close to the zone location as possible.
Backbuttondemo.gif Back Icon The back icon allows the user to move to the previous map. This icon only appears when you have a history of viewed maps.

Showing NPCs & Map Details

Npcdemo.gif

NPCs displayed on Map

The example image here shows NPCs, as icons, in Upper Jeuno. This is made possible by adding known points available from the AirSkyBoat project and from HorizonXI players throughout Vana'diel. These icons are organized in categories and available to see on the map by clicking the layers button on the top right.

Additionally, when you move the mouse over an NPC on the map (or if you're on mobile just tap the NPC icon once) a tooltip opens and shows you the current HorizonXI image for that NPC, along with the name and current in-game coordinates. Clicking the NPC icon again (or on mobile just tap again) will open that NPCs wiki page in another browser window.

This feature is about 50% complete, with new wiki editors and users helping contribute daily. If you are interested, just reach out anywhere on our Discord and we will assist with more specifics !

How can I contribute?

Great question ! First, I would highly encourage anyone excited about editing any portion of the HorizonXI Wiki to check out Editing Guidelines and Editor_Hub. These pages house most of the basic knowledge regarding editing/styling Wiki pages. If you're still interested in contributing to the map I would check out Template:FFXIMap and Template:FFXIMap Markers.

This template provides some slightly more detailed technical description of these features, some known fixes we are working through, and the map id number scheme used for all map programming. This page is not only a great reference for map ids but also how to set up your own interactive map for supporting any editing.

This is the current template that demonstrates how to add NPCs to the map. This is the only template we are using at the moment to add things to the map, so follow this if you are interested in adding NPCs that aren't currently displayed.

Nerd Alert

The map is powered by Leaflet, an open-source JavaScript library for interactive map enthusiasts. The software gives us the ability to use available map images and, in the case of the world map, a custom tile server. The bulk of all map related interactive features is housed in a custom extension, built specifically for the HorizonXI Wiki.

Attribution

Ffximap attribution.png Additional Attribution remarks listed on the bottom right of all maps
Author: Shocks (Starfox9507), Contributors: Hugin, Spiffly, Dejey