Help:Interactive Maps/Advanced

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

CSS customization

Interactive Maps inherit many of the styles and colors from the Theme 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 in community CSS. Note that most of these rules apply to all 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;
}

Center custom marker icons

By default, icons are anchored to the bottom center of the coordinate. This means that the image appears above the coordinate and not centered on it, which may be an issue for maps that require precisely placed markers. The following CSS negates this offset for custom icons.

.MapMarker-module_markerCustomIcon__YfQnB {
    margin-top: -13px !important;
}

/* Adjust popup offset to account for the above. This will affect popups for default markers too! */
.leaflet-popup {
    margin-bottom: 8px;
}

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: 12px 0 0 12px;
    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: 0 1px 3px 0 rgb(14 25 26 / 30%);
}

.interactive-maps__filters-list .wds-pill-button:hover {
    box-shadow: inset 0 0 18px 36px hsl(0deg 0% 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

In Scribunto 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:

local mapData = 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 the interactiveMaps property in mw.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.

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

JavaScript (anywhere)

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

• Using the URL query parameter action=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 the action API using the getmap module:
  https://avatar.fandom.com/api.php?action=getmap&name=Avatar_world_map.
• With the action API, using the query 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:

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

Using getmap API:

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

Using query API:

var url = "https://avatar.fandom.com/api.php?action=query&prop=revisions&rvprop=content&rvslots=main&titles=Map:Avatar_world_map"
fetch(url).then(function(r){ return r.json(); })
.then(function(r) {
    var mapData = 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-in mw.Api library. For example, for a getmap request:

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