Gestión de eventos personalizados

Eventos de interacción controles personalizados

Para poder realizar la gestión de eventos en controles personalizados, es muy importante crear una función que sea lo que se añada al evento de la API-CNIG, por lo tanto, el primer paso será definir esta función con la funcionad que se quiera realizar en el evento indicado

1./ Se añade la función

// 1. Creamos una función que nos añadirá al evento está función
        let myFunctionProcesses = function(e){
            console.log(e)
            // Hacemos una petición get con M.remote indicando la URL de catastro y los parámetros a enviar
            M.remote.post("https://api-processes.idee.es/processes/getElevation/execution",
            {
                "inputs": {
                    "crs": 3857,
                    "formato": "wkt",
                    "geom": `Point(${e.coord[0]} ${e.coord[1]})`,
                    "outputFormat": "array",
                    "withCoord": false
                }
            }
            ).then(function (res) {
                console.log(JSON.parse(res.text))
                altura = JSON.parse(res.text).values[0]
                htmlPersonalizado= `
                <table>
                    <tr>
                        <th style="">Valor de altitud:</th>
                        <th>${altura}</th>
                    </tr>
                </table>
                `
                // M.dialog.info( htmlPersonalizado, 'Mensaje de información', 1);

                // M.toast.info('Notificación informativa, cod_prov: '+features[0].getAttribute('cod_prov'), 1, 6000); 


                // Creamos un objeto Tab (pestaña)
                const featureTabOpts = {
                'icon': 'g-cartografia', // icono para mostrar en la pestaña
                'title': 'Título de la pestaña', // título de la pestaña
                'content': htmlPersonalizado, // contenido para mostrar
                'intelligence': false // activa la inteligencia para transformar el contenido en texto inteligente
                // Cuando hablamos de texto inteligente nos referimos a que es capaz de transformar un enlace de una imagen en una etiqueta HTML IMG 
                // permitiendo la visualización de la misma, para un video añadir la etiqueta HTML VIDEO, enlace PDF en etiqueta HTML IFRAME... (*)
                };
                // Creamos el Popup
                popup = new M.Popup();
                // Añadimos la pestaña al popup
                popup.addTab(featureTabOpts);
                // Finalmente se añade al mapa, especificando las coordenadas
                mapajs.addPopup(popup, e.coord);
            });
        };

2./ Construimos el control y la vista del mismo

// 2. Se crea un control, primer parámetro la implementación del control, segundo parámetro el nombre del control
        const control = new M.Control(new M.impl.Control(), 'ControlPrueba');

        control.createView = (map) => {

            const contenedor = document.createElement('div');
            return contenedor;
        }

3./ Construimos el panel y el botón del control

// 3. Creamos panel y lo añadimos al mapa
        const panelExtra = new M.ui.Panel('toolsExtra', {
            "className": 'm-herramienta',
            "collapsedButtonClass": 'm-tools',
            "position": M.ui.position.TL
        });
        panelExtra.addControls([control]);
        mapajs.addPanels([panelExtra]);

        // 5./ Se añade el contenido al panel, que en este caso es un único botón
        document.querySelector('.m-herramienta .m-panel-controls').innerHTML += 
        `
        <div class="m-control m-herramienta-container">
                <button id="m-herramienta-button" class="buttonHerramienta" title="Herramienta"></button>
        </div>
        `

4./ Se añaden las propiedades del control para ser activado o desactivado, en las cuales se incluye asociar y desasociar el evento que queremos que se dispare cuando esté activado el control

// 4. Se añaden las propiedades al control para activar y desactivar
        control.getActivationButton = (html) => {
            return html.querySelector('#m-herramienta-button');
        }

        control.activate = () => {
            M.toast.success('Activado'); 
            console.log('Activado');
            // añadimos el evento al mapa
            mapajs.on(M.evt.CLICK, myFunctionProcesses );
            document.querySelector('.buttonHerramienta').classList.add("activated");
        }

        control.deactivate = () => {
            M.toast.info('Desactivado'); 
            console.log('Desactivado');
            // desactivamos el evento
            mapajs.un(M.evt.CLICK, myFunctionProcesses );
            document.querySelector('.buttonHerramienta').classList.remove("activated");
        }

        control.manageActivation(document.querySelector('.m-herramienta-container'));