Hi,

I run the same topojson with the same data with D3 and with your plugin and the only difference I have is on the borders that are blurry.

In the plugin:

With D3:

Do you know what can cause this?

I tried the border with option but it is not that. It seems that the "state" border are rendered twice and that may cause it to be blurry.

Thanks,

Hey! Another quick one for you, are we able to use this package without having to make any external API calls? Ala fetch('https://unpkg.com/world-atlas/countries-50m.json').then((r) => r.json())

Or is my only solution to manually inline this JSON into my Javascript (in my case into a Vue component)?

Hi

Referencing https://github.com/sgratzl/chartjs-chart-geo/issues/61 and https://github.com/sgratzl/chartjs-chart-geo/blob/17132af15391fe3e7f2454ac49d8743b5a25abdc/samples/albersLegend.html#L44-L49

We want to hide the map scale completely. However the options to hide the scale do not work.

Version 3.8.1 Angular 14.0.5

Our current map. Showing the area in red that we expect to hide:

Chart Options: { scales: { xy: { projection: 'equalEarth', }, color: { display: false, }, }, plugins: { legend: { display: false, }, tooltip: { enabled: true, }, }, };

Thanks!

Good afternoon! Could you provide advice on the capabilities of your choropleth chart for displaying maps.

1. Is it possible to customize the format of the popup hint text? For example:

• is it possible to change the order of the information in it - first the value, and then the name of the region;
• is it possible to print part of the text in bold.

2. Is it possible to specify the boundaries of the intervals on the basis of which the map is colored? Or is the formation of interval boundaries embedded in the algorithm and is not subject to configuration by an application programmer?
3. Is it possible to display the capitals of the regions in the form of small round markers? We attach an example of a map for understanding.
4. Is it possible to export the map to png and pdf formats? We are grateful in advance for the answers.

I'm getting:

WebpackError at /search/
            ModuleParseError in 
            Module parse failed: Unexpected token (6093:36)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 	        }
| 	        if (this.showOutline()) {
> 	            this.getMeta().dataset?.draw(chart.ctx);
| 	        }
| 	        if (clipMap === true || clipMap === 'graticule' || clipMap === 'outline+graticule') {

Context I am running webpack 4.44.2 with:

    "babel-cli": "^6.5.0",
    "babel-core": "^6.5.0",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.5.0",
    "babel-polyfill": "^6.5.0",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-1": "^6.5.0",
    "babel-preset-stage-2": "^6.5.0",
    "babel-runtime": "^6.5.0",

I figure that babel is outdated. But it's a legacy app and I had trouble upgrading babel to 7 and babel-loader 8. So, I reverted those. Is it possible to fix this error without upgrading babel and the loader?

Also, it would be helpful if it's possible to throw an example how to integrate this plugin in webpack? I couldn't find that in the examples in this repo.

Thanks!

I'm having a problem with the colorscale. The colorscale doesn't show. I used it like this:

const chart = new Chart(document.getElementById("map").getContext("2d"), {
        type: 'choropleth',
        data: {
          labels: distritosPT.map((d) => d.properties.name),
          datasets: [{
            label: 'Distritos',
            outline: distritos2,
            backgroundColor: (context) => {
              if (context.dataIndex == null) {
                return null;
              }

              const value = context.dataset.data[context.dataIndex];
              return new Color('#78C2AD').blackness(value.value * 100).rgbString();
            },
              //data: distritos2.map((d) => ({feature: d, value: dict[d.properties.name]})),
              data: distritosPT.map((d) => ({feature: d, value: orgValues(d.properties.name)})),
          }]
        },
        options: {
          showOutline: true,
          legend: {
            display: false
          },
          scale: {
            projection: 'mercator'
          },
          **geo: {
            colorScale: {
              display: true,
              position: 'top',
              quantize: 10,
              legend: {
                position: 'top-right',
              },
            },
          },**
          tooltips: {
            callbacks: {
                afterLabel: function(tooltipItem, data) {
                  var distrito = data['labels'][tooltipItem['index']];
                  return "Union Organizations: " + dict[distrito];
                }
            }
          }
        }
      });

Hope you can help me.

Thank you.

When I use this library in the Next.js for bubbleMap, there is building issue. Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/.../[project]/node_modules/d3-geo/src/index.js require() of ES modules is not supported. require() of /Users/.../[project]/node_modules/d3-geo/src/index.js from /Users/.../[project]/node_modules/chartjs-chart-geo/build/index.cjs is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/.../[project]/node_modules/d3-geo/package.json.

Hi,

I spent many hours trying to create a projection that works out of the one you provided.

I wanted to use: https://github.com/seeschloss/francedom but I think it was made for an old version of D3.

So I found this one that can serve as a example: https://github.com/rveciana/d3-composite-projections

If I use this package, set the projection to geoAlbersUSA in your sample, I can't get it work. It claims that "fitwidth" is not a function.

I hope you can help me to use your plug-in. Thanks,

In typescript, when I'm trying to set the styling, I have this issue:

**Object literal may only specify known properties, and 'geoFeature' does not exist in type '_DeepPartialObject<ElementOptionsByType<"choropleth">>'. The expected type comes from property 'elements' which is declared here on type '_DeepPartialObject<CoreChartOptions<"choropleth"> & ElementChartOptions<"choropleth"> & PluginChartOptions<"choropleth"> & DatasetChartOptions<...> & ScaleChartOptions<...> & IGeoChartOptions>' **

There is no issue in the sample codePen if I add elements:{ geoFeature: { borderColor: "#686868", //backgroundColor: "#00FF00" }, },

Any Idea why typescript is complaining?

Thanks for your help

Is it possible to use the following plugin with this library

https://github.com/chartjs/chartjs-plugin-zoom

I managed to create a map but when I try and use the plugin to add zoom to my map, it doesn't work

See codepen here https://codepen.io/damienderoiste/pen/ZEOzjKO

Hi, It seems that it will not be possible to have choropleth and bubbles at the same time as both are represented by its own chart type, right? Is there something I'm missing? Is this something you plan to add for the future? Many thanks!

Bumps json5 from 1.0.1 to 1.0.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

The README.md (presumably the documentation for this project) lacks essential information for the usage of this software.

The options are not defined. Instead, you have a link to the source code. However, the link is not a permalink tied to a specific commit. In any case, reading the source to try to understand how to use it is not enjoyable. This is also the case for styling and almost everything else.

https://github.com/sgratzl/chartjs-chart-geo/blob/3d92cd17afaeec887d05bf9ccf677a2e0bdab607/src/controllers/GeoController.ts#L225-L230

Except for {type: "sphere"}, what other options can be passed? Type any[] does not particularly help me understand.

Well-formed documentation would be most welcome.