cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Moderator v-viig
Moderator

Re: Need help getting D3 charts on Leaflet map

Can you share the source code to debug it from our side?

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Pedzilla Member
Member

Re: Need help getting D3 charts on Leaflet map

tsconfig.json

 

{
  "compilerOptions": {
      "allowJs": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "target": "ES5",
      "sourceMap": true,
      "out": "./.tmp/build/visual.js"
  },
  "files": [
      ".api/v1.10.0/PowerBI-visuals.d.ts",
      "src/Clients/Typedefs/d3/d3.d.ts",
      "src/Clients/Typedefs/jquery/jquery.d.ts",
      "src/Clients/Typedefs/jquery-visible/jquery-visible.d.ts",
      "src/Clients/Typedefs/leaflet/leaflet.d.ts",
      "src/visual.ts"
  ]
}

 

pbiviz.json

{
  "visual": {
    "name": "customMap",
    "displayName": "Custom Map",
    "guid": "custommap5A89ADFB5F694F71AB6D00C94383BB2B",
    "visualClassName": "Visual",
    "version": "1.0.0",
    "description": "",
    "supportUrl": "",
    "gitHubUrl": ""
  },
  "apiVersion": "1.10.0",
  "author": {
    "name": "",
    "email": ""
  },
  "assets": {
    "icon": "assets/icon.png"
  },
  "externalJS": [
    "node_modules/powerbi-visuals-utils-dataviewutils/lib/index.js",
    "node_modules/d3/d3.min.js",
    "node_modules/fix.js",
    "node_modules/leaflet/dist/leaflet.js"
  ],
  "style": "style/visual.less",
  "capabilities": "capabilities.json",
  "dependencies": "dependencies.json",
  "stringResources": []
}

 

package.json

{
  "name": "visual",
  "version": "1.1",
  "dependencies": {
    "@types/d3": "^3.5.41",
    "d3": "^3.5.17",
    "geojson": "^0.5.0",
    "leaflet": "^1.3.1",
    "powerbi-visuals-utils-dataviewutils": "1.2.0"
  },
  "devDependencies": {
    "typescript": "^2.6.2"
  }
}

 

visual.less

@import (less) "node_modules/leaflet/dist/leaflet.css";

 

Thank you @v-viig

Moderator v-viig
Moderator

Re: Need help getting D3 charts on Leaflet map

Do you all of required files in src/Clients/Typedefs/ ?

 

It would be better if you could share source code as a zip file.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Pedzilla Member
Member

Re: Need help getting D3 charts on Leaflet map

https://github.com/nujcharee/PowerBI/blob/master/d3leaflet.zip

 

Hi there, hope this is what you are looking for? Thank you so much hope you can help me @v-viig

Moderator v-viig
Moderator

Re: Need help getting D3 charts on Leaflet map

Some files do not exist. This is why you face the errors.

 

image.png

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Pedzilla Member
Member

Re: Need help getting D3 charts on Leaflet map

It still doesnt work and maybe i didnt do something right. I undestand from the thread that you have provided the final fix to the other users I wonder if this custom visual can be shared please? I think I have tried and failed in building it and if there's solution out there already and is open source - I will be most grateful.

Many thanks

Pedzilla

jppp
Advisor

Re: Need help getting D3 charts on Leaflet map

Hi @Pedzilla,

 

You need to do several things to get the visual properly running. If I alter the following things I got the visual running like http://bl.ocks.org/d3noob/9267535:

 

pbiviz.json

  • I removed the "node_modules/fix.js", reference as it was causing errors

tsconfig.json

  • Remove all the Clients/Typedefs references as these files are not needed during run time

package.json - 'nice to have'

  •  Move "@types/d3": "^3.5.41", to the devDependencies part as typings (Intelligence) are only needed during development.

Last step: open a command prompt and navigate to the base directory of the visual and enter npm install --save-dev @types/leaflet to install the typings files to correct the errors: Cannot find namespace 'L'.

Pedzilla Member
Member

Re: Need help getting D3 charts on Leaflet map

Hi there

@jppp I followed that and I finally had a visual! Many thanks for this much appreciated.

However, one last question from me I hope - how come my map is default to New Zealand? There must be somewhere in the data that I didnt remove before running pbiviz package command. Must be rookie mistake but hope you could help please?

 

Thank you

 

Ped

Helpful resources

Announcements
Community Highlights

Community Highlights

Find out what's new in the Power BI Community!

Summit North America

Power Platform Summit North America

Register by September 5 to save $200

Virtual Launch Event

Microsoft Business Applications Virtual Launch Event

Watch the event on demand for an in-depth look at the new innovations across Dynamics 365 and the Microsoft Power Platform.

MBAS Gallery

Watch Sessions On Demand!

Continue your learning in our online communities.

Top Kudoed Authors
Users Online
Currently online: 61 members 1,263 guests
Please welcome our newest community members: