チュートリアル

SVGMapチュートリアル

SVGMapのチュートリアルです。簡単なものから応用的なものまで少しずつ紹介いたします。特に自身でSVGMapコンテンツを構築するシステム開発者向けの資料となっています。

開発無しに手持ちのデータをツールを使ってSVGMapとして利用したいという利用者にはこちらのチュートリアルを推奨します。

チュートリアルプログラムのディレクトリ構成

└───devinfo
     └───devkddi
          └───tutorials
              ├───js          Javascriptファイル
              ├───img         イメージファイル
              ├───tutorial1   チュートリアル1
               .
               .
              └───tutorialN   チュートリアルN

チュートリアル1 海岸線地図表示

最初に日本の海岸線を表示するチュートリアルです。 実際の動作は、こちらをクリック。

解説

• 詳細は、チュートリアル1を参照。

あらすじ

• ファイル構成 tutrial1ディレクトリに以下のファイルがあります。
  • tutrial1.html
    • SVGMapのコアプログラムファイル(SVGMapLv0.1_r17.jsおよびSVGMapLv0.1_LayerUI2_r4.js)を読み込み、SVGMapの各種APIを利用可能にする。
    • 地図表示部分を(DIVで)定義し、そこに表示するレイヤをまとめたSVGファイル(Containers.svg)を読み込む(上記SVGMapのコアプログラムにて自動的にVisibleになっているレイヤが表示される)。
    • ズームアップ・ズームダウン・GPSの各ボタンの表示とクリック時の動作(SVGMapのコアプログラムのそれぞれのAPIを呼び出す)を定義。
      • ズームアップボタン:svgMap.zoomup() APIを呼び出すことで地図をズームアップする。
      • ズームダウンボタン:svgMap.zoomdown() APIを呼び出すことで地図をズームダウンする。
      • GPSボタン:svgMap.gps() APIを呼び出すことで、現在地(PCやスマートフォンの位置、特定できる場合のみ)を中心にズームアップ表示する。
    • 中心を表す十字マークを表示。
    • 上記十字マークが示している地図上の緯度・経度の表示(実際には、地図の移動時に地図の中心の緯度・経度を表示する)。
  • Container.svg
    • 表示する各レイヤ用のSVGファイルを読み込む(Coastline.svgのみを読み込んでいる)
  • Coastline.svg
    • 日本の海岸線のデータを多数の線で定義している。

チュートリアル2 海岸線地図とPOI(空港)表示

チュートリアル1の内容にPOIで空港を表示するチュートリアルです。実際の動作はこちらをクリック。

解説

• 詳細は、 チュートリアル2を参照。

あらすじ

• ファイル構成はtutrial2ディレクトリに以下のファイルがあります。
  • tutrial2.html
    • チュートリアル2用のhtml。tutrial1.htmlと同様の内容。
  • Container.svg
    • 表示する各レイヤ用のSVGファイルを読み込む(Coastline_Airport.svgのみを読み込んでいる)
  • Coastline_Airport.svg
    • チュートリアル1のCoastline.svgに空港情報を追加。
    • 空港の表示イメージの定義・実際の空港情報(緯度・経度、使用するイメージ、タイトル、クリック時の表示情報)を記述。
    • 空港情報以外にhttpリンクも記述できる。この場合、以下の内容が実行可能になる。
      • 空港イメージをクリックすると他のWebページに遷移する。
      • 現在のURLに対してハッシュを付加することで、地図の表示位置を変更できる。
      • 上記の内容を1つの空港に対して、設定することができる(クリック後に、空港情報表示かURL遷移かを選択するダイアログが表示される)

チュートリアル2b 海岸線地図とPOI(空港)表示　(レイヤリング)

チュートリアル2の内容に対して、POI(空港)と海岸線地図を別ファイルに分け、レイヤリング表示するチュートリアルです。実際の動作はこちらをクリック。

解説

• 詳細は、 チュートリアル2bを参照。

あらすじ

• ファイル構成はtutrial2bディレクトリに以下のファイルがあります。
  • tutrial2b.html
    • チュートリアル2b用のhtml。tutrial1.htmlに対して、レイヤーリスト・On/Off UIを設置している。(id="layerList"のdiv要素)
  • Container.svg
    • 表示する各レイヤ用のSVGファイルを読み込む（Airport.svgと、Coastline.svgの２個のファイル(レイヤ)を読み込んでいる）
  • Airport.svg
    • 空港情報を別ファイルとして追加。
  • Coastline.svg
    • チュートリアル1のCoastline.svg

チュートリアル3 海岸線地図のタイリングからの表示

チュートリアル1の内容を複数のタイルに分割して表示するチュートリアルです。実際の動作はこちらをクリック。

解説

• 詳細は、 チュートリアル3を参照。

あらすじ

