This is the ninth part of React MERN Place To Stay Project. In this video we added the location of the room. The map can automatically locate the city of the user depending on his/her ip address. And the user can also enable or activate the geolocate controller to find his/her exact location which is working almost the same as GPS locator. Also the user can search for any city or street address to add the location of the room on that specified address. And we handled the completed action of the location step on the stepper.
Reactjs
MapBox
mapbox-gl
react-map-gl
@mapbox/mapbox-gl-geocoder
ipapi.co
Material UI (MUI5)
Marker
NavigationControl
GeolocateControl
MapBoxGeocoder
useControl for Geocoder
The whole videos playlist of the project:
• React MERN Project with Node, Expres...
Source Code on github:
https://github.com/codelikepro22/plac...
00:00 Introduction
00:57 adding React MapBox GL from UBER and the marker
07:00 adding the navigator (zoom controllers)
07:39 adding the geolocate controller to find the user place like GPS locator
09:14 locating the user city by ip address (find by ip)
12:18 adding collapsed search box to search for city or street address (geocoder)
16:03 Handling completing location step in the stepper
17:39 Introduction into the upcoming video
Watch video React Mapbox user location by ip, GPS Geolocator, city, street address search with Geocoder online without registration, duration hours minute second in high quality. This video was added by user Code Like Pro 18 May 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 12,85 once and liked it 18 people.