cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
ipr20 Frequent Visitor
Frequent Visitor

Problem Using Leaflet Map In powerbi plugin

I have a problem in using leaflet in powerbi plugin: in the constructor, I can Show the map,mark a location on it and every thing is ok:

 export class Visual implements IVisual {
    private target: HTMLElement;
   private dataView: DataView;
    private map: L.Map;
    private basemap: L.TileLayer;
    private markerLayer: L.LayerGroup<L.CircleMarker>;
constructor(options: VisualConstructorOptions) {        console.log('constructor called');
        this.target.innerHTML='<div id="map" style="height:100vh;width:100vw;"></div>';
        this.basemap = L.tileLayer('http://localhost/mapfiles/{z}/{x}/{y}.png',{    maxZoom: 17,minZoom:10  });

        this.map = L.map('map', {            center: new L.LatLng(35.658, 51.403),            zoom: 12,            maxZoom: 18,            minZoom: 12
        });

        this.map.addLayer(this.basemap);
    }

but! in public update,when (for Ex.)I want to mark another location, this.map is Undefined! and also Click event returns errors about "function not found" or "MouseEvent" is not declared.. I think the exact problem is after I add the layer to the map, Leaflet loses the map and cant find it again for editing! what can I do? is this a conflict between TS and JS?

[sorry for my grammerSmiley Happy English is not my primary language]

2 REPLIES 2
Highlighted
ipr20 Frequent Visitor
Frequent Visitor

Problem Using Leaflet Map In powerbi plugin

I have a problem in using leaflet in powerbi plugin: in the constructor, I can Show the map,mark a location on it and every thing is ok:

 export class Visual implements IVisual {
    private target: HTMLElement;
   private dataView: DataView;
    private map: L.Map;
    private basemap: L.TileLayer;
    private markerLayer: L.LayerGroup<L.CircleMarker>;
constructor(options: VisualConstructorOptions) {        console.log('constructor called');
        this.target.innerHTML='<div id="map" style="height:100vh;width:100vw;"></div>';
        this.basemap = L.tileLayer('http://localhost/mapfiles/{z}/{x}/{y}.png',{    maxZoom: 17,minZoom:10  });

        this.map = L.map('map', {            center: new L.LatLng(35.658, 51.403),            zoom: 12,            maxZoom: 18,            minZoom: 12
        });

        this.map.addLayer(this.basemap);
    }

but! in public update,when (for Ex.)I want to mark another location, this.map is Undefined! and also Click event returns errors about "function not found" or "MouseEvent" is not declared.. I think the exact problem is after I add the layer to the map, Leaflet loses the map and cant find it again for editing! what can I do? is this a conflict between TS and JS?

[sorry for my poor grammerSmiley Happy English is not my primary language]

Moderator v-viig
Moderator

Re: Problem Using Leaflet Map In powerbi plugin

It looks like there is a JS exception that.

 

We recommend to put debugger statement into constructor to debug visual step by step.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Helpful resources

Announcements
Virtual Launch Event

Microsoft Business Applications October Virtual Launch Event

Join us for an in-depth look at the new innovations across Dynamics 365 and the Microsoft Power Platform.

Power BI Helps Homeless and Trouble Youth

Power BI Helps Homeless and Trouble Youth

We spoke with Power BI Super User, Greg Deckler, about his charity work

MBAS Gallery

Watch Sessions On Demand!

Continue your learning in our online communities.

Users Online
Currently online: 236 members 2,922 guests
Please welcome our newest community members: