How to implement Mapbox Controls?

Lovely_Jaca · October 27, 2023, 2:56pm

I’m creating a StoreLocator Page and I’m wondering if there is a better way to add the controls of the Mapbox (eg. zoom and rotation controls). Currently I added the controls using the custom pin using the “PinComponent” props but I encountered an issue.

When there is no store on the user’s current location coordinate, the controls will not be displayed since the custom pin component doesn’t get mounted.

I would appreciate any suggestions or ideas.

Shah_Emran · January 4, 2024, 7:32pm

I am working with similar issue. I wonder if MapboxMap component has a parameter than can add zoom control.

Tosh_B · January 5, 2024, 7:58am

Hello @Shah_Emran

Looks like you can use providerOptions in mapconfig for managing and controlling the Zoom.
You can specify a JSON object to pass through to the map provider (Google or Mapbox) in your mapConfig.

for reference and more details, information is available on this page Maps | Hitchhikers

Hope it helps.!

Lovely_Jaca · January 5, 2024, 8:44am

Hi @Tosh_B,

Can this be applied to React Components MapboxMap ?

Thanks.

Tosh_B · January 5, 2024, 9:00am

Hi @Lovely_Jaca

For React Components MapboxMap, have you tried Mapboxoptions that allows Interface for map customization derived from Mapbox GL’s Map options.

github.com

yext/search-ui-react/blob/d9e5ff4b79c73c7bf041501ff8ebd500dcb767f8/docs/search-ui-react.mapboxmapprops.mapboxoptions.md#mapboxmappropsmapboxoptions-property

<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [MapboxMapProps](./search-ui-react.mapboxmapprops.md) &gt; [mapboxOptions](./search-ui-react.mapboxmapprops.mapboxoptions.md)

## MapboxMapProps.mapboxOptions property

Interface for map customization derived from Mapbox GL's Map options.

**Signature:**

```typescript
mapboxOptions?: Omit<mapboxgl.MapboxOptions, 'container'>;
```

The available options from Mapbox can be checked to use from Map | Mapbox GL JS | Mapbox

there is options available for control and zoom facility which can be use to implement.

Hope it helps.

Shah_Emran · January 5, 2024, 7:57pm

Where do you find mapConfig in your project?

Tosh_B · January 6, 2024, 3:28am

Hello @Shah_Emran

You’ll find the map config in the verticalsToConfig object.

For the detail information on the same you can check Maps | Hitchhikers

Shah_Emran · January 6, 2024, 7:58pm

Thank you so much for the help. I am using MapboxMap react component for the project which I am not sure it is the same as Theme results page component. I have tried using MapBoxMap mapOptions parameter to use zoom control but was unable. Please let me know, thanks.

Lovely_Jaca · January 8, 2024, 6:28am

Hi @Tosh_B,

Thanks for the reply, apparently there is no option to display the controls from the Mapboxoptions

I want these controls to be available on load, with or without results

.

Thank you,

Tosh_B · January 8, 2024, 10:17am

Hi @Lovely_Jaca
Can you please confirm if you can tried it like it has been suggested with mapboxoption.

Please access the url for more information.

> <MapboxMap
>   mapboxAccessToken={process.env.REACT_APP_MAPBOX_API_KEY}
>   PinComponent={MapPin}
>   mapboxOptions={{
>     zoom: 10,
>     style: "mapbox://styles/mapbox/dark-v10",
>     logoPosition: "top-left",
>   }}
> />

Tosh_B · January 8, 2024, 10:23am

Hi @Shah_Emran
in case need of React Component, you can refer the same url shared in last post above to use mapboxoptions for implementing the Zoom control facility.
It is all about the React component available for implement the possible features on page. Feelfree to go through the information shared on the page to proceed with the implementation.

Happy building.

Shah_Emran · January 8, 2024, 4:40pm

The page you referred in one of your answers has a link to the props that I can use for mapboxOptions but I need add one of the instance member for zoom control which is the addControl() inside the mapboxOptions. Do you have any example specific document for how to add instance members inside the mapboxOptions. Here is the link that I need to add inside the mapboxOptions. “https://docs.mapbox.com/mapbox-gl-js/api/map/#map#addcontrol”. Thank you again for your prompt repsonses.

Lovely_Jaca · January 9, 2024, 2:01am

Hi @Tosh_B,

I have the same issue with @Shah_Emran, I want to add the controls. On the mapbox-gl-js you will be able to add the controls using map.addControl().

Thank you,

Shah_Emran · January 9, 2024, 4:36pm

Hi @Lovely_Jaca,

Please let me know if you find any solution to the issue. Thank you!!

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

Lovely_Jaca · February 26, 2024, 9:55am

Hi @Cristofer_Espindola,

I really appreciate the response. I will check this out. Thank you very much