How to use the leaflet.Control function in leaflet

return {
            fillColor: colors(model ? model.get('totalTurnoutPercentage') : 0),
            fillOpacity: 0.7,
            weight: 3,
            color: '#2284a1'
          };
        }
      }).addTo(this.map);
      this.map.fitBounds(window.boundaries.getBounds());
    }
  }
});

// Override geocode functionality to append city
var geosearchCopy = L.Control.GeoSearch.prototype.geosearch;
L.Control.GeoSearch.prototype.geosearch = function(qry) {
     geosearchCopy.call(this, qry + ', Philadelphia, PA');
};

// Override show location to show which ward
var showLocationCopy = L.Control.GeoSearch.prototype._showLocation;
L.Control.GeoSearch.prototype._showLocation = function(location) {
     showLocationCopy.call(this, location);
     var polygon = leafletPip.pointInLayer([location.X, location.Y], window.boundaries),
          popupTemplate = PopupTemplate; // TODO: Add address to marker
     this._positionMarker.bindPopup(polygon[0]._popup).openPopup();
};

var drawMarkerCopy = L.Control.Locate.prototype.drawMarker;
L.Control.Locate.prototype.drawMarker = function(map) {
     drawMarkerCopy.call(this, map);
     var polygon = leafletPip.pointInLayer(this._event.latlng, window.boundaries),

require('leaflet.locatecontrol/dist/L.Control.Locate.css');

const defaultOpt = { // For all configuration options refer to https://github.com/Norkart/Leaflet-MiniMap
    follow: true,  // follow with zoom and pan the user's location
    remainActive: true,
    stopFollowingOnDrag: true,
    locateOptions: {
        maximumAge: 2000,
        enableHighAccuracy: false,
        timeout: 10000,
        maxZoom: Infinity,
        watch: true  // if you overwrite this, visualization cannot be updated
    }
};

L.Control.MSLocate = L.Control.Locate.extend({
    setMap: function(map) {
        this._map = map;
        this._layer = this.options.layer || new L.LayerGroup();
        this._layer.addTo(map);
        this._event = undefined;
        this._prevBounds = null;

        // extend the follow marker style and circle from the normal style
        let tmp = {};
        L.extend(tmp, this.options.markerStyle, this.options.followMarkerStyle);
        this.options.followMarkerStyle = tmp;
        tmp = {};
        L.extend(tmp, this.options.circleStyle, this.options.followCircleStyle);
        this.options.followCircleStyle = tmp;
        this._resetVariables();
        this._map.on('unload', this._unload, this);

if (mapWasTapEnabled) {
    this._map.tap.enable();
  }
  dragCancelled = false;
}

// convert arg to an array - returns empty array if arg is undefined
function asArray(arg) {
  return (arg === 'undefined') ? [] : Array.isArray(arg) ? arg : [arg];
}

function noop() {

}

L.Control.SideBySide = L.Control.extend({
  options: {
    thumbSize: 42,
    padding: 0
  },

  initialize(leftLayers, rightLayers, options) {
    this.setLeftLayers(leftLayers);
    this.setRightLayers(rightLayers);
    L.setOptions(this, options);
  },

  getPosition() {
    const rangeValue = this._range.value;
    const offset = (0.5 - rangeValue) * (2 * this.options.padding + this.options.thumbSize);
    return this._map.getSize().x * rangeValue + offset;
  },

} else {
                                const signal = new AircraftSignal(data);
                                signal.addToLayer(this.signalsLayer);
                                this.signals.set(signal.callSign, signal);
                            }
                        },
                        onError: error => {
                            console.error(error);
                            console.dir(error);
                        }
                    });
            });
    }
}

