How to use/implement Leaflet Bing Layer in Angular.io?

Question

trying to build a leaflet service to be used in a component with Bing map provider. Could make it work in javascript without issues. The problem is that in TypeScript, it is not possible to define new properties to the objects. Casting to 'any' just don't cut it.

The javascript extension I am using is this one: https://github.com/digidem/leaflet-bing-layer

The relevant part of component code is as follows (javascript version does not use the service, it just includes the scripts):

import * as L  from 'leaflet';

// ...

    var leafletHelperService = new LeafletHelperService();

    (L.TileLayer as any).Bing = L.TileLayer.extend(
        leafletHelperService.getExtensionObject(options)); // --> returns object with options, initialize(), getQuadKey, etc.

    (L.tileLayer as any).bing = function(options) {
        return new L.TileLayer.Bing(options); // --> property 'Bing' does not exist on type L.TileLayer
    }
    L.tileLayer
        .bing(options) // --> property 'bing' does not exist...
        .addTo(this.map);

The main problem is that it is not possible to add new properties. I tried to define an interface that extends L.TileLayer but it does not work:

interface IBing extends L.TileLayer {
    Bing:Function;
}

Is it necessary to modify leaflet's types file (.d.ts) directly? Or for such cases, should I just import the .js scripts into Angular/Typescript (I already made it work like that too but it looks like an ugly workaround)?

Note that I prefer not to use someone's else port, such as this: https://github.com/Asymmetrik/ngx-leaflet

Thank you!

eppsilon eppsilon · Accepted Answer · 2019-08-21T17:45:42

You can augment the Leaflet types by adding this to your project's typings.d.ts:

import { tileLayer } from 'leaflet';

declare module 'leaflet' {
  namespace tileLayer {
    interface BingOptions extends TileLayerOptions {
      bingMapsKey?: string;
      imagerySet?: 'Aerial'|'AerialWithLabels'|'AerialWithLabelsOnDemand'|'CanvasDark'|'CanvasLight'|'CanvasGray'|'Road'|
        'RoadOnDemand'|'OrdnanceSurvey';
      culture?: string;
      style?: string;
    }

    export function bing(options: string|BingOptions): TileLayer;
  }
}

How to use/implement Leaflet Bing Layer in Angular.io?

1 Answers