Making my first react app. I want to update the google maps api based on the user's location.
I am receiving the error "this is undefined". I understand using .bind(this) and wrapping in an arrow function but think this case is a bit different because I am setting state inside a nested function:
constructor(props) {
super(props);
this.state = {zip: null, lat: 40.5304 , lng: -100.6534 , zoom: 3.8 };
this.updateCurrentPosition= this.updateCurrentPosition.bind(this);
}
//...
updateCurrentPosition = () => {
navigator.geolocation.getCurrentPosition(success, error);
function success(pos) {
this.setState(`{lat: ${pos.coords.latitude}, lng: ${pos.coords.longitude}, zoom: ${3.8}`)
}
function error(err) {
console.warn(`ERROR(${err.code}): ${err.message}`);
};
}
ops = () => {
return {
center: { lat: this.state.lat, lng: this.state.lng },
zoom: this.state.zoom
}
};
Arrow functions automatically bind functions to the parent class. If a function is not binded, or not an arrow function, "this" will refer only to the function itself, even if it is nested. Your success function (and failure function too) is not bound to the parent class, as you have neither binded it or defined it as an arrow function.
The problem is that this is undefined under strict mode in Javascript. You can refer to this paragraph to read more http://2ality.com/2014/05/this.html
For your particular question, when you defined success and error, the two functions are not bound to parents.
The following modification by defining the functions as arrow functions will resolve your issue.
const success = (pos) => {
this.setState(`{lat: ${pos.coords.latitude}, lng: ${pos.coords.longitude}, zoom: ${3.8}`)
}
const error = (err) => {
console.warn(`ERROR(${err.code}): ${err.message}`);
};
So, I've instead passed the functions directly as arguments to the getCurrentPosition method and it seems to work fine.
updateCurrentPosition = () => {
navigator.geolocation.getCurrentPosition( (pos) => {
this.setState({ lat: pos.coords.latitude, lng: pos.coords.longitude, zoom: 1 })
},
(err) => {
console.warn(`ERROR(${err.code}): ${err.message}`)
}
)
}
Related
I'm having this weird issue where when I get the result of a HTML geolocation call, I cant bind it to Vue data, but I can console.log it successfully.
Vue method:
initGeolocation: function() {
if( navigator.geolocation )
{
// Call getCurrentPosition with success and failure callbacks
navigator.geolocation.getCurrentPosition( success, fail );
}
else
{
return;
}
function success(position)
{
console.log(position.coords.latitude); //works
this.lat = position.coords.latitude; //does not work
}
function fail()
{
console.log('fail')
}
},
mounted() {
this.lat = this.initGeolocation(); // does not work
console.log(this.initGeolocation()) // returns undefined
},
Data:
lat: '',
long: '',
Any help would be very much appreciated.
The word this refers to the scope of the function. When you nest another function inside, the word this now refers to the new/ smaller scope so this.lat is no longer defined. So we capture the out this in vm and use it inside functions.
methods: {
initGeolocation: function() {
var vm = this;
if( navigator.geolocation)
{
// Call getCurrentPosition with success and failure callbacks
navigator.geolocation.getCurrentPosition( success, fail );
}
else
{
return;
}
function success(position)
{
vm.lat = position.coords.latitude; //should work now!!
}
function fail()
{
console.log('fail')
}
}
},
mounted() {
this.initGeolocation();
},
In your mounted you assign this.lat with the return of your initGeolocation() method. However this method does not return any data if it succeeds. Instead you write your result into this.lat which then will be overridden again by the void result of your method. So make sure your method initGeolocation either returns your geolocation data or you change your mounted method to call the method without assigning the return value to this.lat.
Also it seems like you just added the initGeolocation method to your component. Look into the methods property of vue components where this would belong.
So try this instead:
mounted() {
this.initGeolocation();
console.log(this.initGeolocation());
},
methods: {
initGeolocation: function() {
if( navigator.geolocation)
{
// Call getCurrentPosition with success and failure callbacks
navigator.geolocation.getCurrentPosition( success, fail );
}
else
{
return;
}
function success(position)
{
this.lat = position.coords.latitude; //does not work
}
function fail()
{
console.log('fail')
}
}
}
I am using Mapbox with Vue.js, and when adding a geojson layer to the map, keep running into this error message:
Uncaught (in promise) Error: Style is not done loading
I have tried many variations to no avail. My question is, how do I ensure the proper order of execution so the layer is always added? I have wrapped the function in a Javascript Promise, with a workaround adding a setTimeout() so the map/style has time to finish loading, even though it is already within a Mapbox listener, but the error creeps its way back every so often. My current component is as follows (have left out certain functions for brevity):
export default {
mounted() {
new Promise(resolve => {
this.loadMap([this.subjectProperty.longitude, this.subjectProperty.latitude])
if(this.mapLoaded === true) resolve()
}).then(() => {
setTimeout(() => {
this.showParcel()
}, 3000)
})
},
methods: {
loadMap(center) {
var self = this
mapBox = new mapboxgl.Map({
container: 'map',
zoom: 12,
pitch: 45,
center: center,
style: 'mapbox://styles/mapbox/streets-v10'
})
mapBox.on('style.load', function() {
self.mapLoaded = true
})
},
showParcel() {
mapBoxBounds = new mapboxgl.LngLatBounds()
this.parcel.geo_json['geometry']['coordinates'][0].forEach((coord) => {
mapBoxBounds.extend(coord)
})
MapBoxObject.addGeoJsonParcels(this.parcel.geo_json)
MapBoxObject.fitBounds()
}
}
}
try code below:
export default {
mounted() {
this.loadMap([
this.subjectProperty.longitude,
this.subjectProperty.latitude
]).then(_=>{
this.showParcel()
})
},
methods: {
loadMap(center) {
return new Promise(resolve=>{
let mapBox = new mapboxgl.Map({
container: 'map',
zoom: 12,
pitch: 45,
center: center,
style: 'mapbox://styles/mapbox/streets-v10'
})
mapBox.on('style.load', _ => {
resolve()
})
})
},
showParcel() {
mapBoxBounds = new mapboxgl.LngLatBounds()
this.parcel.geo_json['geometry']['coordinates'][0].forEach((coord) => {
mapBoxBounds.extend(coord)
})
MapBoxObject.addGeoJsonParcels(this.parcel.geo_json)
MapBoxObject.fitBounds()
}
}
}
I'm trying to get the user's location (that works) and set it to the current state in a React component (this part doesn't). I've looked through a few answers on here and can't tell what I'm doing wrong.
Here's what I have:
class Container extends Component {
constructor() {
super()
this.state = {
location: {
lat: 0,
lng: 0
}
}
}
componentDidMount() {
navigator.geolocation.getCurrentPosition(
(position) => {
let lat = position.coords.latitude
let lng = position.coords.longitude
console.log("getCurrentPosition Success " + lat + lng) // logs position correctly
this.setState({
location: {
lat: lat,
lng: lng
}
})
},
(error) => {
this.props.displayError("Error dectecting your location");
console.error(JSON.stringify(error))
},
{enableHighAccuracy: true, timeout: 20000, maximumAge: 1000}
)
}
render() {
const location = this.state.location
return (
<div>
<Map center={location}/>
</div>
)
}
}
It looks similar to what other people have, and I've tried a few different ways, but I can't get the state to set. Is there something I'm missing or doing wrong?
The setState command is working fine.
Note that the get location is an async. call, and therefore the render() will be called twice. The first time it call, the lat/lng is zero.
You can add a logic to check it is zero and return null, if you want to render the output after getting the lat/lng from the geolocation services.
I'm trying to display geolocation variables position.coords.lat/long and I'm having trouble storing the values in a global scope. Here is the code:
var GeoLoco = React.createClass({
lat: 0,
long: 0,
handler: function(position) {
this.lat = position.coords.latitude;
this.long = position.coords.longitude;
console.log("Lat,Long: "+this.lat+","+this.long);
},
render: function() {
navigator.geolocation.getCurrentPosition(this.handler);
return <p>Lat,Long: {this.lat},{this.long}</p>;
}
});
console.log displays the location data, but this.lat and this.long render as 0
Even if your variable's values changed, you have to re-render your component to update what you're seeing.
The component's state does it for you.
More information here
By default, when your component's state or props change, your component will re-render.
So :
var GeoLoco = React.createClass({
getInitialState: function() {
return {lat: 0, long: 0};
},
handler: function(position) {
this.setState({
lat: position.coords.latitude,
long: position.coords.longitude
});
},
render: function() {
// If this.state.lat is not equal to 0, do not call again getCurrentPosition()
if (!this.state.lat)
navigator.geolocation.getCurrentPosition(this.handler);
return <p>Lat,Long: {this.state.lat},{this.state.long}</p>;
}
});
If you don't want to use state, you can call forceUpdate() at the end of your handler method.
handler: function(position) {
this.lat = position.coords.latitude;
this.long = position.coords.longitude;
console.log("Lat,Long: "+this.lat+","+this.long);
this.forceUpdate();
},
I'm working on a mobile app with Phonegap which will use Geolocation. I used Geolocation before but this time I considered that creating a new object wrapper for it would be better as a large part of the functionality is based on this and don't want to end up with messy code.
The solution is probably straight forward but it beats me as I've never done anything very advanced in JS using objects. Here's the code (removed unneeded parts) at the moment:
function Geolocation(maximumAge, accurate) {
this.settings = {
'maximumAge': maximumAge,
'accurate': accurate
}
}
Geolocation.prototype = {
position: {
latitude: null,
longitude: null,
altitude: null,
accuracy: null,
altitudeAccuracy: null,
heading: null,
speed: null
},
lastCheck: null,
watchId: null,
onSuccess: function(position) {
this.position.latitude = position.coords.latitude;
this.position.longitude = position.coords.longitude;
this.position.altitude = position.coords.altitude;
this.position.accuracy = position.coords.accuracy;
this.position.altitudeAccuracy = position.coords.altitudeAccuracy;
this.position.heading = position.coords.heading;
this.position.speed = position.coords.speed;
this.lastCheck = new Date(position.timestamp);
},
onError: function(error) {
console.log(error.code+' '+error.message);
},
getCoordinates: function() {
if (this.watchId == null) {
this.watchId = navigator.geolocation.watchPosition(this.onSuccess, this.onError, { maximumAge: this.settings.maximumAge, enableHighAccuracy: this.settings.accurate});
}
return {
latitude: this.position.latitude,
longitude: this.position.longitude
};
}
};
As you probably noticed already, when I call getCoordinates(), the callback success function is (I'm guessing) out of the scope of the object, therefore not knowing what "this" is... Any idea of how to get around this or what the correct implementation would be?
Thank you for your time!
Later edit: I know I need to modify the function to return the coordinates only after the position was found. Not sure on how to do this at the moment, but if you have any tips that would be great!
OK, I figured it out, partly with help from this other thread regarding binding the scope for the callback function: JavaScript Callback Scope
To return the coordinates I'm using a callback function. Included the code below and I'm marking this as community wiki - but if anyone has any suggestions please go ahead and make them. Everything seems to be working fine, but maybe I'm not doing something right here.
function Geolocation(maximumAge, accurate) {
this.settings = {
'maximumAge': maximumAge,
'accurate': accurate
}
}
Geolocation.prototype = {
position: {
latitude: null,
longitude: null,
altitude: null,
accuracy: null,
altitudeAccuracy: null,
heading: null,
speed: null
},
lastCheck: null,
callback: null,
watchId: null,
onSuccess: function(position) {
this.position.latitude = position.coords.latitude;
this.position.longitude = position.coords.longitude;
this.position.altitude = position.coords.altitude;
this.position.accuracy = position.coords.accuracy;
this.position.altitudeAccuracy = position.coords.altitudeAccuracy;
this.position.heading = position.coords.heading;
this.position.speed = position.coords.speed;
this.lastCheck = new Date(position.timestamp);
var pos = {
latitude: this.position.latitude,
longitude: this.position.longitude
};
// call callback with position and accuracy parameters
this.callback(pos, this.position.accuracy);
},
onError: function(error) {
console.log(error.code+' '+error.message);
},
getCoordinates: function(callback) {
// Helper function to bind scope to callback function as seen at https://stackoverflow.com/questions/183214/javascript-callback-scope
function bind(scope, fn) {
return function () {
fn.apply(scope, arguments);
};
}
// Assign the callback function to the local member
this.callback = callback;
// watchPosition is a method that gets called each time the position changes. Making sure it's only getting called once (watchId can be used to stop the function when necessary
if (this.watchId == null) {
// notice usage of the bind function here
this.watchId = navigator.geolocation.watchPosition(bind(this, this.onSuccess), bind(this, this.onError), { maximumAge: this.settings.maximumAge, enableHighAccuracy: this.settings.accurate});
}
}
};
Usage example:
var geo = new Geolocation(3000, true);
geo.getCoordinates(createMap);
function createMap(position, accuracy) {
// Your code here
}