JavaScript

My assignment asks for this step that I mentioned in the title, but I have 3 days trying to make it,
I don't know how to do it.here is my code in GitHub:- 
https://github.com/HamzaSamiHussein/BusMall/tree/busMall

domtoimage.toPng(document.querySelector("#map"))
    .then(function (dataUrl) {
        var boundsOnly = map.getBounds();
        let topLeft = boundsOnly.getNorthWest();
        let topRight = boundsOnly.getNorthEast();
        let bottomLeft = boundsOnly.getSouthWest();
        let bottomRight = boundsOnly.getSouthEast();

        var currBBOXpoints = { x1y1: map.latLngToLayerPoint(topLeft), x2y2: map.latLngToLayerPoint(topRight), x3y3: map.latLngToLayerPoint(bottomRight), x4y4: map.latLngToLayerPoint(bottomLeft) };
        var pW = currBBOXpoints.x2y2.x - currBBOXpoints.x1y1.x;
        var pH = currBBOXpoints.x3y3.y - currBBOXpoints.x1y1.y;

        currBBOXpoints.pW = pW; //calculated the width of captured area
        currBBOXpoints.pH = pH; //calculated the height of captured area

        var i = new Image();
        i.onload = function () { //calculating captured image's actual width, height

            $.ajax({
                type: 'post',
                url: '/externalapi',
                data: JSON.stringify(dataUrl),
                contentType: "application/json",
                dataType: "json",
                success: function (resultData) {
                    resultData["iW"] = i.width; //captured image width
                    resultData["iH"] = i.height; //captured image height
                    resultData["currBBOXpoints"] = currBBOXpoints; //captured area bounds
                    drawRects(resultData);
                    //NOTE: Captured image's width and height are bigger than width and height of captured area (don't know why)
                }
            });
    };
    i.src = dataUrl;
});

function drawRects(rectData) {

    var scale = Math.max(rectData.currBBOXpoints.pW / rectData['iW'], rectData.currBBOXpoints.pH / rectData['iH']);

    var shifted_x = rectData.currBBOXpoints.pW / 2 - rectData['iW'] / 2 * scale;
    var shifted_y = rectData.currBBOXpoints.pH / 2 - rectData['iH'] / 2 * scale;

    rectData.od.forEach(rc => {
        var modifiedX = Number(rc['x']) * scale + shifted_x;
        var modifiedY = Number(rc['y']) * scale + shifted_y;
        var modifiedW = (modifiedX + rc['w'])
        var modifiedH = (modifiedY + rc['h'])


        let point3 = map.layerPointToLatLng(L.point(modifiedX, modifiedY));
        let point4 = map.layerPointToLatLng(L.point(modifiedW, modifiedH));

        var rectBounds = [[point3.lat, point3.lng], [point4.lat, point4.lng]];
        var boundingBox = L.rectangle(rectBounds, { color: "yellow", weight: 1, name: "rect", fillOpacity: 0.10 });

        map.addLayer(boundingBox);

    });
}

let object_literal1 ={
    fullName : "shanu1",
    name : () => { 
        return this.fullName
    },
    greeting : (message) => console.log(message + " "+ this.name())
}
object_literal1.greeting("Welcome")

let person = {
    firstName: "John",
    lastName : "Doe",
    id     : 5566,
    fullName : function() {
      return this.firstName + " " + this.lastName;
    }
  }
  console.log(person.fullName()) //prints John Doe

let person = {
    firstName: "John",
    lastName : "Doe",
    id     : 5566,
    fullName : () => {
      return this.firstName + " " + this.lastName;
    }
  }
  console.log(person.fullName()) //prints undefined undefined

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.6.0/css/flag-icon.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(function() {
    /* SETUP MULTI-LANGUAGE */
    var defaultLanguage = 'en';
    var lang = location.pathname.split("/")[1];
    var defaultClass = 'lang-'+defaultLanguage+'';
    var itemParent = "nav [class*='collection'],nav [class*='folder'],nav [class*='index'],nav [class*='group']";
    if (lang == "" || lang.length > 2 ){
      var lang = defaultLanguage;
    }
 
    /* ADD LANGUAGE CLASSES */
    $('a[href="/"]').addClass('lang-'+defaultLanguage+'').parents(itemParent).addClass('lang-'+defaultLanguage+'');
    $('nav a:link:not([href^="http://"]):not([href^="https://"])').each(function () {
      var langType = $(this).attr('href').split("/")[1];
      var multiLanguageClass = 'multilanguage lang-' + langType + '';
      if (undefined !== langType && langType.length <= 2)
        $(this).addClass(multiLanguageClass).parents(itemParent).addClass(multiLanguageClass);
    });
    $('nav button').each(function () {
      var langTypeFolder = $(this).attr('data-controller-folder-toggle').split("/")[0];
      var multiLanguageClass = 'multilanguage lang-' + langTypeFolder + '';
      if (undefined !== langTypeFolder && langTypeFolder.length <= 2)
        $(this).addClass(multiLanguageClass);
    });
 
    /* HOMEPAGE-LOGO LINKS TO PROPER LANGUAGE HOMEPAGE */
    if (lang == "fr") {
      $('a[href="/"]').attr("href", "/fr/home/");
    }
 
    /* ADD EXCLUSION NAV ITEMS */
    $('.exclude-me,.exclude-me a').addClass('exclude');
    $('.sqs-svg-icon--list a,.SocialLinks-link').addClass('exclude');
 
    /* REMOVE OTHER LANGUAGES AND KEEP EXCLUDED ITEMS */
    $('.multilanguage:not(".lang-'+lang+',.exclude")').remove();
 
    /* SETUP LANGUAGE SWITCHER */
    $('body').prepend('<div class="language"><a href="/en/home" class="lang-en"></a> <a href="/fr/home/" class="lang-fr"></a></div>');
 
  });
</script>

// NOTICE: This only works for letters and spaces like I intended it to.

function textToBinary(text) {
    let alphabet;
    let letter;
    let binary = "";
    let value;
    alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    for (letter in text) {
        if (alphabet.includes(text[letter].toUpperCase())) {
            if (text[letter] === text[letter].toUpperCase()) {
                binary += "010";
            } else {
                binary += "011";
            }
            value = alphabet.indexOf(text[letter].toUpperCase()) + 1;
            if (value >= 16) {
                binary += "1";
                value -= 16;
            } else {
                binary += "0";
            }
            if (value >= 8) {
                binary += "1";
                value -= 8;
            } else {
                binary += "0";
            }
            if (value >= 4) {
                binary += "1";
                value -= 4;
            } else {
                binary += "0";
            }
            if (value >= 2) {
                binary += "1";
                value -= 2;
            } else {
                binary += "0";
            }
            if (value >= 1) {
                binary += "1";
                value -= 1;
            } else {
                binary += "0";
            }
        } else {
            binary += "00100000";
        }
    }
    console.log(binary);
}

textToBinary("this is written in BINARY");