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.
exportclassVisualimplementsIVisual {
privatetarget:HTMLElement;
privateupdateCount:number;
privatesettings:VisualSettings;
privatetextNode:Text;
//for map
privatedivMap:HTMLElement;
//private divMap: d3.Selection<HTMLElement>;
//leaflet
privatemap:L.Map;
privatebasemap:L.TileLayer;
privatelayer: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);
varL=typeofL!=='undefined'?L:window['L'];
//initialize leaflet with open street map
this.map=L.map('map');
this.map.setView([46.4446340208, 11.5901951225], 5);
this.layer=L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution:'© '+mapLink+' Contributors', maxZoom:18, });
this.map.addLayer(this.layer);
}
publicupdate(options:VisualUpdateOptions) {
this.settings=Visual.parseSettings(options&&options.dataViews&&options.dataViews[0]);
console.log('Visual update', options);
if (typeofthis.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"
]
}