Directive qui permet de gérer les fonds de cartes de leaflet en mode fallback

LeafletTilesFallbackDirective

import { Directive, Input, OnChanges, SimpleChanges } from '@angular/core';
import * as L from 'leaflet';
/**
 * Directive qui permet de gérer les fallbacks de fonds de cartes de leaflet.
 * Liste des serveurs de tiles open source: https://leaflet-extras.github.io/leaflet-providers/preview/
 */
@Directive({
  selector: '[leaflet-tiles-fallback]'
})
export class LeafletTilesFallbackDirective implements OnChanges {
  /**
   * Suffixe d'image de la bretagne.
   */
  BRETAGNE_IMG = '6/31/22.png';
  /**
   * Tableau contenant la liste des templates des urls de substitution
   */
  @Input('leafletFallbackTiles') templateURLFallbacks: string[];
  /**
   * La reference vers l'objet tileLayer de la carte.
   */
  @Input('leafletTileLayer') tileLayer: L.tileLayer;

  ngOnChanges(changes: SimpleChanges) {
    if (changes.templateURLFallbacks && changes.templateURLFallbacks.currentValue) {
      this.handleFallbacks(0);
    }
  }

  /**
   * Permet de vérifier les fallbacks une après une et utiliser celle qui marche (a.k.a le serveur qui répond par un status 200).
   * @param index
   */
  async handleFallbacks(index: number) {
    await this.checkStatus(this.getSampleImgURLFromTileTemplate(this.templateURLFallbacks[index]))
      .then(() => {
        this.tileLayer.setUrl(this.templateURLFallbacks[index]);
      })
      .catch(() => {
        if (index < this.templateURLFallbacks.length) {
          this.handleFallbacks(index + 1);
        }
      });
  }

  /**
   * Permet d'extraire un échantillon d'image (Bretagne) en se basant sur le template url du serveur de tiles.
   * @param templateURL
   */
  private getSampleImgURLFromTileTemplate(templateURL: string): string {
    // Pour comprendre la structure d'une template url sur leaflet: https://leafletjs.com/reference-1.5.0.html#tilelayer
    return templateURL.replace('{s}.', '')
      .replace(/\{z\}.*/gi, this.BRETAGNE_IMG);
  }

  /**
   * Permet de vérifier le status d'une image
   * @param url
   * @private
   */
  private checkStatus(url: string): Promise<unknown> {
    return new Promise(function(resolve, reject){
      var img = new Image()
      img.onload = function(){
        resolve(url)
      }
      img.onerror = function(){
        reject(url)
      }
      img.src = url
    });
  }
}

exemple d'utilisation

<div
    leaflet
    (leafletMapReady)="onMapReady($event)"
    leaflet-tiles-fallback
    [tileLayer]="tilerLayer"
    [leafletFallbackTiles]="['https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', 'https://tile.osm.ch/switzerland/{z}/{x}/{y}.png']"
    >
</div>