Creating Map Custom Visual with GeoJSON Data

[gattoun1]

I'm in the early stages of creating a Power BI custom map visual. At the moment, I'm just trying to get a blank U.S. map to display. I'm using GeoJSON data, which I've added to my package as follows:

• Saved the JSON into a JavaScript file and added var jsonData = {} around it.
• Added this JavaScript file to a geojson subfolder to my node_modules folder
• Added an additional ExternalJS reference to my manifest - "node_modules/geojson/us-states.js"

Now I'm starting to build the visual as follows:

module powerbi.extensibility.visual {
    "use strict";
    export class Visual implements IVisual {
        private host: IVisualHost;
        private svg: d3.Selection<SVGElement>;
        private div: d3.Selection<SVGElement>;
        private container: d3.Selection<SVGElement>;
        private json = JSON.parse((<any>window).jsonData);  

        constructor(options: VisualConstructorOptions) {

            this.svg = d3.select(options.element)
            .append('svg');
            this.container = this.svg.append("g")
                    .classed('container', true);
        }


        public update(options: VisualUpdateOptions) {
            let width: number = options.viewport.width; 
            let height: number = options.viewport.height;

            // D3 Projection
            var projection = d3.geo.albersUsa()
                   .translate([width/2, height/2])    // translate to center of screen
                   .scale(1000);          // scale things down so see entire US

// Define path generator
            var path = d3.geo.path()               // path generator that will convert GeoJSON to SVG paths
                .projection(projection);  // tell path generator to use albersUsa projection

//Create SVG element and append map to the SVG
            this.svg.attr({                width: width,                height: height
            });

            this.svg.selectAll("path")
                .data(this.json.features)
                .enter()
                .append("path")
                .attr("d", path)
                .style("stroke", "#fff")
                .style("stroke-width", "1")
        }
    }
}

The visual is blank. No errors in console. I had hoped to debug using this: https://microsoft.github.io/PowerBI-visuals/docs/how-to-guide/how-to-debug/ , but the code provided there produced numerous errors and I believe has been deprecated based on a comment on that page.

Thanks!

[v-viig]

We suggest to use "Pause on Caugh Exception" to understand what issue the code produces:

Chrome

• Open developer tools (F12)
• Go to the Sources tab
• Click the break on exceptions icon (stop sign with a pause symbol)
• Check the Pause On Caught Exceptions checkbox

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

[email protected]

[gattoun1]

/*
 *  Power BI Visual CLI
 *
 *  Copyright (c) Microsoft Corporation
 *  All rights reserved.
 *  MIT License
 *
 *  Permission is hereby granted, free of charge, to any person obtaining a copy
 *  of this software and associated documentation files (the ""Software""), to deal
 *  in the Software without restriction, including without limitation the rights
 *  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 *  copies of the Software, and to permit persons to whom the Software is
 *  furnished to do so, subject to the following conditions:
 *
 *  The above copyright notice and this permission notice shall be included in
 *  all copies or substantial portions of the Software.
 *
 *  THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 *  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 *  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 *  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 *  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 *  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 *  THE SOFTWARE.
 */


 
module powerbi.extensibility.visual {
    "use strict";
    export function logExceptions(): MethodDecorator {
        return function (target: Object, propertyKey: string, descriptor: TypedPropertyDescriptor<any>)
            : TypedPropertyDescriptor<any> {

            return {
                value: function () {
                    try {
                        return descriptor.value.apply(this, arguments);
                    } catch (e) {
                        console.error(e);
                        throw e;
                    }
                }
            }
        }
    }


    export class Visual implements IVisual {
        private host: IVisualHost;
        private svg: d3.Selection<SVGElement>;
        private div: d3.Selection<SVGElement>;
        private container: d3.Selection<SVGElement>;
        private json = JSON.parse((<any>window).jsonData);  

       
        constructor(options: VisualConstructorOptions) {

            this.svg = d3.select(options.element)
            .append('svg');
            this.container = this.svg.append("g")
                    .classed('container', true);
        }
        
        @logExceptions()
        public update(options: VisualUpdateOptions) {
            let width: number = options.viewport.width; 
            let height: number = options.viewport.height;
            console.log('Json:', this.json);
            debugger;

            // D3 Projection
            var projection = d3.geo.albersUsa()
				   .translate([width/2, height/2])    // translate to center of screen
				   .scale(1000);          // scale things down so see entire US
        
// Define path generator
            var path = d3.geo.path()               // path generator that will convert GeoJSON to SVG paths
		  	    .projection(projection);  // tell path generator to use albersUsa projection

//Create SVG element and append map to the SVG
            this.svg.attr({
                width: width,
                height: height
            });
        
            this.container.selectAll("path")
                .data(this.json.features)
                .enter()
                .append("path")
                .attr("d", path)
                .style("stroke", "#fff")
                .style("stroke-width", "1")
        }
    }   
}

I added some debugging functionality above. If I set the developer tools to pause on every exception, it pauses hundreds of times before the page is even loaded. If I don't pause on every exception, the only thing appearing in the console is this:

Uncaught TypeError: Cannot read property 'dataview' of undefined
    at <anonymous>:67:73
    at <anonymous>:94:15
    at <anonymous>:95:11
    at <anonymous>:96:7
    at Window.<anonymous> (<anonymous>:97:3)
    at <anonymous>:217:20
    at Object.i [as injectJsCode] (VM3514 visualhostcore.min.js:2)
    at r (VM3515 visualsandbox.min.js:1)
    at i.loadWithoutResourcePackage (VM3515 visualsandbox.min.js:1)
    at i.executeMessage (VM3515 visualsandbox.min.js:1)

[v-viig]

Can you share the whole source code?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

[email protected]