how to find my city location with location search in React Redux with Leaflet with OpenStreetMap

Question

I was assigned by my lecturer to add city search to my application using React(Redux) using Leaflet (OpenStreetMap) can anyone help me to solve this problem? and what are the dependencies needed?

Here My Code

import React from 'react'
import {MapContainer, TileLayer} from 'react-leaflet'
import {IoLogoDropbox} from 'react-icons/io5'
import 'leaflet/dist/leaflet.css'

function FormDashboardMap() {
  return (
    <div>
        <h1 className="title"><IoLogoDropbox/> Map</h1>
        <div className="card has-shadow">
            <div className="card-content">
                <div className="content">
                    <MapContainer style={{ height: "450px", width: "100%" }} center={[51.505, -0.09]} zoom={19}>
                    <TileLayer
                        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                        
                        />
                    </MapContainer>   
                </div>
            </div>
        </div>
    </div>
  )
}

export default FormDashboardMap

what to add to add city search feature to my code?

Answer 1

if you want to do it statically , you can check the main website and find your city location manually!
here is the url : https://react-leaflet.js.org/docs/example-external-state/ Or if you wanna use client location you can use :

function getPosition() {
if (!navigator.geolocation)
  return "Your Browser doesn't support location service";

navigator.geolocation.getCurrentPosition(
  (pos) => {
    setPosition({
      lat: pos.coords.latitude,
      lng: pos.coords.longitude,
    });
  },
  (err) => {
    // do sth for error handling
  }
);

}