Widget:Map floors

Description

Together with its helper scripts, this widget manipulates API data from API:2/continents (as well as local data) into geoJSON data, and then creates customisable maps using Leaflet.js.

Can be used multiple times per page

• Widget:Map floors — This page. Creates an element with class="gw2map" and manages the inputs. Can be used multiple times on a single page.

Use once per page

• Widget:Map floors/loader — Loads the required resources for the maps to render (Leaflet.js, /data, /style and /script). Called by {{Interactive map}}.
  • Widget:Map floors/loaderLocalTiles — Variant of the above which uses tiles hosted on the wiki. Called by specifying the local_tiles parameter in the above template.
• Widget:Map floors/data — Hard-coded data not available in the API, such as vista names and guild bounty coordinates.
• Widget:Map floors/style — CSS styles
• Widget:Map floors/script — The main script
  • Widget:Map floors/script-babel — Alternative script providing support for older browsers without ES6.
• Widget:Map floors/test — Sandbox for testing inputs

Parameters

All values are integers unless stated otherwise in the description.

Map selection

continent_id

API ID of the continent (1=Tyria, 2=The Mists), default: 1

floor_id

floor ID used in the continents API request, default: 1

region_id

(optional) region ID, default: -1

map_id

(optional) the ID of the map

include_maps

(optional) a comma separated list of maps that will be selected from the requested floor data. Takes precedence over map_id. Example: include_maps=17,20,21,22,23

custom_floor

(optional) if the floor id for the data differs from the one for the tiles, this option may be used to indicate the floor ID for the tile-server request. Example: the data for PoF maps is located on floor_id=49, but the tiles are on custom_floor=1.

custom_rect

(optional) specify a custom continent_rect array that will be used for tile selection. Useful for region requests with broken continent_rect or custom map selection via include_maps. Example: custom_rect=[[0,0],[49152,49152]]

tile_adjust

