チュートリアル

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

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

• チュートリアルプログラムのディレクトリ構成。
• 各チュートリアル1～Nのディレクトリ下の内容を丸ごとコピーすれば、そのチュートリアルでつくられるコンテンツが動作するようになっています。
  • チュートリアルで使うファイルのダウンロード方法

 └─devinfo
　　　└─devkddi
　　　　　└─tutorials
　　　　　　　├─tutorial1   チュートリアル1
　　　　　　　 .
　　　　　　　 .
　　　　　　　└─tutorialN   チュートリアルN

基本編

SVGMap.jsを用いた地図コンテンツ(ウェブページ)を構築する　基本的なチュートリアルです。

基本編はすべて静的なファイル(コンテンツ)だけで構成されます。javascriptによるWebAppのコーディングも行いません。

また、サーバ側にもDBMSやGISサーバエンジンは設置しません。（なお、サーバ側に動的なものを設置しない点は、WebApp Layer編も同様）

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

最初に日本の海岸線を表示するチュートリアルです。

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

解説

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

あらすじ

• ファイル構成 tutorial1ディレクトリに以下のファイルがあります。** チュートリアルで使うファイルのダウンロード方法を解説します。
  • 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
    • 日本の海岸線のデータを多数の線で定義している。

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

チュートリアル1の内容に空港のPOI(Point of interest)を表示するチュートリアルです。

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

解説

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

あらすじ

• ファイル構成はtutorial2ディレクトリに以下のファイルがあります。
  • 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(空港)表示　(レイヤリング)

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

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

解説

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

あらすじ

• ファイル構成はtutorial2bディレクトリに以下のファイルがあります。
  • 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

チュートリアル2c OpenStreetMapとPOI(空港)表示　(レイヤリング)

チュートリアル2bの内容に対して、背景地図にOpenStreetMapを使用し、より実用的なページを作ってみます。

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

解説

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

あらすじ

• ファイル構成はtutrial2cディレクトリに以下のファイルがあります。
  • tutrial2c.html
• Container.svgで参照している背景地図を、Coastline.svgからdynamicOSM_r11.svgに置き換えています。
  • dynamicOSM_r11.svgはjavascriptコードが紐付けられた動的なコンテンツ(WebAppLayer)になっています。本章ではその内容は割愛し、実用的なレイヤリングを実践してみます。
    • Note: 動的なコンテンツの詳細はWebApp Layer編で解説されています。

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

チュートリアル1の内容を複数のタイルに分割して表示するチュートリアルです。

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

解説

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

あらすじ

• ファイル構成はtutorial3ディレクトリに以下のファイルがあります。
  • 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

チュートリアル3b タイリング (svgMapToolsを用いた静的タイルの作成)

前章ではすでに作成済みのタイルを用いていましたが、ここではsvgMapToolsを用いて、shapefileからタイルデータを作成し表示してみます。

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

解説

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

あらすじ

• ファイル構成はtutorial3bディレクトリディレクトリに以下のファイルがあります。
  • https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3b/
• svgMapToolsを使って、地球地図 日本のデータのうちいくつかをタイリングされたSVGMapコンテンツに変換。
  • svgMapToolsが行うタイリング(Quad Tree Composite Tiling)については、こちらの資料を参照。
• 変換したコンテンツを、レイヤーとして表示

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

チュートリアル1の内容に一部のBitmapイメージ地図を重ねて表示するチュートリアルです。

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

解説

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

あらすじ

• ファイル構成はtutrial4ディレクトリに以下のファイルがあります。
  • tutorial4.html
    • チュートリアル4用のhtml。tutrial1.htmlと同様の内容。
  • Container.svg
    • チュートリアル1と同様のCoastline.svgと重ね合わせて表示するビットマップイメージのbitmapImage.svgを読み込む
  • dynamicOSM_r11.svg
    • チュートリアル2cと同様のOpenStreetMapレイヤー

• 重ね合わせるビットマップイメージSVGファイル。
  • こちらのツールを使用して作成したもの。 ビットイメージの地図画像をSVGMapのレイヤー化するツール

WebApp Layer編

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

この機構は他のレイヤーには基本的に影響を与えないため（カプセル化）、アプリケーションのスパゲッティ化を抑制できます。

WebApp Layer編はこの機能を使うWebAppをコーディングします。　ただし、サーバ側には基本編と同様に動的な仕組みの構築は不要です。（依然としてサーバには静的なコンテンツ・WebAppのファイル(htmlやjs)を設置するだけで、DBMSや動的な機構(ウェブサービス)をサーバ上に構築しません。）

なお、SVGMap.jsはWMSやWFSのような動的に地図・地理情報を配信する仕組みやDBMSを用いた動的なサーバ(ウェブサービス)を接続して動作させることも可能です。ウェブサービス結合編を参照ください。

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

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

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

