Template:Interactive Map/doc: Difference between revisions
Starfox9507 (talk | contribs) 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 | 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 !! | ! 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. | ||
|} | |} | ||
== | == Showing NPCs & Map Details == | ||
<div class="float-container"> | |||
<div class="float-container-item-left"> | |||
[[File:Npcdemo.gif]] | [[File:Npcdemo.gif]] | ||
</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), '''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 |
|---|---|---|
 |
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. |
 |
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 . |
 |
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. |
 |
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
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
Additional Attribution remarks listed on the bottom right of all maps
Author: Shocks (Starfox9507), Contributors: Hugin, Spiffly, Dejey
- Leaflet - https://leafletjs.com
- A Tale in the Desert - https://github.com/atitd-community/mediawiki-emap
- Remapster (spalose) - https://remapster.com/
- FFXI Atlas - https://ffxi-atlas.com/
- Square Enix
