CODEWITHSUNDEEP
htmlcsstypescriptwebangular5
Blackboy
Blackboy

Reputation: 192

leaflet legend how to set styles css in div from typescript code

I try to set a legend on my map. I do not know how to set css styles, the values (grades) are displayed. Where should I put styles? Its angular 5 and typescript. Getting color from grades its not working too.

TS:

createLegend() { let legend = L.control.attribution({position: "topright"});

function getColor(d) {
  return d > 1000 ? '#800026' :
    d > 500  ? '#BD0026' :
      d > 200  ? '#E31A1C' :
        d > 100  ? '#FC4E2A' :
          d > 50   ? '#FD8D3C' :
            d > 20   ? '#FEB24C' :
              d > 10   ? '#FED976' :
                '#FFEDA0';
}
legend.onAdd = function (map) {
  var div = L.DomUtil.create('div', 'info legend'),
    grades = [0, 10, 20, 50, 100, 200, 500, 1000],
    labels = [];

  // loop through our density intervals and generate a label with a colored square for each interval
  for (var i = 0; i < grades.length; i++) {
    div.innerHTML +=
      '<i style="background:' + getColor(grades[i] + 1) + '"></i> ' +
      grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');
  }
  return div;
};
legend.addTo(this.map);
}

CSS (I do not know where to insert)

.legend {
    line-height: 18px;
    color: #555;
}
.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}

Upvotes: 1

Views: 1542

Answers (1)

gmazzotti
gmazzotti

Reputation: 427

In Angular your css is either in the component.css or in the style.css of the whole app. As for the angular guideline you should have a component folder with a component ts file and a component style file.

In your case its not clear if the legends is used in multiple part of your application or not, so you can have either a legend component or some other component with the legend within. This component should have a *.component.css file added like so:

@Component({
    selector: 'something',
    templateUrl: './something.component.html',
    styleUrls: ['./something.component.css'],
})
export class SomethingComponent implements OnInit, OnDestroy  {

Update

As you manually manipulate the DOM angular dont add the attributes needed for component css, you should change your css selector in 

::ng-deep .legend

or maybe

:host ::ng-deep .legend

Upvotes: 1

Related Questions