L.Control.BackpressureCtrl = L.Control.extend({
    options: {
        position: 'bottomleft',
        min: 1,
        max: 200,
        defaultValue: 50
    },

    onAdd: function(map) {
        let field = L.DomUtil.create('div', "field");
        let control = L.DomUtil.create('div', "control", field);
        let input = L.DomUtil.create('input', "input is-large", control);
        input.type = 'number';
        input.min = this.options.min;
        input.max = this.options.max;
        input.value = this.options.defaultValue;
        L.DomEvent.disableClickPropagation(input);

this.signals = new Map();
        this.signalsLayer = L.layerGroup();
        this.signalsLayer.addTo(this.map);

        this.trackerClient = new TrackerClient('ws://localhost:8080/rsocket', new MapHandler(this.map));
        this.trackerClient.connect()
            .then(sub => {
                return this.trackerClient.fetchUserProfile();
            })
            .then(profile => {
                document.querySelector("#profile").innerHTML
                    = `<div class="navbar-item"><span>${profile.name}</span><img src="${profile.avatarUrl}"></div>`;
                this.displayMap(profile, zoomLevel);
            });

        this.backpressureCtrl = new L.Control.BackpressureCtrl();
        this.backpressureCtrl.addTo(this.map);

        this.profileCtrl = new L.Control.ProfileCtrl(this.trackerClient);
        this.profileCtrl.addTo(this.map);
    }

initialize: function(options) {
            L.Control.prototype.initialize.call(this, options);
            this.pages = [];
            this.scale = ko.observable(500).extend({checkNumberRange: [1, 1000000]});
            this.resolution = ko.observable(300).extend({checkNumberRange: [10, 9999]});
            this.zoomLevel = ko.observable('auto');
            this.pageWidth = ko.observable(210).extend({checkNumberRange: [10, 9999]});
            this.pageHeight = ko.observable(297).extend({checkNumberRange: [10, 9999]});
            this.settingsExpanded = ko.observable(false);
            this.makingPdf = ko.observable(false);
            this.downloadProgressRange = ko.observable();
            this.downloadProgressDone = ko.observable();
            this.marginLeft = ko.observable(3).extend({checkNumberRange: [0, 99]});
            this.marginRight = ko.observable(3).extend({checkNumberRange: [0, 99]});
            this.marginTop = ko.observable(3).extend({checkNumberRange: [0, 99]});
            this.marginBottom = ko.observable(3).extend({checkNumberRange: [0, 99]});
            this.autoZoomLevels = ko.observable({});
            this.printSize = ko.pureComputed(this._printSize, this);

createLeafletElement() {
        const OpacitySlider = new L.Control.opacitySlider;
        OpacitySlider.setPosition(this.$props.position);
        OpacitySlider.setOpacityLayer(this.$props.layer);
        return OpacitySlider;
      },
      parentMounted(parent) {

var L = require('leaflet');
var geometry = require('./geometry');
var ControlMarker = require('./marker');
var Endpoint = require('./endpoint');
var Selection = require('./selection');
var Rbush = global.Rbush || require('rbush');

var START = L.Browser.touch ? 'touchstart mousedown' : 'mousedown';

/**
 * LineString select control
 *
 * @class  L.Control.LineStringSelect
 * @extends {L.Control}
 */
var Select = L.Control.extend( /**  @lends Select.prototype */ {

  statics: {
    Selection: Selection,
    Endpoint: Endpoint,
    ControlMarker: ControlMarker
  },

  /**
   * @type {Object}
   */
  options: {
    startMarkerClass: 'select-marker select-start-marker',
    endMarkerClass: 'select-marker select-end-marker',
    movingMarkerClass: 'select-marker select-moving-marker',
    name: 'leaflet-linestring-select',
    lineWeight: 4,

var L = require('leaflet');

L.Control.MageFeature = L.Control.extend({
  options: {
    position: 'topleft',
    enabled: true
  },

  onAdd: function () {
    var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
    this._link = L.DomUtil.create('a', '', container);
    this._icon = L.DomUtil.create('i', 'material-icons leaflet-mage-icon', this._link);
    this._icon.innerHTML = 'add_location'

    this._link.href = '#';
    this._link.title = 'New Observation';

    L.DomEvent
      .on(this._link, 'mousedown dblclick', L.DomEvent.stopPropagation)