Currently, I am working on creating a custom visual for Power BI that includes a leaflet map within a div element. However, the issue arises when I fail to set a specific height for the map, resulting in an empty visual. I have managed to set a fixed height like this:
this.mapDiv.style.height="300px";Despite this solution being functional, it is not ideal as I need the height to adjust dynamically based on the viewport. How can I achieve setting the height dynamically?
Below is an excerpt of my code:
private mapDiv: HTMLElement;
constructor(options: VisualConstructorOptions) {
this.mapDiv = document.createElement("div");
this.mapDiv.id = "mapid";
options.element.appendChild(this.mapDiv);
var map = L.map('mapid');
map.setView([48.14, 17.12], 13);
L.tileLayer('https:....', {
minZoom: 4,
maxZoom: 18,
}).addTo(map);
}
public update(options: VisualUpdateOptions) {
// this.mapDiv.style.height = "300px"; WORKS
this.mapDiv.style.height = options.viewport.height.toString(); // DOES NOT WORK !!!
}
If anyone could provide assistance or guidance on how to resolve this issue, it would be greatly appreciated. Thank you!