Geocoding with Mapbox - Githubissues

Describe the bug A clear and concise description of what the bug is.

What is the problem you are trying to solve? How can we get geocoding/geolocation to work within our app?

Expected behavior A clear and concise description of what you expected to happen.

We are currently trying to figure out how a user can input their location or interested location to direct them to the point of interest on the map.

Users should be able to search the map component to find the nearest basketball court or search in any area to find something close to that search.

What is the actual behavior? A clear and concise description of what actually happened.

Post any code you think might be relevant (one fenced block per file)

import "mapbox-gl/dist/mapbox-gl.css"
import Map, { Marker, NavigationControl, Popup, FullscreenControl, GeolocateControl } from "react-map-gl"
import { useState } from "react"
// import { geocoding } from '@mapbox/mapbox-sdk/services/geocoding'
// import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder'
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css'
// import * as CourtsIndex from "src/components/courts/CourtsIndex.js"

export const Mapping = () => {

const [lng, setLng] = useState(-73.769417)
const [lat, setLat] = useState(40.742054)
// const geocoder = geocoding({ accessToken: 'pk.eyJ1Ijoiam9zaHVhaGFycmlzMTEwMyIsImEiOiJjbGU1cTQ5OGUwOWJrM3V0YzlhYml3Znk1In0.RWn3-nWxtA6_obodRSjaXg' })

return (

<>
    <Map
    mapboxAccessToken="pk.eyJ1Ijoiam9zaHVhaGFycmlzMTEwMyIsImEiOiJjbGU1cTQ5OGUwOWJrM3V0YzlhYml3Znk1In0.RWn3-nWxtA6_obodRSjaXg"
    style={{ marginLeft: "5%", justifyContent: "center", width: "90%", height: "250px", borderRadius: "10px", border: "2px solid blue"}}
    initialViewState={{ longitude: lng, latitude: lat, zoom: 13 }}
    mapStyle="mapbox://styles/mapbox/streets-v9"
    >

    <Marker longitude={lng} latitude={lat} 
    />
    <NavigationControl position="bottom-right" />
    <FullscreenControl />

    <GeolocateControl />
    </Map>
</>
    )
}

export default Mapping

Right now the code will display but does not display a geocoding search box even with the necessary dependencies installed

What is your best guess as to the source of the problem?

Missing a hook perhaps

What things have you already tried to solve the problem? Reading the documentation, watching videos, and trial & error.

Additional context

////////

Paste a link to your repository here https://github.com/joshuaharris1103/FrontEndProject3

sei-ec-remote / team-project-issues

Geocoding with Mapbox #141