Fichero js

miplugin.js

En el fichero facade/js/miplugin.js el código comienza con la definición del módulo y la importación de las clases necesarias para el plugin, tras lo cual se comienza la construcción del mismo:

/**
 * @module M/plugin/Miplugin
 */
import MipluginControl from './miplugincontrol';
import 'assets/css/miplugin';

class Miplugin extends M.Plugin {
...

> Constructor
En este constructor lo primero será llamar al super(), para poder definir posteriormente los atributos internos:

constructor() {
    super();
     ...

Los atributos a definir dependerán de las necesidades funcionales. Por lo general, hay cuatro atributos que considerar:

• El nombre del plugin.
• El objeto mapa.
• El panel del plugin, en caso de que vaya a tener y gestionarlo.
• El o los controles que forman parte del plugin.

Así lo anterior quedaría:

constructor() {
   super();
   this.name = 'miPlugin';
   this.map_ = null;
   this.controls_ = [];
   this.panel_ = null;
}

> addTo
Será llamado una vez que se añada al mapa. Este es el método principal de un plugin ya que recibe como parámetro la instancia del mapa sobre el cual funcionará. Las acciones que podemos realizar en este método incluyen:

• Asignación del objeto mapa.
• Inicialización de posibles controles internos.
• Inicialización del posible panel contenedor.

Por ejemplo, si nuestro plugin contiene un control, en este método será donde lo creemos y lo añadamos al mapa:

addTo(map) {
   // Inicializamos controles
   this.controls_.push(new M.control.miPluginControl());
   // Guardamos referencia al mapa contenedor
   this.map_ = map;
   // Añadimos los controles al mapa
   this.map_.addControls(this.controls_);
};

Si el plugin dispone de un Panel, al añadir el control al mismo, este lo añadirá a su vez al mapa, por lo que no tendremos que hacerlo explícitamente:

// Inicializamos panel contenedor
this.panel_ = new M.ui.Panel('mipanel', {
  "collapsible": false,
  "className": "m-map-info",
  "position": M.ui.position.TR
});
// Esto asigna a su vez el panel al control
this.panel_.addControls(this.controls_);
// Añadimos el panel que ya contiene los controles al mapa
this.map_.addPanels(this.panel_);

Es recomendable que después de añadir el plugin al mapa, se lance el evento M.evt.ADDED_TO_MAP. Cada plugin, en función de su lógica interna, deberá hacer unas u otras comprobaciones previas (¿están inicializados los controles internos? etc.).

> destroy
Este método será ejecutado cuando el plugin sea eliminado del mapa. Es decir, será en este método donde tendremos que deshacer los cambios que realizó dicho plugin. Por ejemplo, para el caso anterior, tendremos que eliminar el control personalizado del mapa:

destroy(map) {
   this.map_.removeControls(this.controls_);
   this.map_ = null;
};

> getControls
Dar acceso a los posibles controles internos desde fuera del plugin es opcional, el desarrollador deberá evaluar si es necesario o si facilita su uso.

getControls() {
    return this.controls_;
};