解説

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

あらすじ

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

チュートリアル6 WebApp Layer geoJSON

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

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

解説

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

あらすじ

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

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

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

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

解説

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

あらすじ

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

チュートリアル9 WebApp Layer メッシュタイル (タイル分割されたメッシュデータ)

webAppで非同期読み込みにより、タイル分割されたメッシュデータを表示するチュートリアルです。読み込むメッシュデータは地域基準メッシュをベースとしたGridded XYZデータとし、小縮尺データおよび大縮尺データを用意して簡単なタイルピラミッドを構成し、Level of Detailを実装しています。

可視化に用いるサンプルデータは統計局が公開する3次メッシュの自治体コードデータです。

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

解説

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

あらすじ

• ソースコードのディレクトリ
• このチュートリアルで扱うメッシュデータの形式
• Container.svg: クリッカブルなレイヤーを指定
• meshTileViewer.svg: webAppが紐付けられたレイヤー、webAppsは隠れた状態で起動
• meshTileViewer.html:
• meshTileViewer.js: メッシュデータを読み込み、一個一個のメッシュをsvgのrect要素として可視化。

チュートリアル9b WebApp Layer メッシュタイル カスタムダイアログ

チュートリアル9の内容に加えて、メッシュをクリックしたときに出現するダイアログをカスタマイズしています。

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

解説

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

あらすじ

• ソースコードのディレクトリ
• meshTileViewerB.html: レイヤーに紐付けられたwebApp。チュートリアル９の内容に加え、オブジェクトをクリックしたときに起動するコールバック関数を設定し、ダイアログをカスタマイズしています。

チュートリアル10 WebApp Layer メッシュデータのビットイメージ化

メッシュデータ（グリッドデータ）はラスターデータとも呼ばれるように、Webコンテンツとして使われるビットイメージデータとほぼ同等です。そこでメッシュデータを動的にビットイメージコンテンツ(PNG形式)化し地図画面上に表示するWebAppを構築してみます。性能面でのメリットがあります。

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

解説

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

あらすじ

• ソースコードのディレクトリ
• 地理院が公開するジオイド高データ(TEXTデータ)をfetchAPIで読み込み変数(Object)に保持する
• canvas要素のAPIを用いてビットイメージを構築
• dataURI化してSVGのimage要素にし、地図上に配置

チュートリアル11 WebApp Layer 地図を使った位置指定UI

チュートリアル10をベースに、地図上で位置を指定して、その場所のジオイド高を計算・表示する対話型アプリを構築します。

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

解説

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

あらすじ

• ソースコードのディレクトリ
• バイリニア補完によるメッシュデータを利用した任意位置の値の計算
• 地図上の任意の点を指定して、その位置のジオイド高を表示

ウェブサービス結合編

SVGMap.jsは高度で柔軟なタイリング機構によりJamstackのパターンを幅広く活用できるため、サーバのオーバヘッドが大きい動的なウェブサービスが必要なケースを従来のフレームワークと比べて大幅に減らすことができます。（参考:SVGMapToolsを使ったチュートリアル、Quad Tree Composite Tiling and the standardization of tiling）

それでも動的なサービスの結合が必要なことは多くあるため、ここではその方法を既存の公開ウェブサービスを利用したwebAppレイヤーとして実装してみます。（依ってこのチュートリアルでは動的なサービスの利用に留まり、動的なサービス側を構築することには踏み込みません。GeoServer, MapServer, PostgREST + PostGIS 等はその実装に利用できるでしょう。SVGMap.orgでも redisSvgMapという 高性能な動的サービスを構築するためのコードを公開しています。）

サービスを個々のレイヤーとして接続すること、そして個々のレイヤーはカプセル化されたアプリケーション(Layers as WebApps)として構成される（疎結合である）ことから、このパターンは地図に適用したコンポジットUIタイプのマイクロサービスの一種といえるでしょう。

クロスオリジンアクセス

外部のウェブサービスを結合する場合、外部サービスによってはクロスオリジンアクセスとなることを理解し対処する必要があります。

解説

• こちらに情報を掲載しましたので参照ください。

チュートリアル12 WMSの利用

指定したパラーメータに従ってビットイメージの地図データを出力するウェブサービス仕様Web Map Service (WMS)のサービスをSVGMapのレイヤーとして表示させてみます。

GEBCO Web Service(海底を含む全球地形図)を使ってみます。

まずは伸縮スクロールとは関係なく、地図コンテンツを単に表示させてみます。これはチュートリアル4と行っていることは基本的に同じです。WMSのスペックに従ってURLのクエリパートを設定するだけです。

• 実際の動作は、wms1.html をクリック。]
  • （Note: WMSが地図を生成配信するまでに少々時間がかかります）