• ファイル構成はtutrial3ディレクトリに以下のファイルがあります。
  • tutorial3.html
    • チュートリアル3用のhtml。tutrial1.htmlと同様の内容。
  • Container.svg
  • Coastline.svg
    • 以下の4×4(全16)分割したファイルを束ねるsvg。
    • タイリングについては、SVGMapのタイリングアーキテクチャを参照。
  • 0_0.svg
  • 0_1.svg
  • 0_2.svg
  • 0_3.svg
  • 1_0.svg
  • 1_1.svg
  • 1_2.svg
  • 1_3.svg
  • 2_0.svg
  • 2_1.svg
  • 2_2.svg
  • 2_3.svg
  • 3_0.svg
  • 3_1.svg
  • 3_2.svg
  • 3_3.svg

チュートリアル4 Bitmapイメージ地図表示

チュートリアル1の内容に一部のBitmapイメージ地図を重ねて表示するチュートリアルです。実際の動作はこちらをクリック。

解説

• 詳細は、 チュートリアル4を参照。

あらすじ

• ファイル構成はtutrial4ディレクトリに以下のファイルがあります。
  • tutorial4.html
    • チュートリアル4用のhtml。tutrial1.htmlと同様の内容。
  • Container.svg
    • チュートリアル1と同様のCoastline.svgと重ね合わせて表示するビットマップイメージのbitmapImage.svgを読み込む
  • Coastline.svg
    • チュートリアル1と同様の日本の海岸線データ。
  • bitmapImage.svg
    • 重ね合わせるビットマップイメージSVGファイル。以下のWebページ内にあるツールを使用して作成したもの。
    • ビットマップイメージSVGについては、こちらを参照。

チュートリアル5 WebApp Layer タイルピラミッド

SVGMapでは、レイヤーとして単純な静的SVGMapコンテンツだけでなく、レイヤーにウェブアプリケーションが紐づけることでレイヤーのSVGMapコンテンツ(のDOM)をjavaScriptコードで動的に変更できるWebApp Layer機構を用いることができます。

これを用いることで、OpenStreetMapのタイルピラミッドを用いて、伸縮・スクロールに応じ適切な地図を表示するレイヤーを、SVGMapのWebApp Layer機構によって構成するチュートリアルです。

実際の動作は、こちらをクリック。

解説

• 詳細は、 チュートリアル5を参照。

あらすじ

• ファイル構成はtutrial5ディレクトリに以下のファイルがあります。
  • tutorial5.html
    • チュートリアル5用のhtml。tutrial2b.htmlと同様の内容。
  • Container.svg
    • 外部のOpenStreetMapを表示するためのdynamicOSM_r11.svgを読み込む。
  • dynamicOSM_r11.svg
    • 外部のOpenStreetMapを表示するSVGMapコンテンツのレイヤー(中身は空で下のウェブアプリケーションがDOMを動的に構築している)
  • dynamicOSM_r11.html
    • 上記dynamicOSM_r11.svgに紐づいたウェブアプリケーション

チュートリアル6 WebApp Layer geoJSON

webAppで非同期読み込みによりGeoJSONデータを読み込み、SVGMapフレームワークのライブラリを使ってSVGMapコンテンツのDOMに変換し表示するチュートリアルです。

実際の動作は、geojson1.html をクリック。

解説

• 詳細は、 チュートリアル6を参照。

あらすじ

• geojson1.html: 周辺ライブラリ(SVGMapGIS)の読み込み
• Container.svg: クリッカブルなレイヤリングの設定
• geoJsonExample1.svg: UIを持ったレイヤーを操作するwebAppを指定する方法
• geoJsonExample1.html: svgMapGIStoolによるGeoJsonデータのSVGMapコンテンツ化

チュートリアル7 WebApp Layer ベクトルタイル

webAppで非同期読み込みによりタイル分割されたCSVのPointジオメトリファイルを読み込み、SVGMapフレームワークのライブラリを使ってSVGMapコンテンツのDOMに変換し表示するチュートリアルです。

実際の動作は、tiling1.html をクリック。

解説

• 詳細は、 チュートリアル7を参照。

あらすじ

• tiling1.html: 周辺ライブラリ(SVGMapGIS)の読み込み
• Container.svg: クリッカブルなレイヤリングの設定 (チュートリアル6とほぼ同じ)
• simpleTiling.svg: UIを持ったレイヤーを操作するwebApp チュートリアル6とほぼ同じ
• simpleTiling.html:
  • GeoJsonを読む点はチュートリアル6と同様
  • 表示領域に応じてGeoJsonを動的に読み込む
    • 小縮尺(広いエリア)表示のとき、読み込むタイルが多くなりすぎる場合は読み込みをやめ表示させない

チュートリアル8 WebApp Layer メッシュデータ

webAppで非同期読み込みにより、2次元配列形式のメッシュデータ（グリッドデータ、ラスターデータなどとも呼ばれます）のCSVファイルを読み込み、SVGMapコンテンツのDOMに変換し表示するチュートリアルです。

実際の動作は、mesh1.html をクリック。

解説

• 詳細は、 チュートリアル8を参照。

あらすじ

• このチュートリアルで扱うメッシュデータの形式
• Container.svg: クリッカブルなレイヤーを指定
• ArrayMesh.svg: webAppが紐付けられたレイヤー
• ArrayMesh.html: メッシュデータを読み込み、一個一個のメッシュをsvgのrect要素として可視化。