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.

[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...

[HelloJowet]

I'm currently facing the same issue. No vector data sources are rendered, only raster. The load callback is never called. It seems like something goes wrong when trying to load the map. No error messages are appearing in the console.

When I replace maplibre with mapbox everything works well. Not sure what's the problem.

[HelloJowet]

I looked into it and found that all MapLibre versions up to 3.6.2 work fine with Power BI. But versions from 4.0.0 (including 4.0.0-pre.1) to the latest version (5.0.1) cause the above described error.

[Buthrakaur]

Is this really about Power BI? We're just trying to switch from Mapbox to Maplibre map component but keep using Mapbox vector tiles and we face similar issues - the map disappears but I'm sure it's about something in style layers. If we reduce the layers to some minimum the map starts to work but if we add all the layers specified by the original Mapbox style https://api.mapbox.com/styles/v1/mapbox/streets-v11?access_token=xxx the map fails to render. The issue you're describing (Mapbox component able to render the map but Maplibre not) sounds similar - like some map style layer incompatibility issue..

[stacy-rendall]

The issue seems to be that Power BI runs the iframe in sandbox mode - i.e. with sandbox="allow-scripts", a very basic test indicates that MapLibre will fail to load vector tile basemaps with this setting. Simply using a raster basemap as per: https://maplibre.org/maplibre-gl-js/docs/examples/map-tiles/ has fixed the issue for me.

[stacy-rendall]

However, I cannot seem to compel the map in iframe/sandbox (with raster basemap as noted above) to render a GeoJSON layer.