Ember: Consume Service in Component - ember.js

Question

I simply want to display my longitude on my app landing page/index/application.hbs. I am embarrassed to say how long I have been working at this! Can anyone help me?
//geoservice.js
import Ember from 'ember';
export default Ember.Service.extend({
longitude: function(position){
return position.coords.longitude;
},
latitude: function(position){
return position.coords.latitude;
}
});
//geo-component.js
import Ember from 'ember';
export default Ember.Component.extend({
geoservice: Ember.inject.service(),
myLongitude: function(){
if (navigator.geolocation) {
return this.get('geoservice').longitude(navigator.geolocation.getCurrentPosition());
} else {
return "Geolocation is not supported by this browser.";
}
}.on('init'),
});
//application.hbs
<h2 id="title">Welcome to Ember</h2>
{{outlet}}
{{geo-component.myLongitude}}

Answer 1

The problem wasn't consuming a service in a component, but that 1) the Geolocation API is asynchronous, and 2) you don't render a component like you did. This works:
app/components/geo-location.js
import Ember from 'ember';
export default Ember.Component.extend({
geo: Ember.inject.service(),
loading: true,
error: null,
latitude: null,
longitude: null,
setPosition: Ember.on('init', function() {
this.get('geo').getPosition().then((position) => {
this.set('latitude', position.latitude);
this.set('longitude', position.longitude);
this.set('loading', false);
}).catch((error) => {
this.set('error', error);
});
})
});
app/services/geo.js
import Ember from 'ember';
export default Ember.Service.extend({
getPosition() {
return new Ember.RSVP.Promise((success, error) => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error)
} else {
error( new Error("Geolocation is not supported by this browser.") );
}
}).then((position) => {
return { latitude: position.coords.latitude, longitude: position.coords.longitude };
});
}
});
app/templates/components/geo-location.hbs
{{#if error}}
{{error}}
{{else if loading}}
Loading...
{{else}}
lat: {{latitude}}, long: {{longitude}}
{{/if}}
app/templates/application.hbs
<h2 id="title">Welcome to Ember</h2>
{{geo-location}}