title: ember-leaflet - initialize map with zoom to fit all pins
body: <p>I am using <code>ember-leaflet</code> with a new project and I've got a component which houses a map with several markers on it called <code>embedded-map</code>. I'm following the tutorial on their page and can set a static <code>zoom</code> value for my map.</p>
  
  <p>I saw there is some sort of <code>fitBounds</code> function available for the leaflet javascript library. Is there a way to access that while using <code>ember-leaflet</code>? My documentation search came up short, but I did find a template helper that seems related, but not quite what I'm looking for: <a href="https://miguelcobain.github.io/ember-leaflet/docs/helpers/lat-lng-bounds" rel="nofollow noreferrer">https://miguelcobain.github.io/ember-leaflet/docs/helpers/lat-lng-bounds</a>.</p>
  
  <p>embedded-map.js</p>
  
  <pre><code>import Component from "@ember/component";
  import { computed } from "@ember/object";
  import { readOnly } from "@ember/object/computed";
  
  export default Component.extend({
    tagName: "",
    zoom: 10.25, /* I'd like this to initialize to fit all map markers */
  
    lat: readOnly("trip.averageLatitude"), /* `trip` is a model passed into the component */
    lng: readOnly("trip.averageLongitude"),
  
    location: computed("trip.averageLatitude", "trip.averageLongitude", function() {
      return [this.get("averageLatitude"), this.get("averageLongitude")];
    }),
  });
  </code></pre>
  
  <p>embedded-map.hbs</p>
  
  <pre><code>{{#leaflet-map lat=lat lng=lng zoom=zoom as |layers|}}
    {{layers.tile url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"}}
  
    {{#each trip.days as |day|}}
      {{#each day.dayItems as |item|}}
        {{#layers.marker location=item.coordinates as |marker|}}
          {{#marker.popup}}
            &lt;h3&gt;{{item.name}}&lt;/h3&gt;
          {{/marker.popup}}
        {{/layers.marker}}
      {{/each}}
    {{/each}}
  {{/leaflet-map}}
  </code></pre>