Le problème

ember-leaflet est un addon très populaire de l'écosystème EmberJS qui permet une grande flexibilité.

Mais que se passe-t-il si je souhaite étendre ses fonctionnalités afin qu'il puisse faire encore plus ? Et que se passe-t-il si je le souhaite en tant que nouveau composant généré directement à partir des couches  ?

La solution

Dans un premier temps, nous aurons besoin de notre nouveau composant. Pour plus de simplicité, ce composant étendra simplement un composant de couche existant à partir du module complémentaire. Utilisons le composant marqueur et faisons en sorte qu'il ignore simplement l'argument d'emplacement et définisse une fausse valeur codée en dur :

// app/components/fake-marker-layer.gts

import MarkerLayer from 'ember-leaflet/components/marker-layer';

export default class FakeMarkerLayer extends MarkerLayer {
  get location() {
    return this.L.latLng(46.68, 7.85);
  }
}

Après cela, nous devrons enregistrer le composant auprès du service ember-leaflet :

// app/instance-initializers/leaflet.ts

import FakeMarkerLayer from '../components/fake-marker-layer';
import type Owner from '@ember/owner';

export function initialize(owner: Owner) {
  const emberLeafletService = owner.lookup('service:ember-leaflet');

  if (emberLeafletService) {
    emberLeafletService.registerComponent('fake-marker-layer', {
      as: 'fake-marker',
      component: FakeMarkerLayer,
    });
  }
}

export default {
  initialize,
};

Et maintenant nous pouvons l'utiliser :

import LeafletMap from 'ember-leaflet/components/leaflet-map';

Remarques

Vous pouvez également en savoir plus sur cette technique sur la page de documentation officielle du dépliant de braises.