Problem Using Leaflet Map In powerbi plugin

[ipr20]

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 grammer:) English is not my primary language]

[ipr20]

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 grammer:) English is not my primary language]

[v-viig]

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