解説

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

あらすじ

• ソースコードのディレクトリ
• WMSのパラメータとSVGMapコンテンツのビットイメージ配置のパラメータの関係を理解します
• image要素によって、WMSから取得したデータを配置します

チュートリアル13 WebApp Layer WMS 伸縮スクロールに応じた表示

WebApp Layer機構を用いれば、ウェブサービスに接続し表示領域に応じた地図コンテンツを動的に表示することができます。チュートリアル12と同じGEBCO Web Serviceを使ってみます。

• 実際の動作は、wms2.html をクリック。
  • （Note: WMSが地図を生成配信するまでに少々時間がかかります）

解説

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

あらすじ

• ソースコードのディレクトリ
• 表示領域のパラメータを伸縮スクロールの度に取得します。
• このパラメータを用いて、WMSへのクエリURLを構築します。
• image要素によって、WMSから取得したデータを配置します
• 1ステップ前のimage要素は消去します。

チュートリアル14 WebApp Layer ベクトル地理情報サービスの結合

動的にベクトルデータが生成・配信されているサービスをSVGMap.jsに結合します。ここではUSGS Hazards Programが配信している、世界の地震発生状況データ(GeoJSON版)を結合してみます。

動的なサービスと接続してはいますが、基本的にはチュートリアル6との違いはありません。

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

解説

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

あらすじ

チュートリアル6に対し、以下が相違点です。

• ソースコードのディレクトリ
• geoJsonExample2.html:
  • USGS Earthquake Hazards Program Feedの仕様に基づいたGeoJsonリクエスト用URLの生成とそのためのUI
  • 同仕様に基づいたメタデータ表示設定
  • 10分に一回更新

チュートリアル15 WebApp Layer 伸縮スクロールに応じたベクトル地理情報サービス結合

動的にベクトルデータが生成・配信されているサービスをSVGMap.jsに結合します。前章と異なり、伸縮スクロールする度にその表示領域に応じたデータをサービスから取得して表示します。

ここではNatural Resources Canadaが提供している、Geoname Service API(カナダの地名データサービス)を結合してみます。

• 実際の動作は、vectorService1.html をクリック。
  • （Note: サービスがデータを生成配信するまでに少々時間がかかります）

解説

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

あらすじ

• ソースコードのディレクトリ
• 表示領域のパラメータを伸縮スクロールの度に取得します。
• このパラメータを用いて、仕様に基づきサービスへのクエリURLを構築、CSVを取得します。
• ポイントデータをSVGのuse要素として可視化します。
• 1ステップ前のデータは消去します。

既成WebApp Layer活用編

githubのsvgmapAppLayersリポジトリでオープンソースとして公開されている、SVGMap.jsで利用できる開発済みの様々なWebApp Layerを利用する方法を説明します。

svgmapAppLayers GitHub Pagesの利用

svgmapAppLayers GitHubリポジトリは、GitHub Pagesのセットアップがなされています。そのためいくつかのレイヤーはGitHub Pagesで公開されたURLをリンクするだけで利用することができます。

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

解説

• 詳細は、 svgmapAppLayers GitHub Pagesの利用を参照。

あらすじ

• svgmapAppLayersのルートディレクトリのGitHub PagesのURLは、https://svgmap.github.io/svgmapAppLayers/
• svgmapAppLayersに登録されているレイヤーの一覧は Container.svgのソースで確認
  • svgmapAppLayersのGitHub PagesのwebAppを直接参照できないレイヤーは data-cross-origin-restrictedアトリビュートが付いています
  • クロスオリジンアクセスプロキシの設定が必要なレイヤーは、data-cross-origin-proxy-requiredアトリビュートが付いています
  • コンテナsvg生成支援webAppを使うと簡単にContainer.svgを生成できます
• 必要に応じてプロキシーを構築する

独自ホストにsvgmapAppLayersをコピーして利用

svgmapAppLayersの内容をダウンロードし、独自に用意したホストにコピー（クローン）して利用します。前章のGitHub Pagesの参照であった制限は生じません。

• 実際の動作はこちらをクリック
  • (このサンプルでは、国交省道路交通情報のレイヤー群と、CSVオーサリングツールレイヤー、basemapsのみを使用しています)

解説

• 詳細は、 独自ホストにsvgmapAppLayersをコピーして利用を参照。

あらすじ

• https://github.com/svgmap/svgmapAppLayers をダウンロード（git cloneでも良い）する
  • zipダウンロードする場合 (解凍必要)
  • git cloneの場合：　git clone git@github.com:svgmap/svgmapAppLayers.git
• 自身が運営しているホストに内容をコピーする
• Container.svgを編集し、掲載したいレイヤーを選択する
• 必要に応じてプロキシーを構築する