title: Angular - Leaflet.js - not showing/rendering wrong
body: <p>I know this has been here a few times now, but I could not make those answers work for me.</p>
  <p>First of the import of leaflet.css is weird...
  This doesn't work - angular.json</p>
  <pre class="lang-json prettyprint-override"><code>    &quot;styles&quot;: [
          &quot;src/styles.css&quot;,
          &quot;path/to/leaflet.css&quot;
      ]
  </code></pre>
  <p>This also does not work - src/styles.css</p>
  <pre class="lang-css prettyprint-override"><code>    @import &quot;path/to/leaflet.css&quot;
  </code></pre>
  <p>This works - map.component.ts</p>
  <pre class="lang-js prettyprint-override"><code>    styleUrls: ['./map.component.css', &quot;path/to/leaflet.css&quot;]
  </code></pre>
  <p>Why is it that only when imported through the component the css is actually imported? It is not complaining about a wrong path or anything in the first two cases.</p>
  <p>Now even with leaflet.css being imported successfully, the map renders about half of the tiles. Someone said that resizing the window fixes the issue. But resizing a window makes the map gray...</p>
  <p>The rest of the code:</p>
  <pre class="lang-js prettyprint-override"><code>    import { LeafletModule } from '@asymmetrik/ngx-leaflet';
  
      @NgModule({
        declarations: [
          AppComponent,
          MapComponent
        ],
        imports: [
          BrowserModule,
          LeafletModule
        ],
        providers: [],
        bootstrap: [AppComponent]
      })
  
      //...
      
      &lt;div id=&quot;map&quot; 
        leaflet 
        [leafletOptions]=&quot;options&quot;
        [leafletLayersControl]=&quot;layers&quot;
      &gt;&lt;/div&gt;
  
      //...
  
      layers = {
      baseLayers: {
        &quot;OSM&quot;: tileLayer(MapConfig.layers.osm.url, {
          attribution: MapConfig.layers.osm.attribution
        }),
        &quot;ArcGIS&quot;: tileLayer(MapConfig.layers.arcgis.url, {
            attribution: MapConfig.layers.arcgis.attribution
        }),
        //...
      },
      overlays: {}
      }
  
      options = {
        center: latLng(MapConfig.defaultLocation[0], MapConfig.defaultLocation[1]),
        zoom: MapConfig.zoom,
        layers: [this.layers.baseLayers[&quot;OSM&quot;]]
      }
  </code></pre>
  <p>Here is the full code sample:
  <a href="https://3fjni.csb.app/" rel="nofollow noreferrer">https://3fjni.csb.app/</a></p>