tutorial Panel de un único control con mas de un boton - Desarrollos-IDEE/API-IDEE GitHub Wiki

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 = IDEE.map({
      container: 'mapjs',
      zoom: 2,
      maxZoom: 20,
      minZoom: 0,
    });

    const panelExtra = new IDEE.ui.Panel('toolsExtra', {
      "collapsible": true,
      "className": 'g-herramienta',
      "collapsedButtonClass": 'm-tools',
      "position": IDEE.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 IDEE.Control(new IDEE.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() {
      IDEE.dialog.info('Nombre del control: ' + control.name);
    }

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

    IDEE.utils.draggabillyPlugin(panelExtra, '#m-herramienta-title');
    panelExtra.addControls(control);
⚠️ **GitHub.com Fallback** ⚠️