Forum Discussion

tmoeltner's avatar
tmoeltner
Frequent Visitor
8 years ago
Solved

Leaflet integration is not working (map is not shown)

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);
        }
 
 
 
 
Need Help
  • tmoeltner's avatar
    tmoeltner
    8 years ago
    Setting 
    var L = typeof L !== 'undefined' ? L : window['L'];
     
    in the construtor of solves the problem
  • v-chuncz-msft's avatar
    v-chuncz-msft
    8 years ago

    tmoeltner,

     

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

4 Replies

  • tmoeltner's avatar
    tmoeltner
    Frequent Visitor
    8 years ago
    Setting 
    var L = typeof L !== 'undefined' ? L : window['L'];
     
    in the construtor of solves the problem
    • v-chuncz-msft's avatar
      v-chuncz-msft
      Icon for Community Support rankCommunity Support
      8 years ago

      tmoeltner,

       

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

  • v-viig's avatar
    v-viig
    Icon for Community Champion rankCommunity Champion
    8 years ago

    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

    [email protected]

    • tmoeltner's avatar
      tmoeltner
      Frequent Visitor
      8 years ago

      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.