Geolocation React

I am interested in Maps, realtime location, Geolocation, so here I’ll be exploring things about it and try to develop apps for Geolocation.

I context to React development there is a hook called useGeolocation.

Visiting the site on my privacy focused browsers I am not getting the results.

Location is a sensitive information so the site have to ask for it. And user will permit it.

Here the site is asking for permission, but fails to load the map or something.

Waterfox

• Permission provided but not working.

Chromium

Same as Waterfox

I am using Nobara let’s see if this setting helps.

Even after allowing the location won’t work!!

Location fixing

Well, well, well Even open street maps can’t access my location!

Location is not working at all!!

Is it my system or what?

Opened up Google maps in waterfox, it asked to grant access location differently, I mean it was Gnome sort of. If that is the case then Waterfox should be on the location setting section, let’s see!

Indeed it is!

Tested on Mylocation but it failed!!!

Should I restart?

Let’s see..

Nope! Didn’t help.

So how can I get my location then?

I can get my location on phone with Mull browser but not with Cromite!!

Let’s try with normal browser now.

Firefox

I will have to debug why, Chromium, Waterfox, LibreWolf failed if Firefox passes.

Firefox asked for location outside the application

It works perfectly!!

In Firefox everything is perfect!!

Then why my other browser failed to get the location?

Another good resource is here if you’re facing any webGL related issue.

Well if I want to playaround with location then Firefox is my wayout.

So now I can start with useGeolocation

npm i @uidotdev/usehooks

"use client";

import * as React from "react";
import { useGeolocation } from "@uidotdev/usehooks";
// import Demo from "./Demo";

export default function App() {
  return (
    <section>
      <h1>useGeolocation</h1>
      <Location />
    </section>
  );
}

function Location() {
  const state = useGeolocation();

  if (state.loading) {
    return <p>loading... (you may need to enable permissions)</p>;
  }

  if (state.error) {
    return <p>Enable permissions to access your location data</p>;
  }

  console.log("state", state);

  //   return <Demo state={state} />;

  return <div>{JSON.stringify(state)}</div>;
}

I am using a Nextjs project for this

• Create a new page at /app/geolocation/page.tsx
• Add the above code

In documentation example they are using Demo, but I don’t know what that is so I just showed it normally.

And location is shown perfectly, Well now what?

Let’s show that to a map!!

Before that I added

const state = useGeolocation({
  enableHighAccuracy: true,
  maximumAge: 1000,
});

This maximumAge is for refreshing the data.

My repo link here I added it to new branch instead.

Openstreetmaps

To access this map we need to use Leaflet and to use Leaflet with React there is Leaflet for React!

I have tried this blog but this doesn’t to work!! Sad face ;(

No worries I found another thing called Mapbox.