How to make a custom control that is a React component & is clickable (v7.x)

[dreamorosi]

Based on my understanding of the documentation the useControl hook must be used in conjunction with a JS class that has the this signature and implements onCreate & onRemove methods.

The example provided in the repo uses an already-made custom control (@mapbox/mapbox-gl-draw) that seems to create its structure by manipulating the DOM directly. If I follow the same type of implementation I'm able to create a custom control just fine.

If instead I want to create a custom control that is also a React component there's no documented / straightforward way that I could find. While looking at the repo I found this other discussion that points to the custom-overlay example.

Following the example just mentioned I am able to render my "control" React component as an overlay using useControl & React.createPortal on the DOM element created by the custom control class.

The problem with this method is that I'm actually rendering an overlay on the map rather than an actual control and this also means I'm not able to interact with the control at all as there's no way (that I could find) to intercept click events. All events go straight to the map.

My question is:

• Is it possible / in scope to create custom controls that are also React components and are clickable?
• Is the method that I described the correct one (aka rendering the component as a control/overlay)?

As alternative I'm rendering the component outside of the Map component (i.e. not as a child of the map) and putting it on the map via CSS but this poses its own challenges with positioning. Aside the fact that it'd be handy to be able to render the element inside the map for positioning reasons, this kind of use case would also allow to create React-based controls instead of plain JS ones.

[Pessimistress]

there's no way (that I could find) to intercept click events

Set the pointerEvents CSS.

[dreamorosi]

That worked, thanks a lot!

[ghost]

@dreamorosi I dont quite understand. What was your final solution? Did you create a JS class with the required methods or a React component?

[dreamorosi]

@waltermonecke you need to set pointerEvents CSS property on the component that you want to be clickable on the map:

<Map>
  <MyOverlay
    style={{
      pointerEvents: "all",
    }}
  />
</Map>

[jo-chemla]

Hey there,
Thanks for the detailed take on how to add a custom control + answer to catch mouseClicks. I've crawled through the doc and examples, and wanted to make sure this is the simplest way to add a Custom Control Button (or react component) that when clicked, update some state properties.
Could this be added as a core example in the docs? Or do you have a minimal skeleton for that code? Thanks!

Note: to have the control appear at the correct place, I used the custom-overlay.tsx component, and added as a second argument to the useControl method the additional parameter {position: props['position']}. However, I cannot see to which component I should attribute the className class="mapboxgl-ctrl mapboxgl-ctrl-group" so the controls have a consistent mapbox controller style

[Sonono1103]

Setting position to getDefaultPosition() of OverlayControl class works fine! Thank you.

I'm not sure if this is the best solution, but this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group' worked well for me. Also, by doing this, it's no longer necessary to write CSS for pointerEvents.
Moreover, to apply hover styles, it's necessary to place the icon you want to add under a button like so: <Overlay><button><svg></svg></button></Overlay>.

For anyone who might need this, here is my final version of the Overlay code...

type Config = {
  position: ControlPosition;
  redraw?: () => void;
};

type OverlayProps = {
  position: ControlPosition;
  children: ReactElement;
};

class OverlayControl implements IControl {
  _map: MapboxMap | null = null;
  _container: HTMLElement | null = null;
  _position: ControlPosition = 'bottom-right';
  _redraw?: () => void;

  constructor({ position, redraw }: Config) {
    this._position = position;
    if (redraw !== undefined) this._redraw = redraw;
  }

  onAdd(map: MapboxMap) {
    this._map = map;
    this._container = document.createElement('div');
    this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group';

    if (this._redraw !== undefined) {
      map.on('move', this._redraw);
      this._redraw();
    }

    return this._container;
  }

  onRemove() {
    if (this._map === null || this._container === null) return;
    this._container.remove();
    if (this._redraw !== undefined) this._map.off('move', this._redraw);
    this._map = null;
  }

  getDefaultPosition?() {
    return this._position;
  }

  getMap() {
    return this._map;
  }

  getElement() {
    return this._container;
  }
}

const Overlay = ({ position, children }: OverlayProps) => {
  const ctrl = useControl<OverlayControl>(() => {
    return new OverlayControl({ position });
  });

  const map = ctrl.getMap();
  const elem = ctrl.getElement();
  if (map === null || elem === null) return;

  return createPortal(cloneElement(children, { map }), elem);
};

export default memo(Overlay);

Note: An absolutely positioned div doesn't work well for me. When the map size changes, the original icons and the custom icon overlap.

[david-shortman]

Great example!

[kauly]

In my opinion, it's easier create an absolute positioned div and put whatever component you want inside of it.

[mattixpet]

It kinda sucks that that's the case though. But I agree.