tutorial Creacion Plugin

Para poder crear una extensión o "plugin" en cliente con API-CNIG, se recomienda primero haber entendido el procedimiento de creación de controles y paneles mediante sus respectivos tutoriales. En esta página, partiendo de ese conocimiento previo, vamos a importar un plugin creado en cliente al mapa de forma que sea funcional en todo el ecosistema de API-CNIG.

1./ Se añade el CSS necesario para aplicar el estilo al panel, controles y botones

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

.g-herramienta .m-tools:before {
  content: "\1F3F3";
  font-size: 22px;
  font-family: none
}


/* Abrir y cerrar panel */
.m-panel.m-plugin-herramienta.collapsed {
  height: 40px;
}


.opened .g-cartografia-flecha-izquierda {
  position: absolute !important;
  right: -40px !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;
}


/* 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 */
.g-herramienta .m-panel-controls button {
  font-family: 'Times New Roman', Times, serif !important;
  font-size: 1.4rem;
  -webkit-font-smoothing: antialiased;
  border: 0;
  background: none;
  cursor: pointer;
}


#controlToast::before{
  content: "▱";
  font-weight: bold;
  color:rgb(118, 118, 118)
}
#controlToast.activated::before{
  content: "▱";
  color:rgb(122, 239, 255)
}
.m-controlToast{
  color:rgb(118, 118, 118)
}

2./ Se crean el objeto plugin, se le da un nombre y se le asocia la función de ayuda

miPlugin = new M.Plugin()
miPlugin.name = "MiPlugin"

miPlugin.getHelp = () => {
        return {
            title: 'Mi Plugin Personalizado',
            content: new Promise((success) => {
                let html = '<div><p>Información del plugin</p></div>';
                html = M.utils.stringToHtml(html);
                success(html);
            }),
       };
}

3./ Se crean los objetos panel y control

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

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">

        </section>
        <div id="m-herramienta-contents"></div>
    </div>
    `

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

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

4./ Se sobreescribe el método de añadir al mapa "addTo" y se añade el plugin al mapa

miPlugin.addTo = (map) => {

    panelExtra.addControls(controlToast);

    map.addPanels(panelExtra);
    document.querySelector('.g-herramienta .m-panel-controls').innerHTML = htmlPanel;
    document.querySelector('#m-herramienta-contents').appendChild(controlToast.getElement());

    document.querySelector('.g-herramienta .m-panel-controls').innerHTML = htmlPanel;

    // Para hacer movible el panel desde el título
    M.utils.draggabillyPlugin(panelExtra, '#m-herramienta-title');


    controlToast.htmlView = `
                        <button id="toastInfor" class="m-controlToast"> 🛈 </button>
                        <button id="toastError" class="m-controlToast"> ✘ </button>
                        <button id="toastwarning" class="m-controlToast"> ⚠ </button>
                        <button id="toastExito" class="m-controlToast"> ✔ </button>
                        `
        
    controlToast.activate = () => {
            console.log('Activado control: controlToast ');
            document.querySelector('#controlToast').classList.add("activated");
            document.querySelector('#m-herramienta-contents').innerHTML = controlToast.htmlView

            document.querySelector('#toastInfor').onclick = function(){
                M.toast.info('Notificación informativa'); 
            };
            document.querySelector('#toastError').onclick = function(){
                M.toast.error('Notificación de error', null, 5000);
            };
            document.querySelector('#toastwarning').onclick = function(){
                M.toast.warning('Notificación de aviso', 2, 3000);
            };
            document.querySelector('#toastExito').onclick = function(){
                M.toast.success('Notificación de éxito', 1, 1000);
            };
        }

   controlToast.deactivate = () => {
            console.log('Desactivado control: controlToast ');
            document.querySelector('#controlToast').classList.remove("activated")
            document.querySelector('#m-herramienta-contents').innerHTML = ''
        }

   panelExtra.addControls(controlToast);

   panelExtra.getControls().forEach((btn) => {
        document.querySelector('#m-herramienta-previews').innerHTML += `<button id='${btn.name}' class="button-herramienta"></button>`
        })

        document.querySelectorAll('.button-herramienta').forEach((btn) => {

            btn.addEventListener('click', (e) =>{

                if(mapajs.getControls({name:e.target.id})[0].activated){
                    mapajs.getControls({name:e.target.id})[0].activated = false
                    mapajs.getControls({name:e.target.id})[0].deactivate()
                } else{
                    mapajs.getControls({name:e.target.id})[0].activate()
                    mapajs.getControls({name:e.target.id})[0].activated = true
                }
                            
            })
        })
    }

mapajs.addPlugin(miPlugin)

En este punto, podemos añadir el plugin "help", que nos mostrará la ayuda de la extensión que acabamos de crear, con el contenido que hayamos incluído en el método "getHelp"

x./ Se añade el plugin help al mapa

<link href="https://componentes.cnig.es/api-core/plugins/help/help.ol.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://componentes.cnig.es/api-core/plugins/help/help.ol.min.js"></script>

const mp = new M.plugin.Help({
        position: 'BL',
        tooltip: 'Obtener ayuda',
        images: [
            'https://www.ign.es/iberpix/static/media/logo.72e2e78b.png',
        ],
        title: 'Título definido por el usuario',
        extendInitialExtraContents: true,
        initialExtraContents: [
            { title: 'Apartado 1', content: '<div><h2 style="text-align: center; color: #fff; background-color: #364b5f; padding: 8px 10px;">Mi primer apartado</h2><div><p>Contenido extra definido por el usuario</p></div></div>',
            }
        ],
        finalExtraContents: [
            { title: 'Apartado final', content: '<div><h2 style="text-align: center; color: #fff; background-color: #364b5f; padding: 8px 10px;">Apartado final</h2><div><p>Contenido extra definido por el usuario</p></div></div>',
            }
        ]
    });

mapajs.addPlugin(mp)