JavaScript ember-leaflet/components/leaflet-map extend Examples

Example #1

File: leaflet-map-test.js Project: gandalfar/ember-leaflet

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
import { assertionInjector, assertionCleanup } from '../../assertions';
import LeafletMapComponent from 'ember-leaflet/components/leaflet-map';
import locations from '../../helpers/locations';

let map;

moduleForComponent('leaflet-map', 'Integration | Component | leaflet map', {
  integration: true,
  beforeEach() {
    assertionInjector();

    this.register('component:leaflet-map', LeafletMapComponent.extend({
      init() {
        this._super(...arguments);
        map = this;
      }
    }));

    this.set('center', locations.nyc);
    this.set('zoom', 12);
  },
  afterEach() {
    assertionCleanup();
  }
});

test('update map layer using leafletProperties (zoom and center)', function(assert) {
  this.render(hbs`{{leaflet-map zoom=zoom center=center}}`);

  assert.locationsEqual(map._layer.getCenter(), locations.nyc);

Example #2

File: leaflet-map.js Project: borisrorsvort/mycollecto

import LeafletMapComponent from 'ember-leaflet/components/leaflet-map';
import ResizeAware from 'ember-resize/mixins/resize-aware';

export default LeafletMapComponent.extend(ResizeAware, {
  didInsertElement() {
    this._super();
    this.resize();
  },

  didCreateLayer() {
    this._super(...arguments);
    // Adding geolocation map control
    this.L.control.locate({
      icon: 'paper-icon md-font material-icons md-default-theme room',
      iconLoading: 'paper-icon md-font material-icons md-default-theme autorenew md-spin',
    }).addTo(this._layer);
  },

  debouncedDidResize () {
    this.resize();
  },

  resize () {
    if (this._layer) {
      this._layer._container.style.height = `${window.innerHeight - 64}px`;
      this._layer.invalidateSize();
    }
  }
});

Example #3

File: site-map.js Project: rogerschlachter/geo-demo

/* globals L */
import LeafletMap from 'ember-leaflet/components/leaflet-map';


//site map is just an extended version of a normal leaflet map
export default LeafletMap.extend({
  L,
  leafletOptions: ['drawControl', 'editable']
});

Example #4

File: bus-map.js Project: Vermonster/schoolbot

export default LeafletMap.extend({
  buses: [],
  schools: [],
  user: null,

  maxZoom: 18, // Ensure bounds fitting still works with only one point
  zoomControl: false,
  attributionControl: false,

  isTrackingBuses: true,

  // FIXME: This is gross, but necessary since Leaflet offers no way to
  // determine whether a zoom event was initiated by the user or the code
  // https://github.com/Leaflet/Leaflet/issues/2934
  nextZoomIsTracking: true,

  didCreateLayer() {
    this._setTrackingBounds();
    this._super(...arguments);
  },

  // FIXME: This is currently undocumented and may change in new releases
  // https://github.com/miguelcobain/ember-leaflet/issues/11
  _dragstart() {
    this.set('isTrackingBuses', false);
  },
  _zoomstart() {
    if (!this.get('nextZoomIsTracking')) {
      this.set('isTrackingBuses', false);
    }
  },
  _moveend() {
    this.set('nextZoomIsTracking', false);
  },

  busLocationsChanged: Ember.observer('*****@*****.**', function() {
    if (this.get('isTrackingBuses')) {
      this.setTrackingBounds();
    }
  }),

  setTrackingBounds() {
    Ember.run.debounce(this, this._setTrackingBounds, 250, true);
  },

  _setTrackingBounds() {
    let bounds = this.L.latLngBounds([]);

    bounds.extend([this.get('user.latitude'), this.get('user.longitude')]);
    this.get('buses').forEach((bus) => {
      bounds.extend([bus.get('latitude'), bus.get('longitude')]);
    });

    this.set('nextZoomIsTracking', true);
    this.set('bounds', bounds);
  },

  actions: {
    zoomIn() {
      this._layer.zoomIn();
    },
    zoomOut() {
      this._layer.zoomOut();
    },

    enableTracking() {
      this.set('isTrackingBuses', true);
      this.setTrackingBounds();
    }
  }
});