Add more sample component(s) - HighCharts Map ( Angular/Typescript )

[narendrasinghrathore]

For general tech support, please see www.highcharts.com/support.
Please report only issues about highcharts-angular wrapper or content of this repository.
For general issues with Highcharts and TypeScript the correct repository to report such issues is main Highcharts repository.

Requested feature description

A clear and concise description of what you expected to happen.

Reason for this issue, It's very difficult to understand from docs how we can integrate with angular and also most of sample on highcharts are using JS not typscript.

Please add more sample components that have demonstration how we can use highcharts maps for world ( which is already there) but with country and country drilldown.

Would be happy to add sample components and create pull request with help hand from any team member(highcharts-angular).

Thanks
Narendra Singh

[mateuszkornecki]

@narendrasinghrathore Hi, thanks for contacting us with your request!

Here you can find a simple implementation of this demo in angular made by our user:
https://stackblitz.com/edit/angular-5vpazy?file=src%2Fapp%2Fapp.component.ts

source:
https://www.highcharts.com/forum/viewtopic.php?t=41527

You are right, highcharts-maps drilldowns could be tricky so we should definitely consider adding an official example to highcharts-angular docs in the future release!

[narendrasinghrathore]

@mateuszkornecki Thanks for sharing demo, it will really help in implementation as taking reference. Let me integrate same in our application. If face any issue, I will reach out again.

Still happy to contribute by creating sample demo(s) for multiple scenarios.
Please guide me a path how we can achieve that, it will helpful to community also.

Thanks again,

Narendra Singh Rathore

[narendrasinghrathore]

@mateuszkornecki I was able to setup and run successfully but I am concerned with build size as it's exceed default application build size that is 5MB. Even thought it exceeds but 28 MB is very huge.

So initially it will show US map and on click selected province map will be load.

Please suggest how I can load files in chunk.

√ Browser application bundle generation complete.     
√ Copying assets complete.
√ Index html generation complete.

Initial Chunk Files               | Names         |   
  Size
main.a1428f6a611c317aced3.js      | main          | 27.97 MB
polyfills.94daefd414b8355106ab.js | polyfills     | 35.98 kB
styles.3b36d58da5eae52fb9a5.css   | styles        |  9.99 kB
runtime.7b63b9fd40098a2e8207.js   | runtime       |  1.45 kB

                                  | Initial Total | 28.02 MB

Build at: 2021-03-19T05:37:33.181Z - Hash: 82bb7dd61ff45c982c8b - Time: 14323ms

Warning: budgets: initial exceeded maximum budget. Budget 2.00 MB was not met by 26.02 MB with a total of 28.02 MB.

[mateuszkornecki]

@narendrasinghrathore

@mateuszkornecki Thanks for sharing demo, it will really help in implementation as taking reference. Let me integrate same in our application. If face any issue, I will reach out again.

Still happy to contribute by creating sample demo(s) for multiple scenarios.
Please guide me a path how we can achieve that, it will helpful to community also.

Thanks again,

Narendra Singh Rathore

Highcharts-angular demo app contains just a few basic charts. More advanced charts we are adding to the wrappers docs as a link to stackblitz demo. I think that it is much easier to use them + it is easier for us to update them. So if you really want to help us with adding highcharts-map dropdown demo you can just send me a stackblitz demo and I will fork it and add to our docs.

@mateuszkornecki I was able to setup and run successfully but I am concerned with build size as it's exceed default application build size that is 5MB. Even thought it exceeds but 28 MB is very huge.

So initially it will show US map and on click selected province map will be load.

Please suggest how I can load files in chunk.

√ Browser application bundle generation complete.     
√ Copying assets complete.
√ Index html generation complete.

Initial Chunk Files               | Names         |   
  Size
main.a1428f6a611c317aced3.js      | main          | 27.97 MB
polyfills.94daefd414b8355106ab.js | polyfills     | 35.98 kB
styles.3b36d58da5eae52fb9a5.css   | styles        |  9.99 kB
runtime.7b63b9fd40098a2e8207.is js   | runtime       |  1.45 kB

                                  | Initial Total | 28.02 MB

Build at: 2021-03-19T05:37:33.181Z - Hash: 82bb7dd61ff45c982c8b - Time: 14323ms

Warning: budgets: initial exceeded maximum budget. Budget 2.00 MB was not met by 26.02 MB with a total of 28.02 MB.

Are you sure that the big bundle size is caused by the highcharts? I just built our demo app that uses both highcharts and highcharts-angular and its size is more than 5 times lower (around 5MB).

[narendrasinghrathore]

@mateuszkornecki copied all files from '@highcghats/map/collection/countries/us to locall asssets folder.

Added a method in service to load json on click, imported us geojson.

Doing all above, getting less bundle size:

Your global Angular CLI version (11.2.3) is greater than your local 
version (11.1.4). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".
√ Browser application bundle generation complete.
√ Copying assets complete.
√ Index html generation complete.

Initial Chunk Files               | Names         |      Size       
main.5cc40c38f973d6394206.js      | main          | 775.14 kB       
polyfills.94daefd414b8355106ab.js | polyfills     |  35.98 kB       
styles.3b36d58da5eae52fb9a5.css   | styles        |   9.99 kB       
runtime.7b63b9fd40098a2e8207.js   | runtime       |   1.45 kB       

                                  | Initial Total | 822.56 kB       

Build at: 2021-03-19T10:16:12.616Z - Hash: f2cd229fd78fa7285650 - Time: 29791ms

Repo with all code.
https://github.com/narendrasinghrathore/highcharts-map-angular-typescript.git

Stackblitz App Demo URL
https://highcharts-map-angular-typescript.stackblitz.io/

[mateuszkornecki]

Sorry for the late reply! I am glad you worked it out!

Thanks for sharing your solution.

[narendrasinghrathore]

@mateuszkornecki , still I will require you help.
Can you please setup a call if possible, that would be really helpful to me and others ?
Email: [email protected]

Do please let me know.
Thanks

[mateuszkornecki]

@narendrasinghrathore
Unfortunately we are currently not providing calls. If you are owner of advantage licence you can contact us via Skype chat - that's the fastest way to get help from our support engineer's. Otherwise since this GitHub issue page was intended for bugs reporting I would suggest to contact us via mail, you will get assistance within 24 hours.

https://www.highcharts.com/blog/support

[narendrasinghrathore]

@mateuszkornecki as we discussed, I build a demo app, with help and reference links shared by @hihajdus 🎉.

1. Preselected counties with custom color
2. Select county
3. Unselect county
4. Lazy load province JSON on request.

Repository:
https://github.com/narendrasinghrathore/highcharts-map-angular-typescript

Demo:
https://highcharts-map-angular-typescript.stackblitz.io

Hope it will help others.
Thanks
Narendra Singh

[mateuszkornecki]

@narendrasinghrathore Thanks a lot for your contribution!

We will definitely include your example in the docs in the future release!