Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.
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": [] }
{ "name": "visual", "dependencies": { "d3": "^3.5.5", "geojson": "^0.5.0", "leaflet": "^1.2.0", "powerbi-visuals-utils-dataviewutils": "1.2.0" } }
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: '© ' + mapLink + ' Contributors', maxZoom: 18, }); this.map.addLayer(this.layer); }
Solved! Go to Solution.
Glad to hear that. You may help accept the solution above. Your contribution is highly appreciated.
Glad to hear that. You may help accept the solution above. Your contribution is highly appreciated.
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
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.
Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City
Check out the April 2024 Power BI update to learn about new features.
User | Count |
---|---|
13 | |
2 | |
2 | |
1 | |
1 |