Does PBI Custom visuals support tiles maps ?

Anonymous — Tue, 13 Jun 2017 12:11:44 GMT

I'm currently working with leaflet. I try to display a tiles map using this library. Is it possible ?

Re: Does PBI Custom visuals support tiles maps ?

v-viig — Tue, 13 Jun 2017 12:51:47 GMT

Hello Anonymous,

Yes, I think so.

Have you faced any issues?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Re: Does PBI Custom visuals support tiles maps ?

Anonymous — Tue, 13 Jun 2017 13:19:18 GMT

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.

Re: Does PBI Custom visuals support tiles maps ?

v-viig — Tue, 13 Jun 2017 13:23:42 GMT

Anonymous,

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

Re: Does PBI Custom visuals support tiles maps ?

Anonymous — Tue, 13 Jun 2017 14:02:13 GMT

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.

Re: Does PBI Custom visuals support tiles maps ?

v-viig — Thu, 15 Jun 2017 15:24:50 GMT

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

topic Re: Does PBI Custom visuals support tiles maps ? in Developer

Does PBI Custom visuals support tiles maps ?

Re: Does PBI Custom visuals support tiles maps ?

Re: Does PBI Custom visuals support tiles maps ?

Re: Does PBI Custom visuals support tiles maps ?

Re: Does PBI Custom visuals support tiles maps ?

Re: Does PBI Custom visuals support tiles maps ?