Broken leaflet map with Angular-CLI and yaga. Where to insert leaflet.css?

3
votes

I'm trying to display a simple leaflet-map by using the yaga component (npm yaga-module). Therefore I generated a new project with angular cli and followed the introduction on the npm page. In the end, I got a broken map.

Image of the broken map.

I already implemented a working map with the leaflet library + JS and even with yaga in the ionic framework. In both cases I get the same broken map, if I remove the link to the leaflet.css. But where do I have to link the css file? If I insert the path in my .angular-cli.json, it seems to be loaded successfully. But then my map disappears completely.

Did I make a mistake? You can find my code below:

app.module.ts:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { YagaModule } from '@yaga/leaflet-ng2';

    import { AppComponent } from './app.component';

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        YagaModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }


app.component.ts: 

    import { Component } from '@angular/core';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'Test';
    }


app.component.html:

<h1>{{title}}</h1>
<yaga-map [zoom]="2">
    <yaga-tile-layer [url]="'http://a.tile.osm.org/{z}/{x}/{y}.png'"></yaga-tile-layer>
</yaga-map>

My app.component.css file is empty. Any ideas what's going wrong?
3
cssangularleafletangular-cli
Looks like it does not find the leaflet.css in the end. If the reference in the angular client does not work, did you try putting it in the index.html directly like a common stylesheet? I also had problems once with some versions (1.0.0) of leaflet to import the stylesheet. In version 1.2.0 however it worked for me. - Chris
Thanks for your answer! I tried your suggestion and imported the stylesheet in my html file. The result is the same - my map disappears. If I analyse it with the Crome developertool, I can see that the stylesheet is loaded. And it's loaded too, if I do the import in the .angular-cli.json. The problem seems to be somewhere else. - Twigman
Maybe it is a problem with the yaga package then. Using pure leaflet in angular definately works. If that is an option for you? - Chris

3 Answers

5
votes

In your styles.css add the following line of code

@import '../node_modules/leaflet/dist/leaflet.css'

1
votes

This question was discussed in the YAGA leaflet-ng2 github repository. We think that the leaflet.css was missing or that there wasn't set a height on the map. Without setting the height the map has a height of 0px, so that it seems like the map disappeared. Have a look on issue 286 in the leaflet-ng2 github repository. If you still have the problem, please write us on github.

0
votes

In Ionic2 you have to add the leaflet.css in your app.scss like that:

@import "node_modules/leaflet/dist/leaflet";