Module:AreaMapDisplay

Usage:

{{#invoke:AreaMapDisplay|map|WorldImage=Blunder Hills World Map.png}}

The data:

Special:CargoTables/AreaData (edit in Worlds)

---

local p = {}
local cargo = mw.ext.cargo

function p.map(frame)
    local args = frame.args
    local WorldImage = args.WorldImage

    local results =
        cargo.query(
        "AreaData",
        "Area, WorldImage, x, y, Size, ID, color_text, color_fill",
        {where = 'WorldImage = "' .. mw.text.nowiki(WorldImage) .. '"'}
    )

    -- Root div
    -- div
    -- <div style="top:0px;position:relative;height:428px;left:0px;width:808px"> ... </div>
    local root =
        mw.html.create("div"):css(
        {
            position = "relative",
            left = "0px",
            top = "0px",
            width = "808px",
            height = "428px"
        }
    ):attr("id", WorldImage:gsub(".png", ""))

    -- Image
    -- div > span > a > img
    -- <span style="top:0px;position:absolute;height:428px;z-index:0;left:0px;width:808px"><a href="URL of {{{WorldImage}}} Page" class="image"><img alt="{{{WorldImage}}}" src="URL of {{{WorldImage}}}" decoding="async" width="808" height="428"></a></span>
    root:tag("span"):css(
        {
            position = "absolute",
            left = "0px",
            top = "0px",
            ["z-index"] = 0,
            width = "808px",
            height = "428px"
        }
    ):wikitext("[[File:" .. WorldImage .. "|808x428px]]")

    -- DIV to disable click event
    -- div > div
    -- <div style="top:0px;background-color:rgba(0, 0, 0, 0);position:absolute;z-index:1;right:0px;left:0px;bottom:0px"></div>
    root:tag("div"):css(
        {
            position = "absolute",
            left = "0px",
            top = "0px",
            right = "0px",
            bottom = "0px",
            ["z-index"] = 1,
            ["background-color"] = "rgba(0, 0, 0, 0)"
        }
    )

    -- Default color for each world
    local mapping_color_text = {
        ["Blunder Hills World Map.png"] = "#392927",
        ["Yum Yum Desert World Map.png"] = "#392827",
        ["Frostbite Tundra World Map.png"] = "#272F39",
        ["Hyperion Nebula World Map.png"] = "#261C27",
        ["Smolderin' Plateau World Map.png"] = "#372626",
        ["Spirited Valley World Map.png"] = "#2D4732"
    }
    local mapping_color_fill = {
        ["Blunder Hills World Map.png"] = "#C0985C",
        ["Yum Yum Desert World Map.png"] = "#C68D5C",
        ["Frostbite Tundra World Map.png"] = "#85BACB",
        ["Hyperion Nebula World Map.png"] = "#9F6671",
        ["Smolderin' Plateau World Map.png"] = "#A5796B",
        ["Spirited Valley World Map.png"] = "#9FB582"
    }

    -- For each area
    for _, record in ipairs(results) do
        -- Continue if any of WorldImage, x, y is nil
        if record.WorldImage ~= nil and record.x ~= nil and record.y ~= nil then
            -- Set default color if color_text or color_fill is nil
            if record.color_text == nil or record.color_text == "" then
                record.color_text = mapping_color_text[record.WorldImage]
            end
            if record.color_fill == nil or record.color_fill == "" then
                record.color_fill = mapping_color_fill[record.WorldImage]
            end

            -- The outer div
            root:tag("div"):css(
                {
                    position = "absolute",
                    left = record.x .. "px",
                    top = record.y .. "px",
                    transform = "translate(-50%, -50%)",
                    ["line-height"] = "95%",
                    ["z-index"] = 2
                }
            ):wikitext(
                "[[#" ..
                    record.Area ..
                        "|" ..
                            tostring(
                                p.createMapPoint(
                                    record.ID,
                                    record.Area,
                                    record.Size,
                                    record.color_text,
                                    record.color_fill,
                                    args.tooltipText
                                )
                            ) ..
                                "]]"
            )
        end
    end

    return tostring(root)
end

-- wiki link [[]]をまたぐので、ヘルプファンクションでinnerdivとspanを作る。
function p.createMapPoint(id, area, size, color_text, color_fill, tooltipText)
    -- The inner div
    -- div > div > span
    -- <div title="{{{Area}}}" style="justify-content:center;border:2px solid {{{color_text}}};background-color:{{{color_fill}}};height:{{{Size}}};display:inline-flex;border-radius:50%;align-items:center;width:{{{Size}}}"><span style="color:{{{color_text}}};font-family:'Helvetica', sans-serif;font-weight:bold;font-size:10px">{{{ID}}}</span></div></a></div>
    local innerdiv =
        mw.html.create("div"):attr("title", tooltipText or area):css(
        {
            display = "inline-flex",
            ["justify-content"] = "center",
            ["align-items"] = "center",
            width = size .. "px",
            height = size .. "px",
            ["border-radius"] = "50%",
            ["background-color"] = color_fill,
            border = "2px solid " .. color_text
        }
    )

    local tooltip_span =
        mw.html.create("span"):addClass("simple-tooltip simple-tooltip-inline tooltipstered"):attr(
        "data-simple-tooltip",
        tooltipText
    ):css({color = color_text}):wikitext(id)

    innerdiv:node(tooltip_span)
    return tostring(innerdiv)
end

return p