2.4. Paneles

El API proporciona una serie de paneles que facilitan la organización de plugins y controles sobre el mapa. Para crear uno de estos paneles se proporciona el objeto del tipo IDEE.ui.Panel:

const panelExtra = new IDEE.ui.Panel('toolsExtra', {
  "collapsible": true,
  "className": 'm-tools',
  "collapsedButtonClass": 'g-cartografia-herramienta',
  "position": IDEE.ui.position.TL
});
panelExtra.addControls([new IDEE.control.Location()]);
mapajs.addPanels([panelExtra]);

• collapsible: indica si se podrá contraer (true) o no (false).

• className: clase CSS que se usará para los estilos del panel.
  Es posible especificar varias clases de manera que se puedan extender las existentes con las personalizaciones que se deseen, bastaría con definir los estilos deseados en nuestro css e importarlo después:

  "className": 'm-tools m-tools-extra'

  .m-tools-extra > button.m-panel-btn {
    color: #f00819;
    background-color: #ffffff;
  }

• collapsedButtonClass: clase CSS que definirá el icono del panel contraído. No es obligatorio y si no se indica, por defecto mostrará una flecha en la dirección de despligue.

• position: establece la posición del panel y puede tomar los siguientes valores:

  Valor	Descripción
  IDEE.ui.position.TL	Arriba a la izquierda
  IDEE.ui.position.TR	Arriba a la derecha
  IDEE.ui.position.BR	Abajo a la derecha
  IDEE.ui.position.BL	Abajo a la izquierda

Gestión de paneles
En cualquier momento pueden recuperarse los paneles existentes en el mapa, filtrando por el nombre si así se desea:

   const panel = mapajs.getPanels('miPanel')[0];

Además de en el constructor, se puede manipular el estilo del panel accediendo directamente su template:

   panel.getTemplatePanel().style.backgroundColor = "red";

Los paneles pueden abrirse/cerrarse mediante instrucciones a través de sus métodos open() y collapse() respectivamente.

Los paneles son contendores directos de controles, ya sean básicos o de plugins, y pueden obtenerse así:

   const controles = panel.getControls();

Se pueden crear y añadir paneles al mapa utilizando el método .addPanels del mapa, con esto se puede crear paneles con extensiones en cliente (sin compilar).

const panelExtra = new IDEE.ui.Panel('nombrePanel', {
  "collapsible": true,
  "className": 'nombreDeLaClase',
  "collapsedButtonClass": 'claseDelBotón',
  "position": IDEE.ui.position.TL
});

mapjs.addPanels(panelExtra);

• Ejemplo de uso.