Using a Leaflet js plugin in react

Question

I want to use a leaflet plugin called leaflet-geotiff (https://github.com/stuartmatthews/leaflet-geotiff) but I'm using leaflet react. Is it possible for me to convert this plugin to a leaflet-react version? Thank you guys.

Answer 1

Here is an instruction on how to utilize leaflet-geotiff library in react-leaflet:

1) install leaflet-geotiff package

2) it is proposed to introduce the following custom components:

import React, { Component } from "react";
import { withLeaflet, MapLayer } from "react-leaflet";
import L from "leaflet";


import "leaflet-geotiff"
import "leaflet-geotiff/leaflet-geotiff-plotty"
import "leaflet-geotiff/leaflet-geotiff-vector-arrows"

class GeotiffLayer extends MapLayer {
  createLeafletElement(props) {
    const { url, options } = props;
    return L.leafletGeotiff(url, options);
  }

  componentDidMount() {
    const { map } = this.props.leaflet;
    this.leafletElement.addTo(map);
  }
}

export const PlottyGeotiffLayer = withLeaflet(props => {
  const { options, layerRef } = props;
  options.renderer = new L.LeafletGeotiff.Plotty(options);
  return <GeotiffLayer ref={layerRef} {...props} />;
});

export const VectorArrowsGeotiffLayer = withLeaflet(props => {
  const { options, layerRef } = props;
  options.renderer = new L.LeafletGeotiff.VectorArrows(options);
  return <GeotiffLayer ref={layerRef} {...props} />;
}); 

3) and finally add layers to the map

<Map
    center={this.props.center}
    zoom={this.props.zoom}
    length={4}
>
    <TileLayer
          url="https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw"
          attribution='<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>'
          id="mapbox.streets"
    />

    <PlottyGeotiffLayer
       layerRef={this.windSpeedRef}
       url={windSpeedUrl}
       options={windSpeedOptions}
    />

    <VectorArrowsGeotiffLayer
      layerRef={this.windDirectionRef}
      url={windDirectionUrl}
      options={windDirectionOptions}
    />
 </Map>

Here is a demo

Result