I am having issues with displaying leaflet tiles in power bi custom visuals. I mainly followed the example from
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.
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);
this.layer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© ' + 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-chuncz-msftCommunity Support
Community Champion