map of the world with a 'you are here' pointer, pointing randomly to somewhere in africa

Creating A Higher Order Component In React To Capture Browser Location Settings Part II
Published: 23-Oct-2019

This is a follow on article to a post you can find here.

The previous article showed how to create a higher order component. This article focusses on the utility functions that are used to capture the location and return this location information to the HOC. Let's look at the code:

const getLocation = () => {
const options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0,
};
return new Promise((resolve, reject) => {
navigator.geolocation.getCurrentPosition(resolve, reject, options);
});
};
const getMyLocation = () => getLocation()
.then(async (position) => {
const crd = await position.coords;
const location = {
latitude: crd.latitude,
longitude: crd.longitude,
altitude: crd.altitude,
altitudeAccuracy: crd.altitudeAccuracy,
heading: crd.heading,
speed: crd.speed,
accuracy: crd.accuracy,
timestamp: position.timestamp,
error: {
code: 0,
message: '',
},
};
return location;
})
.catch((error) => {
let position = true;
if (error.message.toLowerCase() === 'user denied geolocation') {
position = false;
}
return {
error: {
code: error.code,
message: error.message,
position,
},
};
});
export { getMyLocation };
view raw getMyLocation.js hosted with ❤ by GitHub

So, what does the code do?

Recall from the previous post that the HOC awaits getMyLocation in componentDidMount, and updates state once the location (or an error) is returned? This is the code the HOC is awaiting.

getMyLocation returns a function called getLocation which in turn returns the navigator.geolocation data.

Once getLocation has done it's bit the getMyLocation part then creates a location object made up of the position information passed into it.

A catch is in place in case of errors.

Shazam. Location provided!

map of the world with a 'you are here' pointer, pointing randomly to somewhere in africa

Creating A Higher Order Component In React To Capture Browser Location Settings Part II
Published: 23-Oct-2019

This is a follow on article to a post you can find here.

The previous article showed how to create a higher order component. This article focusses on the utility functions that are used to capture the location and return this location information to the HOC. Let's look at the code:

const getLocation = () => {
const options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0,
};
return new Promise((resolve, reject) => {
navigator.geolocation.getCurrentPosition(resolve, reject, options);
});
};
const getMyLocation = () => getLocation()
.then(async (position) => {
const crd = await position.coords;
const location = {
latitude: crd.latitude,
longitude: crd.longitude,
altitude: crd.altitude,
altitudeAccuracy: crd.altitudeAccuracy,
heading: crd.heading,
speed: crd.speed,
accuracy: crd.accuracy,
timestamp: position.timestamp,
error: {
code: 0,
message: '',
},
};
return location;
})
.catch((error) => {
let position = true;
if (error.message.toLowerCase() === 'user denied geolocation') {
position = false;
}
return {
error: {
code: error.code,
message: error.message,
position,
},
};
});
export { getMyLocation };
view raw getMyLocation.js hosted with ❤ by GitHub

So, what does the code do?

Recall from the previous post that the HOC awaits getMyLocation in componentDidMount, and updates state once the location (or an error) is returned? This is the code the HOC is awaiting.

getMyLocation returns a function called getLocation which in turn returns the navigator.geolocation data.

Once getLocation has done it's bit the getMyLocation part then creates a location object made up of the position information passed into it.

A catch is in place in case of errors.

Shazam. Location provided!