tutorial Panel de un único control con mas de un boton

Para entender esta sección, primero hay que saber Cómo crear un control. Una vez se tiene el conocimiento sobre los controles, se va a explicar cómo crear un panel de un único control a través del siguiente ejemplo:

1./ Se añade el CSS necesario para asignar el estilo al panel

  <style type="text/css">
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
    }

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


    /* Opening & closing buttons */
    .m-panel.m-plugin-herramienta.collapsed {
      height: 40px;
    }


    .opened .g-cartografia-flecha-izquierda {
      position: absolute !important;
      right: -286px !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;
      overflow-x: hidden;
      padding: 0px;

    }


    /* 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 */
    button {
      -webkit-font-smoothing: antialiased;
      border: 0;
      background: none;
      cursor: pointer;


    }

    button::before {
      content: "🏷" !important;
      font-size: 22px;
      font-family: none;
    }


    .btn1::before {
      content: "\1F3F4" !important;
      font-size: 22px;
      font-family: none
    }

    .btn2::before {
      content: "\1F3F2" !important;
      font-size: 22px;
      font-family: none
    }

    .btn3::before {
      content: "\1F3F1" !important;
      font-size: 22px;
      font-family: none
    }
  </style>

2./ Se crea un objeto panel y se añade al mapa

    const mapajs = M.map({
      container: 'mapjs',
      zoom: 2,
      maxZoom: 20,
      minZoom: 0,
    });

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


    mapajs.addPanels([panelExtra]);

3./ Se crea el control y se le añade el contenido que se mostrará en el panel

      const control = new M.Control(new M.impl.Control(), 'ControlPrueba');



    control.createView = (map) => {


      const contenedor = document.createElement('div');

      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">
                <button id='btn1' class="button-herramienta btn1" onclick="myFunction1()"></button>
                <button id='btn2' class="button-herramienta btn2" onclick="myFunction2()"></button>
                <button id='btn3' class="button-herramienta btn3" onclick="myFunction3()"></button>
            </section>
            <div id="m-herramienta-contents"></div>
        </div>
      `
      contenedor.innerHTML += htmlPanel;


      return contenedor;
    }

4./ Se añade la funcionalidad y se añade el control al panel

    function myFunction1() {
      alert('Nombre del control: ' + control.name)
    }

    function myFunction2() {
      M.dialog.info('Nombre del control: ' + control.name);
    }

    function myFunction3() {
      M.toast.info('Nombre del control: ' + control.name);
    }

    M.utils.draggabillyPlugin(panelExtra, '#m-herramienta-title');
    panelExtra.addControls(control);