DEV Community

Cover image for Add custom layer to embe-leaflet
Michal Bryxí
Michal Bryxí

Posted on

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);
  }
}
Enter fullscreen mode Exit fullscreen mode

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,
};
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Notes

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

Top comments (0)