JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/pixi.js@5.3.3/dist/pixi.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-pixi-overlay@1.8.2/L.PixiOverlay.min.js"></script>
<button id='a' onclick='simulation.addTriangle()'>Add Triangle</button>
<button id='b' onclick='simulation.addImage2()'>Add Image 2</button>
<button id='c' onclick='simulation.removeLayer()'>remove all</button>
<div id="map"></div>

CSS

#map {
  height: 450px;
}

JavaScript

class Simulation
{
		constructor()
    {
        // center of the map
        var center = [1.8650,  51.2094];
				// affects size of hamsters:
        this.scaleFactor = 0.05;

        // Create the map
        this.map = L.map('map').setView(center, 2);

        // Set up the OSM layer
        L.tileLayer(
          'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18
          }).addTo(this.map);
        
        this.imagesLayer = new L.layerGroup(); 
        this.imagesLayer.addTo(this.map);
        
        
        this.markerTexture = null;
        this._loadPixiResources();
        
        // Create one Pixi container for pixiOverlay in which we will keep hamsters and triangles:
        this.pixiContainer = new PIXI.Container();
        
        let prevZoom;
        
        // Create one pixiOverlay:
        this.pixiOverlay = L.pixiOverlay((utils, data) => {
          // This is hook for our "executeOnOverlay" method:
        	if (data && typeof data.myData !== 'undefined') {
          	console.log('pixiOverlay - got my data. Executing command.');
            data.myData.command(utils);
            return;
          }
          
          console.log('usual redraw...');
          
          let container = utils.getContainer()
          let renderer = utils.getRenderer();
          let zoom = utils.getMap().getZoom()
          
          // If zoom has been changed (by using mouse scroll wheel etc) then adjust scale of hamsters:
          if (prevZoom !== zoom) {
          	let scale = utils.getScale()
            console.log('adjusting scale of hamsters: ' + scale);
            
            for (let marker of container.children) {
              if (!marker) {
              	continue;
              }
              if (marker.marker_type !== 'hamster') {
              	continue;
              }
              marker.scale.set(this.scaleFactor / scale);
            }    
          }

          prevZoom = zoom
          
       ...