React Leaflet V3 Custom Control

Question

There's a new react-leaflet version coming which can be found here: npm install react-leaflet/next docs: https://react-leaflet-v3.now.sh/docs/start-introduction

which is a complete re write using hooks.

Based on these new hooks i'm trying to write a custom layer control, which i mainly just want to split into groups and render my react components from material-ui to keep the map styling inline with the rest of my application. The hooks from my understanding get used like the folliwng:

basic control example

const MyControl = Control.extend({
  onAdd: map => {
    let container = DomUtil.create('div');
    container.innerHTML += 'My Control';

    return container;
  },
  // this one is optional
  onRemove: map => {},
});

const useControlElement = createElementHook(
  function createControl(_ref, ctx) {
    const context = useLeafletContext();
    var instance = new MyControl(position);
    return {
      instance: instance,
      context: Object.assign({}, ctx, {
        control: instance,
      }),
    };
  },
  function updateControl(control, props, prevProps) {},
);

const useControl = createControlHook(useControlElement);

const FinalControl = createContainerComponent(useControl);

function ControlComponent({ children }) {
  const controlRef = useRef();
  // if ref exits portal children through, note: using react scripts to support ?
   if(ref.?current?.getContainer()){
     ReactDOM.createPortal(children, ref.current.getContainer())
   }
  return <FinalControl ref={controlRef} />;
}

export default ControlComponent;

However the children are never rendered because controls are only added on componentDidMount.

I want to write this layer control in React/JSX/JS i don't want to have to completely build it using html i.e. L.Control, and using leaflets domutil as this would't work with my react styling anyway and provide restricted access to my redux store. So i'm trying to just portal my component through a basic control like how react-leaflet-control works

Am i approaching this in the right way? i'm just going around in circles atm trying to get this to work in a good way. I'm nearly at the point where i'm just going to render a react component as a child of the map and set the position to absolute (which i know is the wrong way, but does work)

i.e.

<MapContainer>
  <ReactComponent />
</MapContiner>

The documentation has an example for custom components but that's only for leaflet component that already exists, i.e. the square example in the "core architecture" section. Any help appreciated!

Olek Olek · Accepted Answer · 2021-01-05T07:25:55

Thanks to Zac's answer I could do it in this way.

Dependencies versions:

"react-leaflet": "^3.0.5",
"leaflet": "^1.7.1",

Here is a component that extends Leaflet control. You can use options to customize the component with received props.

//MyComponent.jsx
import React from 'react';
import {useLeafletContext} from '@react-leaflet/core';
import L from 'leaflet';

export const MyComponent = (props) => {
  const context = useLeafletContext();
  const control = L.control.Extend({
    //...options    
  });

  React.useEffect(() => {
    const container = context.layerContainer || context.map;
    container.addControl(control);

    return () => {
      container.removeControl(control);
    };
  });

  return null;
};

And here is the custom map component where you can use the component created before.

//MyMapComponent.jsx
import React from 'react';
import {MapContainer, TileLayer} from 'react-leaflet';
import {MyComponent} from './MyComponent';

export const MyMapComponent = (props) => {
  return (
    <MapContainer>
      <TileLayer url="whateverLayerURL" />
      <MyComponent {...props} />
    </MapContainer>
  );
};

React Leaflet V3 Custom Control

3 Answers