geojson-layer.js

import Ember from 'ember';
import BaseLayer from 'ember-leaflet/components/base-layer';
import PathLayer from 'ember-leaflet/components/path-layer';
import PopupMixin from 'ember-leaflet/mixins/popup';
/* global L */

/**
 * An ember-leaflet wrapper for L.geoJson, which renders GeoJson data onto a
 * map as features.
 *
 * NOTE: this layer uses Leaflet's standard SVG rendering for GeoJSON, so it's
 * probably slow.
 *
 * Takes:
 *   - data (the GeoJSON) object to render
 *   - all standard leaflet options for L.geoJson
 */
export default BaseLayer.extend(PopupMixin, {
  leafletOptions: [
    'pointToLayer',
    'style',
    'onEachFeature',
    'filter',
    'coordsToLatLng',
    ...PathLayer.prototype.leafletOptions
  ],

  data: null,
  pushDataToLeaflet: Ember.observer('data', function() {
    const data = this.get('data');
    if (!this._layer || !data) {
      return;
    }

    //recall that GeoJSON layers are actually layer groups -- we have to clear
    //their contents first...
    this._layer.clearLayers();

    //...then add new data to recreate the child layers in an updated form
    this._layer.addData(this.get('data'));
  }),

  createLayer() {
    return L.geoJson(null, this.get('options'));
  },

  didCreateLayer() {
    this._super(...arguments);
    this.pushDataToLeaflet();
  }

});