(optional) adds a number of tiles around the current selection, for example if the continent_rect for a map is cropped sharply (e.g. Lornar's_Pass)

center_coords

(optional) (array of 2 positive integers), sets the initial center position for the map. Example: center_coords=[123,456]

UI settings

lang

(optional) display/API data language (0=de, 1=en, 2=es, 3=fr, 4=zh) default: 1 (the language for the UI elements is hardcoded to the wiki's language in Widget:Map_floors/loader and in Widget:Map_floors/data)

zoom

(optional) (int, 0-7) sets the initial zoom level for the map, default: 5

max_zoom

(optional) (int, 6-7) allows to override the maxZoom value, which defaults to 7 for continent 1 and 6 for continent 2.

map_controls

(optional) (bool, 0/1) toggles the map controls (zoom-, fullscreen- and layermenu-buttons), default: 1

linkbox

(optional) (bool, 0/1) (disabled for the wrapper template until further notice) toggles a box besides the map that contains navigation quicklinks that pan to the selected element and open the info popup, default: 0

events

(optional) (bool, 0/1) toggles the loading of event details, default: 0

extra_layers

(optional) adds additional layers to the map. These layers need to be defined in Widget:Map_floors/data.

init_layers

(optional) specifies the layers that are displayed when the map is loaded. This setting will overwrite the default init layers, which means that only layers listed in init_layers will be displayed on load.

Template

Rather than using the widget directly, it is recommended to use the {{Interactive map}} template wrapper, as it generates some of the inputs automatically and helps track widget usage.

All of the parameters are also exposed to the wrapper template with the difference that the template tries to get the map_id and region_id from the SMW data of a {{Location infobox}}. If include_maps is set, it will assume that the maps are from the same region and tries to fetch the region_id for the first map, which can be prevented by manually setting region_id=-1. The width (100%) and height (720px) of the map are defined in Widget:Map floors/style. The local_tiles parameter serves as workaround for wiki-hosted tiles for maps that are not yet in the API.

Example

{{Interactive map|zoom=3|linkbox=1|events=1|continent_id=1|floor_id=1|region_id=-1|include_maps=17,20,21,22,23,24,25,27,29,30,31,32,39,53,54,873|custom_rect=[[5120,7680],[32768,24576]]|extra_layers=diving_goggles,guild_bounty|init_layers=diving_goggles,map_label,guild_bounty}}

{{#if: {{{1|}}}
| {{#vardefine:mapID|{{#explode:{{#show:{{{1|{{PAGENAME}}}}}|?Has area id#|default=-1}}|,|0}}}}
| <!-- Else default to using the infobox's map id -->
  {{#if: {{{map|{{{map_id|}}}}}}
   | {{#vardefine:mapID|{{{map|{{{map_id|-1}}}}}}}}
   | {{#if: {{{include_maps|}}}
      | {{#vardefine:mapID|{{{include_maps|-1}}}}}
      | {{#if: {{#var:mapID}}
         | <!-- already defined in Location infobox-->
         | {{#vardefine:mapID|{{#explode:{{#show:{{{1|{{PAGENAME}}}}}|?Has area id#|default=-1}}|,|0}}}}
        }}
     }}
  }}
}}
{{#if: {{{region_id|}}}
 | {{#vardefine:regionID|{{{region_id|-1}}}}}
 | {{#vardefine:regionID|{{#explode:{{#ask: [[Located in.Has location type::Region]][[Has area id::{{#explode:{{#var:mapID}}|,}}]]|?Located in.Has area id#=|mainlabel=-|default=-1}}|,|0}}}}
}}<!--
-->{{#Widget:Map floors
|continent_id={{{continent_id|1}}}
|floor_id={{{floor_id|1}}}
|region_id={{#var:regionID}}
|map_id={{#var:mapID}}
|custom_floor={{{custom_floor|}}}
|lang={{{lang|1}}}
|zoom={{{zoom|5}}}
|max_zoom={{{max_zoom|}}}
|map_controls={{{map_controls|1}}}
|center_coords={{{center_coords|}}}
|custom_rect={{{custom_rect|}}}
|include_maps={{{include_maps|}}}
|extra_layers={{{extra_layers|0}}}
|init_layers={{{init_layers|0}}}
|events={{{events|0}}}
|tile_adjust={{{tile_adjust|0}}}
}}{{#Widget:Map floors/loader}}

FAQ/Known problems

These issues have previously been reported.

Icons make zone names hard to read.

And that is good the way it is. It'd be possible to "lift" the text on top via the z-index css property but it would defeat the purpose of the icons by making them unclickable.

I only see a part of the map although it would fit the container as a whole on a lower zoom level.

Getting the right zoom level is a very tricky task. leaflet.js sets it automatically from the given viewport/container size and the bounding box of the map (usually continent_rect) on a zoom level as high as possible. Since the maps are all different in size, it's impossible to just set zoom level X. Update: in fact, we do this now - zoom is set to 5 by default, but the problem with leaflet's map.fitBounds() persists nonetheless...

Some lines of the sector boundaries are crossing.

This is completely API/game data related. Rounding errors, careless mappers etc. Please complain to Anet, not me, about this.

I don't see a map. Like... not at all.

Do you have an adblocker or scriptblocker enabled? If so, disable it for the wiki and the following domain: https://cdnjs.cloudflare.com/ (leaflet)

I still don't see a map.

Ok, what browser are you running? Are you on mobile? Can you update your browser please? Try the latest Firefox or Chrome - both of which are very likely available for your OS. Very old browsers such as IE6 are not supported. If none of this works, please report on the talk page over here.

I'm on a mobile and the map is too large to fit my screen

Try the fullscreen view, it's there specifically for mobile - click the button top left under the +/- zoom control.

Can i contribute to development somewhere?

Yup, it's hosted over here on Github: https://github.com/gwmaps/gw2map

API issues affecting maps

• https://github.com/arenanet/api-cdi/issues/304 "Copy desert BL tiles to floor 2 of the tile service" (closed)