safariのgoogle maps API GPolyline のPNGでグラフを作りたい

前からやりたいと思いつつ、実現困難だったので放置していたけれど実装の道筋が見えた(けど手が回りそうじゃない)のでだれかが作ってくれたりすると楽しいなと思って書いておきます。

google maps API の GPolyline とかは firefoxではSVGで実装、IEではVMLで実装されていますが、safariではPNGの画像を動的に生成してオーバーレイしてエミュレートしています。(SVGサポートしてないんでしたっけ?)

なのでGPolyline サンプルのページでは

http://mt.google.com/mld?width=804&height=289&path={l@yAwB_BrAcBZI|BeGdi@xO}oR&color=51,51,204,140.25&weight=10

なんてURLが読み込まれていて

Mld-1-1

こんな画像が帰ってきています。

weight=10weight=5にしたら線が細くなるのはわかりますが、問題はpathの部分。この部分のエンコード方法が分からないのでおてあげだなーと今まで思ってたのですが、今日改めて google maps API document を見直していたら
Google Maps API Documentation – Polyline Encoding Utility なんてものが!

jsで実装されていて、エンコーディングのアルゴリズムそのものが公開されているわけではないものの、ぱっとみ polyline.js を外から読み込んでなんとかしてpathの部分を生成して、そいつを google maps API の safari用PNG画像生成エンドポイントに横から渡してグラフを作れそうです。
SpiderMonkey (JavaScript-C) Engine あたりと組み合わせていじれば google maps API をバックエンドにしたグラフ生成ツールも作れそうです。画像の幅も高さも、線の色もかなり自由に設定できるし、がんばれば GPolygon も混ぜられるのでは。

あ、ていうか単にカスタムのマップタイル使ってふつうに google maps API 使ったらいい話だ…..
そうすると画像生成処理がふつうにクライアントのSVG/VML担当になってなんかつまんないなあ…..


About this entry