Search code examples
javascriptangularleafletngx-leaflet

I´m stucked creating Leaflet buttons on ngx-leaflet

I´m completly stucked in Angular project with leaflet and ngx-leaflet right now and this is what happens.

I´ve created some custom leaflet controls like this div:

[Toolbar example]enter image description here

The problem is the next one; I´ve created this div as a custom leaflet controllike this into the onReady(){}:

L.Control.Barra = L.Control.extend({
  options: {
    position: 'topright',
  },
  onAdd: function (mapa) {
    let contenedor = L.DomUtil.create(
      'div',
      'col mx-auto leaflet-bar leaflet-control barra'
    );
    contenedor.id = 'barra';
    L.DomEvent.disableClickPropagation(contenedor);

    let bPrueba = L.DomUtil.create(
      'button',
      'm-2 btn btn-secondary',
      contenedor
    );
    bPrueba.innerHTML = '<i class="fas fa-list"></i>';
    bPrueba.title = 'Listado';
    let bPrueba2 = L.DomUtil.create(
      'button',
      'm-2 btn btn-secondary',
      contenedor
    );
    bPrueba2.innerHTML = '<i class="fas fa-palette"></i>';
    bPrueba2.title = 'Categorizar';
    let bPrueba3 = L.DomUtil.create(
      'button',
      'm-2 btn btn-secondary',
      contenedor
    );
    bPrueba3.innerHTML = '<i class="fas fa-chart-pie"></i>';
    bPrueba3.title = 'Análisis';
    let bPrueba4 = L.DomUtil.create(
      'button',
      'm-2 btn btn-secondary',
      contenedor
    );
    bPrueba4.innerHTML = '<i class="far fa-chart-bar"></i>';
    bPrueba4.title = 'Análisis potencia proyecto';
    let bPrueba5 = L.DomUtil.create(
      'button',
      'm-2 btn btn-secondary',
      contenedor
    );
    bPrueba5.innerHTML = '<i class="fas fa-chart-area"></i>';
    bPrueba5.title = 'Análisis potencia visible';
    let bPrueba6 = L.DomUtil.create(
      'button',
      'm-2 btn btn-secondary',
      contenedor
    );
    bPrueba6.innerHTML = '<i class="far fa-file"></i>';
    bPrueba6.title = 'Fichas';
    let bPrueba7 = L.DomUtil.create(
      'button',
      'm-2 btn btn-secondary',
      contenedor
    );
    bPrueba7.innerHTML = '<i class="fas fa-street-view"></i>';
    bPrueba7.title = 'Street view';
    let bPrueba8 = L.DomUtil.create(
      'button',
      'm-2 btn btn-secondary',
      contenedor
    );
    bPrueba8.innerHTML = '<i class="fas fa-ruler-combined"></i>';
    bPrueba8.title = 'Medir area';
    let bPrueba9 = L.DomUtil.create(
      'button',
      'm-2 btn btn-secondary',
      contenedor
    );
    bPrueba9.innerHTML = '<i class="fas fa-ruler"></i>';
    bPrueba9.title = 'Medir línea';
    let bPrueba10 = L.DomUtil.create(
      'button',
      'm-2 btn btn-secondary',
      contenedor
    );
    bPrueba10.innerHTML = '<i class="fas fa-print"></i>';
    bPrueba10.title = 'Imprimir';
    let bPrueba11 = L.DomUtil.create(
      'button',
      'm-2 btn btn-secondary',
      contenedor
    );
    bPrueba11.innerHTML = '<i class="fas fa-file-upload"></i>';
    bPrueba11.title = 'Cargar WMS';
    let bPrueba12 = L.DomUtil.create(
      'button',
      'm-2 btn btn-secondary',
      contenedor
    );
    bPrueba12.innerHTML = '<i class="fas fa-file-export"></i>';
    bPrueba12.title = 'Descargar';

    contenedor.title = 'Barra';
    return contenedor;
  },
  onRemove: function (mapa) {},
});
let prueba = new L.Control.Barra();
prueba.addTo(mapa);

I wish to add to this buttons the functions of drawing but don´t know how to do it, I´ve read a lot of stack overflow posts, internet forums post and for sure, the API docs of leaflet, leaflet-draw, ngx-leaflet and ngx-leaflet-draw.

I´m pretty newbie on stack overflow so if it´s something wrong in the post, say it to me for make corrections.

Solution

  • You can easy add click events to the buttons with L.DomEvent:

    L.DomEvent.on(bPrueba, 'click', function(e){console.log(e)});

    also you can call a method of the control:

    L.Control.Barra = L.Control.extend({
  options: {
    position: 'topright',
  },
  onAdd: function (mapa) {
    let contenedor = L.DomUtil.create(
      'div',
      'col mx-auto leaflet-bar leaflet-control barra'
    );
    contenedor.id = 'barra';
    L.DomEvent.disableClickPropagation(contenedor);

    let bPrueba = L.DomUtil.create(
      'button',
      'm-2 btn btn-secondary',
      contenedor
    );
    bPrueba.innerHTML = '<i class="fas fa-list"></i>';
    bPrueba.title = 'Listado';


    L.DomEvent.on(bPrueba, 'click', this.clickFunc1); // <------------

    //....
  },
  clickFunc1: function(e){
      console.log(e);
  }
});

    To start a draw function call:

    new L.Draw.Polyline(map).enable();

    so for you:

    clickFunc1: function(e){
      new L.Draw.Polyline(map).enable();
  }

    But I prefer Leaflet-Geoman there you can simply call map.pm.enableDraw('Polyline') with a lot of function and it has a newer design.