Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Earn a 50% discount on the DP-600 certification exam by completing the Fabric 30 Days to Learn It challenge.

Reply
gattoun1
New Member

Creating Map Custom Visual with GeoJSON Data

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!

 

3 REPLIES 3
v-viig
Community Champion
Community Champion

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

image.png

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

 
/*
 *  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
Community Champion
Community Champion

Can you share the whole source code?

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Helpful resources

Announcements
RTI Forums Carousel3

New forum boards available in Real-Time Intelligence.

Ask questions in Eventhouse and KQL, Eventstream, and Reflex.

LearnSurvey

Fabric certifications survey

Certification feedback opportunity for the community.

Top Kudoed Authors