How to use the react-leaflet.MapLayer function in react-leaflet

this._lastMapSize = this.props.leaflet.map.getSize();
    }
  }, {
    key: "createTile",
    value: function createTile(coords) {}
  }, {
    key: "createLeafletElement",
    value: function createLeafletElement(props) {}
  }, {
    key: "updateLeafletElement",
    value: function updateLeafletElement(fromProps, toProps) {}
  }]);

  return TransitiveCanvasOverlay;
}(_reactLeaflet.MapLayer); // connect to the redux store


_defineProperty(TransitiveCanvasOverlay, "propTypes", {
  transitiveData: _propTypes.default.object // React Lifecycle Methods

});

var mapStateToProps = function mapStateToProps(state, ownProps) {
  var activeSearch = (0, _state.getActiveSearch)(state.otp);
  var transitiveData = null;

  if (activeSearch && activeSearch.query.routingType === 'ITINERARY' && activeSearch.response && activeSearch.response.plan) {
    var itins = (0, _state.getActiveItineraries)(state.otp); // TODO: prevent itineraryToTransitive() from being called more than needed

    transitiveData = (0, _map.itineraryToTransitive)(itins[activeSearch.activeItinerary]);
  } else if (activeSearch && activeSearch.response && activeSearch.response.otp) {

className: "popup-row"
        }, _react.default.createElement(_setFromTo.default, {
          map: _this.props.leaflet.map,
          location: {
            lat: location.y,
            lon: location.x,
            name: name
          },
          setLocation: _this.props.setLocation
        })))));
      }));
    }
  }]);

  return ParkAndRideOverlay;
}(_reactLeaflet.MapLayer); // connect to the redux store


_defineProperty(ParkAndRideOverlay, "propTypes", {
  locations: _propTypes.default.array,
  zipcarLocationsQuery: _propTypes.default.func,
  setLocation: _propTypes.default.func
});

var mapStateToProps = function mapStateToProps(state, ownProps) {
  return {
    locations: state.otp.overlay.parkAndRide && state.otp.overlay.parkAndRide.locations
  };
};

var mapDispatchToProps = {
  setLocation: _map.setLocation,

className: "popup-row"
        }, _react.default.createElement(_setFromTo.default, {
          map: _this2.props.leaflet.map,
          location: {
            lat: location.coordinates.lat,
            lon: location.coordinates.lng,
            name: location.display_name
          },
          setLocation: _this2.props.setLocation
        })))));
      }));
    }
  }]);

  return ZipcarOverlay;
}(_reactLeaflet.MapLayer); // connect to the redux store


_defineProperty(ZipcarOverlay, "propTypes", {
  api: _propTypes.default.string,
  locations: _propTypes.default.array,
  zipcarLocationsQuery: _propTypes.default.func,
  setLocation: _propTypes.default.func
});

var mapStateToProps = function mapStateToProps(state, ownProps) {
  return {
    locations: state.otp.overlay.zipcar && state.otp.overlay.zipcar.locations
  };
};

var mapDispatchToProps = {

if (this.props.onStatsUpdate && this.props.points && this.props.points.length > 0) {
      this.props.onStatsUpdate((0, _lodash4.default)(data, function (stats, point) {
        stats.max = point[3] > stats.max ? point[3] : stats.max;
        stats.min = point[3] < stats.min ? point[3] : stats.min;
        return stats;
      }, { min: Infinity, max: -Infinity }));
    }
  };

  HeatmapLayer.prototype.render = function render() {
    return null;
  };

  return HeatmapLayer;
}(_reactLeaflet.MapLayer);

HeatmapLayer.propTypes = {
  points: _propTypes2.default.array.isRequired,
  longitudeExtractor: _propTypes2.default.func.isRequired,
  latitudeExtractor: _propTypes2.default.func.isRequired,
  intensityExtractor: _propTypes2.default.func.isRequired,
  fitBoundsOnLoad: _propTypes2.default.bool,
  fitBoundsOnUpdate: _propTypes2.default.bool,
  onStatsUpdate: _propTypes2.default.func,
  /* props controlling heatmap generation */
  max: _propTypes2.default.number,
  radius: _propTypes2.default.number,
  maxZoom: _propTypes2.default.number,
  minOpacity: _propTypes2.default.number,
  blur: _propTypes2.default.number,
  gradient: _propTypes2.default.object

if (companies) {
        filteredStations = stations.filter(function (station) {
          return station.networks.filter(function (value) {
            return companies.includes(value);
          }).length > 0;
        });
      }

      if (!filteredStations || filteredStations.length === 0) return _react.default.createElement(_reactLeaflet.FeatureGroup, null);
      return _react.default.createElement(_reactLeaflet.FeatureGroup, null, filteredStations.map(this._renderStation));
    }
  }]);

  return VehicleRentalOverlay;
}(_reactLeaflet.MapLayer); // connect to the redux store


