Angular 6 - How to apply external css stylesheet (leaflet) at component level?

Question

Trying to use Leaflet in an Angular 6 component. Depending on how the css file is linked, the map shows ok or is messed up, there are missing tiles not in the right order, which means the css is not taken into account.

I managed to make it work with 2 solutions linking the css to the application level (global), but never only to the component. Here's what I tried (in addition to reading several posts about css/leaflet/Angular):

Worked - global level:

// styles.css
@import url("assets/lib/leaflet/leaflet.css");

Worked - global level:

// index.html
<link rel="stylesheet" href="./assets/lib/leaflet/leaflet.css" type="text/css">

Did not work - global level:

// angular.json
"styles": [
    "src/styles.css",
    "src/assets/lib/leaflet/leaflet.css"
],

Did not work - component level:

// ...

import * as L from "../assets/lib/leaflet/leaflet.js";
import "../assets/lib/leaflet/leaflet-bing-layer.js";
import { BingHelper } from "../assets/lib/bing/bing-helper.js";

// -> importing the .css file here does not work

@Component({
    templateUrl: "./map.component.html",
    selector: "app-map",
    styleUrls: ["../assets/lib/leaflet/leaflet.css"] // -> does not work
    
    // -> also tried to put the content of the .css in style: "", did not work neither

})
export class MapComponent implements AfterViewInit {
    ngAfterViewInit() {
        var map = L.map("map", {
            attributionControl: false,
            zoom: 8,
            minZoom: 3,
            maxZoom: 15,
            center: new L.LatLng(40.737, -73.923)
        });
        // ...

Did not work: encapsulation - component level: Load external CSS into component

Loading from CDN instead of local file does not change the issue.

Note: I am using a Bing layer extension, but this has no impact on this issue. I also had the same issue using Mapbox tiles instead.

Question: is there a way to link Leaflet css in a component and make it only available to the component, but not to the whole Angular application?

Check this link https://coryrylan.com/blog/css-encapsulation-with-angular-components — Palsri, Jun 25 '18 at 15:39
@Palsri Thank you. I read that blog post before asking. If I understand correctly, encapsulation: ViewEncapsulation.None should work in my case - but it does not (at least with "styleUrls"; maybe it only works with "styles"?). — evilmandarine, Jun 25 '18 at 16:30

score 17 · Accepted Answer · edited Jun 13 '22 at 07:24

Ok, here's what worked (thanks @Palsri, I read once more the blog post and the Angular styling guidelines and tried the following, which worked):

In a separate css file, import the leaflet css:

// map.component.css
@import url("../assets/lib/leaflet/leaflet.css");

.mapstyle {
    width: 100%;
    height:100%;
};

Then in the component, reference this css instead of the leaflet css as follows:

@Component({
    templateUrl: "./map.component.html",
    selector: "app-map",
    styleUrls: ["./map.component.css"],
    encapsulation: ViewEncapsulation.None
})

Here's the code in the html template:

<div id="map" class="mapstyle"></div>

One more thing: for the height % to work, you need to define the parents size, which I currently did in the index.html as follows:

<style>
html, body {
    min-height: 100% !important;
    height:     100%;
    padding: 0px 0px 0px 0px;
    margin:  0px 0px 0px 0px;
}
</style>

score 2 · Answer 2 · answered Feb 14 '20 at 09:37

2

Doing this

@import url("path")

ex:

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css")

or doig also

@import "bootstrap/dist/css/bootstrap.min.css"

answered Feb 14 '20 at 09:37

Trilok Singh

1,227
12
10

Angular 6 - How to apply external css stylesheet (leaflet) at component level?

2 Answers2

Linked