How to get the webshim polyfill library working in React?

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")
        }
    }

Not sure about `React`, but in `React Native` it won't work. You can use `geolocation` in react native instead. — Tejashwi Kalp Taru, Jun 25 '19 at 10:10
@TejashwiKalpTaru i actually want to use it in React only - i want to use the polyfill as an alternative for browsers that cant access the builtin geolocation feature. (i have modified the question) — kisakye gordon, Jun 25 '19 at 10:17

score 0 · Answer 1 · answered Jun 25 '19 at 14:13

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
}

thats a better approach – kisakye gordon Jun 27 '19 at 19:30 — kisakye gordon, Jun 27 '19 at 19:30

How to get the webshim polyfill library working in React?

1 Answers1