Polymaps

Docker
Docker/Apache起動イメージ

Polymaps †

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

動作確認 †

アーカイブを取得して展開します。

$ 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 イメージでの公開 †

ホスト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 を記入しないと動作しません。）

更新履歴 †

2014/06/13 初稿公開