How to implement Mapbox Controls?

Cristofer_Espindola · February 14, 2024, 6:48pm

@Lovely_Jaca
I not sure, but after analysis the Yext component and the component don’t provides the map instance, only on PinComponent, I did a copy from the original component here:

github.com

yext/search-ui-react/blob/main/src/components/MapboxMap.tsx

import React, { useRef, useEffect } from 'react';
import mapboxgl from 'mapbox-gl';
import { Result, useSearchState } from '@yext/search-headless-react';
import { useDebouncedFunction } from '../hooks/useDebouncedFunction';
import ReactDOM from 'react-dom';

/**
 * A functional component that can be used to render a custom marker on the map.
 *
 * @public
 */
export type PinComponent<T> = (props: {
  index: number,
  mapbox: mapboxgl.Map,
  result: Result<T>
}) => JSX.Element;

/**
 * A function use to derive a result's coordinate.
 *

This file has been truncated. show original

and

interface

export interface CustomMapboxMapProps<T> extends MapboxMapProps<T> {
    /**
     * Custom zoom controls for the map.
     * Whether to show zoom controls on the map.
     * */
    zoomControls?: boolean
}

first useEffect interaction

    useEffect(() => {
        if (mapContainer.current && !map.current) {
            const options: mapboxgl.MapboxOptions = {
                container: mapContainer.current,
                style: 'mapbox://styles/mapbox/streets-v11',
                center: [-74.005371, 40.741611],
                zoom: 9,
                ...mapboxOptions,
            }
            map.current = new mapboxgl.Map(options)
            const mapbox = map.current
            if (zoomControls) {
                mapbox.addControl(new mapboxgl.NavigationControl(), 'top-right')
            }
            mapbox.resize()
            if (onDragDebounced) {
                mapbox.on('drag', () => {
                    onDragDebounced(mapbox.getCenter(), mapbox.getBounds())
                })
            }
        }
    }, [mapboxOptions, onDragDebounced])

Result

Full solution here: Custom Yext MapboxMap · GitHub

useDebouncedFunction( it don’t export from Yext)

gist.github.com

https://gist.github.com/cristoferespindola/d469891e580049fe34a5ac214f1503ec

useDebouncedFunction.ts

import { useRef } from 'react'

// eslint-disable-next-line @typescript-eslint/no-explicit-any
type Func = (...args: any[]) => any
type DebouncedFunction<F extends Func> = (...args: Parameters<F>) => Promise<undefined | ReturnType<F>>

export function useDebouncedFunction<F extends Func>(
    func: F | undefined,
    milliseconds: number
): DebouncedFunction<F> | undefined {

This file has been truncated. show original