Проблема

ember-leaflet — очень популярный аддон из экосистемы EmberJS, обеспечивающий большую гибкость.

Но что, если я захочу расширить его функциональность, чтобы он мог делать еще больше? А что, если я хочу, чтобы это был новый компонент, полученный непосредственно из слоев ?

Решение

Сначала нам понадобится наш новый компонент. Для простоты этот компонент просто расширяет существующий компонент слоя из дополнения. Давайте воспользуемся компонентом маркера и сделаем так, чтобы он просто игнорировал аргумент местоположения и устанавливал поддельное, жестко закодированное значение:

// 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);
  }
}

После этого нам нужно будет зарегистрировать компонент в сервисе 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,
};

И теперь мы можем его использовать:

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

Примечания

Вы также можете прочитать об этой технике на официальной странице документации ember-leaflet.