Fail to render some layers while using MapLibre whithin a PowerBI custom visual

[ConnectedWanderer]

Hello,

I am trying to create a custom PowerBI map visual based on MapLibre and I fail to load the world map using the quickstart example from the docs. I only get a blue background.

I tried various examples from the documentation and I notice that I can render markers or raster basemaps but I cannot render any 3D element like the 3D Terrain example. I only get the OSM basemap in such case.

I don't have any console error visible in the console and if I replace MapLibre GL by Mapbox GL, the layers are correctly shown. Does anyone succeeded to use MapLibre within a PowerBI visual ? How this difference with MapBox GL could be explained ?

maplibre-gl-js version: 4.7.1

browser: Chrome

Steps to Trigger Behavior

1. Initialize a PowerBI custom visual project using pbiviz start
2. Add the quickstart example in the main visual.ts file

export class Visual implements IVisual {
  private target: HTMLElement;

  constructor(options: VisualConstructorOptions) {
    console.log("Visual constructor", options);
    this.target = options.element;

    const mapDiv = document.createElement("div");
    mapDiv.id = "map";
    mapDiv.className = "map";
    this.target.appendChild(mapDiv);

    const map = new maplibregl.Map({
      container: "map",
      style: "https://demotiles.maplibre.org/style.json",
      center: [0, 0],
      zoom: 1,
    });
  }

  public update(options: VisualUpdateOptions) {
    console.log("Update dataview : ", options.dataViews[0]);
  }
}

Expected Behavior

Layers defined in "https://demotiles.maplibre.org/style.json" should be shown

Actual Behavior

Layers are not shown correctly.

[HarelM]

I'm not familiar with powerBI, so I guess you'll need to debug this and see what's wrong inside it. As you can see from the docs it's very simple to show a map, even inside an iFrame.

[HarelM]

Make sure you include the maplibre css and that the map has width and height.

[ConnectedWanderer]

I configured the height/width and imported the CSS file in the .less file of my project.

@import (less) "./node_modules/maplibre-gl/dist/maplibre-gl.css";

.map {
    width: 100%;
    height: 600px;
}

If I look at the network panel of the Chrome debugguer, I see that the style from https://demotiles.maplibre.org/style.json is fetched correctly but the vector tiles are never called.

[HarelM]

No clue as to what might not be configured correctly, sorry...