Angular Leaflet azure maps

With the deprecation of Bing Maps, I'm wanting to replace my Bing map layers in my angular app with a leaflet map in it with the Azure Maps. I have installed the azure-maps-leaflet library which is a pure JS library but it does contain a typings folder with an index.d.ts file that looks like it is set up to extend the js functions into the leaflet library within angular. However, when I try to use it in a similar fashion to the JS example in the github library like this:

import { Component, ElementRef, HostListener, OnInit} from '@angular/core';
import 'azure-maps-leaflet';
import { Map, Marker, FeatureGroup, featureGroup, LatLng, tileLayer, MapOptions, marker, latLng, TileLayer} from 'leaflet';

...
subscriptionKey = 'my-key';

this.hybridLayer = tileLayer.azureMaps({'authOptions': { 'authType': 'subscriptionKey', 'subscriptionKey': this.azuresubscriptionKey}, 'tilesetId': 'microsoft.base.hybrid'});


I get this error:

[ERROR] TS2339: Property 'azureMaps' does not exist on type 'typeof tileLayer'. [plugin angular-compiler]

src/app/map/map.component.ts:742:33:
742 │ ...is.hybridLayer = tileLayer.azureMaps({'authOptions': { 'authTy...​

The typings file can be found at https://github.com/Azure-Samples/azure-maps-leaflet/blob/main/typings/index.d.ts

FYI I'm not using "L" to reference leaflet. Instead I have a typings.d.ts file that has the following import * as L from "leaflet"; declare module "leaflet" {}

Now I can just use the leaflet functions without having to use L. For example, I don't use L.map, I just use map. I think I need to modify the index.d.ts in the typings folder to work with how I am referencing leaflet, but I'm not sure how. Any tips?

In the index.d.ts file, I have tried changing the line: import leaflet from 'leaflet'; to import leaflet;

but that did not change anything with respect to the error.

Continue reading...