<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">

window.map = undefined;
window.featurelayer = undefined;
window.adminlayer = undefined;
window.localitylayer = undefined;

window.customlat = 27.0;
window.customlng = 8.8;
window.customzoom = 2.88;
window.custommaxzoom = 40;

const once = {
    once: true
};

var GLOBAL = {};
GLOBAL.DotNetReference = null;
GLOBAL.SetDotnetReference = function (pDotNetReference) {
    GLOBAL.DotNetReference = pDotNetReference;
};

var mymarkers = [];

//======================================================
async function initMap() {
    //======================================================

    const { Map, InfoWindow } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

    window.map = new google.maps.Map(document.getElementById("mapdiv"), {
        
        zoom: 3,
        minZoom: window.customzoom,
        maxZoom: window.custommaxzoom,
        center: { lat: window.customlat, lng: window.customlng },

        keyboardShortcuts: false,
        gestureHandling: "greedy",
        mapId: '6dc08c9a2ac91eca',  //DEMO_MAP_ID    //6dc08c9a2ac91eca 
        streetViewControl: false,
        fullscreenControl: false,
        rotateControl: false,
        mapTypeControl: false,
        scrollbars: false,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.TOP_CENTER
        },
    });
    
    
}

//======================================================
function addMarkerWithLabel(markercollection)
//======================================================
{
    var marker, i;
    var pinscale = 1;
    var newline = "\r\n";
    var nbsp = "\u00a0";
    var pad = "2px 2px";

    for (i = 0; i &lt; markercollection.length; i++) {
        var color = markercollection[i]['pinColor'];
        var textcolor = markercollection[i]['fontColor'];

        let mname = markercollection[i]['nameTitle'];
        let pintext = mname + '\r\n' + markercollection[i]['missionField'];
        let pinref = markercollection[i]['missionaryId'];

        if (markercollection[i]['missionField'] == "") pad = "8px 8px";
        //else pad = "2px 8px";
        else pad = "4px 10px";

        const MyFlag = document.createElement("h1");
        MyFlag.className = "map-flag";
        MyFlag.style = "background-color:" + color + "; color:" + textcolor + "; border-color:" + color + "; white-space:pre-wrap; padding:" + pad;   //padding 1 line   8px 6px   2 lines 2px 6px
        MyFlag.textContent = pintext;
        MyFlag.style.setProperty("--pseudo-backgroundcolor", color);

        let marker = new google.maps.marker.AdvancedMarkerElement({
            map: window.map,
            position: new google.maps.LatLng(markercollection[i]['geoLat'], markercollection[i]['geoLon']),
            content: MyFlag,
        });

        mymarkers.push(marker);

        google.maps.event.addListener(marker, 'click', function (marker) {
            GLOBAL.DotNetReference.invokeMethodAsync('ShowMissionaryDetails', pinref);
        });
    }


    markerClusterOptions = {
        averageCenter: true,
        zoomOnClick: true,
        maxZoom: 8,
        styles:
            [
                {
                    url: "./Images/m1.png",
                    height: 53,
                    width: 53,
                    fontFamily: "comic sans ms",
                    textSize: 15,
                    textColor: "white"
                },
                {
                    url: "./Images/m2.png",
                    height: 55,
                    width: 55,
                    fontFamily: "comic sans ms",
                    textSize: 15,
                    textColor: "black"
                },
                {
                    url: "./Images/m3.png",
                    height: 65,
                    width: 65,
                    fontFamily: "comic sans ms",
                    textSize: 15,
                    textColor: "white"
                },
                {
                    url: "./Images/m4.png",
                    height: 77,
                    width: 77,
                    fontFamily: "comic sans ms",
                    textSize: 15,
                    textColor: "white"
                },
                {
                    url: "./Images/m5.png",
                    height: 90,
                    width: 90,
                    fontFamily: "comic sans ms",
                    textSize: 15,
                    textColor: "white"
                }
            ]

    };


    try {
        new markerClusterer.MarkerClusterer({ map: map, markers: mymarkers, options: markerClusterOptions });
    }
    catch (err) {
        alert(err);
    }

}

//======================================================
function zoomFull()
//======================================================
{
    window.map.setCenter({ lat: window.customlat, lng: window.customlng });
    window.map.setZoom(window.customzoom);
}
</pre></body></html>