3
votes

I'm pretty new to Angular and built my first angular app with leaflet plugin. All is working as expected until using production build:

ng s --target=production or ng build --target=production

The leaflet map container shows not all map-tiles and/or in wrong row, column. I tried to force the map redraw with map.invalidateSize(); in onMapReady(..) but with no success.

(leafletMapReady)="onMapReady($event)

the component itself is showed depending on *ngIf condition:

<div>
    <app-tracking-map *ngIf="deliveryState == 1" [trackingData]="trackingData"></app-tracking-map>
</div>

I actually have no clue where to start the investigation just guess it's related to webpack and the magic bundling stuff.

in angular-cli.json I have added the leaflet css

      "styles": [
    "styles.css",
    "../node_modules/leaflet/dist/leaflet.css"
  ],
1
Sounds like missing the Leaflet CSS file. See stackoverflow.com/questions/48579677/…ghybs
As @ghybs said, it's likely missing leaflet.css. The ngx-leaflet README talks about some different ways to include the css file depending on your build system: github.com/Asymmetrik/ngx-leaflet#import-the-leaflet-stylesheetreblace

1 Answers

2
votes

You are likely missing the leaflet.css file located in ./node_modules/leaflet/dist/leaflet.css. When that is missing, the map and tiles are drawn, but they aren't laid out properly.

How you reference the file in your Webpack build depends on how you have your project set up. The ngx-leaflet README file describes some of the most common configurations:

https://github.com/Asymmetrik/ngx-leaflet#import-the-leaflet-stylesheet