Creación de panel desde cero sin controles

En esta página vamos a guiar paso por paso cómo crear un panel y añadir una funcionalidad (cómo crear una extensión personalizada). En resumen, lo que tendremos que hacer es añadir el CSS necesario para establecer el estilo del resto de extensiones que tiene la APICNIG, añadir la estructura genérica interna de las extensiones y añadir una funcionalidad a través de una función de javascript. Los pasos a seguir para al creación de un panel personalizado son los siguientes:

1./ Añadimos el código CSS que en la etiqueta < style > dentro del < head > . Esta parte le dará el mismo aspecto de estilo que el resto de extensiones de la API-CNIG:

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

    .g-herramienta .m-tools:before {
      content: "🖭";  /*  icono a usar */
      font-size: 22px;
      font-family: none
    }

    div.opened {
      background-color: #fff !important;
      box-shadow: none !important;
    }

    div.opened>button {
      color: #71a7d3 !important;
      background-color: #fff !important;
    }

    .m-areas>div.m-area>div.m-panel.opened {
      background-color: #ffffff00 !important;
    }

    div.m-panel-contenedor{
      box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 -1px 0 rgba(0, 0, 0, .02)!important;
    }
    div.m-control.m-container {
      position: inherit !important;
      overflow: hidden;
      background-color: white;
      border-radius: 0;
      padding: 0;
      box-shadow: none;
      display: table;
      width: 100%;
      
    }

    .m-panel .title {
      line-height: 40px;
      color: #ffffff !important;
      background-color: #71a7d3;
      padding: 0px 18px;
    }


    .divContenido {
      margin: 5px;
      display: flex;
    }

    .buttonContenido {
      cursor: pointer;
      border: 2px solid #fff!important;
      border-radius: 50%!important;
      color: #364b5f!important;
      background-color: #fff!important;
      opacity: 1;
      margin: 0;
      transition: opacity .25s ease 0s;
      background: none;
      padding: 8px;
      font-size: 24px;
    }

2./ Creamos un objeto "panel" en < script > dentro del < body > , que nos servirá de base para crear la base de la extensión:

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

3./ Creamos dos objetos < div > que serán necesarios para seguir la estructura interna de un panel:

    // contenedor
    var contenedorPadre = document.createElement('div');
    contenedorPadre.id = 'div-contenedorPadre'
    contenedorPadre.className = 'm-panel-contenedor'

    var contenedor = document.createElement('div');
    contenedor.id = 'div-contenedor'
    contenedor.className = 'm-control m-container'

4./ Creamos un objeto < div > que nos servirá como título del panel:

    // título
    var tituloContenedor = document.createElement('div');
    tituloContenedor.className = 'divTitulo'
    tituloContenedor.className = 'title'
    tituloContenedor.id = "titleInfo"
    tituloContenedor.role = "heading"
    tituloContenedor.innerHTML = "Esto es un título";

5./ Creamos otro objeto < div > que almacenará las funcionalidades personalizadas:

    // contenido
    var contenido = document.createElement('div');
    contenido.id = "contenidoDIV"
    contenido.className = 'divContenido'

6./ Creamos un objeto < button > ,su función asociada y añadiremos el botón al div contenido. Esta función asociada será la encargada de la lógica que se quiera implementar en el botón:

    var botonDemo = document.createElement('button');
    botonDemo.innerHTML = '🕬';
    botonDemo.className = "buttonContenido"
    botonDemo.title="Hola, esto es un botón que hace un aviso"

    var botonDemoFunc = () => {
      M.dialog.success('Le has dado al botón', 'ÉXITO');
    }

    botonDemo.onclick = botonDemoFunc
    contenido.appendChild(botonDemo)

7./ Añadimos cada < div > creado a su respectivo nodo:

    // añadir a contenedor
    contenedor.appendChild(tituloContenedor)
    contenedor.appendChild(contenido)
    contenedorPadre.appendChild(contenedor)

8./ Añadimos el panel al mapa, le añadimos el < div > contenedor con la estructura interna del panel y le añadimos unos títulos a sus componentes internos para habilitar la opción de "tooltip":

    mapajs.addPanels([panelExtra]);
    panelExtra.getControlsContainer().appendChild(contenedorPadre)

    panelExtra._element.title="Esto es una extensión personalizada"
    panelExtra._buttonPanel.title="Click aquí para cerrar"

Existe una forma de añadir el contenido al panel en un solo paso, directamente añadiendo el texto HTML de la siguiente manera, aunque no nos dará tanta flexibilidad como el procedimiento anterior:

    // caso 2: añadirlo como innerHTML directamente
    mapajs.addPanels([panelExtra]);
        panelExtra.getControlsContainer().innerHTML += `
        <div id="div-contenedor">
        <div>
         <div id="titleInfo" class ="title" >Esto es un título</div>
        </div>
        <div id="contenidoDIV" class='m-container'>
        <button class='buttonContenido'>🕬</button>
       </div>`

Una vez completados estos pasos, habremos creado una extensión nueva en cliente: