How to use ember-leaflet - 10 common examples

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');

leafletOptions: Object.freeze([
    'icon', 'clickable', 'draggable', 'keyboard', 'title',
    'alt', 'zIndexOffset', 'opacity', 'riseOnHover', 'riseOffset'
  ]),

  leafletEvents: Object.freeze([
    'dragstart', 'drag', 'dragend', 'move', 'moveend',
    'remove', 'add', 'popupopen', 'popupclose'
  ]),

  leafletProperties: Object.freeze([
    'zIndexOffset', 'opacity', 'location:setLatLng'
  ]),

  location: toLatLng(),

  createLayer() {
    return this.L.marker(...this.get('requiredOptions'), this.get('options'));
  },

  // icon observer separated from generated (leaflet properties) due to a
  // leaflet bug where draggability is lost on icon change
  // eslint-disable-next-line ember/no-observers
  iconDidChange: observer('icon', function() {
    this._layer.setIcon(this.get('icon'));

    if (this.get('draggable')) {
      this._layer.dragging.enable();
    } else {
      this._layer.dragging.disable();
    }

'click', 'dblclick', 'mousedown', 'mouseup', 'mouseover', 'mouseout',
    'mousemove', 'contextmenu', 'focus', 'blur', 'preclick', 'load',
    'unload', 'viewreset', 'movestart', 'move', 'moveend', 'dragstart',
    'drag', 'dragend', 'zoomstart', 'zoomend', 'zoomlevelschange',
    'resize', 'autopanstart', 'layeradd', 'layerremove',
    'baselayerchange', 'overlayadd', 'overlayremove', 'locationfound',
    'locationerror', 'popupopen', 'popupclose'
  ]),

  leafletProperties: Object.freeze([
    'zoom:setZoom:zoomPanOptions', 'minZoom', 'maxZoom',
    'center:panTo:zoomPanOptions',
    'bounds:fitBounds:fitBoundsOptions', 'maxBounds'
  ]),

  center: toLatLng(),

  // By default all layers try to register in a container layer.
  // It is not the case of the map itself as it is the topmost container.
  registerWithParent() { },
  unregisterWithParent() { },

  createLayer() {
    let options = this.get('options');

    // Don't set center and zoom right now.
    // Let base layer bind the events first
    delete options.center;
    delete options.zoom;
    return this.L.map(this.element, options);
  },

import { reads } from '@ember/object/computed';
import { next } from '@ember/runloop';
import DivOverlayLayer from 'ember-leaflet/components/div-overlay-layer';

export default DivOverlayLayer.extend({

  leafletOptions: Object.freeze([
    'direction', 'permanent', 'sticky', 'interactive', 'opacity'
  ]),

  // if this tooltip is permanent, we need to render the content immediately
  shouldRender: reads('permanent'),

  createLayer() {
    return this.L.tooltip(this.get('options')).setContent(this.get('destinationElement'));
  },

  didCreateLayer() {
    this._addPopupListeners();
  },

import { observer } from '@ember/object';
import { later, cancel, next } from '@ember/runloop';
import DivOverlayLayer from 'ember-leaflet/components/div-overlay-layer';

export default DivOverlayLayer.extend({

  leafletOptions: Object.freeze([
    'maxWidth', 'minWidth', 'maxHeight', 'autoPan', 'autoPanPaddingTopLeft',
    'autoPanPaddingBottomRight', 'autoPanPadding', 'keepInView', 'closeButton',
    'autoClose'
  ]),

  isOpen() {
    // leaflet 1 added an `isOpen` method
    return this._layer.isOpen ? this._layer.isOpen() : this._layer._isOpen;
  },

  /*
   * Action to yield to block
   */
  closePopup() {

import Ember from 'ember';
import { get, set } from '@ember/object';
import { isEmpty } from '@ember/utils';
import Layer from 'ember-leaflet/components/geojson-layer';
import uuidV4 from 'npm:uuid/v4';
/* global L */

export default Layer.extend({
  L,
  leafletEvents: ['layerremove'],
  didCreateLayer() {
    this._super(...arguments);
    let json = this.get('geoJSON');

    //define non-enumberable properties
    Object.defineProperties(json, {
      _layer: {
        writable: true,
        configurable: true,
        enumerable: false,
        value: this.get('_layer')
      },
      state: {
        writable: true,

import EmberObject, { get, set } from '@ember/object';
import LeafletMap from 'ember-leaflet/components/leaflet-map';
//import uuidV4 from 'uuid/v4';
/* global L */

export default LeafletMap.extend({
  L,
  leafletOptions: ['drawControl'],
  leafletEvents: [
    'draw:editstart',
    'draw:editstop',
    'draw:deletestart',
    'draw:deletestop',
    'draw:deleted',
    'draw:editmove'
  ],
  //drawControl:false,
  maxZoom: 18,
  minZoom: 1,
  maxBounds: L.latLngBounds(L.latLng(-90, -360), L.latLng(90, 360)),
  maxBoundsViscosity: 0.2,
  worldCopyJump: true,

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'