How to get the webshim polyfill library working in React? - reactjs

Question

I want to access the geolocation feature from the webshim library but i have failed to figure out the right setup to get it working ?
I am already accessing the inbuilt browser geolocation feature, but want to setup the polyfill in the case of browsers that dont have the geolocation feature.
webshim
import React from "react";
import webshim from 'webshim';
import $ from 'jquery';
class PlayGround extends React.Component{
pickLocation = () => {
console.log("Inside here")
webshim.ready('geolocation', () => {
navigator.geolocation.getCurrentPosition(function(pos){
alert("Thx, you are # latitude: "+ pos.coords.latitude +"/longitude: " + pos.coords.longitude);
});
});
console.log("end inside")
}
}

Answer 1

Using polyfill to fill the support for Geolocations won't work. Getting location from the browser requires native support.
Almost all of the browser supports geolocation, https://caniuse.com/#feat=geolocation
Instead, you should check if a browser has support for geolocation or not. If it's not supported, fail with grace (show some error to the user)
function fetchLocation() {
var options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};
navigator.geolocation.getCurrentPosition(success, error, options);
}
function success(pos) {
var crd = pos.coords;
console.log('Your current position is:');
console.log(`Latitude : ${crd.latitude}`);
console.log(`Longitude: ${crd.longitude}`);
console.log(`More or less ${crd.accuracy} meters.`);
}
function error(err) {
console.warn(`ERROR(${err.code}): ${err.message}`);
}
if(window.location.protocol == "https:" && navigator.geolocation) {
fetchLocation();
} else {
// We cannot access the geolocation, show some error
}