Including dependencies with ember-cli

Question 1

After some digging and a lot of reading I found the solution here and got ember-leaflet to work.

1.) Download the libs

bower install --save leaflet
bower install --save ember-leaflet

Note: It's probably not neccessary to download leaflet, since ember-leaflet seems to have it included (leaflet-dist).This is the part I did manually a few times, so you may or may not have vendor/leaflet-dist. Just change accordingly.

2.) Configure building the assets

Add the import lines in your Brocfile.js before the module.exports line

app.import('vendor/leaflet-dist/leaflet-src.js')
app.import('vendor/leaflet-dist/leaflet.css')
app.import('vendor/ember-leaflet/dist/ember-leaflet.js')

module.exports = app.toTree();

3) make Leaflet and EmberLeaflet known to Ember (.jshintrc)

{
  "predef": {
    ...
    "L": true,
    "EmberLeaflet": true
  }
  ...
}

4) create a view

export default EmberLeaflet.MapView.extend({
  classNames : ['ember-leaflet-map']
});

5) create a template using the view (where view name corresponds to the file name, here views/mapview.js)

<div id="map">
  {{view 'mapview'}}
</div>

6) check / add vendor style sheet to app/index.html (should be present with recent versions of ember-cli)

<head>
   ...
   <link rel="stylesheet" href="assets/vendor.css">
</head>

7) run Ember

ember server

8) Bonus: In case you are using Twitter Bootstrap 3 here's the css I had to add to app/styles/app.css (could probably be simplified)

html,
body {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding-top: 20px;
  height: 100%;
}
.page-content {
  padding: 40px 15px;
  height: 100%;
}
.row {
  margin-bottom: 1.5em;
}
#map {
  height: 100%;
}
.ember-leaflet-map {
  height: 100%;
}
body > .ember-view {
  height: 100%;
}

Question 2

It seems like somebody just created an ember-cli addon: https://www.npmjs.org/package/ember-cli-ember-leaflet

I'm going to try it :)