project page + examples

Brocfile.js

@@ -20,4 +20,15 @@ var app = new EmberAddon();
 
 app.import(app.bowerDirectory + '/ember/ember-template-compiler.js');
 
-module.exports = app.toTree();
+app.import(app.bowerDirectory + '/bootstrap/dist/js/bootstrap.js');
+app.import(app.bowerDirectory + '/bootstrap/dist/css/bootstrap.css');
+
+var mergeTrees = require('broccoli-merge-trees');
+var pickFiles = require('broccoli-static-compiler');
+var extraAssets = pickFiles(app.bowerDirectory + '/bootstrap/dist/fonts',{
+    srcDir: '/',
+    files: ['**/*'],
+    destDir: '/fonts'
+});
+
+module.exports = mergeTrees([app.toTree(), extraAssets]);

bower.json

@@ -12,6 +12,7 @@
     "loader.js": "ember-cli/loader.js#3.2.0",
     "qunit": "~1.17.1",
     "leaflet": "~0.7.3",
-    "leaflet.markercluster": "~0.4.0"
+    "leaflet.markercluster": "~0.4.0",
+    "bootstrap": "~3.3.4"
   }
 }

package.json

@@ -26,6 +26,8 @@
   "license": "MIT",
   "devDependencies": {
     "broccoli-asset-rev": "^2.0.2",
+    "broccoli-merge-trees": "^0.2.1",
+    "broccoli-static-compiler": "^0.2.1",
     "ember-cli": "0.2.3",
     "ember-cli-app-version": "0.3.3",
     "ember-cli-content-security-policy": "0.4.0",
@@ -36,8 +38,8 @@
     "ember-cli-qunit": "0.3.10",
     "ember-cli-uglify": "1.0.1",
     "ember-cli-yuidoc": "0.6.2",
-    "ember-export-application-global": "^1.0.2",
     "ember-disable-prototype-extensions": "^1.0.0",
+    "ember-export-application-global": "^1.0.2",
     "ember-try": "0.0.4"
   },
   "keywords": [

tests/dummy/app/components/example2-map.js

@@ -0,0 +1,27 @@
+import Ember from 'ember';
+import EmberLeafletComponent from 'ember-leaflet/components/leaflet-map';
+import TileLayer from 'ember-leaflet/layers/tile';
+import MarkerCollectionLayer from 'ember-leaflet/layers/marker-collection';
+import MarkerLayer from 'ember-leaflet/layers/marker';
+import PopupMixin from 'ember-leaflet/mixins/popup';
+import DraggableMixin from 'ember-leaflet/mixins/draggable';
+
+export default EmberLeafletComponent.extend({
+  childLayers: [
+    TileLayer.extend({
+      tileUrl: 'http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png',
+      subdomains: 'abcd',
+    	minZoom: 0,
+    	maxZoom: 20
+    }),
+    MarkerCollectionLayer.extend({
+      content: Ember.computed('markers', function() {
+        return this.controller.get('markers');
+      }),
+      itemLayerClass: MarkerLayer.extend(PopupMixin, DraggableMixin, {
+        popupContent: Ember.computed.alias('content.name')
+      })
+    })
+  ],
+  zoom: 14
+});

tests/dummy/app/controllers/example1.js

@@ -0,0 +1,35 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  zoom: 16,
+  center: L.latLng(40.78704035888754, -73.9639949798584),
+  lat: Ember.computed('center', function(key, value) {
+    // setter
+    if (arguments.length > 1) {
+      var latlng = this.get('center');
+      this.set('center', L.latLng(value, this.get('center').lng));
+    }
+
+    // getter
+    return this.get('center').lat;
+  }),
+  lng: Ember.computed('center', function(key, value) {
+    // setter
+    if (arguments.length > 1) {
+      var latlng = this.get('center');
+      this.set('center', L.latLng(this.get('center').lat, value));
+    }
+
+    // getter
+    return this.get('center').lng;
+  }),
+
+  actions: {
+    increaseZoom: function() {
+      this.incrementProperty('zoom');
+    },
+    decreaseZoom: function() {
+      this.decrementProperty('zoom');
+    }
+  }
+});

tests/dummy/app/controllers/example2.js

