VijayGowdaS
Posts: 5
Joined: Fri Jun 19, 2020 7:28 am

Custom Map

mateuszkornecki
Posts: 1222
Joined: Mon Oct 28, 2019 10:29 am

Re: Custom Map

Hello,

Welcome to our forum and thanks for contacting us with your question!

You can find a complete guide of creating a custom map from the SVG file under this link: https://www.highcharts.com/docs/maps/cr ... r-highmaps

Let me know if you have any further questions!

Kind regards.
Mateusz Kornecki
Highcharts Developer
VijayGowdaS
Posts: 5
Joined: Fri Jun 19, 2020 7:28 am

Re: Custom Map

Hi, thanks for the reply. Used the same method for the above linked SVG, but not getting correct data when converted.
mateuszkornecki
Posts: 1222
Joined: Mon Oct 28, 2019 10:29 am

Re: Custom Map

Can you specify what is wrong with the exported map config? I used your SVG and the exported map looks correctly for me, am I missing something?

Live demo:
https://jsfiddle.net/BlackLabel/3Lr9ntkv/

Best regards.
Mateusz Kornecki
Highcharts Developer
VijayGowdaS
Posts: 5
Joined: Fri Jun 19, 2020 7:28 am

Re: Custom Map

Getting stuck again while converting this SVG to JSON, Help Please.

https://kpisoft-my.sharepoint.com/:u:/g ... g?e=LqmlWn

Thanks
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Custom Map

Hi,
Thanks for the message.

I checked the example from the post above and export to SVG works for me, how do you export to JSON?
https://jsfiddle.net/BlackLabel/3Lr9ntkv/

Best regards.
Sebastian Hajdus
Highcharts Developer
VijayGowdaS
Posts: 5
Joined: Fri Jun 19, 2020 7:28 am

Re: Custom Map

Thanks for the reply, I am talking about the SVG update on - Wed Jun 16, 2021 12:51 pm.

Here is the link for the new SVG - https://kpisoft-my.sharepoint.com/:u:/g ... g?e=LqmlWn

Using the Github link to convert SVG to JSON but no luck not able to do. This is the link - https://highcharts.github.io/map-from-svg/
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Custom Map

Hi,
Thanks for explaining.

We found the culprit, the problem is a wrong path format, there is missing zero before the coma.

Code: Select all

<path id="South" class="cls-1" d="M556.13,1706.22c-2.16-.21-3.39-1.8-5-2.81-6.84-4.27-12.56-8.79-17.55-15-.7-.87-1.23-1.87-1.92-2.72-.1-.12-5.62-2.72-6.94-3.68-2.05-1.51-8.82-10.41-11.43-15.06-2.89-

Correct looking path:

Code: Select all

<path d="M 839.82577,-495.28739 C 839.45276,-495.89093 838.6522,-496.07857 838.04673,-495.70438 C 837.31261,-495.25066 837.18667,-495.65148 837.66868,-496.90758 C 838.06622,-497.94354 838.08352,-498.4832 

But this behavior is related to how works our parser and I will report this as a bug.

This is a ticket that you can track:
https://github.com/highcharts/map-from-svg/issues/3

Link to converted your map:
https://drive.google.com/file/d/1-w_I0u ... sp=sharing

Config to your map:
https://drive.google.com/file/d/12ycRXH ... sp=sharing


Best regards.
Sebastian Hajdus
Highcharts Developer
VijayGowdaS
Posts: 5
Joined: Fri Jun 19, 2020 7:28 am

Re: Custom Map

Thanks!!
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Custom Map

You're welcome!
In case of any further questions, feel free to contact us again.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Maps”