How to fetch the data

Question

Please tell me how to fetch the data from firebase

app/template/gmap.hbs

  {{#leaflet-map lat=lat lng=lng zoom=zoom}}

  {{tile-layer url="http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"}}

 {{#each model as |c|}}
 {{#layers.marker lat=c.latitude lng=c.longitude draggable=true}}
 {{/layers.marker}}
 {{/each}}

 {{/leaflet-map}}

app/controller/newcase.js

 import Ember from 'ember';
 export default Ember.Controller.extend({
 actions:{
 addCase: function() {
 var hname = this.get('hname');
 var location = this.get('location');
 var latitude = this.get ('latitude');
 var longitude = this.get('longitude');
 var newCase = this.store.createRecord('case', {
 hname : hname,
 location : location,
 latitude : latitude,
 longitude : longitude
 });
 newCase.save();
 this.setProperties({
 hname: ' ',
 location: ' ',
 latitude: ' ',
 longitude: ' '
 });
 }
}
});

app/controller/gmap.js

  import  Ember from 'ember';
  export default Ember.Controller.extend ({
 });

app/model/case.js

import Model from 'ember-data/model';
import attr from 'ember-data/attr';
 export default Model.extend({
 hname : attr('string'),
 location: attr('string'),
 latitude: attr('number'),
 longitude: attr('number')
 });

app/route/newcase.js

import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.get('store').findAll('case');
 }
});

firebase data

i want to display that location, lat and lng in map i am not getting how to display please tell me how to write code for that.

score 0 · Answer 1 · answered Jun 30 '16 at 14:20

If you check the docs of ember-leaflet v2 the marker layer component is probably your problem.

{{#leaflet-map lat=lat lng=lng zoom=zoom}}    

  {{tile-layer url="http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"}}    

  {{#marker-layer location=emberConfLocation}}
    <h3>The Oregon Convention Center</h3>
    777 NE Martin Luther King Jr Blvd<br>
    Portland, OR 97232
  {{/marker-layer}}    

  {{#marker-layer location=hotel}}
    <h3>Hotel</h3>
  {{/marker-layer}}    

{{/leaflet-map}}

{{layers.marker}} is not valid i guess

How to fetch the data

1 Answers1