Various ways of finding user location and showing on Leaflet maps : ReactJS
Tags: react, javascript, geolocation, webdev
Published: 2022-07-15 22:54:59

In this post we are going to see an example of finding user location and showing it on [leaflet](https://leafletjs.com/) interactive map using javascript/ReactJS. It will ask for browser permission to access user location(coordinates) and use google geocode api to find the location. If browser location permission is denied, it will find the location of your device public ip address.	

Demo of this example can be seen [here](https://m-react-location.netlify.app/), github [code](https://github.com/manojkmishra/react-mapchat-front). I have been using the same logic and javascript code for my company [website ](https://www.dowell.com.au/)to find the user location and show the content based on different states in Australia.	

**Folder structure:**

This is very simple web application, below is the folder structure of this web app. All the JavaScript code is included in App.js . We are using google geocoding api to find the location address. Its key needs to be saved in env file.
![Folder Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/93qjvn18vmd13vxra8u3.png)

**Finding user coordinates:**

To show any location on map, we need to have the coordinates of that location ie latitude and  longitude. Once we have lat, long, we can use them to find the location address using various APIs.
The W3C [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) is a standard way to retrieve the geographical location information for a client-side device. It allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked for permission to report location information.
Browsers [Navigator](https://developer.mozilla.org/en-US/docs/Web/API/Navigator) object has methods and properties about the application running the script. The Geolocation API is accessed via a call to [navigator.geolocation](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/geolocation); this will cause the user's browser to ask them for permission to access their location data. So either user will allow the location access or block it.	

![Navigator object code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x8df08w9vuqa8rdkxryg.jpg)

![Geo location access popup ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ade6yt72gw39ps4gwgae.jpg)


![Geo location result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6hp4o3cnzsrctkl4qvbr.jpg)


**Case 1: Location access allowed via browser**

In this case when user allows location access, this web app uses [google geocoding api](https://developers.google.com/maps/documentation/geocoding/start) to find the location address using user coordinates.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1w95ag0h446ob0ve2r25.jpg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/peuhwchwunioot0vnpyf.jpg)

We can also use other apis like [geonames api](http://www.geonames.org/export/web-services.html) for this. For geonames api we do not need any secret key (we do require key for google geocode api above)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mn8bzf0ld05tt7jfkbau.jpg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qwsmb1auqzsezcsadbrm.jpg)

**Case 2: Location access blocked via browser**

When user access access is not provided, it will use ipapi.co API to find the device public ip address.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ofp4s19wup2xx5geoni8.jpg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/68s2ov7fya0uer24lrql.jpg)

There are many other APIs we can use for finding the public ip  location, some of them are as below, information about them can be found [here](https://hackernoon.com/11-best-ip-geolocation-apis-for-cybersecurity-professionals-vp27t3ylp).

1: geoipify.whoisxmlapi.com
2: geo.ipify.org
3: IPInfo.io
4: DB-IP.com
5: IP2Location.com
6: IPData.co
7: IPGeolocation.io
8: IPStack.com
9: ClearIP.io
10: IPWhois.io

**Showing location coordinates on map:**

We are using [Leaflet JavaScript library](https://leafletjs.com/) for interactive maps.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ccxsgxcpuoz0m0pq7zx8.JPG)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c7iyusgs4boxfmqjxy2t.JPG)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qq1owcus8f5t792i1gnq.JPG)

Thank you