How to render the USA map shown in the attachment

[itchamp]

Hi,

I need to categorize the USA map and each category should have some space among each other. The sample map is shown in the attachment. How can I get the map rendered as shown in the attachment? The jsfiddle is https://jsfiddle.net/mngy03uq/ . Is there any way that I can have some space/gap among categories?

Screenshot 2023-05-16 at 3.01.01 PM.png (160.43 KiB) Viewed 551 times

[jedrzej.r]

Hi!

Thanks for reaching out to us with your question!

Unfortunately, there isn't any built-in option for spacing out defined categories, like shown in the attached image. Perhaps you'd like to consider using mapView.insets object, where you could define geoBounds of your categories, and then place them spaced out by defining field object. Below you will find the demo with Texas and Oklahoma states "separated" from other continental territories.

Demo: https://jsfiddle.net/BlackLabel/xr0y6skv/

API: https://api.highcharts.com/highmaps/mapView.insets

Let me know if that was what you were looking for!
Best regards!

[itchamp]

Thanks for the response!

I was able to render by using SVG and converting the SVG to json using https://highcharts.github.io/map-from-svg/ tool.

[jedrzej.r]

Hi!

That's great to hear! In case of any further questions, feel free to contact us again.
Best regards!