_defineProperty(VehicleRentalOverlay, "propTypes", {
  queryMode: _propTypes.default.string,
  vehicles: _propTypes.default.array,
  refreshVehicles: _propTypes.default.func
});

var mapStateToProps = function mapStateToProps(state, ownProps) {
  return {
    zoom: state.otp.config.map.initZoom
  };
};

var mapDispatchToProps = {
  setLocation: _map.setLocation

}; // Singleton case; return FeatureGroup with single StopMarker


      if (stops.length === 1) {
        return _react.default.createElement(_reactLeaflet.FeatureGroup, null, createStopMarker(stops[0]));
      } // Otherwise, return FeatureGroup with mapped array of StopMarkers


      return _react.default.createElement(_reactLeaflet.FeatureGroup, null, stops.map(function (stop) {
        return createStopMarker(stop);
      }));
    }
  }]);

  return StopsOverlay;
}(_reactLeaflet.MapLayer);

_defineProperty(StopsOverlay, "propTypes", {
  minZoom: _propTypes.default.number,
  queryMode: _propTypes.default.string,
  stops: _propTypes.default.array,
  refreshStops: _propTypes.default.func
});

_defineProperty(StopsOverlay, "defaultProps", {
  minZoom: 15
});

var StopMarker =
/*#__PURE__*/
function (_Component) {
  _inherits(StopMarker, _Component);

var tripData = this.props.tripData;
      if (!tripData || !tripData.geometry) return _react.default.createElement(_reactLeaflet.FeatureGroup, null);

      var pts = _polyline.default.decode(tripData.geometry.points);

      return _react.default.createElement(_reactLeaflet.FeatureGroup, null, _react.default.createElement(_reactLeaflet.Polyline, {
        positions: pts,
        weight: 8,
        color: "#00bfff",
        opacity: 0.6
      }));
    }
  }]);

  return TripViewerOverlay;
}(_reactLeaflet.MapLayer); // connect to the redux store


_defineProperty(TripViewerOverlay, "propTypes", {
  tripData: _propTypes.default.object,
  viewedTrip: _propTypes.default.object
});

var mapStateToProps = function mapStateToProps(state, ownProps) {
  var viewedTrip = state.otp.ui.viewedTrip;
  return {
    viewedTrip: viewedTrip,
    tripData: viewedTrip ? state.otp.transitIndex.trips[viewedTrip.tripId] : null
  };
};

var mapDispatchToProps = {};

key: "markers",
                track: this.state.track,
                type: this.state.options.progressFormat,
                timeFormat: this.props.timeFormat,
                maxDistance: this.state.maxDistance,
                durationTrack: this.state.durationTrack
              })
            )
          )
        ) : null
      );
    }
  }]);

  return LeafletReactTrackPlayer;
}(_reactLeaflet.MapLayer);

LeafletReactTrackPlayer.defaultProps = {
  track: [],
  useControl: true,
  useInformationPanel: false,
  optionMultyIdxFn: function optionMultyIdxFn() {},
  optionsMulty: [],
  customMarker: false,
  iconCustomMarker: "",
  customCourse: false,
  timeFormat: "YYMMDDHHmmss000",
  styleMarker: "",
  speedArray: [1, 10, 50, 100, 1000],
  progressFormat: "default",
  startPosition: 0,
  streamData: false,

}
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate(fromProps) {
      this.renderComponent();
      this.updateLeafletElement(fromProps, this.props);
    }
  }, {
    key: 'render',
    value: function render() {
      return null;
    }
  }]);

  return Divicon;
}(_reactLeaflet.MapLayer);

Divicon.propTypes = {
  opacity: _propTypes2.default.number,
  zIndexOffset: _propTypes2.default.number
};
Divicon.childContextTypes = {
  popupContainer: _propTypes2.default.object
};
exports.default = Divicon;

key: "markers",
                track: this.state.track,
                type: this.state.options.progressFormat,
                timeFormat: this.props.timeFormat,
                maxDistance: this.state.maxDistance,
                durationTrack: this.state.durationTrack
              })
            ) : null
          )
        ) : null
      );
    }
  }]);

  return LeafletReactTrackPlayer;
}(_reactLeaflet.MapLayer);

LeafletReactTrackPlayer.defaultProps = {
  useControl: true,
  useInformationPanel: false,
  optionMultyIdxFn: function optionMultyIdxFn() {},
  optionsMulty: [],
  customMarker: false,
  iconCustomMarker: "",
  customCourse: false,
  timeFormat: "YYMMDDHHmmss000",
  styleMarker: "",
  speedArray: [1, 10, 50, 100, 1000],
  progressFormat: "default",
  startPosition: 0,
  streamData: false,
  showDots: false,