- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Does PBI Custom visuals support tiles maps ?
I'm currently working with leaflet. I try to display a tiles map using this library. Is it possible ?
Solved! Go to Solution.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hello @Anonymous,
Yes, I think so.
Have you faced any issues?
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hello @Anonymous,
Yes, I think so.
Have you faced any issues?
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@v-viig Its working, But if I embed the code with into the option.element with innerHTML.
But when I try to make it with the method update() it doesn't work.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@Anonymous,
Can you share the code that you use to include leaflet to the visual?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
module powerbi.extensibility.visual { /** * Function that converts queried data into a view model that will be used by the visual * * @function * @param {VisualUpdateOptions} options - Contains references to the size of the container * and the dataView which contains all the data * the visual had queried. * @param {IVisualHost} host - Contains references to the host which contains services */ export class BarChart implements IVisual { private div: d3.Selection<SVGElement>; private host: IVisualHost; private barChartContainer: d3.Selection<SVGElement>; private barContainer: d3.Selection<SVGElement>; private bars: d3.Selection<SVGElement>; private target: HTMLElement; private g: d3.Selection<SVGAElement>; private object:any; private css: d3.Selection<SVGAElement>; private script: d3.Selection<SVGAElement>; static Config = { xScalePadding: 0.1, }; /** * Creates instance of BarChart. This method is only called once. * * @constructor * @param {VisualConstructorOptions} options - Contains references to the element that will * contain the visual and a reference to the host * which contains services. */ constructor(options: VisualConstructorOptions) { this.host = options.host; this.target = options.element; /* this.script = d3.select(options.element) .append('script'); */ /* this.css = d3.select(options.element) .append('link'); */ /* this.div = d3.select(options.element) .append('div').attr("id","zakaria"); */ let css = document.createElement("link"); css.rel = "stylesheet"; css.href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"; this.target.appendChild(css); let mapDiv = document.createElement('div'); mapDiv.id = 'zakaria'; mapDiv.style.height = "100%"; options.element.appendChild(mapDiv); let js = document.createElement("script"); js.innerHTML= "var map = L.map('zakaria').setView([42.35,-71.08],13);"; this.target.appendChild(js); js = document.createElement("script"); js.innerHTML= "L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);"; this.target.appendChild(js); js = document.createElement("script"); js.src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"; this.target.appendChild(js); } /** * Updates the state of the visual. Every sequential databinding and resize will call update. * * @function * @param {VisualUpdateOptions} options - Contains references to the size of the container * and the dataView which contains all the data * the visual had queried. */ public update(options: VisualUpdateOptions) { // let viewModel: BarChartViewModel = visualTransform(options, this.host); let width = options.viewport.width; let height = options.viewport.height; // this.script.attr("src","https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"); // this.css.attr({rel:"stylesheet",href: "https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"}); // this.div.attr({width: width, height : height}); } /** * Destroy runs when the visual is removed. Any cleanup that the visual needs to * do should be done here. * * @function */ public destroy(): void { //Perform any cleanup tasks here } } }
But since I want to do some manipulations, like defining polygons & use my DataView, I want to access the variables, and methods to have flexibility on the code, which is not the case while appending on innerHTML.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I suppose that you are able to access Leaflet by using this code:
const L = window['L'] || window.window['L'];
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
Helpful resources
Join us at the Microsoft Fabric Community Conference
March 31 - April 2, 2025, in Las Vegas, Nevada. Use code MSCUST for a $150 discount!
Power BI Monthly Update - January 2025
Check out the January 2025 Power BI update to learn about new features in Reporting, Modeling, and Data Connectivity.
Subject | Author | Posted | |
---|---|---|---|
10-12-2024 05:08 AM | |||
08-08-2024 08:40 AM | |||
04-25-2024 08:45 AM | |||
05-03-2024 10:54 AM | |||
06-11-2024 08:45 PM |
User | Count |
---|---|
6 | |
1 | |
1 | |
1 | |
1 |
User | Count |
---|---|
10 | |
2 | |
2 | |
2 | |
2 |