Skip to content

Paneles

fbma edited this page Apr 14, 2021 · 9 revisions

Mapea 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 M.ui.Panel:

var panelExtra = new M.ui.Panel('toolsExtra', {
  "collapsible": true,
  "className": 'm-tools',
  "collapsedButtonClass": 'g-cartografia-herramienta',
  "position": M.ui.position.TL
});
panelExtra.addControls([new M.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 del de Mapea:

    "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
    M.ui.position.TL Arriba a la izquierda
    M.ui.position.TR Arriba a la derecha
    M.ui.position.BR Abajo a la derecha
    M.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:

   var 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í:

   var controles = panel.getControls();

Ejemplo en jsFiddle

Doc API: M.ui.Panel

Clone this wiki locally