I am trying out ember-cli to get an ember project going, however I have previously relied on rails and the asset pipeline to compile all my js and (s)css for previous projects.
I admit a weak understanding of js build tools, so apologies if the question is basic: How can I see what dependencies are being compiled/included in the build? Specifically, I want to include both zurb-foundation and ember-leaflet in my project. I am not sure if they are there (at least the leaflet map is not showing up in the project --- using a basic example that worked with both rails and rail-eak).
The files (ember-leaflet, etc) are in the vendor directory of the project and were placed there thru bower install (I assume?); do I have to manually include them in the root bower.json file (currently they are not); is the order in bower.json important?
Thanks in advance.
DJ
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%;
}
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 :)