@@ -0,0 +1,43 @@
+import Ember from 'ember';
+
+var Marker = Ember.Object.extend({
+  lat: Ember.computed('location', function(key, value) {
+    // setter
+    if (arguments.length > 1) {
+      var latlng = this.get('location');
+      this.set('location', L.latLng(value, this.get('location').lng));
+    }
+
+    // getter
+    return this.get('location').lat;
+  }),
+  lng: Ember.computed('location', function(key, value) {
+    // setter
+    if (arguments.length > 1) {
+      var latlng = this.get('location');
+      this.set('location', L.latLng(this.get('location').lat, value));
+    }
+
+    // getter
+    return this.get('location').lng;
+  }),
+});
+
+export default Ember.Controller.extend({
+  model: Ember.A([
+    Marker.create({location: L.latLng(40.714, -74.000), name: 'Marker 1'}),
+    Marker.create({location: L.latLng(40.714, -73.989), name: 'Marker 2'}),
+    Marker.create({location: L.latLng(40.721, -73.991), name: 'Marker 3'})
+  ]),
+  center: L.latLng(40.717, -73.996),
+  actions: {
+    removeMarker: function(marker) {
+      this.get('model').removeObject(marker);
+    },
+    addMarker: function() {
+      this.get('model').addObject(Marker.create({
+        location: this.get('center')
+      }));
+    }
+  }
+});

tests/dummy/app/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Dummy</title>
+    <title>Ember Leaflet</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 

tests/dummy/app/styles/app.css

@@ -1,8 +1,144 @@
-html, body {
-  margin: 20px;
+/* GLOBAL STYLES
+-------------------------------------------------- */
+/* Padding below the footer and lighter body text */
+
+body {
+  padding-bottom: 40px;
+  color: #5a5a5a;
+}
+
+
+/* CUSTOMIZE THE NAVBAR
+-------------------------------------------------- */
+
+/* Special class on .container surrounding .navbar, used for positioning it into place. */
+.navbar-wrapper {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 20;
+}
+
+/* Flip around the padding for proper display in narrow viewports */
+.navbar-wrapper > .container {
+  padding-right: 0;
+  padding-left: 0;
+}
+.navbar-wrapper .navbar {
+  padding-right: 15px;
+  padding-left: 15px;
+}
+.navbar-wrapper .navbar .container {
+  width: auto;
+}
+
+
+/* CUSTOMIZE THE CAROUSEL
+-------------------------------------------------- */
+
+/* Carousel base class */
+
+.map-container {
+  height: 400px;
+  margin-bottom: 60px;
+}
+
+.map-container .jumbotron {
+  position: absolute;
+  top:0;
+  pointer-events: none;
+  background-color: transparent;
+  padding: 85px 100px;
+  width: 100%;
+}
+
+.map-container .jumbotron h1{
+  font-weight: 600;
+}
+
+.map-container .leaflet-map-pane {
+  opacity: 0.8;
+  -webkit-filter: blur(4px);
+}
+
+.leaflet-container {
+  width:100%;
+  height:100%;
+}
+
+/* MARKETING CONTENT
+-------------------------------------------------- */
+
+/* Center align the text within the three columns below the carousel */
+.marketing .col-lg-4 {
+  margin-bottom: 20px;
+  text-align: center;
+}
+.marketing h2 {
+  font-weight: normal;
+}
+.marketing .col-lg-4 p {
+  margin-right: 10px;
+  margin-left: 10px;
+}
+
+
+/* Featurettes
+------------------------- */
+
+.featurette-divider {
+  margin: 80px 0; /* Space out the Bootstrap <hr> more */
+}
+
+/* Thin out the marketing headings */
+.featurette-heading {
+  font-weight: 300;
+  line-height: 1;
+  letter-spacing: -1px;
+}
+
+
+/* RESPONSIVE CSS
+-------------------------------------------------- */
+
+@media (min-width: 768px) {
+  /* Navbar positioning foo */
+  .navbar-wrapper {
+    margin-top: 20px;
+  }
+  .navbar-wrapper .container {
+    padding-right: 15px;
+    padding-left: 15px;
+  }
+  .navbar-wrapper .navbar {
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  /* The navbar becomes detached from the top, so we round the corners */
+  .navbar-wrapper .navbar {
+    border-radius: 4px;
+  }
+
+  /* Bump up size of carousel content */
+  .carousel-caption p {
+    margin-bottom: 20px;
+    font-size: 21px;
+    line-height: 1.4;
+  }
+
+  .featurette-heading {
+    font-size: 50px;
+  }
+}
+
+@media (min-width: 992px) {
+  .featurette-heading {
+    margin-top: 120px;
+  }
 }
 
-.leaflet-container{
-  min-width:300px;
-  min-height:300px;
+.example2 h2 {
+  margin-top: 0;
 }