How do you use bounds / CollectionBoundsMixin?

[muziejus]

My goal is to have all of the markers that appear frame the bounds of the map. I did this pretty easily on the Rails side via the leaflet-rails gem while calculating the bounds on the fly, but doing something similar, with a computed property bounds, like this:

App.IndividualMarkerCollectionLayer = App.MarkerCollectionLayer.extend({
  itemLayerClass: App.PopupLayer,
  didCreateLayer: function() {
    this._super();
    this._layer._map.fitBounds(this.get("content.bounds"));
  }
});

tells me that fitBounds is undefined. (or, at least, that's what's underlined in the Inspector)

I see that there's a CollectionBoundsMixin in ember-leaflet, which I think provides geometry.get('bounds'), so I can save having to calculate it myself.

But I still don't know how to set up the auto-zooming/panning that fitBounds provides, and/or don't know why fitBounds gives an error. When I comment that line out, the markers appear as expected, and I've even tried sending fitBounds an artificial L.latLngBounds, to see if that's the problem.

Thanks!

[goo32]

This is how I got it work but there may be a better way.

var markerCollectionLayer = EmberLeaflet.MarkerCollectionLayer.extend(
  EmberLeaflet.CollectionBoundsMixin, {
    contentBinding: 'controller',
    didCreateLayer: function() {
      this._super();
      this.get('parentLayer').get('layer').fitBounds(this.get('bounds'));
    }
  });

App.MyMap = EmberLeaflet.MapView.extend({
  childLayers: [
    EmberLeaflet.DefaultTileLayer,
    markerCollectionLayer
  ]
});

[muziejus]

Thanks! This worked great for my regular layer, but the slightly weird collection-as-individual-object layer (see #72 ) gives Cannot read property 'getBounds' of null

The code:

App.IndividualMarkerCollectionLayer = EmberLeaflet.MarkerCollectionLayer.extend(
  EmberLeaflet.CollectionBoundsMixin, {
    contentBinding: 'controller',
    didCreateLayer: function() {
      this._super();
      this._parentLayer._layer.fitBounds(this.get('bounds'));
  }
}); 
App.IndividualMapView = EmberLeaflet.MapView.extend({
  classNames: ['ember-leaflet-map'],
  controller: App.IndividualsAddressesController.create({
    container: App.__container__}),
  childLayers: [
    App.TileLayer,
    App.IndividualMarkerCollectionLayer
  ]
});

If I take out the didCreateLayer property, it shows the correct markers for a specific instance of the individual model.

Incidentally, I have a computed property on individual, called computedBounds, that computes the bounding box "by hand." Yet I get the same error if I try, above, this._parentLayer._layer.fitBounds(this.get('content.computedBounds'));

[goo32]

Btw, I discovered that's it's probably better to use get when referencing the layer and parentLayer.

this.get('parentLayer').get('layer').fitBounds(this.get('bounds'));