[[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/ でサンプルフォルダが全て見えるので、(ディレクトリインデックスを許しています)~ 各サンプルフォルダ内の各サンプル.htmlをブラウザで開くと動作を確認できます。~ (ただし、bing のみは map.js に自分で取得した bingmap の key を記入しないと動作しません。)~