Search code examples
angularleafletngx-leaflet

ngx-leaflet angular 5 map tiles issue when using production build

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"
  ],
Solution

  • 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