Leaflet integration is not working (map is not shown)

[tmoeltner]

Hi, 

I have created a PBI custom visual with leaflet and geojson libraries. I used following npm and typings commands to install the frameworks

npm install leaflet
npm install geojson

typings install --save --global dt~leaflet
typings install --save --global dt~geojson

I'm able to compile the custom visualization, but the map is not shown when I add a custom visual in a report.

Any help is appreciated.

pbiviz.json

{
  "visual": {
    "name": "productionmap",
    "displayName": "productionmap",
    "guid": "productionmapB6B07A39210040708E7923ED14C12F7E",
    "visualClassName": "Visual",
    "version": "1.0.0",
    "description": "",
    "supportUrl": "",
    "gitHubUrl": ""
  },
  "apiVersion": "1.9.0",
  "author": {
    "name": "",
    "email": ""
  },
  "assets": {
    "icon": "assets/icon.png"
  },
  "externalJS": [
    "node_modules/powerbi-visuals-utils-dataviewutils/lib/index.js",
    "node_modules/d3/d3.min.js",
    "node_modules/geojson/geojson.min.js",
    "node_modules/leaflet/dist/Leaflet.js"
  ],
  "style": "style/visual.less",
  "capabilities": "capabilities.json",
  "dependencies": "dependencies.json",
  "stringResources": []
}

package.json

{
  "name": "visual",
  "dependencies": {
    "d3": "^3.5.5",
    "geojson": "^0.5.0",
    "leaflet": "^1.2.0",
    "powerbi-visuals-utils-dataviewutils": "1.2.0"
  }
}

and the constructor in visual.ts is

        constructor(options: VisualConstructorOptions) {
            console.log('Visual constructor', options);
            this.target = options.element;

            this.divMap = d3.select(options.element).append('div');
            this.divMap.attr('id', 'map');

            this.divMap.style('height', "200px");
            this.divMap.style('width', "200px");

            
            //initialize leaflet with open street map
            this.map = L.map('map');
            this.map.setView([46.4446340208, 11.5901951225], 13);
            var mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
            this.layer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; ' + mapLink + ' Contributors', maxZoom: 18, });
            this.map.addLayer(this.layer);
        }

[tmoeltner · Accepted solution]

Setting 

var L = typeof L !== 'undefined' ? L : window['L'];

in the construtor of solves the problem

[tmoeltner · Accepted solution]

Setting 

var L = typeof L !== 'undefined' ? L : window['L'];

in the construtor of solves the problem

[v-chuncz-msft · Accepted solution]

@tmoeltner,

Glad to hear that. You may help accept the solution above. Your contribution is highly appreciated.

[v-viig]

Hello @tmoeltner

I suppose that you should apply the woraround from this topic.

Please let me know if that works for you. Othersize, please share the full source code as a zip to debug deeper.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[tmoeltner]

Hello Ignat,

many thank for your help, I will try your suggestion.

What I have see when I debugged my code with the chrome debugger and Power BI is that L.map is not defined.

this.map = L.map('map');

 I'm a programmer but this are my first attempts with Power BI custom controls. Maybe I miss to declare some references in some files.