'leaflet map - adding a custom control similar to to the layers control but would like a different icon - defined by CSS

leaflet map - adding a custom control similar to to the layers control but would like a different icon - defined by CSS

I'm building a custom control on a leaflet map which I'd like to have work similarly to the leaflet layers control. I've copied the logic from the layers control to display the icon on the map and pop up the interface when the mouse hovers over it. It wasn't straight-forwards as the layers control is Javascript and I'm working in typescript. But it is working now, except for one small problem.

I cannot change the icon used by the layers tool since it is defined in CSS. The .SCSS styles I create can be used in the main form where the map is displayed, but not in the leaflet map itself. One brute force method would be to modify the leaflet source .css file and add my new css there. But I'm trying to avoid that.

Is there a way to get the map custom control to recognize CSS defined outside of leaflet?

In the code below, the line which creates the filter icon creates the class name leaflet-control-layers-toggle. This class defines the icon image. If I change this class to anything else, no icon is displayed.

    this.filtersLink = L.DomUtil.create('a', className + '-toggle', this.container);
    this.filtersLink.href = '#';
    this.filtersLink.title = 'Filters';


======

private InitLayout() {
    const className = 'leaflet-control-layers';
    this.container = L.DomUtil.create('div', className);
    this.container.style.backgroundColor = 'white';
    this.container.setAttribute('aria-haspopup', 'true');
    L.DomEvent.disableClickPropagation(this.container);
    L.DomEvent.disableScrollPropagation(this.container);
    this.section = L.DomUtil.create('section', className + '-list');
    if (this.collapsed) {
      this.map.on('click', this.CollapseDialog, this);
      if (!L.Browser.android) {
        L.DomEvent.on(this.container, {
          mouseenter: this.ExpandDialog,
          mouseleave: this.CollapseDialog
        }, this);
      }
    }
    this.filtersLink = L.DomUtil.create('a', className + '-toggle', this.container);
    this.filtersLink.href = '#';
    this.filtersLink.title = 'Filters';
    if (L.Browser.touch) {
      L.DomEvent.on(this.filtersLink, 'click', L.DomEvent.stop);
      L.DomEvent.on(this.filtersLink, 'click', this.ExpandDialog, this);
    } else {
      L.DomEvent.on(this.filtersLink, 'focus', this.ExpandDialog, this);
    }

    this.AddLabel('Temporal');
    this.AddRadioButton ( 'temporal01', 'temporal', 'Today', '1', false);
    this.AddRadioButton ( 'temporal02', 'temporal', 'Yesterday', '2', false );
    this.AddRadioButton ( 'temporal03', 'temporal', '7 Days', '3', true );
    this.AddRadioButton ( 'temporal04', 'temporal', '30 Days', '4', false );
    this.AddSeparator();
    this.AddLabel('Severity');
    this.AddCheckBox1 ( 'severity01', 'Major', '1', true );
    this.AddCheckBox1 ( 'severity02', 'Minor', '2', true );
    this.AddCheckBox1 ( 'severity03', 'Insignificant', '3', true );
    this.AddSeparator();
    this.AddLabel('Status');
    this.AddCheckBox2 ( 'status01', 'Active', '1', true );
    this.AddCheckBox2 ( 'status02', 'Reinspect', '2', true );
    this.AddCheckBox2 ( 'status03', 'Reactivated', '3', true );
    this.AddCheckBox2 ( 'status04', 'Closed', '4', false );
    this.container.appendChild(this.section);

    if (!this.collapsed) {
      this.ExpandDialog();
    }
  }
leaflet


Solution 1:[1]

Got it figured out - two ways to do this:

  • override with :ngdeep
  • add it to the styles.scss in the root of the project

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Werner Reiche

Related Questions