Crear Control Personalizado

Existe la posibilidad de crear controles personalizados en un mapa. Para guiar al desarrollador, se va a explicar un ejemplo de uso donde haciendo click sobre el mapa, aparecerá 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 M.Control(new M.impl.Control(), 'ControlPrueba');

2./ Se sobrescribe el método createview, que es el que tiene la lógica del control. Tiene la peculiaridad que tiene que devolver un objeto html, en este ejemplo devolveremos un div vacío, pero 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');
      map.on('click', (evt) => {
        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 = M.map({
      container: 'mapjs',
    });
    mapajs.addControls(control);

Para crear un control que se pueda activar/desactivar desde un botón en el mapa, habrá que crear un panel primero y añadir este panel al mapa.