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
mapboxgl
reactmapgl
@mapbox/mapboxglgeocoder
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