Question: Adding a toolbar

[jaredcnance]

How would you go about adding leaflet-toolbar functionality? I can get the L.Toolbar.Control object, but I'm not really sure how to implement it and can't find any documentation on the subject.

Typically, I would do something like this:

  // drawing toolbar
  new L.Toolbar.Control({
    position: 'topleft',
    className: 'leaflet-draw-toolbar'
  }).addTo(map);

But how do I get that functionality here?

export default EmberLeafletComponent.extend({
  childLayers: [
    TileLayer.extend({
      tileUrl:
        '/assets/maps/plant-inverted/' +
        'tile_{z}_{x}-{y}.png',
      options: {
        maxZoom: 5,
        minZoom: 1,
        continuousWorld: true,
        noWrap: true
      }
    }),
    LayerMixin.extend({
       _layer: new L.Toolbar.Control() // how do I add this to my map
    })
  ],

  center: L.latLng(0, 0),
  zoom: 1,
  options: {
    maxZoom: 5,
    minZoom: 1,
    crs: L.CRS.Simple
  }

});

[jaredcnance]

I discovered that this will work:

didCreateLayer: function() {
    this._super();
    new L.DrawToolbar.Control({
      position: 'topleft',
      className: 'leaflet-draw-toolbar'
    }).addTo(this._layer);

    var SaveAction = L.ToolbarAction.extend({
        options: {
            toolbarIcon: {
                html: "<i class='save icon'></i>",
                tooltip: 'Save Layout'
            }
        },
        addHooks: function () {
           // do stuff
        }
    });

    var tb = new L.Toolbar.Control({
        position: 'topleft',
        actions: [SaveAction]
    }).addTo(this._layer);

however we run into an issue with leaflet-toolbar adding anchor elements to the toolbar that link to # causing the route to change. As a workaround I have overwritten the L.ToolbarAction method _createIcon with the following:

_createIcon: function(toolbar, container, args) {
        var iconOptions = this.options.toolbarIcon;

        this.toolbar = toolbar;
        this._icon = L.DomUtil.create('li', '', container);
        this._link = L.DomUtil.create('a', '', this._icon);

        this._link.innerHTML = iconOptions.html;
        // REMOVED: this._link.setAttribute('href', '/plant-view');
        this._link.setAttribute('title', iconOptions.tooltip);

        L.DomUtil.addClass(this._link, this.constructor.baseClass);
        if (iconOptions.className) {
            L.DomUtil.addClass(this._link, iconOptions.className);
        }

        L.DomEvent.on(this._link, 'click', this.enable, this);

        /* Add secondary toolbar */
        this._addSubToolbar(toolbar, this._icon, args);
    }

Although, when a rectangle (for example) is drawn from the toolbar, it doesn't remain on the map.