Prefectlyという地図表示オープンソースの仕組みと意図

Question

いつもお世話になります。
勉強中のフロントエンジニアです。よろしくお願い申し上げます。

###Prefectlyというオープンソース
http://deform.jp/prefectly/
上記ついて、いくつが疑問があります。

###【質問１】仕組みについて
トップページの仕組みを読んだのですが、よく理解できず・・・・・
それぞれの都道府県はほかの都道府県に合うように位置とサイズが調整されていて
とあるので、そのようなプログラム該当ファイルも探せずじまいです。

###【質問2】この仕組みを使うメリット
なぜわざわざフォントまで制作して、このように表示させるようにしたか、よくわかりません。

###補足:ダウンロードで取得できるファイル
・css/prefectly.css
・font/prefectly-webfont.eot
・font/prefectly-webfont.svg
・font/prefectly-webfont.ttf
・font/prefectly-webfont.woff
・sass/_screen.scss
・sass/_setup.scss
・sass/prefectly.scss

いつも勉強させていただいています、
この度もどうぞよろしくお願い申し上げます。

Answer 1

仕組みについて

フォント1字に都道府県をひとつずつ格納しています。それを47個重ねて表示しているだけです。
イメージとしては、「±」を表現するために「+」「_」を重ねるような感じです。
（Chromeの開発者ツールなどでHTMLの構造を見てみれば解ると思います）

この仕組みを使うメリット

日本地図の色分けが HTML でも CSS でも JavaScript でも操作がしやすく、フォントなので拡大縮小が容易で綺麗にできる、またフォントなので対応ブラウザが IE4+ という脅威の対応力も魅力です。

色分けだけ（Google Chart APIなど）、拡大縮小対応（SVGなど）だけ、などは過去にもありましたが、コードの知識や作法が特殊な部分もあったため、こういうライブラリを作られたのではないでしょうか。

Comments

[mmns]

ご多用の中、的確なご回答ありがとうございます。

>>フォント1字に都道府県をひとつずつ格納
>>イメージとしては、「±」を表現するために「+」「_」を重ねるような感じです。
そんな方法があったとは驚きです。
実際にいじると、文字が大量に表示されたことも、納得できました。

>>色分けだけ（Google Chart APIなど）、拡大縮小対応（SVGなど）だけ、などは過去にもありましたが、コードの知識や作法が特殊な部分もあった
そこで、わざわざフォントにしたのですね。
svgではだめなのかと思っていましたので、すっきりしました。
(確かにsvg未対応ブラウザも未だにありますし、IE4(！)にも対応できるのはメリットなのですね)

まだまだ勉強不足の身で大変恐縮です。誠にありがとうございました。