How to remove white frame or borders into the canvas after render

[PterPmnta]

mapbox-gl-js version:

2.10.0

Question

I'm working on a project with Angular 10, and I have been work with Mapbox to show a path routes. As is normal in Angular splits the different parts of the application in components, so I decided to split the component that go to render the map in other, and call into the principal map component. But, I have been getting an issue about the white borders or frames on top and bottom inside any container I had put the map.

new-map.component.ts

<details>
  <summary class="bg-light text-dark">
    <nav class="navbar navbar-light
                bg-light fs-3 justify-content-end"
                (click)="changeMapArrow()">
      <span class="material-icons">
        <b>{{arrowClass}}</b>
      </span>
    </nav>
  </summary>
  <app-mini-map></app-mini-map>
</details>

mini-map.component.ts

<div class="row d-flex flex-column">
  <div class="col-12">
    <div class="row">

      <div class="col-6 ml-0">
        <b>Needs to know:</b>
        <span class="text-primary ml-3">
          <b>4
            <span class="material-icons check-icon-position mr-1">
              check_circle_outline
            </span>
          </b>
        </span>
        |
        <span class="text-danger ml-2">
          <b>2 ETA Delay</b>
        </span>

      </div>

      <div class="col-6 d-flex flex-row justify-content-end align-items-start">

        <p class="text-muted">Style map:</p>

        <input type="radio" class="btn-check ml-3" name="options" id="option1" autocomplete="off" checked>
        <label class="btn btn-light ml-3 btn-style-position text-muted"
                for="option1" (click)="setMapStyle('gray', 'to_gray')">
                <b>Gray</b>
        </label>

        <input type="radio" class="btn-check ml-3" name="options" id="option2" autocomplete="off">
        <label class="btn btn-light ml-3 btn-style-position text-muted"
                for="option2" (click)="setMapStyle('dark', 'to_dark')">
                <b>Dark</b>
        </label>

        <input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
        <label class="btn btn-light ml-3 btn-style-position text-muted"
                for="option4" (click)="setMapStyle('color', 'to_color')">
                <b>Color</b>
        </label>
      </div>

    </div>
  </div>

  <div id="map-container" class="col-12">
    <div #miniMapa class="border-rnd-map mini-mapa-test"></div>
    <ul class="list-group" [style.display]="!cardinalPointsMenu ? 'none' : 'block'" >
      <ng-container *ngFor="let point of pointsToFitBound">
        <li class="list-group-item"
            (click)="moveToFitArea(point.fitPoint)"
            *ngIf="point.ableToShow">
          {{point.cardinalPoint}}
        </li>
      </ng-container>
    </ul>
  </div>
</div>

#map-container
  width: 100%
  height: 200px
  margin: 0 auto

.mini-mapa-test
  width: 100%
  height: 500px
  margin: 0 auto

I had tried multiples HTML element container different to the div, and still happening the same error. These errors don't appear, when I use a single div into the father component, and just in that way works.

Links to related documentation

[avpeery]

@PterPmnta Thanks for using Mapbox! In order for the maintainers to best address your issue, it would greatly help us if you could provide a minimal code reproduction through jsbin or codepen.

In the meantime, one thing to try if you haven't already is calling map.resize() when the map loads like so:

map.on('load', () => {
    map.resize();
});

[PterPmnta]

@avpeery Thanks for your answer, let me do a codepen example and I share.

[PterPmnta]

@avpeery Sorry, is not possible to my make an MVP, I don't know why the slackblitz just block to me.

[avpeery]

@PterPmnta Ok - Did you try call map.resize() on a map load event? Like so:

map.on('load', () => {
    map.resize();
});

[PterPmnta]

@avpeery Yes, I did it, but I had been testing many things, and figure out, today after test the default style and switch to custom map, that the issue came from the Mapbox studio. At least to me, don't work correctly any map that I was customized and config settings.

loadMap(mapStyle: string) {
    this.mapa = new mapboxgl.Map({
      container: this.divmapa.nativeElement,
      style: mapStyle,
      zoom: 1.4,
      minZoom: 1
    });

    this.mapa.on("load", () => {
      this.mapa.resize();
    })

    this.mapa.dragRotate.disable();
    this.mapa.touchZoomRotate.disableRotation();
  }

Even I just created a new issue, could you check, please?

Custom map don't fit

[karimnaaji]

I'll close this ticket as duplicate of https://github.com/mapbox/mapbox-gl-js/issues/12391. There is something to investigate regarding alternate projections which can lead to this extra space, in that case with the 'Equirectangular' projection.