Crear Control Personalizado - Desarrollos-IDEE/API-IDEE GitHub Wiki

Existe la posibilidad de crear controles personalizados en un mapa. A continuación, se muestra un ejemplo de uso donde, haciendo click sobre el control, aparece una alerta de html.

Para llegar a ello, se siguen los siguientes pasos:

1./ Creamos un objeto "control", a partir de la implementación de la clase control y dándole un nombre al nuevo control. Este objeto control nos servirá de plantilla para darle una funcionalidad :

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

2./ Se sobrescribe el método createview, que es el que tiene la lógica del control. Tiene la peculiaridad de que tiene que devolver un objeto html. Cuando un control se integra en un panel, el contenido del panel se añade a partir de este html del control.

    // 2. Se sobrescribe el método, tiene que devolver un elemento HTML
    control.createView = (map) => {
            const contenedor = document.createElement('div');
            contenedor.id = 'ControlPrueba'
            contenedor.style['backgroundColor'] = 'black';
            contenedor.style['height'] = '50px';
            contenedor.style['width'] = '50px';
            contenedor.onclick = () => {
                console.log(map.getControls())
                alert('Nombre del control: ' + map.getControls()[0].name)
            };
            return contenedor;
        }

3./ Por último se añade el control al mapa

    // 3. Se añade el control al panel
    const mapajs = IDEE.map({
      container: 'mapjs',
    });
    mapajs.addControls(control);

Si se desea añadir la ayuda de este control para mostrarla en el plugin Help, se debe realizar los siguientes pasos:

1./ Crear método getHelp con el contenido de la ayuda.

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

2./ Añadir el plugin de ayuda (Help) al mapa.

const help = new IDEE.plugin.Help({});
mapajs.addPlugin(help);

// Una vez el plugin esté añadido al mapa, añadimos a la lista de controles el control personalizado      
setTimeout(() => {
  help.ctrl.controls.push('ControlPrueba')
}, 500)

3./ Al consultar la ayuda desde el plugin Help mostrará la ayuda del control.

⚠️ **GitHub.com Fallback** ⚠️