tutorial Panel de un único control

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;
    }

    .m-herramienta-container {
      top: 20px;
      left: 600px;
    }


    .buttonHerramienta {
      border: 2px solid #FFF !important;
      border-radius: 50% !important;
      background-color: #71A7D3 !important;
    }
    .buttonHerramienta:before {
      /*  icono a usar */
      content: "🖭";
      font-size: 22px;
      font-family: none;
      color: #FFF !important;
    }

    
    .buttonHerramienta.activated {
      border: 2px solid #71A7D3 !important;
      border-radius: 50% !important;
      background-color: #ffffff  !important;

    }
    .buttonHerramienta.activated:before  {
      background-color: #ffffff !important;
      color: #71A7D3 !important;
    }

  </style>

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

    const mapajs = M.map({
      container: 'mapjs', //id del contenedor del mapa
    });

    const panelExtra = new M.ui.Panel('toolsExtra', {
      "className": 'm-herramienta',
      "collapsedButtonClass": 'm-tools',
      "position": M.ui.position.TL
    });
    mapajs.addPanels([panelExtra]);

3./ Se añade el contenido al panel, que en este caso es un único botón

      document.querySelector('.m-herramienta .m-panel-controls').innerHTML += 
      `
      <div class="m-control m-herramienta-container">
            <button id="m-herramienta-button" class="buttonHerramienta" title="Herramienta"></button>
      </div>
    `

4./ Se crea el control

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

      // Con esta línea, se comparte con el objeto window la variable control1
      window.control1 = control1;

5./ Se añade la funcionalidad al control creado

    control1.createView = (map) => {
      const contenedor = document.createElement('div');
      console.log(control1)
      return contenedor;
    }

    control1.getActivationButton = (html) => {
      return html.querySelector('#m-herramienta-button');
    }

    control1.activate = () => {
      M.toast.success('Activado'); 
      console.log('Activado');
      document.querySelector('.buttonHerramienta').classList.add("activated");
    }

    control1.deactivate = () => {
      M.toast.info('Desactivado'); 
      console.log('Desactivado');
      document.querySelector('.buttonHerramienta').classList.remove("activated");
    }

    control1.manageActivation(document.querySelector('.m-herramienta-container'));