How to use the leaflet.Point function in leaflet

constructor(options: Options) {
    // increased tap region for icons, rendered size might differ
    const size = 60;
    const iconAnchorOffset = options.iconAnchorOffset || L.point(0, 0);
    const defaults = {
      number: '',
      shadowUrl: null,
      iconSize: new L.Point(size, size),
      iconAnchor: new L.Point(size * .5 + iconAnchorOffset.x, size * .5 + 1.5 + iconAnchorOffset.y),
      popupAnchor: new L.Point(size * .5, size * .5),
      tooltipAnchor: new L.Point(size * .5, size * .5 + 25),
      onClick: (featureId: string, properties: ?NodeProperties) => {},
      hrefForFeature: (featureId: string) => null,
      className: 'marker-icon',
      size: 'small',
      withArrow: false
    };

    super(Object.assign(defaults, options));
  }

function customize (prototype) {
  var options = prototype.options
  options.icon.options.iconSize = new L.Point(10, 10)
  options.touchIcon = options.icon
}
// END HACK.

(feature: Feature, latlng: [number, number]) => {
    const properties = feature && feature.properties;
    if (!properties) return null;

    const color = getColorForWheelchairAccessibility(properties);
    const iconName = getIconNameForProperties(properties) || 'place';
    const className = `ac-marker ac-marker-${color}`;
    const icon = new Icon({
      history,
      feature,
      iconName,
      className,
      iconSize: new L.Point(19, 19),
      iconAnchor: new L.Point(11, 11),
      popupAnchor: new L.Point(11, 11),
      tooltipAnchor: new L.Point(11, 37),
    });

    const marker = L.marker(latlng, { icon, color });
    // marker.on('click', () => {
    //   highlightMarker(marker);
    // });

    // Uncomment this to enable tooltips with names for each place.

    // if (properties.name) {
    //   marker.bindTooltip(properties.name, {
    //     direction: 'bottom',
    //     className: 'ac-marker-name-tooltip',

return getStorageInfo(layer._url).then((results) => {
    for (let i = 0; i < results.length; i += 1) {
      if (results[i].urlTemplate !== layer._url) {
        // eslint-disable-next-line no-continue
        continue;
      }
      const topLeftPoint = new L.Point(
        results[i].x * layer.getTileSize().x,
        results[i].y * layer.getTileSize().y,
      );
      const bottomRightPoint = new L.Point(
        topLeftPoint.x + layer.getTileSize().x,
        topLeftPoint.y + layer.getTileSize().y,
      );

      const topLeftlatlng = L.CRS.EPSG3857.pointToLatLng(
        topLeftPoint,
        results[i].z,
      );
      const botRightlatlng = L.CRS.EPSG3857.pointToLatLng(
        bottomRightPoint,
        results[i].z,
      );

constructor(options: typeof L.Icon.options) {
    const defaults = {
      number: '',
      shadowUrl: null,
      className: 'leaflet-div-icon accessiblity ac-marker ac-marker-cluster',
      iconSize: new L.Point(20, 20),
      iconAnchor: new L.Point(11, 11),
      popupAnchor: new L.Point(11, 11)
    };

    super(Object.assign(defaults, options));
  }

{changesets.map(changeset => {
        const opacity = opacityOf(changeset, now);

        return (
           onShowChangesetDetail(changeset, language)}
          >
            
              <div>
                <b>
                  {changeset.userName}
                  {': '}
                </b>
                {changeset.description}
              </div>
            
          
        );
      })}

doughnut: [8, 8],
};

const popupAnchors = {
  rectangle: [0, -3],
  circle: [1, -3],
};

const createHeatpointMarker = (lat, lon, color) =>
  L.circleMarker([lat, lon], { fillColor: color, fillOpacity: 0.9, stroke: false });

L.MarkerClusterIcon = L.DivIcon.extend({
  options: {
    color: null,
    className: "marker-cluster",
    iconSize: new L.Point(40, 40),
  },
  createIcon(...args) {
    const color = chroma(this.options.color);
    const textColor = chooseTextColorForBackground(color);
    const borderColor = color.alpha(0.4).css();
    const backgroundColor = color.alpha(0.8).css();

    const icon = L.DivIcon.prototype.createIcon.call(this, ...args);
    icon.innerHTML = `
      <div style="background: ${backgroundColor}">
        <span style="color: ${textColor}">${toString(this.options.html)}</span>
      </div>
    `;
    icon.style.background = borderColor;
    return icon;
  },

translateLatLngs: function(bounds) {
    bounds = L.latLngBounds(bounds);
    var neLatLng = bounds.getNorthEast();
    var swLatLng = bounds.getSouthWest();

    var nePoint = this.project(neLatLng);
    var swPoint = this.project(swLatLng);

    var nwPoint = new L.Point(swPoint.x, nePoint.y);
    var sePoint = new L.Point(nePoint.x, swPoint.y);

    var nwLatLng = this.unproject(nwPoint);
    var seLatLng = this.unproject(sePoint);
    return [nwLatLng, neLatLng, seLatLng, swLatLng]
  },
  setLatLngs: function(latLngs) {

_getPixelBounds: function () {
        var parts = this._parts;
        var bounds = L.bounds([]);
        for (var i = 0; i < parts.length; i++) {
            var part = parts[i];
            for (var j = 0; j < part.length; j++) {
                bounds.extend(part[j]);
            }
        }

        var w = this._clickTolerance(),
            p = new L.Point(w, w);

        bounds.min._subtract(p);
        bounds.max._add(p);

        return bounds;
    },
    _clickTolerance: L.Path.prototype._clickTolerance

createLeafletElement(props: Props): LeafletElement {
        const el = new L.Marker(props.position, this.getOptions(props))
        this.contextValue = {
            ...props.leaflet,
            popupContainer: el,
        }

        const icon = new L.DivIcon({
            iconSize: new L.Point(16, 16),
            className: styles.marker,
        })
        el.setIcon(icon)
        el.setRotationOrigin('50% 50%')

        return el
    }