Search Place(GeoCoder)

[manjunathrp]

Is your feature request related to a problem? Please describe.
Need a search inside a map.. I found which can be outside a map

Describe the solution you'd like
Search should be inside the map but there was nothing about geocoder/search

Describe alternatives you've considered
I have used react-geocoder-autocomplete to search places now

Additional context
Add any other context or screenshots about the feature request here.

[janbaykara]

Produced by:

// Usage

<MapGL>
   <GeocodeControl position='top-right' accessToken={mapboxApiAccessToken} />
</MapG>


// Component

import React, { useContext, useEffect } from 'react'
import MapGL, { MapContext } from '@urbica/react-map-gl'
import mapboxgl from 'mapbox-gl';
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';

function GeocodeControl ({ position, accessToken }: {
  accessToken: string,
  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right',
}) {
  const map: mapboxgl.Map = useContext(MapContext)

  useEffect(() => {
    const control = new MapboxGeocoder({
      accessToken,
      mapboxgl
    })

    map?.addControl(
      control,
      position
    )

    return () => {
      map?.removeControl(control)
    }
  }, [map, position])

  return null
}

More reading

• https://github.com/urbica/react-map-gl/blob/master/src/components/GeolocateControl/index.js
• https://docs.mapbox.com/api/search/geocoding/
• https://docs.mapbox.com/accounts/guides/pricing/#search-related-apis