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
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
GregDeckler

How to Get Your Question Answered Quickly

Power BI Super User, Greg Deckler, explains

Summit North America

Power Platform Summit North America

Register by September 5 to save $200

Back to School Contest

Back to School Contest

Engage and empower students with Power BI!

MBAS Gallery

Watch Sessions On Demand!

Continue your learning in our online communities.

Top Ideas
Top Kudoed Authors
Users Online
Currently online: 44 members 1,054 guests
Please welcome our newest community members: