Tile maps not showing

[johnedvard]

It seems the map is not drawn correctly (see picture). I am using the latest version of Angular as of this writing (Agnular 5).

I have followed the steps in the installation guide:

npm install leaflet
npm install @asymmetrik/ngx-leaflet
npm install --save-dev @types/leaflet

I added Styles in Angular CLI

{
    ...
    "apps": [
        {
            ...
            "styles": [
                "styles.css",
                "../node_modules/leaflet/dist/leaflet.css"
            ],
            ...
        }
    ]
    ...
}

I added module in app.module

import { LeafletModule } from '@asymmetrik/ngx-leaflet';

...
imports: [
    ...
    LeafletModule.forRoot()
]
...

I have the current DOM-element:

<div leaflet
               style="height:100px;"
               [leafletCenter]="mapCenter"
               [leafletZoom]="zoomLevel"
               [leafletLayers]="leafletLayers">
          </div>

in my component using the map, I have the following setup:

 import {latLng, tileLayer} from "leaflet";

@Component({
  selector: 'app-sales',
  templateUrl: './sales.component.html',
  styleUrls: ['./sales.component.css']
})
export class SalesComponent implements OnInit {

 leafletOptions;
 mapCenter;
 zoomLevel;
  constructor() {
    this.leafletLayers = [tileLayer(
      'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      { maxZoom:7 , attribution: '...'})];
    this.mapCenter = latLng(64.805606, 9.910027);
    this.zoomLevel=5;
  }
}

Is it a bug, or am I doing something wrong?

[mcurtis22]

Is the map fixed when you resize your browser?

[reblace]

Can you verify in the console that the leaflet.css file is being properly loaded and applied to the element?

Also, like mcurtis22 said, you should check to see if resizing the window fixes the issue. If there's something causing the DOM elements to resize, Leaflet requires you to call "map.invalidateSize()". ngx-leaflet will handle this automatically for you for window resizes, but there's no straightforward way to generically handle anything that might resize the page via javascript.

[johnedvard]

Thank you for your comments. I think the css was not properly loaded and applied as you say. When I opened the application today, I was able to render the map perfectly. Maybe I forgot to rebuild the application after adding the Leaflet module. Thank you for your rapid replies though. Cheers

[playtinum]

I have the same problem even with my css properly loaded. but if I do resize the window the map is fixed, how can this be "fixed" without resizing the window?

fyi: I'm using bootstrap 4 flex columns

Edit: I could fix it with this guys help https://github.com/Asymmetrik/ngx-leaflet/issues/104#issuecomment-349086565

[reblace]

That weird broken map issue is almost always either missing Leaflet CSS or that you need to call invalidateSize because something you're doing is causing the DIV the map's on to change size.

When the DIV containing the map is resized, you have to call invalidateSize. This is inherent to leaflet itself, and has been the subject of many issues on their repo.

The ngx-leaflet plugin listens to window resize events and calls invalidateSize for you. This handles probably 95%+ of the cases in which the map changes size. The only other way the DIV elements can change is through some kind of page manipulation that is happening through JavaScript. Since the issue is fixed when you resize the window, it's most likely that your problem is that you need to call invalidateSize and not missing CSS files. You just need to figure out what's causing the page to change size and then add the invalidateSize call.

Common examples of JavaScript size manipulation:

• Showing/hiding elements on the page using [hide]='...' input binding
• Using JavaScript to change the height/width of elements dynamically (e.g. calculating and setting DOM elements height/width directly
• Modifying Bootstrap grid classes (e.g., col-1, col-md-5, etc) using JavaScript or Angular bindings
• Modifying CSS styles using angular bindings

If you're doing any of these things, you either need to manually call invalidateSize after the the change. You can also add some custom code that just tracks the size of your map div and calls it when it detects changes.

In my projects, this often happens when we use [hide] instead of *ngIf and when we use things like ngx-bootstrap tabs (which dynamically shows and hides page content).

[kylecordes]

@reblace Is there any more general solution possible? In a complex angular application all of the above could certainly change for many reasons, many of those reasons inside of other libraries even. How about a setting in ngx-leaflet to perform the workaround mentioned above, tracking the size and calling this method automatically?

[zhen1991]

Hi! I am having the same problem in polymer2 the leaflet map doesnt show properly??can any one know how to fix it??i dont have any error only it give me the style error! could not find style data in module named shared-styles!!!! thnx for helping!!

[stefanfitzi]

I tried out ngx-leaflet with a Angular CLI project and ended up having the same problem. @reblace 's hint "That weird broken map issue is almost always either missing Leaflet CSS" was the key: in the "styles" section of angular.json I had to add the line: "node_modules/leaflet/dist/leaflet.css"

[leogilardi6]

Maybe you can an *ngIf="show"directive and after the view init, set it on true. That worked for me. I guess the problem is when the map is loaded, so if you wait until the component is fully loaded, it'll work properly.

[jonnathanlopes]

The solution to this problem is simple, just insert in the index.html the following codes:

[BSSB33]

Check if your leaflet.css file is correctly added to the angular.json! I added leaflet.scss and that caused the problem.