Help:Interactive Maps/Advanced

There are advanced actions you can perform to improve the experience withInteractive Maps.

CSS customization[]

Interactive Maps inherit many of the styles and colors from theTheme Designer. Should you wish to further change the look and feel of your maps, the following rules cover some common customizations that can be set incommunity CSS. Note that most of these rules apply toall maps on your wiki:

Change the background color of maps[]

Sets the background color shown behind the background image, both on the map page and in the Interactive Map Editor.

All skins:

.interactive-maps.leaflet-container,.interactive-map-editor.leaflet-container{background-color:#000000;}

Different color for light and dark mode:

.theme-fandomdesktop-light.interactive-maps.leaflet-container,.theme-fandomdesktop-light.interactive-map-editor.leaflet-container{background-color:#ffffff;}.theme-fandomdesktop-dark.interactive-maps.leaflet-container,.theme-fandomdesktop-dark.interactive-map-editor.leaflet-container{background-color:#000000;}

Minimal layout (desktop only)[]

An alternate minimal layout which removes the padding around the map and places the filters on top of the map as a semi-transparent overlay.

.interactive-maps-container{padding:0;height:inherit;min-height:inherit;}.interactive-maps__map{border-radius:0;}.interactive-maps>.interactive-maps__filters-list{width:fit-content;margin:12px0012px;position:absolute;z-index:2;}.interactive-maps__filters-list.wds-pill-button{background-color:rgba(var(--theme-page-background-color--rgb),0.75);box-shadow:01px3px0rgb(142526/30%);}.interactive-maps__filters-list.wds-pill-button:hover{box-shadow:inset0018px36pxhsl(0deg0%100%/10%);}

Fetching map data in Lua and JavaScript[]

You might have a need to process the data from a map in other parts of your wiki.

Lua[]

InScribunto Lua, use a combination of the mw.title and mw.text libraries to fetch the unparsed content of a map page (the JSON), and decode it to a Lua table:

localmapData=mw.text.jsonDecode(mw.title.new("Map:My Map"):getContent())

JavaScript (on Map pages)[]

In JavaScript, you can get a JavaScript object (the parsed JSON, with additional fields) of each map on the current page with theinteractiveMaps property inmw.config. Each value in this object is keyed by an ID which is unique to the map definition on the page, but not unique to each instance on the page (i.e. a map transcluded multiple times on the page will use the same ID).

You can search for a map with a specific name as follows.

varmapData=Object.values(mw.config.get("interactiveMaps")).find(function(m){returnm.name=="My Map";});

JavaScript (anywhere)[]

If the map isn't transcluded on the page, you canfetch the data with any of the following:

• Using the URL query parameteraction=raw at the article path:
  https://avatar.fandom.com/wiki/Map:Avatar_world_map?action=raw OR
  https://avatar.fandom.com/index.php?title=Map:Avatar_world_map&action=raw.
• With theaction API using thegetmap module:
  https://avatar.fandom.com/api.php?action=getmap&name=Avatar_world_map.
• With the action API, using thequery module (preferable since API queries may be cached server-side):
  https://avatar.fandom.com/api.php?action=query&prop=revisions&rvprop=content&rvslots=main&titles=Map:Avatar_world_map.

The following examples show a (very) minimal way of doing this. You may wish to add error checking on the fetch response to ensure it contains the actual data.

Using action=raw:

varurl="https://avatar.fandom.com/wiki/Map:Avatar_world_map?action=raw"fetch(url).then(function(r){returnr.json();}).then(function(mapData){// Do something with the map data here});

Using getmap API:

varurl="https://avatar.fandom.com/api.php?action=getmap&name=Avatar_world_map"fetch(url).then(function(r){returnr.json();}).then(function(mapData){// Do something with the map data here});

Using query API:

varurl="https://avatar.fandom.com/api.php?action=query&prop=revisions&rvprop=content&rvslots=main&titles=Map:Avatar_world_map"fetch(url).then(function(r){returnr.json();}).then(function(r){varmapData=JSON.parse(r.query.pages[0].revisions[0].slots.main.content);// Do something with the map data here});

As with any API call, on-wiki scripts can also use the built-inmw.Api library. For example, for a getmap request:

varapi=newmw.Api();api.get({action:"getmap",name:"Avatar world map"}).done(function(mapData){// Do something with the map data here});