ഘടകം:Slippymap/sandbox

ഈ ഘടകത്തിന്റെ വിവരണം ഘടകം:Slippymap/sandbox/വിവരണം എന്ന താളിൽ നിർമ്മിക്കാവുന്നതാണ്

local p = {}

function p.slippymap(frame)
    -- Get arguments from the template or directly from the page
    local args = frame:getParent().args
    local lat = args["lat"] or "0"  -- Default latitude
    local lon = args["lon"] or "0"  -- Default longitude
    local text = args["text"] or "Marker"  -- Default marker text
    local logo = args["logo"] or "File:63rd state kalolsavam logo.png"  -- Default logo image

    -- Ensure lat and lon are numeric
    lat = tonumber(lat) or 0
    lon = tonumber(lon) or 0

    -- Generate the HTML for the map
    local mapHtml = mw.html.create("div")
    mapHtml:addClass("leaflet-map")
    mapHtml:attr("style", "width: 100%; height: 400px;")
    mapHtml:attr("id", "map")

    -- Correct usage of mw.uri.fullUrl() for logo
    local logoUrl = mw.uri.fullUrl(logo)

    local script = mw.html.create("script")
    script:wikitext([[
        mw.loader.using(['ext.kartographer.static']).then(function() {
            var map = L.map('map').setView([]] .. lat .. [[, ]] .. lon .. [[], 13);
            
            // Add OpenStreetMap tile layer
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19
            }).addTo(map);

            // Add marker
            L.marker([]] .. lat .. [[, ]] .. lon .. [[]).addTo(map)
                .bindPopup("]] .. text .. [[")
                .openPopup();

            // Add logo image as a custom control
            var logoControl = L.control({position: 'bottomleft'});
            logoControl.onAdd = function() {
                var div = L.DomUtil.create('div', 'logo');
                div.innerHTML = '<img src="]] .. logoUrl .. [[" style="width: 100px; height: auto;" />';
                return div;
            };
            logoControl.addTo(map);
        });
    ]])

    -- Combine HTML and script
    return tostring(mapHtml) .. tostring(script)
end

return p