How to use @hpcc-js/leaflet-shim - 10 common examples

layerEnter(map: Map) {
        super.layerEnter(map);
        //  Default key should be in sync with packages/map-deck/src/Common.ts
        if (!window.__hpcc_mapbox_apikey) {
            console.warn("__hpcc_mapbox_apikey does not contain a valid API key, reverting to developers key (expect limited performance)");
        }
        const hpcc_mapbox_apikey = window.__hpcc_mapbox_apikey || "pk.eyJ1IjoibGVzY2htb28iLCJhIjoiY2psY2FqY3l3MDhqNDN3cDl1MzFmZnkwcCJ9.HRoFwmz1j80gyz18ruggqw";
        this.add(new LeafletTileLayer(`https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=${hpcc_mapbox_apikey}`, {
            attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            id: "mapbox.streets",
            accessToken: hpcc_mapbox_apikey
        } as any));
    }
}

FeatureLayer.prototype.mixin(Utility.SimpleSelectionMixin);
FeatureLayer.prototype.publishReset(["layers"]);

//  ---------------------------------------------------------------------------
export class ClusterLayer extends FeatureLayer {

    constructor(cluster = true) {
        super(cluster);
    }
}
ClusterLayer.prototype._class += " map_ClusterLayer";

//  ---------------------------------------------------------------------------
export class D3SurfaceLayer extends FeatureLayer {

    protected _lfd3 = new D3SvgOverlay()
        .drawCallback((selection, projection) => this.layerUpdate(undefined, projection));

    hasBounds(): boolean {
        return true;
    }

    getBounds() {
        return this._lfd3.getBounds();
    }

    layerEnter(map: Map) {
        super.layerEnter(map);
        this.add(this._lfd3);
    }

    layerUpdate(map: Map, projection?) {

init(): Promise;
    hasBounds(): boolean;
    getBounds(): LatLngBounds;

    layerEnter(map: Map);
    layerUpdate(map: Map);
    layerExit(map: Map);

    zoomEnd(e);
    moveEnd(e);
    viewReset(e);
}

export class TileLayer extends Widget implements ILayer {
    private _layer = new FeatureGroup();
    protected _crs: any = CRS.EPSG3857;

    constructor(cluster = false) {
        super();
        (this._layer as any).__hpcc_layer = this;
    }

    crs() {
        return this._crs;
    }

    attribution(): string {
        return "";
    }

    clear() {
        this._layer.clearLayers();

getBounds() {
        return new LatLngBounds([20, -123], [49, -64]);
    }
}

const data = this.data().filter(row => !this.omitNullLatLong() || (!!row[latIdx] && !!row[longIdx])).map(row => {
            if (!bounds) {
                bounds = new LatLngBounds([row[latIdx], row[longIdx]]);
            } else {
                bounds.extend([row[latIdx], row[longIdx]]);
            }
            return [row[latIdx], row[longIdx], this.weightColumn_exists() ? row[weightIdx] : 0.5];
        });
        const heat = new LHeatLayer(data, {

getBounds() {
        const retVal = super.getBounds();
        return new LatLngBounds([retVal.getNorth(), retVal.getWest()], [17.755278, -64.565]);
    }

protected createIcon(childCount: number, backColor: string, format: (_: any) => any) {
        const borderColor = d3Hsl(backColor);
        borderColor.opacity = 0.5;
        return new DivIcon({
            className: "cluster-circle",
            iconSize: new Point(40, 40),
            html: `<div style="opacity:${this.opacity()};background-color:${borderColor.toString()}"><div style="background-color:${backColor}"><span style="color:${Palette.textColor(backColor)}">${format(childCount)}</span></div></div>`
        });
    }

project(latLng) {
        let point = projAlbersUsaPr([latLng.lng, latLng.lat]);
        if (!point) {
            point = projAlbers([latLng.lng, latLng.lat]);
        }
        return new Point(point[0], point[1]);
    },
    unproject(point) {

protected createIcon(childCount: number, backColor: string, format: (_: any) => any) {
        const borderColor = d3Hsl(backColor);
        borderColor.opacity = 0.5;
        return new DivIcon({
            className: "cluster-circle",
            iconSize: new Point(40, 40),
            html: `<div style="opacity:${this.opacity()};background-color:${borderColor.toString()}"><div style="background-color:${backColor}"><span style="color:${Palette.textColor(backColor)}">${format(childCount)}</span></div></div>`
        });
    }

unproject(point) {
        if (!isNaN(point.x) && !isNaN(point.y)) {
            const latLng = projAlbers.invert([point.x, point.y]);
            return new LatLng(latLng[1], latLng[0]);
        } else {
            return new LatLng(0, 0);
        }
    }
};