Reply
avatar user
Anonymous
Not applicable

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 ?

1 ACCEPTED SOLUTION
v-viig
Community Champion
Community Champion

Hello @Anonymous,

 

Yes, I think so.

Have you faced any issues?

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

View solution in original post

5 REPLIES 5
v-viig
Community Champion
Community Champion

Hello @Anonymous,

 

Yes, I think so.

Have you faced any issues?

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

avatar user
Anonymous
Not applicable

@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.

v-viig
Community Champion
Community Champion

@Anonymous,

 

Can you share the code that you use to include leaflet to the visual?

avatar user
Anonymous
Not applicable

@v-viig

 

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.

v-viig
Community Champion
Community Champion

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

pbicvsupport@microsoft.com

avatar user

Helpful resources

Announcements
Las Vegas 2025

Join us at the Microsoft Fabric Community Conference

March 31 - April 2, 2025, in Las Vegas, Nevada. Use code MSCUST for a $150 discount!

Jan25PBI_Carousel

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.

Jan NL Carousel

Fabric Community Update - January 2025

Find out what's new and trending in the Fabric Community.

Top Solution Authors (Last Month)
Top Kudoed Authors (Last Month)