How to use the ember-leaflet/components/base-layer.extend function in ember-leaflet

import { assert } from '@ember/debug';
import {
  merge as emberMerge,
  assign as emberAssign
} from '@ember/polyfills';
import { inject as service } from '@ember/service';
import BaseLayer from 'ember-leaflet/components/base-layer';
import { ParentMixin } from 'ember-composability-tools';
import toLatLng from 'ember-leaflet/macros/to-lat-lng';
import layout from '../templates/leaflet-map';
const assign = emberAssign || emberMerge;

export default BaseLayer.extend(ParentMixin, {
  tagName: 'div',
  layout,

  emberLeaflet: service(),

  leafletOptions: Object.freeze([
    // Map state options
    'center', 'zoom', 'minZoom', 'maxZoom', 'maxBounds', 'crs',
    // Interaction options
    'dragging', 'touchZoom', 'scrollWheelZoom', 'doubleClickZoom', 'boxZoom',
    'tap', 'tapTolerance', 'trackResize', 'worldCopyJump', 'closePopupOnClick',
    'bounceAtZoomLimits', 'wheelPxPerZoomLevel', 'zoomDelta', 'zoomSnap',
    // Keyboard navigation options
    'keyboard', 'keyboardPanOffset', 'keyboardZoomOffset',
    // Panning Inertia Options
    'inertia', 'inertiaDeceleration', 'inertiaMaxSpeed', 'inertiaThreshold',

import Ember from 'ember';
import BaseLayer from 'ember-leaflet/components/base-layer';
const {get,isEmpty,isBlank} = Ember;

export default BaseLayer.extend({
  didInsertParent() {
    this._layer = this.createLayer();
    this._addObservers();
    this._addEventListeners();
    if (get(this,'parentComponent')) {
      this._layer.addTo(get(this,'parentComponent')._layer);
    }
    this.didCreateLayer();
  },
  createLayer() {
    //L is defined globally by Leaflet
    return L.control.layers(); // jshint ignore:line
  },
  didCreateLayer() {
    this._super(...arguments);
    let baseLayers = get(this,'parentComponent._baseLayers');

test('using any layer outside a content layer throws', function(assert) {
    assert.expect(1);

    this.owner.register('component:new-base-layer', BaseLayerComponent.extend({
      createLayer() { }
    }));

    assert.throws(async () => {
      await render(hbs`{{new-base-layer}}`);
    }, /Assertion Failed: Tried to use .* outside the context of a parent component\./);
  });
});

import BaseLayer from 'ember-leaflet/components/base-layer';
import StyleMixin from 'ember-leaflet/mixins/style';
import DivOverlayableMixin from 'ember-leaflet/mixins/div-overlayable';

/**
 * @public
 * An ember-leaflet wrapper for L.geoJson, which renders GeoJson data onto a
 * map as features.
 *
 * Takes:
 *   - geoJSON: the GeoJSON object to render
 *   - all standard leaflet options for L.geoJson
 */
export default BaseLayer.extend(DivOverlayableMixin, StyleMixin, {
  leafletRequiredOptions: Object.freeze(['geoJSON']),

  leafletOptions: Object.freeze([
    'stroke', 'color', 'weight', 'opacity', 'fill', 'fillColor',
    'fillOpacity', 'fillRule', 'dashArray', 'lineCap', 'lineJoin',
    'clickable', 'pointerEvents', 'className', 'pointToLayer',
    'style', 'onEachFeature', 'filter', 'coordsToLatLng'
  ]),

  leafletEvents: Object.freeze([
    'click', 'dblclick', 'mousedown', 'mouseover', 'mouseout',
    'contextmenu', 'add', 'remove', 'popupopen', 'popupclose'
  ]),

  leafletProperties: Object.freeze([
    'style'

import BaseLayer from 'ember-leaflet/components/base-layer';

export default BaseLayer.extend({

  leafletRequiredOptions: Object.freeze([
    'url'
  ]),

  leafletOptions: Object.freeze([
    'minZoom', 'maxZoom', 'maxNativeZoom', 'tileSize', 'subdomains',
    'errorTileUrl', 'attribution', 'tms', 'continuousWorld', 'noWrap',
    'zoomOffset', 'zoomReverse', 'opacity', 'zIndex', 'unloadInvisibleTiles',
    'updateWhenIdle', 'detectRetina', 'reuseTiles', 'bounds', 'className',
    'crossOrigin'
  ]),

  leafletEvents: Object.freeze([
    'loading', 'load', 'tileloadstart', 'tileload', 'tileunload'
  ]),

import { computed } from '@ember/object';
import { getOwner } from '@ember/application';
import BaseLayer from 'ember-leaflet/components/base-layer';
import layout from '../templates/div-overlay';
import { RenderBlockMixin } from 'ember-composability-tools';

export default BaseLayer.extend(RenderBlockMixin, {
  layout,

  leafletOptions: Object.freeze([
    'offset', 'className', 'pane'
  ]),

  fastboot: computed(function() {
    let owner = getOwner(this);
    return owner.lookup('service:fastboot');
  }),

  isFastBoot: computed('fastboot', function() {
    return this.get('fastboot') && this.get('fastboot.isFastBoot');
  })
});

import BaseLayer from 'ember-leaflet/components/base-layer';

export default BaseLayer.extend({
  leafletRequiredOptions: [],
  leafletOptions: [],
  createLayer() {
    return Tangram.leafletLayer({
      scene: 'assets/tangram-basemap-scene.yml',
      attribution: '<a href="http://openstreetmap.org">OpenStreetMap</a> | <a href="https://www.nextzen.org">Nextzen</a> | <a href="https://transit.land">Transitland</a>'
    });
  }
});

import Ember from 'ember';
import BaseLayer from 'ember-leaflet/components/base-layer';
import { ParentMixin } from 'ember-composability-tools';

const {get, isEmpty, set, isNone} = Ember;

export default BaseLayer.extend(ParentMixin, {
  baselayer: false,
  blockLayer: false,
  default: false,
  createLayer(){
    return this.L.layerGroup();
  },

  registerNameOnParent(){
    let name = get(this,'name');
    let container = this.get('parentComponent');
    let defaultState = get(this,'default');
    if (!get(this,'baselayer')){
      let layerGroups = get(container,'_layerGroups');
      if (isEmpty(layerGroups)){
        layerGroups = Ember.A();
        set(container,'_layerGroups',layerGroups);