Tutorial1

CSVデータからインタラクティブ地図を作製する方法のチュートリアル

2014.03.03 1st rev. By Satoru Takagi
2017.12.07 OSS化に対応した更新
2018.01.11 markdown化
2018.06.01 SVGMap.jsを更新、-Xmx追加
2023.05.19 mavenベースのパッケージに移行。SVGMap.jsをCDN経由に変更
2023.07.18 Java17, Geotools28.4対応
2023.07.20 tutorial3を追加
2024.06.19 Macintosh, Linux用の補足説明追加
2024.09.19 Java21で動作確認, SVGMap.jsをESM版に更新

Notes:

実行環境について

サンプルデータについて

最初の練習

環境設定

  1. Java 17 の準備
    • 既にインストール済みの場合は飛ばしてください。
    • Javaには複数のディストリビューションがあります。
      • Amazon Corretto 17 : (動作確認環境 (Windows x64) )
      • OpenJDK :
        • https://jdk.java.net/archive/
      • Redhat OpenJDK 17 :
        • https://developers.redhat.com/products/openjdk/download
      • Microsoft Build of OpenJDK :
        • https://learn.microsoft.com/ja-jp/java/openjdk/download
      • Oracle JDK :
        • https://www.oracle.com/jp/java/technologies/downloads/
  2. ツールのダウンロード
    • releasesから、最新のリリースのソースコード（ Source code (zip)）と、jar（svgMapTools-{REV}.jar）をダウンロードします。
      • {REV}はリリースによって異なります。202307など
    • ソースコードを解凍します。アーカイブを解凍した直下のディレクトリ(pom.xmlファイルやtoolsディレクトリがある)を以後ルートディレクトリと呼びます。また以降のパス表記はこのルートディレクトリからの相対パスとします
      （ルートディレクトリ以下の構造） 
       +-pom.xml
 +-src
 +-tutorials
 +-tools
 |  +-CopyDependLibs.bat
 |  +-MakeClass.bat
 |  +-...
 |
 +-...
    • ルート直下にtargetディレクトリをつくり、そこに svgMapTools-{REV}.jarを投入します。 
       +-target
    +svgMapTools-{REV}.jar
    • もしくは自分でjarを生成することもできます。
      • javacがあれば、下記 外部ライブラリの準備後、toolsディレクトリのMakeClass.batでjarを生成できます。
      • 更にmaven環境も構築済みであれば、pom.xmlがあるアーカイブのルートディレクトリで
        • mvn package
        • mvn dependency:copy-dependencies
          でも構築できます。詳しくはreadMeFirstJA.mdを参照
  3. 外部ライブラリの準備
    • svgmaptoolsが使用する外部ライブラリ(javacsv2.1)をダウンロードします。
      • javacsv2.1.zip を https://sourceforge.net/projects/javacsv/ からダウンロードする
    • svgmaptoolsが使用する外部ライブラリ(geotools28.4)をダウンロードします。
      • geotools-28.4-bin.zip を https://sourceforge.net/projects/geotools/files/GeoTools%2028%20Releases/28.4/ からダウンロードする
      • sourceforgeサイトの目立つダウンロードボタンは最新版のダウンロードとなってしまうので、geotools-28.4-bin.zipを間違わずダウンロードしてください。
    • toolsディレクトリ下に二つのzipファイルを解凍し、以下の構成になるようにjavacsv2.1及びgeotools-28.4ディレクトリを作成します。
      (解凍・保存後のルートディレクトリ以下の構造) 
      +-pom.xml
+-src
+-target
+-tools
|  +-javacsv2.1
|  | +-javacsv.jar
|  | +-...
|  |
|  +-geotools-28.4
|  | +-lib
|  |   +-*.jar
|  |   +-...
|  |
|  +-CopyDependLibs.bat
|  +-MakeClass.bat
|  +-...
|
+-...
  4. 作業ディレクトリ移動とライブラリの設定
    • コマンドプロンプトを開き、以下を指示します
      • cd {ルートディレクトリ}\tools\
      • CopyDependLibs.bat
    • target\dependencyディレクトリが作られ、ルートディレクトリ以下の構成が以下になれば準備完了です。 
      +-target
|  +svgMapTools-{REV}.jar
|  +dependency
|    +aircompressor-0.20.jar
|    +(合計89個のjarファイル)
|
+-tutorials
+-tools
+-...

練習の開始

