Required steps missing

[srfrnk]

To make it work I had to:

1) Run npm install -S d3-hexbin 2) Add to .../src/app/app.module.ts

• import { LeafletD3Module } from '@asymmetrik/ngx-leaflet-d3';

• imports: [
  ...
  LeafletD3Module.forRoot(),
  ... 
  ],

Also this still fails to compile:

hexbinOptions: L.HexbinLayerOptions = { radius: 12, radiusRange: [4, 11], colorRange: ['black', 'red'] };

With:

ERROR in src/app/map/map.component.ts(28,20): error TS2694: Namespace '".../node_modules/@types/leaflet/index"' has no exported member 'HexbinLayerOptions'.

And only the following compiles:

hexbinOptions = { radius: 12, radiusRange: [4, 11], colorRange: ['black', 'red'] };

[reblace]

I think the issue is that the typings for leaflet-d3 aren't being correctly imported/interpreted. You can see how it's complaining that HexbinLayerOptions doesn't exist on leaflet's typings, which is actually correct.

I released a new version of this plugin that works with Angular13 and a newer version of the leaflet-d3 plugin. Check it out and see if that helps.

Also renamed the options to HexbinLayerConfig. You can see it in use in the demo, so you could see how that is set up to see how it compares to yours.