Leaflet. Дружим Image с Canvas

Хороший способ, воспользовался, но нужно добавить одну оптимизацию.
Маркеры обычно однотипны, даже если их надо вращать, исходное количество картинок обычно очень ограничено.

Здесь на каждый маркер создается свой html элемент:

const img = document.createElement('img');

Если нужно отобразить например 10 000 маркеров, то будет создаваться 10 000 html элементов, но они на самом деле не нужны, так как это не маркер, а исходная картинка для canvas.

Я бы может не обратил внимания, но firefox похоже не может обработать 10-20 тысяч созданий таких элементов, он просто виснет, chrome — может, но скорость все равно выше если оптимизировать.

Поэтому в «img.onload» я добавил:

img.onload = () => {
  this.options.imageCache[this.options.img.url] = img;  // это будет "img.el"
  // ...
};

А перед createElement забираю из кэша:

if (this.options.imageCache[this.options.img.url]) {
  this.options.img.el = this.options.imageCache[this.options.img.url];
  this.redraw();
  return;
}

imageCache это единый объект для кэширования, который передается при создании маркеров вместе с остальными options.
После этого firefox стал летать на 10-12 тысячах маркеров (как мне было нужно).