CustomMarker draw method forces layout reflow

[halvtomat]

I am using this library in a project with a few hundred customMarkers and noticed that the app is very laggy when zooming in and out on the map. When analyzing with devtools I noticed that on each zoom event the browser was forced to recalculate the layout and styling for each of my custom markers which is slow.

The reflow originates from the draw method in src/utils/index.ts.

// src/utils/index.ts

draw() {
      if (!this.element) return;

      const overlayProjection = this.getProjection();
      const point = overlayProjection?.fromLatLngToDivPixel(this.getPosition());

      if (point) {
        this.element.style.position = "absolute";
        const height = this.element.offsetHeight; // <-- THIS LINE
        const width = this.element.offsetWidth; // <-- AND THIS LINE
        let x: number, y: number;
        switch (this.opts.anchorPoint) {

If you check this link you can see that accessing element.offsetHeight and element.offsetWidth forces a reflow.

This issue can be solved by including a size option for the custom markers which can be used instead of the element attributes.

        const height = this.opts.size && this.opts.size.height ? this.opts.size.height : this.element.offsetHeight;
        const width = this.opts.size && this.opts.size.width ? this.opts.size.width : this.element.offsetWidth;

I have solved it this way in a fork I made, it improved map performance in my app by 90%. Submitting a PR soon.

[halvtomat]

Addressed in #163