Strange viewbox size

[Vincent-Lyu]

Hi,

I am interested in Mapael and develop a website based on it.

I created my own map using Inkscape. But the viewbox generated looks quite strange after extracting the path out and used with Mapael.

A picture worth a thousand words. My map is put on this url http://116.226.62.120:40080/ It may take a moment to complete rendering of the page when you first open it.

As you can see, the height of the map container is too large. I take the viewbox value given by Inkscape output as the width and height options of my map. If I manually change the height option in the javascript file to a lower value, the map is also truncated.

Can you give me suggestions on how to reduce the height of the viewbox while at the same time keeping the entire paths of map to be visible?

Feel free to comment if I didn't explain my issue well.

[Indigo744]

I see your issue.

Can you provide the China SVG file and the resulting Mapael JS file?

Also, why are you loading the "bravenewworld" map if you don't use it?

Thanks.

[Vincent-Lyu]

@Indigo744 Thanks for your quick reply. "bravenewworld" is an early version. I should have removed it.

China SVG link: https://www.dropbox.com/s/pcxpbwrs5v7twt7/china2.svg?dl=0 Resulting Mapael JS file: https://www.dropbox.com/s/u1nktna08sc9648/china2.js?dl=0

Only part of paths in SVG (whose id exists in JS elements) is extracted. Non-important path is ignored.

[Indigo744]

How did you extract the relevant path and ignore the others? The SVG-to-Mapael tool would have extracted all paths, isn't it?

[Indigo744]

I would suggest using a simpler SVG file, with less details so the resulting JS file would be smaller.

For instance, what about this one: https://commons.wikimedia.org/wiki/File:China_Blank_Map_with_Province_Names.svg ?

[Vincent-Lyu]

Thanks for your reply.

Yes you are right. The SVG-to-Mapael tool would extract all paths. But I manually removed unnecessary paths such as rivers, boundaries, tiny islands.

In fact, I have considered the simplified china-only map before. But I want to show the neighbor countries as well to make the map looks more eye-catching.

So you think the reason is due to I keep too many paths in JS file? I thought the viewbox size should be calculated by the lowest and highest value of all x and y coordinates in the map. But from the result, it is not like so. Do you have any insights on this?

Appreciate your help a lot.

[Indigo744]

No, the path details would not have an impact on the viewbox, only on file size and processing time. It was just a suggestion to use another SVG map that would have a better viewbox and less details (like this one https://commons.wikimedia.org/wiki/File:China_location_map.svg).

[Vincent-Lyu]

Thanks for your suggestion.

But how can I proactively notice that the viewbox of a SVG map would have issue? Cos I don't want to spend lots of time on it then notice that I'd better change to another SVG map.

If I keep using the current map, anyway I can make the viewbox better. Tweak any parameter or something?

[Indigo744]

I was able to regenerate your SVG file from the JS file (note: @neveldo the Mapael-to-SVG algorithm choke on this JS file, so I had to do it by hand... Maybe a memory issue? File is 1.7MB...).

Anyway, now I have the proper SVG you used.

If I open it with Inkscape, this is what I see:

As you can see, there is clearly an issue with the view box since there is this huge margin around your areas. The solution is to simply use the feature Resize page to drawing or selection of Inkscape.

This is what it looks like now:

Better, eh?

I also took this opportunity to reduce your node count, so you wouldn't have a too big file which takes a lot of time to parse (and also because PasteBin has a 512kB limit). I used the Path > Simplify tool (treshold of 0.0005) of Inkscape. The resulting file is then around 300kB (17% of original size!).

The resulting SVG can be seen here: https://pastebin.com/WN0zNsKV The resulting JS Mapael file can be seen here: https://pastebin.com/g9pFmwZc

And here is a test of what is looks like: https://jsfiddle.net/u4mnzsLu/1/

[neveldo]

@Indigo744 , thanks for having reported this issue on the mapael-to-svg tool. I will check it as soon as possible !

[neveldo]

@Indigo744 : it should now work fine :) (see https://github.com/neveldo/mapael-documentation/commit/627817c9183b5db0bc5ce39a7a843b2cc9167789)

[Vincent-Lyu]

@Indigo744 Thanks for this Inkscape tutorial. This solves my problem. Appreciate for your help.

[Indigo744]

I really like what you made with Mapael! Feel free to open another issue if you have any problem.