Plugin infobox para folletos

Question

Estoy buscando un plugin para Leaflet, para tener un infobox en el borde del mapa. Por favor, mire mi captura de pantalla.

Un clic en el botón de información debería abrir una ventana. En esta ventana me gustaría tener alguna información adicional.

No he encontrado un plugin de este tipo en https://leafletjs.com/plugins.html ¿Tal vez he pasado por alto un plugin con esta función?

Software de fondo: Estoy utilizando el qgis gis con qgis2web plugin. Con este plugin puedo exportar un sitio web completo. Después de la exportación tengo la posibilidad de cambiar el código y tal vez insertar un plugin folleto.

Answer 1

Controlar L.control.info a continuación fue escrito como un ejercicio de lo que se necesita para escribir simple control personalizado como extensión de la básica L.Control objeto. No es muy 'según el libro' y no muy bien probado, sólo un ejercicio.

El control consiste en un botón con un título (estilizado) y un texto (estilizado) que se muestra al hacer clic en el botón.

Opciones:

• title - Texto del título con formato HTML, por defecto es 'Info'
• titleTooltip - texto de ayuda para el botón de título, por defecto es 'Click here for more info'
• content - Texto con formato HTML que se muestra al pulsar el botón
• maxWidth - anchura máxima del contenido mostrado
• titleClass - Clase de estilo CSS para el título
• contentClass - Clase de estilo CSS para el contenido

Métodos:

• setTitle(txt) - establecer texto del título
• setTitleTooltip(txt) - establecer información sobre el título
• setContent(txt) - establecer texto de contenido
• setTitleClass(cssClass) - establecer clase CSS para el título
• setContentClass(cssClass) - establecer clase CSS para el contenido

Control:

L.Control.Info = L.Control.extend({     

  options: {
    title: 'Info',
    titleTooltip: 'Click here for more info',
    content: '',
    maxWidth: '250px',
    titleClass: '',
    contentClass: ''
  },

  initialize: function(options) {        
    L.Util.setOptions(this, options);
    this._infoContainer = null;
    this._infoTitleContainer = null;
    this._infoBodyContainer = null;
    this._infoCloseButtonContainer = null;
    this._infoContentContainer = null;
    this._infoTitle = this.options.title;
    this._infoTitleTooltip = this.options.titleTooltip;
    this._infoContent = this.options.content;
    this._titleShown = false;
    this._titleClass = this.options.titleClass;
    this._contentClass = this.options.contentClass;
    this._infoTitleStyle = 'padding: 5px;';
    this._infoContainerClasses = 'leaflet-control-layers leaflet-control';
  },

  onAdd: function(map) {
    var infoContainer = L.DomUtil.create('div', 'leaflet-control-layers');

    var infoTitle = L.DomUtil.create('div');
    infoContainer.appendChild(infoTitle);
    infoTitle.setAttribute('style', this._infoTitleStyle);

    var infoBody = L.DomUtil.create('div', 'leaflet-popup-content-wraper');
    infoContainer.appendChild(infoBody);
    infoBody.setAttribute('style', 'max-width:' + this.options.maxWidth);

    var infoContent = L.DomUtil.create('div', 'leaflet-popup-content');
    infoBody.appendChild(infoContent);

    var infoCloseButton = L.DomUtil.create('a', 'leaflet-popup-close-button');
    infoContainer.appendChild(infoCloseButton);
    infoCloseButton.innerHTML = 'x';
    infoCloseButton.setAttribute('style', 'cursor: pointer');

    this._infoContainer = infoContainer;
    this._infoTitleContainer = infoTitle;
    this._infoBodyContainer = infoBody;
    this._infoContentContainer = infoContent;
    this._infoCloseButtonContainer = infoCloseButton;

    infoTitle.innerHTML = this._infoTitle;
    infoContent.innerHTML = this._infoContent;
    this._showTitle();

    L.DomEvent.disableClickPropagation(infoContainer);
    L.DomEvent.on(infoCloseButton, 'click', L.DomEvent.stop);
    L.DomEvent.on(infoContainer, 'click', this._showContent, this);
    L.DomEvent.on(infoCloseButton, 'click', this._showTitle, this);

    return infoContainer;
  },

  onRemove: function(map){},

  setTitle: function(title) {
    this._infoTitle = title;
    if (this._infoTitleContainer != null) {
      this._infoTitleContainer.innerHTML = title;
    }
  },

  setTitleTooltip: function(titleTooltip) {
    this._infoTitleTooltip = titleTooltip;
    if (this._titleShown) {
      this._showTitleTooltip(true);
    }
  },

  setContent: function(content) {
    this._infoContent = content;
    if (this._infoContentContainer != null) {
      this._infoContentContainer.innerHTML = content;
    }
  },

  setTitleClass: function(titleClass) {
    this._titleClass = titleClass;
    if (this._titleShown) {
      this._addInfoClass(this._titleClass);
    }
  },

  setContentClass: function(contentClass) {
    this._contentClass = contentClass;
    if (!this._titleShown) {
      this._addInfoClass(this._contentClass);
    }
  },

  _showTitle: function (evt) {
    this._addInfoClass(this._titleClass);
    this._displayElement(this._infoTitleContainer, true);
    this._displayElement(this._infoBodyContainer, false);
    this._displayElement(this._infoCloseButtonContainer, false);
    this._showTitleTooltip(true);
    this._setCursorToPointer(this._infoContainer, true);
    this._titleShown = true;
  },

  _showContent: function (evt) {
    this._addInfoClass(this._contentClass);
    this._displayElement(this._infoTitleContainer, false);
    this._displayElement(this._infoBodyContainer, true);
    this._displayElement(this._infoCloseButtonContainer, true);
    this._showTitleTooltip(false);
    this._setCursorToPointer(this._infoContainer, false);
    this._titleShown = false;
  },

  _showTitleTooltip: function (showIt) {
    this._infoContainer.setAttribute('Title', (showIt) ? this._infoTitleTooltip : '');
  },

  _displayElement: function (element, displayIt) {
    element.style.display = (displayIt) ? '' : 'none';
  },

  _setCursorToPointer: function (element, setIt) {
    element.style.cursor = (setIt) ? 'pointer' : '';
  },

  _addInfoClass: function (classToAdd) {
    L.DomUtil.setClass(this._infoContainer, this._infoContainerClasses + ' ' + classToAdd);
  }
});

L.control.info = function(opts) {
  return new L.Control.Info(opts);
}

JSFiddel ejemplo: https://jsfiddle.net/TomazicM/rqu3nvLj/