Leaflet map doesn't cover whole map area

Question

Update: I have put my answer. Please see it.

Original Question:

Can you tell me why leaflet map doesn't show on the full map area?

.html

<ion-content padding>
  <div style="height: 100%;width:100%" leaflet [leafletOptions]="options" *ngIf="options" [leafletCenter]="center">
  </div>
</ion-content>

.ts

  init(): void {
    this.options = {
      layers: [
        tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 18, attribution: "..." })
      ],
      zoom: 10,
      center: this.center = latLng(Number(this.activatedRoute.snapshot.paramMap.get("latitude")), Number(this.activatedRoute.snapshot.paramMap.get("longitude"))),
      attributionControl: false,
    };
  }

UI

Please see the image. It seems a problem with transform. Default it was 0,0,0. I have changed it manually on the browser like so. So how can I set it to the map?

Most probably https://stackoverflow.com/questions/36246815/data-toggle-tab-does-not-download-leaflet-map/36257493#36257493 — ghybs, Apr 10 '19 at 16:49
Possible duplicate of [Data-toggle tab does not download Leaflet map](https://stackoverflow.com/questions/36246815/data-toggle-tab-does-not-download-leaflet-map) — IvanSanchez, Apr 10 '19 at 21:57
@IvanSanchez It didn't work. This works for me: https://stackoverflow.com/a/55622789/1077309 — Sampath, Apr 10 '19 at 23:50

score 1 · Answer 1 · answered Apr 10 '19 at 17:56

I had the same issue in an ionic 4 project. Like suggested in comment with link I needed to use map.invalidateSize() when I rendered the map, as well as when adding/removing markers or any other action for that matter. This didn't help completely. I also had to manually trigger change detection after that. Here's a sample from our code:

this.map.setView([this.myLocation.latitude, this.myLocation.longitude], 13);
this.map.invalidateSize();
this.ref.detectChanges();

where ref refers to ChangeDetectorRef.

Also make sure that you have the the leaflet css imported in your angular.json file:

"styles": [
  // ....
  "./node_modules/leaflet/dist/leaflet.css"
]

score 0 · Answer 2 · answered Apr 10 '19 at 16:46

0

In my opinion the leaflet is filled 100% in its parents space, can you use the browsers inspect tool to see what is the parents width and height. You can also try using

position: absolute; left: 0;

to ignore parents width

answered Apr 10 '19 at 16:46

Shameer Mohammed

115
4

score 0 · Answer 3 · answered Apr 10 '19 at 17:09

Try removing the padding and changing height to 100vh

Try this:

<ion-content>
  <div style="height: 100vh; width:100%" leaflet [leafletOptions]="options" *ngIf="options" [leafletCenter]="center">
  </div>
</ion-content>

If you want to set the transform do it like so:

<ion-content padding>
  <div style="height: 100%; width:100%; transform: translate3D(250px, 200px, 100px)" leaflet [leafletOptions]="options" *ngIf="options" [leafletCenter]="center">
  </div>
</ion-content>

Sampath · Accepted Answer · 2019-04-10T23:53:52.803

0

Here I'm using this with Ionic 4 app. I have tried many solutions given by different devs. But none of them worked for me. The problem here is the life cycle event which I have used earlier. So now I use ionViewDidEnter() and no issues.

ionViewDidEnter() {
    this.center = latLng(Number(this.activatedRoute.snapshot.paramMap.get("latitude")), Number(this.activatedRoute.snapshot.paramMap.get("longitude")));
    this.options = {
      layers: [
        tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 18, attribution: "..." })
      ],
      zoom: 17,
      center: this.center,
      attributionControl: false,
    };

    this.layers.push(this.mapService.getMarker(this.center, "assets/icon/map/placeholder.png"));

  }

edited Apr 10 '19 at 23:53

answered Apr 10 '19 at 23:48

Sampath

63,341
64
307
441

To be exact what you do here is delaying the map initialization through assigning your `options` member later, which governs the `*ngIf` of the map container with its `leaflet` directive in your template. Should you invalidate the map size instead in this lifecycle hook, the result should be the same. – ghybs Apr 11 '19 at 01:22
@ghybs I have done that. But it didn't work for me. Maybe I have done it wrong. – Sampath Apr 11 '19 at 10:06

score 0 · Answer 5 · answered Jul 15 '19 at 20:22

I had the same problem, even with the import of leaflet.css and the "invalidateSize()" trick.

It was because I wrote in "myComponent.page.html":

<ion-content>
  <div id="map" style="height:400px; width: 100%;"></div>
</ion-content>

It seems Ionic4 css conflicts with leaflet. You need to get the <div> outside of <ion-content>.

Correct is just :

<div id="map" style="height:400px; width: 100%;"></div>

Hope this help someone

score 0 · Answer 6 · answered Jul 06 '21 at 11:29

map.invalidateSize() runs after window resize event.

So after height change, just write the code :

 window.dispatchEvent(new Event('resize'));
 this.map.invalidateSize();

It works like a charm in my case. Dont' forget to replace map with your map variable. My it helps someone

Leaflet map doesn't cover whole map area

6 Answers6

Linked

Related