ember-leaflet

controllers.application.js

import Ember from 'ember';
const { Controller } = Ember;

export default Controller.extend({
  lat: 45.528178,
  lng: -122.670059,
  zoom: 14,

  restaurants: Ember.A([
    {
      name: 'Sinju Restaurant',
      rating: 4,
      lat: 45.528531,
      lng: -122.681682
    },
    {
      name: 'Burgerville',
      rating: 3.8,
      lat: 45.530970,
      lng: -122.661968
    },
    {
      name: 'Le Pigeon',
      rating: 4.5,
      lat: 45.522752,
      lng: -122.657979,
      isOpen: true
    },
  ]),

  dangerZone: Ember.computed('[email protected]', '[email protected]', function() {
    return this.get('restaurants').map(r => ({lat: r.lat, lng: r.lng}));
  }),

  actions: {
    updateLocation(r, e) {
      let location = e.target.getLatLng();
      Ember.setProperties(r, {
        lat: location.lat,
        lng: location.lng
      });
    }
  }
});

styles.app.css

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.leaflet-container {
	width: 100%;
  height: 400px;
}

templates.application.hbs

<h1>ember-leaflet</h1>
<br>
<p><label>{{input type="checkbox" checked=nightMode}} Night mode</label></p>

{{#leaflet-map lat=lat lng=lng zoom=zoom as |layers|}}

  {{#if nightMode}}
    {{layers.tile url="http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png"}}
  {{else}}
    {{layers.tile url="http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"}}
  {{/if}}

  {{#each restaurants as |r|}}
    {{#layers.marker lat=r.lat lng=r.lng draggable=true onDragend=(action "updateLocation" r) as |marker|}}
      {{#marker.popup}}
        {{input value=r.name}}
        Rating: {{r.rating}}/5
      {{/marker.popup}}
    {{/layers.marker}}
  {{/each}}

  {{#layers.polygon locations=dangerZone color="red" as |polygon|}}
    {{#polygon.tooltip}}
    DANGER ZONE
    {{/polygon.tooltip}}
  {{/layers.polygon}}

{{/leaflet-map}}

twiddle.json

{
  "version": "0.11.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.11.0",
    "ember-data": "2.11.0",
    "ember-template-compiler": "2.11.0",
    "ember-testing": "2.11.0"
  },
  "addons": {
    "ember-leaflet": "3.0.9"
  }
}