Polymaps の変更点 - labs.beatcraft.com

追加された行はこの色です。
削除された行はこの色です。
Polymaps へ行く。
Polymaps の差分を削除
[[Docker]]~
[[Docker/Apache起動イメージ]]~


#contents

** Polymaps [#kdd799ce]
Polymaps はズーム可能な画像マップを作成できる Javascript のライブラリです。~
http://polymaps.org/

** 動作確認 [#ree67f93]
アーカイブを取得して展開します。
 $ wget https://github.com/simplegeo/polymaps/archive/master.zip
 $ unzip master.zip
 $ cd polymaps-master
 $ ls
 LICENSE  Makefile  README.mkd  examples/  lib/  polymaps.js  polymaps.min.js  src/

polymaps.js、polymaps.min.js がライブラリです。~

examples/ の中は以下のような構成になっています。~
 $ tree examples/
 examples/
 ├── bing
 │       ├── map.html
 │       └── map.js
 ├── bounds
 │       ├── bounds.html
 │       ├── bounds.js
 │       └── district.json
 ├── breakout
 │       └── breakout.html
 ├── canvas
 │       ├── cell-worker.js
 │       ├── cell.html
 │       ├── cell.js
 │       ├── mandelbrot-worker.js
 │       ├── mandelbrot.html
 │       ├── mandelbrot.js
 │       └── procedural.js
 ├── cloudmade
 │       ├── midnight-commander.html
 │       ├── midnight-commander.js
 │       ├── pale-dawn.html
 │       └── pale-dawn.js
 ├── cluster
 │       ├── cluster.html
 │       ├── cluster.js
 │       └── kmeans.js
 ├── example.css
 ├── features
 │       └── features.html
 ├── grid
 │       ├── grid.html
 │       ├── grid.js
 │       ├── tiles.html
 │       └── tiles.js
 ├── hilbert
 │       ├── hilbert.html
 │       └── hilbert.js
 ├── invert
 │       └── invert.html
 ├── iphone4
 │       ├── iphone4.html
 │       └── iphone4.js
 ├── kml
 │       ├── kml.html
 │       ├── kml.js
 │       └── sample.kml
 ├── loupe
 │       ├── loupe-map.js
 │       ├── loupe.html
 │       └── loupe.js
 ├── marker
 │       ├── marker.html
 │       └── marker.js
 ├── nasa
 │       ├── blue-marble.html
 │       └── blue-marble.js
 ├── overlay
 │       ├── overlay.html
 │       ├── overlay.js
 │       └── sf1906.png
 ├── population
 │       ├── population.css
 │       ├── population.html
 │       └── population.js
 ├── shadow
 │       ├── shadow.html
 │       └── shadow.js
 ├── small
 │       ├── small.html
 │       └── static.html
 ├── statehood
 │       ├── fips.js
 │       ├── statehood.html
 │       └── statehood.js
 ├── streets
 │       ├── streets.html
 │       ├── streets.js
 │       └── streets.json
 ├── tilestache
 │       ├── dot.gif
 │       ├── flickr.html
 │       └── flickr.js
 ├── tipsy
 │       ├── berkeley.png
 │       ├── stanford.png
 │       └── tipsy.html
 ├── transform
 │       ├── nypl.js
 │       ├── transform-inverse.html
 │       ├── transform.html
 │       ├── transform.js
 │       └── transparent.png
 ├── transition
 │       ├── ease.js
 │       └── transition.html
 ├── unemployment
 │       ├── unemployment-data.js
 │       ├── unemployment.html
 │       └── unemployment.js
 └── world
           ├── area.tsv
           ├── internet.tsv
           ├── population.tsv
           ├── tsv.js
           ├── world.html
           ├── world.js
           └── world.json

各フォルダ内の html は~
-examples/ と同じ階層にある polymaps.js
-examples/ と同じ階層にある lib/ ディレクトリ内の各種サードパーティ js ライブラリー
-examples 内にある examples.css
-フォルダ内のそれぞれの js

に 相対PATH が通してあるので、polymaps-master 以下のディレクトリ配置を保ったまま httpd で公開し~
examples/{各サンプルフォルダ}/{各サンプル}.html~
を開くだけで動作させることが出来ます。

** Docker Apache イメージでの公開 [#tb4dd352]
ホストOS の IP address が 192.168.0.161、~
master.zip が /home/beat/polymaps-master/ に展開されているとして、
 $ sudo docker run -i -t -d -v /home/beat/polymaps-master:/var/www/html -p 80:80 -p 22:22 centos:apache-pm
でコンテナ起動後 http://192.168.0.161/examples/ でサンプルフォルダが全て見えるので、~
（ディレクトリインデックスを許しています）~
~
#ref(cap-examples.png,,60%); ~
~

各サンプルフォルダ内の各サンプル.htmlをブラウザで開くと動作を確認できます。~
~
#ref(cap-examples-streets.png,,60%);
#ref(cap-examples-streets-html.png,,60%);
~
（ただし、bing のみは map.js に自分で取得した bingmap の key を記入しないと動作しません。）~

**更新履歴 [#be00f92a]
2014/06/13 初稿公開 ~
RIGHT:Satoshi OTSUKA