tutorial Panel con más de un control

En el caso que se quiera un panel con varios controles, se puede seguir el siguiente flujo de trabajo:

1./ Se añade el CSS necesario para aplicar el estilo al panel, controles y botones

    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
    }

    .g-herramienta .m-tools:before {
      content: "\1F3F3";
      font-size: 22px;
      font-family: none
    }


    /* Abrir y cerrar panel */
    .m-panel.m-plugin-herramienta.collapsed {
      height: 40px;
    }


    .opened .g-cartografia-flecha-izquierda {
      position: absolute !important;
      right: -40px !important;

      color: #71a7d3 !important;
      background-color: #fff !important;
    }


    /* Contenedor del plugin */
    .m-control.m-container.m-herramienta {
      width: 250px;
      display: flex !important;
      flex-direction: column;
    }


    /* Título */
    .m-herramienta-header {
      background-color: #71a7d3;
      color: white;
      display: block;
      font-size: 15px;
      height: 40px;
      line-height: 40px;
      padding: 0 5px;
      text-align: center;
      width: 100%;
    }

    /* Contenedor botones controles */
    .m-herramienta-previews {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      background-color: white;
      width: 100%;
      padding: 15px 0;

      border-bottom: 1px solid #adadad;
    }

    /* Botones controles */
    .m-panel-controls button {
      font-family: 'Times New Roman', Times, serif !important;
      font-size: 1.4rem;
      -webkit-font-smoothing: antialiased;
      border: 0;
      background: none;
      cursor: pointer;


    }

    .m-panel-controls button::before {
      font-size: 22px;
      font-family: none;
    }


    #controlToast::before{
      content: "▱";
      font-weight: bold;
      color:rgb(118, 118, 118)
    }
    #controlToast.activated::before{
      content: "▱";
      color:rgb(122, 239, 255)
    }
    .m-controlToast{
      color:rgb(118, 118, 118)
    }

2./ Se construye el panel y se añade al mapa

    const panelExtra = new M.ui.Panel('toolsExtra', {
      "collapsible": true,
      "className": 'g-herramienta',
      "collapsedButtonClass": 'm-tools',
      "position": M.ui.position.TL
    });

    const htmlPanel =
      `
    <div aria-label="Plugin View Management" role="menuitem" id="div-contenedor-herramienta" class="m-control m-container m-herramienta">
        <header 
            role="heading" 
            tabindex="0" 
            id="m-herramienta-title"
            class="m-herramienta-header">
              Título
        </header>
        <section id="m-herramienta-previews" class="m-herramienta-previews">

        </section>
        <div id="m-herramienta-contents"></div>
    </div>
    `

    mapajs.addPanels([panelExtra]);
    document.querySelector('.g-herramienta .m-panel-controls').innerHTML = htmlPanel;
    // Para hacer movible el panel desde el título
    M.utils.draggabillyPlugin(panelExtra, '#m-herramienta-title');

3./ Se crean los controles y sus funcionalidades

    const controlToast = new M.Control(new M.impl.Control(), 'controlToast');
    controlToast.createView = (map) => {
      const contenedor = document.createElement('div');
      return contenedor;
    }
    controlToast.htmlView = `
                      <button id="toastInfor" class="m-controlToast"> 🛈 </button>
                      <button id="toastError" class="m-controlToast"> ✘ </button>
                      <button id="toastwarning" class="m-controlToast"> ⚠ </button>
                      <button id="toastExito" class="m-controlToast"> ✔ </button>
                      `
    controlToast.activate = () => {
      console.log('Activado control: controlToast ');
      document.querySelector('#controlToast').classList.add("activated");
      document.querySelector('#m-herramienta-contents').innerHTML = controlToast.htmlView

      document.querySelector('#toastInfor').onclick = function(){
        M.toast.info('Notificación informativa'); 
      };
      document.querySelector('#toastError').onclick = function(){
        M.toast.error('Notificación de error', null, 5000);
      };
      document.querySelector('#toastwarning').onclick = function(){
        M.toast.warning('Notificación de aviso', 2, 3000);
      };
      document.querySelector('#toastExito').onclick = function(){
        M.toast.success('Notificación de éxito', 1, 1000);
      };
    }

4./ Por último, se añaden los controles al panel y se le da la lógica de comportamiento

    panelExtra.addControls(controlToast);

    panelExtra.getControls().forEach((btn) => {
      document.querySelector('#m-herramienta-previews').innerHTML += `<button id='${btn.name}' class="button-herramienta"></button>`
    })

    document.querySelectorAll('.button-herramienta').forEach((btn) => {
      console.log(btn)
      btn.addEventListener('click', (e) =>{

        if (document.querySelector('#m-herramienta-previews').querySelector('.activated') !== null){
          document.querySelector('#m-herramienta-previews').querySelector('.activated').classList.remove("activated")
        }
        
        // panelExtra.getControls(e.target.id)[0].activate()
        mapajs.getControls({name:e.target.id})[0].activate()
      })
    })