Polymaps
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
]
開始行:
[[Docker]]~
[[Docker/Apache起動イメージ]]~
#contents
** Polymaps [#kdd799ce]
Polymaps はズーム可能な画像マップを作成できる Javascript ...
http://polymaps.org/
** 動作確認 [#ree67f93]
アーカイブを取得して展開します。
$ wget https://github.com/simplegeo/polymaps/archive/mas...
$ unzip master.zip
$ cd polymaps-master
$ ls
LICENSE Makefile README.mkd examples/ lib/ polymaps...
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/ ディレクトリ内の各種サー...
-examples 内にある examples.css
-フォルダ内のそれぞれの js
に 相対PATH が通してあるので、polymaps-master 以下のディ...
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...
でコンテナ起動後 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 の ...
**更新履歴 [#be00f92a]
2014/06/13 初稿公開 ~
RIGHT:Satoshi OTSUKA
終了行:
[[Docker]]~
[[Docker/Apache起動イメージ]]~
#contents
** Polymaps [#kdd799ce]
Polymaps はズーム可能な画像マップを作成できる Javascript ...
http://polymaps.org/
** 動作確認 [#ree67f93]
アーカイブを取得して展開します。
$ wget https://github.com/simplegeo/polymaps/archive/mas...
$ unzip master.zip
$ cd polymaps-master
$ ls
LICENSE Makefile README.mkd examples/ lib/ polymaps...
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/ ディレクトリ内の各種サー...
-examples 内にある examples.css
-フォルダ内のそれぞれの js
に 相対PATH が通してあるので、polymaps-master 以下のディ...
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...
でコンテナ起動後 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 の ...
**更新履歴 [#be00f92a]
2014/06/13 初稿公開 ~
RIGHT:Satoshi OTSUKA
ページ名:
BC::labsへの質問は、bc9-dev ＠ googlegroups.com までお願い致します。
![[BC::Labs]](image/bc_logo.png "[BC::Labs]"){kind=logo}
