How can I use colorpicker with react-leaflet?

[aequorsolutions]

Hello,

I'm using a mix of reac-leaflet and leaflet to make a map using next.js framework and the LayersControl.Basemap is not working to select/deselect a colorpicker layer.

How can I use the leaflet-tilelayer-colorpicker with react-leaflet LayersControl to select from what layer I will pick the color?

function CustomTileLayer (){
...
var colorpicker = L.tileLayer.colorPicker(template, {
layer: 'MODIS_Aqua_L2_Chlorophyll_A',
tileMatrixSet: 'GoogleMapsCompatible_Level7',
maxNativeZoom: 8,
time: "2014-02-12",//dayParameter(),
tileSize: 256,
subdomains: 'abc',
noWrap: true,
continuousWorld: false,
// Prevent Leaflet from retrieving non-existent tiles on the
// borders.
bounds: [
[-85.0511287776, -179.999999975],
[85.0511287776, 179.999999975]
],
}).addTo(map)
...
}

function Map () {
return (
<MapContainer
center={[-24, -44]}
zoom={5}
style={{ width: '100%', height: '600px' }}
preferCanvas={true}
maxBounds={bounds}
maxBoundsViscosity={1.0}
minZoom={3}
maxZoom={7} >

<LayersControl position='topleft'>
  <LayersControl.BaseLayer name="third layer">
      <CustomTileLayer />
  </LayersControl.BaseLayer>
</LayersControl>

) } export default Map

[slutske22]

If you are still wondering about this, here is a solution with full typescript typings:

import { TileLayerProps } from "react-leaflet";
import "leaflet-tilelayer-colorpicker";
import {
  LeafletContextInterface,
  createLayerComponent,
} from "@react-leaflet/core";
import { LatLng, TileLayer, TileLayerOptions } from "leaflet";

export class ColorPickerLayer extends TileLayer {
  /**
   * Function to get the color of the tilelayer at a given latlng
   */
  getColor: (latlng: LatLng) => Uint8ClampedArray;
}

declare namespace L {
  /**
   * ColorPickerLayer is a tilelayer with a color picker to get the color for that tile layer
   */
  export class ColorPickerLayer extends TileLayer {
    /**
     * Function to get the color of the tilelayer at a given latlng
     */
    getColor: (latlng: LatLng) => Uint8ClampedArray;
  }

  /**
   * L.tileLayer stand-in typdefs
   */
  export const tileLayer: {
    /**
     * Creates a tilelayer with a color picker to get the color for that tile layer
     */
    colorPicker: (url: string, options: TileLayerOptions) => ColorPickerLayer;
  };
}

/**
 * Function to create the canvas overlay layer
 */
const createLayer = (
  props: TileLayerProps,
  context: LeafletContextInterface
) => {
  const { url, ...options } = props;

  const instance = L.tileLayer.colorPicker(url, options);

  return { instance, context };
};

/**
 * React-leaflet TileLayerColorPicker component
 */
export const TileLayerColorPicker = createLayerComponent(createLayer);

In your map:

export const YourMap: React.FC = () => {
  const ref = useRef<ColorPickerLayer>();

  return (
    <MapContainer>
      <TileLayerColorPicker
        ref={ref}
        url="URL of interest"
      />
    </MapContainer>
  );
};