変換する対象ファイルは、tutorials\webApps\sample\JPcities_of_worldcitiespop_utf8.csv に格納されているものとして練習を進めます。

  1. コマンドプロンプトを開き、toolsディレクトリにcdします。環境設定に続いて進めていれば不要
    • cd {ルートディレクトリ}\tools\
  2. csvfileを大縮尺(拡大表示)用ベクター地図に変換
    • Shape2SVGMap.bat -poisymbol symbolTemplate.txt -micrometa2 -level 3 -limit 50 -showtile -densityControl 400 -lowresimage -charset utf-8 -linktitle 3 ..\tutorials\webApps\sample\JPcities_of_worldcitiespop_utf8.csv
      • tutorials\webApps\sample\ディレクトリに、JPcities_of_worldcitiespop_utf8.svgファイルおよび、補助の.svgファイル群が作成されます。
  3. csvfileを小縮尺(縮小表示)用ラスター地図に変換
    • Shape2ImageSVGMap.bat ..\tutorials\webApps\sample\JPcities_of_worldcitiespop_utf8.svg -sumUp 16 -antiAlias -charset utf-8 ..\tutorials\webApps\sample\JPcities_of_worldcitiespop_utf8.csv #0000ff #0000ff 0 3
      • tutorials\webApps\sample\ディレクトリに、JPcities_of_worldcitiespop_utf8ディレクトリが作成され、その下に付随するファイル群が作成されます。(いくつかのディレクトリとpngやsvgファイル）
    +-target
+-tutorials
|   +webApps
|     +SvgMapper.html
|     +Container.svg
|     +...(その他のファイル)
|     +sample
|       +JPcities_of_worldcitiespop_utf8.svg
|       +...(その他のファイル)
|       +JPcities_of_worldcitiespop_utf8
|         +lvl2(ディレクトリ)
|         +...(その他のディレクトリやファイル)
|
+-tools
+-...
  4. {ルートディレクトリ}\tutorials\webApps\Container.svgをテキストエディタで編集
    • このファイル(Container.svg)は、ルートコンテナと呼ばれるファイルで、SVGMap.jsが表示する地図コンテンツの基本構成(どのようなレイヤーが配置されるか)が記述されたコンテンツです。ホームページとなるコンテンツ(SvgMapper.html)の<div id="mapcanvas" title="Container.svg"></div>から参照されます。
    • <!-- Thematic Layer -->の行の後に、生成したコンテンツのルートとなるファイルへのリンクを追加します。
      （サンプルにはすでに追加済みですので確認のみで大丈夫です。実際の作業ではここにリンクを追加することで、レイヤーが追加されていきます。）
    • <animation title="Cities of Japan" xlink:href="sample/JPcities_of_worldcitiespop_utf8.svg" class="poi" x="-30000" y="-30000" width="60000" height="60000" />
    • これで地図作成完了
  5. ローカルにあるWebAppsを動作させるための特別なモードのChromeを起動
    • 全てのChromeブラウザのウィンドを閉じてください。(同モードでの起動準備のため)
    • コマンドプロンプトで以下を入力
    • start chrome --allow-file-access-from-files
  6. ..\tutorials\webApps\SvgMapper.html　ファイルを上で起動したChromeのウィンドにドラッグアンドドロップすると、変換したデータが見られる。

作業内容のポイント

この練習で使用したコマンドと、そのパラメータの意味を解説します

SVGMapToolkitが備える、Quad Tree Composite Tiling(スライド、解説ページ)は大規模な地理情報から容易に伸縮可能な地図コンテンツを生成できる技術です。要点は小縮尺(引いた地図)は軽いビットイメージで、大縮尺(拡大下地図)はインタラクティブなベクトルグラフィックスの地図に、場所に応じたタイミングで切り替えるものです。

SVGMapToolsはこれを実現するために2つのツールを使用します。

コマンドラインパラメータのポイント

実習で実際に入力した各コマンドのパラメータのポイントを説明します なお、いずれのコマンドも、パラメータなしで起動するとヘルプ情報が表示されますので参考にしてください。

自分で用意したデータからコンテンツを生成する場合も、まずはここで設定した値をベースに調整していくと良いでしょう。

Shape2SVGMap.bat
Shape2ImageSVGMap.bat

Shape2ImageSVGMapのパラメータの与え方は少々複雑です。第一引数にはタイリングのためのインデックス情報を、第二引数以降は　ハイフン付きのパラメータを任意の数、ハイフン付き任意パラメータ群が終わった後は順番が固定された5個のパラメータを設定します

この次に行うこと

興味に応じて以下のいずれかを進めてみてください。

実践

  1. 作業ディレクトリの設置
    • toolsディレクトリをカレントディレクトリと想定
    • ..\tutorials\webApps\　以下に任意の作業ディレクトリ(英文字が好ましい)を設置
      • このフォルダを以下..\webApps\(wdir)とする
    • tools\mappins\mappin.png　を　..\tutorials\webApps\(wdir)にコピー
  2. CSVファイルの準備
    • 設置した..\tutorials\webApps\(wdir)　に、あらかじめ用意したCSVファイル（適当な桁に緯度、経度が入っている）を配置
      • 以下、そのファイルを　..\tutorials\webApps\(wdir)\(wfile).csv　とします。
      • csvファイルの注意点：（なお、shapefileを変換することも可能）
        • 漢字が入っている場合、シフトJISにします。(Windowsの場合（OS標準文字コード）　オプションによってUTF-8テキストを使用することも可能)
        • 最初の行には項目名がカンマ区切りで入っている必要があります。（無い場合はテキストエディタで編集挿入します。なお、スキーマファイルを与えることで項目名が無いままでの変換も可能です。）
        • 緯度経度のカラムの項目名は、latitude, longitude　となっている必要があります。
        • 緯度経度のカラムは、以降のカラム指定番号から外して考えます。
        • そのうえで、1カラム目が最初のカラムとなります。
  3. 大縮尺(拡大表示)用ベクトル地図を生成（データサイズによって時間がかかります）
    • コマンドプロンプトを起動し toolsディレクトリにcd
    • Shape2SVGMap.bat -poisymbol symbolTemplate.txt -micrometa2 -level 3 -limit 50 -showtile -densityControl 400 -lowresimage ..\tutorials\webApps\(wdir)\(wfile).csv
      • 同ディレクトリに、JPcities_of_worldcitiespop_utf8.svgファイルおよび、補助の.svgファイル群が作成されます。
  4. 小縮尺(縮小表示)用ラスター地図を生成（データサイズによって時間がかかります）
    • Shape2ImageSVGMap.bat ..\tutorials\webApps\(wdir)\(wfile).svg -sumUp 16 -antiAlias ..\tutorials\webApps\(wdir)\(wfile).csv #0000ff #0000ff 0 3
      • 同ディレクトリに、(wfile)ディレクトリが作成され、その下に補助ファイル群が作成されます。(いくつかのディレクトリとpngやsvgファイル）
  5. ルートコンテナファイルtutorials\webApps\Container.svg　を編集
    • <!-- Thematic Layer -->の行の後に、以下のタグ
      <animation title="(CONTENT Title)" xlink:href="(wdir)/(wfile).svg" class="poi" x="-30000" y="-30000" width="60000" height="60000" /> を追加
      • (CONTENT Title)は、何でも良いですが、半角英数を推奨します。(漢字の場合UTF-8です)
    • これで地図作成完了
  6. tutorials\webApps\SvgMapper.html　をローカルWebApp起動モードのChromeで開く(ドラッグアンドドロップする)と変換したデータが見られます。
    • Note:
      ウェブホストにtutorials\webApps以下を配置すれば、そのコンテンツのURL(ウェブホストのディレクトリのURL/SvgMapper.html)で通常のブラウザで表示することができます。
      生成されたコンテンツは全て静的なものですので、一般的な静的ホスティングサービスで配信できます。

応用：複数のデータの合成(レイヤー合成)

さらに応用：ツールの複雑な使い方など

補足説明：Linux,Macintosh環境での実行について

Linux(Ubuntu等), Macintosh等のUNIX系の環境で、本チュートリアルを実施するときの留意点・相違点を記載します

環境設定

練習

  1. csvfileを大縮尺(拡大表示)用ベクター地図に変換
    • コマンドは以下のようになります。
    • ./Shape2SVGMap.sh -poisymbol symbolTemplate.txt -micrometa2 -level 3 -limit 50 -showtile -densityControl 400 -lowresimage -charset utf-8 -linktitle 3 ../tutorials/webApps/sample/JPcities_of_worldcitiespop_utf8.csv
  2. csvfileを小縮尺(縮小表示)用ラスター地図に変換
    • コマンドは以下のようになります。
    • ./Shape2ImageSVGMap.sh ../tutorials/webApps/sample/JPcities_of_worldcitiespop_utf8.svg -sumUp 16 -antiAlias -charset utf-8 ../tutorials/webApps/sample/JPcities_of_worldcitiespop_utf8.csv "#0000ff" "#0000ff" 0 3
  3. {ルートディレクトリ}/tutorials/webApps/Container.svgをテキストエディタで編集
    • 特に注意すべき相違点はありません
  4. ローカルにあるWebAppsを動作させるための特別なモードのChromeを起動
    • 起動方法が異なります。あらかじめ起動中のChromeを終了させておく必要があります
    • MacOS: open -a "Google Chrome" --args --allow-file-access-from-files
    • Linux: google-chrome --allow-file-access-from-files



以上