Add custom layer to embe-leaflet

The problem

ember-leaflet is a very popular addon from EmberJS ecosystem that allows a lot of flexibility.

But what if I want to extend it's functionality so that it can do even more? And what if I want it as a new yielded component directly from the <LeafletMap>s layers?

The solution

At first we will need our new component. For simplicity this component will just extend an existing layer component from the addon. Let's use the marker component and make it so that it just ignores location argument and sets a fake, hardcoded value:

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

After this we will need to register the component with ember-leaflet service:

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

And now we can use it:

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

<template>
  <LeafletMap
    @lat={{46.6}}
    @lng={{7.8}}
    @zoom={{15}}
    as |layers|
  >
    <layers.fake-marker @lat={{999.99}} @lng={{0}} />
  </LeafletMap>
</template>

Notes

You can read on this technique also on the official ember-leaflet documentation page.