2

I need to build an interactive map of South Africa so that when someone clicks on the provinces the right Google Map displays. I eventually opted to convert a vector based map of South African provinces I have to fonts/glyphs. This worked super well and you can view them here.

http://vane.co.za/files/south-african-province-glyphs/demo.html

EDIT: I've added a jsFiddle here for the map

The map is one whole map of South Africa with its different provinces so what I did was take each province from within illustrator and copy them into a new document. I then clipped the white board to fit exactly around the edges ensuring that every SVG file I saved was exact.

I saved every file as an SVG and imported it to IcoMoon which then converted it to a font for me. So far so good.

I would assume that that when I import these fonts without a font size, they should all render in their original size so that I can piece together the different province maps into one whole South african map but this is not the case.

I thought that giving them an equal EM sizes will scale them proportionally so that each one is it's own correct size but this has not worked either.

Is there a way to match these maps up so that they all fit perfectly back to the country map again?

I hope this makes sense?

EDIT:

I've gone back to http://icomoon.io where I generated the glyphs and figured out that they are being created at 16px X 16px. However, even if I scale them by px according to the size I want them, they still do not slot into one another correctly.

In Firebug I am nulling all the font sizes and using the layout inspector. These are all the width sizes I managed to get; the heights are all 16px.

North-West     - 22px 
Limpopo        - 24
Mpumalanga     - 15px
KwaZulu-Natal  - 13px
Gauteng        - 15px
Free-State     - 19px
Eastern-Cape   - 24px
Western-Cape   - 20px
Northern-Cape  - 15px

The example below is my attempt at scaling the glyphs up manually but the smaller provinces can be seen in the top left.

EDIT: These are the actual sizes they need to be in order for them to puzzle together nicely inside that white block:

North-West     - 75.684px
Limpopo        - 73.217px
Mpumalanga     - 50.286px
KwaZulu-Natal  - 53.248px
Gauteng        - 25.817px
Free-State     - 72.984px
Eastern-Cape   - 99.397px
Western-Cape   - 84.725px
Northern-Cape  - 120.514px

enter image description here

4

1 回答 1

0

您剪裁了每个形状的艺术板以匹配形状本身。这意味着一旦将形状转换为字体字形，就会丢失形状之间的所有相对大小。如果您在相同的地方渲染字形，那么一个很小的省份将与最大的省份一样高font-size。

最简单的解决方案是不剪贴画板形状。这样您就可以保留每个字形的比例：

在此处输入图像描述

较小的省份在字形内会有很多空白空间，但它们都会很好地重叠。

于 2014-01-27T11:54:02.323 回答