How to use @mapbox/mapbox-gl-geocoder - 5 common examples

// Native Mapbox map controls

        if (!IS_MOBILE) {
            this.searchBar = new MapboxGeocoder({
                accessToken: mapboxgl.accessToken,
                mapboxgl: mapboxgl,
                language: 'pt-br',
                placeholder: 'Buscar endereços, estabelecimentos, ...',
                countries: 'br',
                // collapsed: IS_MOBILE
            });
            this.map.addControl(this.searchBar, 'bottom-right');
        }

        const cityPicker = new MapboxGeocoder({
            accessToken: mapboxgl.accessToken,
            mapboxgl: mapboxgl,
            language: 'pt-br',
            placeholder: 'Buscar cidades brasileiras',
            countries: 'br',
            types: 'place',
            marker: false,
            clearOnBlur: true,
            flyTo: false
        });
        cityPicker.on('result', result => {
            console.debug('geocoder result', result);

            let flyToPos;
            if (result.place_name === 'Vitória, Espírito Santo, Brasil') {
                flyToPos = [-40.3144,-20.2944];

componentDidMount() {
        mapboxgl.accessToken = MAPBOX_ACCESS_TOKEN;
        
        this.map = new mapboxgl.Map({
            container: this.mapContainer,
            style: this.props.style,
            center: this.props.center,
            zoom: this.props.zoom
        });

        
        // Native Mapbox map controls

        if (!IS_MOBILE) {
            this.searchBar = new MapboxGeocoder({
                accessToken: mapboxgl.accessToken,
                mapboxgl: mapboxgl,
                language: 'pt-br',
                placeholder: 'Buscar endereços, estabelecimentos, ...',
                countries: 'br',
                // collapsed: IS_MOBILE
            });
            this.map.addControl(this.searchBar, 'bottom-right');
        }

        const cityPicker = new MapboxGeocoder({
            accessToken: mapboxgl.accessToken,
            mapboxgl: mapboxgl,
            language: 'pt-br',
            placeholder: 'Buscar cidades brasileiras',
            countries: 'br',

mapLoaded(map) {
      this.set('mapInstance', map);
      window.map = map;

      // add search control
      map.addControl(new MapboxGeocoder({
        accessToken: ENV['mapbox-gl'].accessToken,
        mapboxgl: MapboxGL,
      }));

      map.addControl(new MapboxGL.NavigationControl());
    },

this.mainMap = new mapboxgl.Map({
      container: this.refs.mainMap,
      style: this.props.mainMapStyle
    });
    addMapControls(this.mainMap);
    this.maps = this.props.imageryStyles.map((imagerySearchStyle, i) => {
      const map = new mapboxgl.Map({
        container: this.refs[`mapThumb${i}`],
        style: imagerySearchStyle,
        interactive: false,
        attributionControl: false
      });
      return map;
    });

    const geocoder = new Geocoder({
      accessToken: mapboxgl.accessToken
    });
    const dom = ReactDOM.findDOMNode(this);
    const geocoderDiv = dom.querySelector('#geocoder');
    geocoderDiv.appendChild(geocoder.onAdd(this.mainMap));

    this.mainMap.on('move', (event) => {
      if (event.originalEvent) {
        const center = this.mainMap.getCenter();
        this.props._setSearchMapCenter(center);
      }
    });
    this.mainMap.on('zoom', (event) => {
      const zoom = this.mainMap.getZoom();
      this.props._setSearchMapZoom(zoom);
    });

filter,
      localGeocoder,
      reverseGeocode,
      enableEventLogging,
      marker: false
    }

    if (render && typeof render === 'function') {
      options.render = render
    }

    if (getItemValue && typeof getItemValue === 'function') {
      options.getItemValue = getItemValue
    }

    this.geocoder = new MapboxGeocoder(options)
    this.subscribeEvents()

    if (containerNode) {
      containerNode.appendChild(this.geocoder.onAdd(mapboxMap))
    } else {
      mapboxMap.addControl(this.geocoder, VALID_POSITIONS.find((_position) => position === _position))
    }

    if (inputValue !== undefined && inputValue !== null) {
      this.geocoder.setInput(inputValue)
    } else if (this.cachedResult) {
      this.geocoder.setInput(this.cachedResult.place_name)
    }

    if (this.cachedResult || (inputValue !== undefined && inputValue !== null)) {
      this.showClearIcon()