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.
If you plan to only use subscription keys for authentication (not Microsoft Entra ID or SAS tokens), then there is no need to use this library. Simply use a tile layer in leaflet to pull in the Azure Maps tiles from the render service directly: https://learn.microsoft.com/en-us/rest/api/maps/render/get-map-tile?view=rest-maps-2024-04-01&tabs=HTTP