Power Bi - Leaflet tiles not showing properly

[Punya]

I am having issues with displaying leaflet tiles in power bi custom visuals. I mainly followed the example from

https://community.powerbi.com/t5/Developer/Power-BI-Cannot-set-height/td-p/140854 

I am able to display the map. However, the map zoom and tiles does not seem to be rendering correctly. I appreciate if somebody could help me figure out what's going on with the map.

Map rendering

Visuals.ts

part of the code.

export class Visual implements IVisual {

private target: HTMLElement;

private updateCount: number;

private settings: VisualSettings;

private textNode: Text;

//for map

private divMap: HTMLElement;

//private divMap: d3.Selection<HTMLElement>;

//leaflet

private map: L.Map;

private basemap: L.TileLayer;

private layer: L.TileLayer;

constructor(options: VisualConstructorOptions) {

console.log('Visual constructor', options);

this.target = options.element;

this.updateCount = 0;

this.divMap = document.createElement("div");

this.divMap.id = "map";

options.element.appendChild(this.divMap);

var L = typeof L !== 'undefined' ? L : window['L'];

//initialize leaflet with open street map

this.map = L.map('map');

this.map.setView([46.4446340208, 11.5901951225], 5);

var mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';

this.layer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; ' + mapLink + ' Contributors', maxZoom: 18, });

this.map.addLayer(this.layer);

}

public update(options: VisualUpdateOptions) {

this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);

console.log('Visual update', options);

if (typeof this.textNode !== "undefined") {

this.textNode.textContent = (this.updateCount++).toString();

}

//update map size

this.divMap.style.height = options.viewport.height.toString() + "px";

this.divMap.style.width = options.viewport.width.toString() + "px";

}

Package.json

{

"name": "visual",

"version": "1.1",

"dependencies": {

"@types/d3": "^3.5.40",

"d3": "^3.5.17",

"geojson": "^0.5.0",

"leaflet": "^1.3.1",

"powerbi-visuals-utils-dataviewutils": "1.2.0"

},

"devDependencies": {

"typescript": "^2.6.2"

}

}

tsconfig.json

{

"compilerOptions": {

"allowJs": true,

"emitDecoratorMetadata": true,

"experimentalDecorators": true,

"target": "ES5",

"sourceMap": true,

"out": "./.tmp/build/visual.js",

"baseUrl": "types",

"typeRoots": ["./node_modules/@types"]

},

"files": [

".api/v1.10.0/PowerBI-visuals.d.ts",

"node_modules/powerbi-visuals-utils-dataviewutils/lib/index.d.ts",

"src/settings.ts",

"src/visual.ts",

"node_modules/@types/d3/index.d.ts",

"typings/index.d.ts"

]

}

[v-viig · Accepted solution]

Please include leaflet's CSS into your custom visual by adding the import to style.less:

@import (less) "node_modules/leaflet/dist/leaflet.css";

Please also note you should specify width and height explicitly for #map div element (you might use 100% size).

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[v-chuncz-msft]

@Punya,

You may inspect the generated HTML in Web Console.

[v-viig]

Are you still facing issues with leaflet?

If so, please share the source code of your custom visual as a zip file for debugging.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[Punya]

Dear Ignat,

Thank you for your response.

Please find attached source code for your reference.

Download

Best regards,

Punya

[v-viig · Accepted solution]

Please include leaflet's CSS into your custom visual by adding the import to style.less:

@import (less) "node_modules/leaflet/dist/leaflet.css";

Please also note you should specify width and height explicitly for #map div element (you might use 100% size).

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[Punya · Accepted solution]

Thank you very much. It works.