svg2wiki - 利用者の投稿記録 [ja]

メインページ

2026-04-22T01:37:23Z

Admin: /* SVGMap wiki */

[https://svgmap.org/ SVGMmap.orgホームページ]
=SVGMap wiki=
*[[解説書|SVGMap.js(Level0.1 Framework) API解説書]]
**[[内部機構解説]]
* DeepWikiによって生成されたソフトウェア解説書
** [https://deepwiki.com/svgmap/svgmapjs svgmapjs] : SVGMapの中核となるsvgmap.jsフレームワーク
** [https://deepwiki.com/svgmap/svgmapAppLayers svgmapAppLayers] : svgmap.jsにプラグインされる、各種レイヤーのLaWAアプリ
** [https://deepwiki.com/svgmap/svgMapDemo svgMapDemo] : svgmapjsとsvgmapAppLayersを活用した公式デモ
** [https://deepwiki.com/svgmap/svgMapTools svgMapTools] : svgmapjsに最適化された静的レイヤーを生成するJamstackパターンのバックエンドツール
** [https://deepwiki.com/svgmap/redisSvgMap redisSvgMap] : 同、動的配信Webサービス

*チュートリアル
**[https://svgmap.org/movie/ 初歩解説動画]
**[https://github.com/svgmap/svgMapTools/tree/master/tutorials SVGMapTools利用者向けチュートリアル]<br> CSVやShapefileから地図システムをプログラミングレスで構築する
**[https://svgmap.github.io/tutorials/ 開発者向けチュートリアルページ] <br> SVGMap.jsのAPIを使い、カスタマイズされた地図システムを構築 (ただしサーバサイドは基本的に静的(Jamstack))
**[[チュートリアル|開発者向けチュートリアル]](to be retired)
*[https://github.com/svgmap GitHub]
** [https://github.com/svgmap/svgmapjs svgmapjs]<br>ウェブブラウザ上で動作するSVGMapコンテンツビューア(フロントエンド, webApps)
** [https://github.com/svgmap/svgmapAppLayers svgmapAppLayers]<br>SVGMap.jsで利用できる各種レイヤー([[リンク集#.E3.82.B9.E3.83.A9.E3.82.A4.E3.83.89.E5.8B.95.E7.94.BB|Layers as Web Apps]])のライブラリ
** [https://github.com/svgmap/svgMapTools SVGMapTools]<br>shapeflieやcsvから、SVGMapコンテンツを生成するジェネレータソフト(バックエンド)
*[http://svg2.mbsrv.net/devinfo/devkddi/lvl0.1/ SVG Map Level 0.1 dev test directory]
*[[リンク集]]
* [https://svgmap.org/ ホームページ]

解説書

2026-04-17T05:13:59Z

Admin: /* S-LaWA (Strict/Sandbox LaWA / 分離モード) */

=SVGMap.js (Level0.1フレームワーク)解説書=

2018年現在のSVGMapのデータ形式、およびそれを実装した初歩的なフレームワーク(SVGMap Level0.1 Revision*)の解説を行います。

==第一章：SVGMapの基本機構と、更新部分==

この章は、JIS化されたSVGMap ([http://kikakurui.com/x7/X7197-2012-01.html JIS X.7197])や、[https://www.w3.org/Submission/2011/04/ W3C Member Submission]に対する、近年の開発成果に基づいたSVGMapのアップデートを解説しています。

[http://kikakurui.com/x7/X7197-2012-01.html JIS X.7197]もしくは、[https://www.w3.org/Submission/2011/04/ W3C Member Submission]に記載されているように、SVGMapの基本機構は主に以下の機能を　[https://ja.wikipedia.org/wiki/Scalable_Vector_Graphics 汎用的なグラフィイクスデータ記述形式SVG]に拡張することです。
* [[#地理座標系の処理|地理座標処理]]
** SVGの座標系と地理座標系との間の関係を記述する globalCoordinateSystems要素
* タイルピラミッド（タイリングとLevel of Detail）
** コンテンツを埋め込む[[#要素|image要素、animation要素]]のx,y,width,height属性への追加の振る舞いと、visible-min-zoom, visible-max-zoom属性の追加
** 詳細は [https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html こちらの論文]を参照
* 拡張された[[#レイヤー|レイヤー]]
** [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]におけるimage, animation要素の扱い
** [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が埋め込むsvgコンテンツ([[#レイヤー|レイヤーsvgコンテンツ]])の処理

===地理座標系の処理===
SVG2では地理空間座標を記述するスペック(metadata geospatial coordinate systems)が削除されました。これは、W3C SVG仕様の範囲では単なるメタデータであり、ユーザエージェントの振る舞いに何ら影響を及ぼさないことが理由です。　また、JIS SVGMapにおいては、coordinateReferenceSystem 要素が定義され、それに基づくユーザエージェントの振る舞いが規定されていますが、これは一方でW3Cのスペックではないという課題を持ちます。

これを受けて、現在提案されているSVGMapのデータ仕様では、SVG1.1の段階ですでに標準化と実装が行われたスペックを注意深く活用することにより、JIS SVGMapで規定された地理座標系に関する機能のいくつか（すべてではない）を実現する方法を用いることとしています。（[https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/globalView globalView spec]）

なお、JIS SVGMapのcoordinateReferenceSystem要素もサポートしています。

====メルカトル図法を含む任意の図法の定義とその合成機能(＞rev16)====
従来のSVGMapでは、グローバル座標系に緯度経度座標を用いた場合、使用できる図法は[https://ja.wikipedia.org/wiki/%E6%AD%A3%E8%B7%9D%E5%86%86%E7%AD%92%E5%9B%B3%E6%B3%95 PlateCarreeや正距円筒図法]でした。

一方、rev16では[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]を含む任意のSVGMapコンテンツ([[#レイヤー|レイヤーsvgコンテンツ]]やサブレイヤー、タイルなど)のglobalCoordinateSystem 要素のtransform属性に、下記のように"mercator"を指定することで、そのコンテンツの座標系がメルカトル図法([https://en.wikipedia.org/wiki/Web_Mercator_projection web mercator])であることを宣言できます。

<pre><globalCoordinateSystem srsName="http://purl.org/crs/84" transform="mercator" /></pre>

この記述がされたコンテンツのSVGの座標空間はメルカトル図法上のものとなり、この座標系上でのx,y=0,0(左上)は西経180.0度,北緯85.051129度、x,y=1,1(右下)は東経180.0度,南緯85.051129度に対応します。

=====メルカトル図法での地図表示=====
[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]で先述の宣言を行うことで、SVGMap0.1.jsはメルカトル図法で画面上に地図を表示します。このとき、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が参照する各レイヤーはメルカトル図法であっても、それ以外であっても構いません。フレームワーク内でオンザフライの図法変換が実行されます。（逆に[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]がPlateCarreeでレイヤーがメルカトルでも同様）

=====メルカトル図法のドキュメントルート要素のviewBox属性=====
* [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]において、地図の初期表示状態を記述するドキュメントルート要素(<svg>要素)のviewBoxに記述する座標も先述のメルカトル座標系で記述する必要があります。
* 一方、緯度経度で初期表示領域を記述したい場合に対応する仕様が拡張されており、その記述例は下記のとおり、'''global'''を追加します。
<pre><svg viewBox="global,138,35,2,2"></pre>

=====プロキシの設定=====
オンザフライでの図法変換では、多くのケースで非線形の座標変換が必要となります。ビットイメージ（タイルを含む）に対して子の座標変換を実行するためにSVGMap.jsではビット委イメージのピクセルにアクセスしています。これを実現するにはビットイメージがSVGMap.jsと同一オリジンにある必要があります。この条件を満たせないケースに対してフレームワークにはプロキシを設定する機能があります。([[#setProxyURLFactory|setProxyURLFactory API]]を参照)

'''[[クロスオリジンアクセス|詳細な情報をこちらに掲載しました]]'''

=====多様な図法の定義と利用=====
[[#動的な地図レイヤー|javascriptコード]]に記載されたscript要素内に定義した関数の関数名をglobalCoordinateSystem要素のtransform属性に記述することで、その関数を図法変換に用いた図法定義が可能となります。(先述のmercator属性は、フレームワークに特別に組み込まれた関数です）

たとえば、日本の平面直角座標系の地図(固有の基準点を持つ横メルカトル図法)をPlateCarreeやメルカトル図法の地図として合成・表示するケースなどに有効でしょう。

ユーザが定義できるこの関数は引数を持たない関数であり、返り値として以下の３つの関数を返す必要があります。
* {x,y} transform({x,y}) : グローバル座標(WGS84経度緯度)から、そのコンテンツの図法の座標への変換関数入出力値は.x,.yメンバを持つオブジェクト。
* {x,y} inverse({x,y}) : 同、逆変換関数
* number get scale : グローバル座標系に対するコンテンツの図法の座標系の座標値のスケール（グローバル座標系で1変化すると、コンテンツの座標系でいくつ変化するのかを表す）
* 記述例
<code><pre>
<svg ...>
<script>
function azimuthalEquidistant(){
...
return{
transform:function(inp){
var xy = transform_int(inp.y, inp.x, ...);
return{ x:xy.x, y:xy.y}
},
inverse:function(inp){
var latLng = inverse_int(inp.x, inp.y, ...);
return{ x:latLng.lng, y:latLng.lat }
},
scale: 1.0
}
}
</script>
<globalCoordinateSystem srsName="http://purl.org/crs/84" transform="azimuthalEquidistant" />
...map contents in projected coordinate system...
</svg>
</pre></code>

===ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング===
SVG2(SVG1.1 2nd Edition)では、SVG単独によるユーザエージェントという実装想定は撤廃され、よく知られているウェブブラウザの機能の一部としてのSVGデータの描画機能、HTMLやCSSと一体化されたデータ・コンテンツ　へと変化しました。一方、近代のウェブブラウザにおけるコンテンツでは古典的なhtmlに基づくコンテンツデータに対して、javascriptとDOM APIによるプログラムでコンテンツをブラウザ上で動的に生成する（ウェブアプリケーション）機構を備えます。すなわちSVGを実装する現代のユーザエージェントは例外なくウェブアプリケーションの実行が可能となりました。

そこで、SVGMapでは静的なSVGによる地図コンテンツに加え javascriptで動的に生成されるコンテンツ(ウェブアプリケーション)も地図コンテンツ（地図のレイヤー）として扱えることとしました。それにもかかわらず SVGMapは依然として複数のウェブ上で分散する地図データを一つの画面上にレイヤリングする機能（ハイパーレイヤリング）を維持しています。すなわち、ウェブアプリケーションとしての地図レイヤーをレイヤリング（マッシュアップ）する機能が拡張されます。これは、SVGMapのマッシュアップ・ハイパーレイヤリングの概念を、単に地図画像データのレイヤリングから、地図上に表現された動的なオブジェクトのマッシュアップ・レイヤリングに広げています。SVGMapではこのコンセプトを[[リンク集#.E8.A7.A3.E8.AA.AC.E9.9F.B3.E5.A3.B0|"Layers as WebApps"(LaWA : ウェブアプリケーションとしてのレイヤー)]]と呼んでいます。

このようなウェブアプリケーションは、レイヤーごとにカプセル化されることになります。これにより、'''グローバル空間'''(コンテナsvgコンテンツとそれを起動する、svgMap.jsフレームワークを読み込んだウェブページ)のスパゲッティ化なしに、多様な機能を実装していくことが可能になります。

[https://satakagi.github.io/mapsForWebWS2020-docs/De-centralizedWebMapping.html こちらの論文]も参考にしてください。

ウェブアプリケーションによる地図レイヤーを構築するには二つの方法があります。
* svg要素の'''data-controller'''属性で参照されたhtml文書
** [[#レイヤー固有ユーザインターフェース]]と呼ばれる機構です。この方法を用いること推奨します。
* svg要素内の'''script'''子要素 (将来廃止予定)
** htmlによるUIを伴わない実装の場合はscript要素を用いることができます。ただしsrcは属性には非対応、直接コードを埋め込む必要があります。

この機能を用いるにはSVGMapLevel0.1フレームワークを使用する場合は、拡張フレームワーク(SVGMapLv0.1_LayerUI2_r*.js)を更にロードする必要があります。SVGMapLevel0.2フレームワークの場合はデフォルトで機能します。

====レイヤー固有ユーザインターフェース====
SVGMap.jsではさらに、個々の地図レイヤー(レイヤーSVGコンテンツ)がそれぞれのレイヤーに特化した固有の演算ロジックだけでなく、ユーザーインターフェースも備えた[[#レイヤーsvgコンテンツの設定|HTMLを紐づける]]ことができる機能が拡張されています。UIも備えたより完全なwebAppをレイヤーとして実装できるため、カプセル化がより効果的に実現されます。（Layers as Web Apps, LaWA)

たとえば気象情報のレイヤーに対して気象情報の時間変化を表示するアニメーションのコントローラ(スライダーバー)や、気象情報の種類を選択するプルダウンメニュー　などのUIやロジックを任意に構築できます。

レイヤー固有ユーザーインターフェースは、[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]](SVGMap.jsをロードしたhtml)のレイヤー選択UIを通してwindowに設置されたiframe中に呼び出されます。

詳細は[[#レイヤー固有のUI]] を参照してください。



　

====例====
以下に、いくつかのこのような動的な地図コンテンツの例を示しましょう。
;検索によって表示スタイルを変更する機能を持ったレイヤー
: 例えばコンビニエンスストアのＰＯＩレイヤーを表示したとして、そのメタデータを読み取り、検索条件に基づいて（例えば深夜営業している店舗）の表示スタイルを変更するような検索機能を実装したレイヤー　メタデータは書くレイヤーごとに独特の値を持つため、その検索ロジックはレイヤーに固有のものとなることがあります。このケースではそのような機能をレイヤーに組み込むことを可能にします。
;CSVデータなどのレガシーな非SVGデータをHXRで取得し、ブラウザ上でSVG DOMツリーを生成するようなSVG地図コンテンツ。
: このケースでは、サーバからクライアントに送信されるデータの実体はSVG形式の地図データではなく、CSVなどのレガシーなデータです。SVG地図コンテンツには、CSVデータをSVGとして描画するためのデータ読み込み・解読・SVG DOMツリー生成機構を備えたjavascriptコードが含まれます。また、これよりはモダンなgeoJsonやKML等のデータをSVG DOMに変換することも容易に可能でしょう。これをより簡単に実現するためのライブラリも[[#svgMapGIStool.で呼び出せるAPI|svgMapGIStool]]に準備されています。
;タイリングされた地図コンテンツ
: それは、たとえば[https://wiki.openstreetmap.org/wiki/Tiles OpenStreepMapのTile Server]や、[https://en.wikipedia.org/wiki/Tile_Map_ServiceTileMap Tile Map Service]のような、特定のロジックによる数列のような法則性を持ったピラミッド状の地図タイルリソースをタイリングする地図コンテンツのことです。
: 更新されたSVGMapでは、地図コンテンツに内蔵されたjavascriptによるアプリケーションロジックとしてそれらを取り扱うことができます。タイリング規則をそのままウェブアプリケーションとしてで書き下し、スケールやビューポートに応じて適切なタイリング(配置)を行うSVG DOMツリーを生成するSVG地図コンテンツが構築できます。

=====タイリングに関するノート=====
[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html svgMapにおけるタイリング]は従来の地図フレームワークより柔軟で汎用的な概念に基づいています。
openLayersやleafletなどの従来の地図フレームワークでは、このようなタイリング機能は特定の固定的なタイリングロジックとパラメータを伴った機能として地図フレームワーク本体にハードコードされて提供されてきました。さらには地図フレームワークがこれらのタイリングロジックに強く依存したアーキテクチャを持っていました。一方、これらのロジックにはさまざまなバリエーションや最適化のための調整パラメータが存在し、これまで長らくその互換性や相互運用、更には効率の問題を抱えてきました。次のリンクでその多くの議論や多様な提案を参照できるでしょう。[https://wiki.osgeo.org/wiki/Tile_Map_Service_Specification TMSspecs@osgeowiki], [https://wiki.osgeo.org/wiki/Category:Tiling tiling@osgeowiki]
ベクターデータのタイリングにおいては、これらの課題はさらに増幅され、いまだ手法は確立していないといっても良いでしょう。たとえば、我々の研究では、Quad Tree Composite Tiling([https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-in-english スライド]、、[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html ペーパー])のような用途によってはもっと優れたタイリングの手法も見いだされています。

一方、これらのロジックはその多様なバリエーションを含め、javascriptによるプログラムコードとしては容易に記述可能です。多くの場合わずか数十行のロジックで記述できるでしょう。この程度のコードで多くのタイリングの手法が包含できるのであれば、特定のタイリング手法をフレームワークのコアに内包する・さらにはこれら特定のタイリングの手法にコアが依存する必要はなく、先述のウェブアプリケーションによる動的な地図レイヤーとして実装すれば良いであろうというのがSVGMapにおけるタイリング扱いです。3DマップのフレームワークであるCesiumはこれに似たタイリングポリシーを持っているようです。

=====SVG以外のデータサポートに関するノート=====
前章に記載した方針と同様、他の地図表示フレームワークと異なりSVGMapではSVGとして規定されたコンテンツ(もちろんビットイメージの埋め込みは可能)以外のネイティブサポートは行いません。例えばgeoJsonやKML, WKTなど地図業界でしばしば用いられるデータをSVGMapで表示したい場合は、変換ルーチンを埋め込んだ動的な地図コンテンツ（webAppレイヤー）としてそれらを扱います。SVGMap.jsの拡張モジュールである[[#svgMapGIStool.で呼び出せるAPI|SVGMapGIS.js]]には、これらのデータをwebAppsで読み込みSVGに変換するためのAPIがあります。

===トポロジースイート(地理空間情報処理)===
Rev.13で拡張

SVGMapLevel0.1 Revision 13以降では、SVGMapコンテンツに対してトポロジー演算機能(地理空間情報処理機能)を適用する拡張フレームワークが提供されます。この機能を用いるにはSVGMapLevel0.1フレームワークに加えて、拡張フレームワーク(SVGMapLv0.1_GIS_r*.js)をロードする必要があります。このフレームワークでは、[[#svgMapGIStool.で呼び出せるAPI|拡張されたAPI]]が利用可能です。フレームワークに内蔵された基本的な演算機能に加え、geoJSONと整合するインターフェースを備え、[https://github.com/bjornharrtell/jsts jsts]を組み込み、より高度な機能を実装するための機構も持ちます。

この機能を用いると、特定のレイヤーに登録されているポリゴンの範囲に入っている、特定のレイヤーのポイントをフィルタリングして表示の色を変更する。といったことが可能です。ただし、これらはすべてすでにブラウザ上にロードされている限られた量のコンテンツの中での演算に限定されます。もしもサーバ上にしかないデータに対してこれらの演算を試みたい場合、従来通りサーバサイド技術によってそれは実現すべきです。

また、主題情報を含むウェブマップコンテンツの多くのレイヤーがラスタータイルによって提供されているという現状を考慮し、このスイートはラスターレイヤーをカバレッジとして扱った空間情報処理を行う機能の実装も進められています。現在のところ、カバレッジとポイントとの間での演算が可能です。また、そのために便利なカラーピッカー等の付加的な機能の実装も進められています。

===オーサリングシステム===
Rev.14で拡張

SVGMapLevel0.1 Revision 14以降では、SVGMapコンテンツを編集するツール機能が実装された拡張フレームワークが提供されます。[[#svgMapAuthoringTool.で呼び出せるAPI|フレームワークが提供するAPI]]を使って、オーサリング機能を持ったレイヤーを作ることが可能です。コンテンツは、SVG DOMとして構築されます。なお編集したオブジェクトを保存したり登録するためには別のサービスやアプリケーションの開発が必要です。

===3D可視化システム===
Rev.15で拡張

[https://cesiumjs.org/ Cesium.js]を用いて、SVGMap.jsが表示できるすべてのコンテンツを3D可視化するシステムです。詳細解説はTBD ([[#svgMapCesiumWrapper.で呼び出せるAPI|フレームワークが提供するAPI]])

===プログレッシブウェブアプリケーション===
Rev.16で拡張

[https://developer.mozilla.org/docs/Web/Progressive_web_apps Progressive Web Apps]をサポートしたブラウザにおいて、SVGMap.jsをオフラインでも利用可能にする拡張機能です。詳細解説はTBD ([[#svgMapPWA.で呼び出せるAPI|フレームワークが提供するAPI]])

===SVGMapコンテンツのバックエンドソフトウェア (参考)===
本解説書は主にコンテンツ形式とユーザーエージェント側のソフトウェアについて解説していますが、サーバ・バックエンド側についてもここで少し言及します。

shapefileやcsvなどから、静的なSVGMapコンテンツを生成するためのソフトウェアが[https://github.com/svgmap/svgMapTools オープンソース]で準備されています。これらのソフトウェアでは、[[#タイリングに関するノート|高度なタイリング手法]]を用いた地図タイルを生成することができます。使用方法などは同リポジトリに用意されているチュートリアルを参照してください。

一方、もちろんSVGMapの仕様に準拠すれば、これらのソフトウェアに頼らず、自由にバックエンドを構築することができます。例えばよく知られた地図タイルサービスを用いたり、古典的な[https://wiki.openstreetmap.org/wiki/Web_feature_service WFS ]や[https://wiki.openstreetmap.org/wiki/WMS WMS]のような動的地図・地理空間情報サービスをベースにして比較的容易にそれらを構築することもできます。[https://github.com/svgmap/svgMapLv0.1/tree/master/appLayers SVGMap.jsのリポジトリのappLayersディレクトリ]にはそのようなシステムを構築する際のフロントエンド側の動的レイヤーのサンプルが掲載されています。

==第二章：SVGMap Revsion 0.1フレームワーク==
SVGMapは究極的には既存のすべてのウェブブラウザがネイティブの機能としてそれを備えることを目標とし、既存のHTML,CSS,SVGなどのウェブブラウザの標準規格との整合性を備え、且つ既存のWeb Mappingの規格との整合性をも備えた仕様として検討と標準化を進めています。しかし今のところまだその標準化は完遂されていないため、その完全な実装がなされたウェブブラウザは存在しません。一方、既存のウェブブザでSVGMapの機能が実行可能となるような拡張をJavascriptによるフレームワークとして構築することが可能です。SVGMap Revision 0.1フレームワークは、このようなJavascriptによるSVGMapの仕様に基づいた初歩的な制限と拡張がされた実装です。その実装はオープンソースとして[https://github.com/svgmap/svgMapLv0.1 こちらのgitubリポジトリ]で公開されています。

そのアーキテクチャの特徴は、ブラウザネイティブのSVGレンダラーを使用せず、HTML,CSS,HTMLCanvas2DAPIを用いてSVGMapが実装されている点です。この特徴は主にこのフレームワークの開発が開始された時期に起因しています。当時のウェブブラウザの多くはSVGが実装されていませんでした。また実装されていたとしても、大規模なベクトルデータのレンダリング、および伸縮スクロール・インタラクティブな操作に対する性能面での処理制御に問題がありました。これらの問題のいくつかは現在のブラウザで解消されているものがあるかもしれません。またこれらの問題の解決とともに、SVGMapフレームワークはLevel番号を上げつつよりネイティブの機能に基づいた実装に移行するかもしれません。<font size="-2">参考までに、[http://svg2.mbsrv.net/devinfo/devkddi/lvl0.5/ 実験的なネイティブのレンダラを用いた実装(2010年)]があります。</font>

SVGのベクトル描画機能は[https://github.com/canvg/canvg canvg]のpathパーサなどを引用することで実装されています。一方、地図としてあまり用いられないと想定された多くの要素やプロパティ、アトリビュートの実装が省略されています。

===追加・拡張された機能：===
====フレームワークの呼び出し====
本フレームワークを用いる場合、SVGMapコンテンツをブラウザに直接読み込ませることはできません。フレームワークを動作させるjavascriptライブラリをロードしたhtmlコンテンツ(WebApps)を準備し、そこでSVGMapコンテンツを読み込み表示させます。利用者には、このhtmlコンテンツのURLを告知します。このhtmlコンテンツを以降'''ルートhtml文書'''と呼ぶことにします。

SVGMapのフレームワークはgithubリポジトリ：https://github.com/svgmap/svgmapjs　で公開されています。

htmlコンテンツの<body>要素直下に以下の要素を配置します。
=====フレームワークを実装したjavascriptライブラリを読み込むscript要素=====
これがSVGMap.jsのコアのフレームワークを構成します。

<nowiki><script type="module">
import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

上のスクリプトで必要なモジュールが読み込まれます。[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]のwindowのメンバには、svgMapオブジェクトを設定しています。

[https://svgmap.org/devinfo/devkddi/tutorials/tutorial5_esm/tutorial5.html 実働サンプル(tutorial5_esm)]

もしくは https://github.com/svgmap/svgmapjs の内容を独自のウェブホストにコピーしそれを用いることもできます。(下の例は[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]のhtmlに対して、svgmapサブディレクトリにjsを置いた場合)
<nowiki><script type="module">
import { svgMap } from './svgmapjs/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

===== GISモジュールを利用する場合 =====
svgMap.jsの地理空間演算機能(GISモジュール)では、jsts.jsを使用しています。そのためGISモジュールを機能させるにはjsts.jsの読み込みが必要です。下記のようになります。もちろん独自のウェブホストにjstsをコピーしてそれを利用することも可能です。

<nowiki><script type="text/javascript" src="https://unpkg.com/jsts@1.6.1/dist/jsts.min.js"></script>
<script type="module">
import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

======本解説書でAPIを説明している、現在利用可能な拡張フレームワーク======
ECMA Script Module対応の内容に現在更新中

* [[#svgMapCesiumWrapper.で呼び出せるAPI|SVGMapLv0.1_CesiumWrapper_r*.js]] (実験的)
** https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/experimental/Cesium3D/SVGMapLv0.1_CesiumWrapper_r3.js
* [[#svgMapPWA.で呼び出せるAPI|SVGMapLv0.1_PWA_r*.js]] (実験的)
** https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/experimental/PWA/SVGMapLv0.1_PWA_r5.js

まだ実験的なsvgMapCesiumWrapperは、[http://www.svgmap.org/devinfo/devkddi/lvl0.1/cesiumSvgMap/top.html svgMap cesium visualizer]ページを参照ください。
SVGMapPWA(ProgressiveWebApp)については、[https://svgmap.org/devinfo/devkddi/lvl0.1/svgMapPWA/ SVGMap PWA Test]ページを参照ください。

=====SVGMapコンテンツを配置するためのdiv要素=====
id属性に"mapcanvas"を設定し、data-src属性(もしくはtitle属性(to be obsoluted))には、地図フレームワークが最初に読み込む、SVGMap.jsが表示する地図コンテンツの起点となるSVGコンテンツ（以降'''コンテナsvgコンテンツ'''と呼びます）のパスを指定したdiv要素を設置します。

コンテナsvgコンテンツはまた、'''[[#レイヤー|ここで記述するレイヤー]]'''を持つことができる特別のコンテンツです。

（要確認：地図のサイズ・配置はこのdiv要素のサイズとなります。無指定の場合は全ウィンドサイズ）
<nowiki><div id="mapcanvas" title="Container.svg"></div></nowiki>

<nowiki><div id="mapcanvas" data-src="Container.svg"></div></nowiki>

======差分データの指定======
data-custom-layers-root属性でContainer.svgに対するレイヤーの差分情報のパスを指定することができます。
もしくは、data-custom-layers-root属性に、レイヤーの差分情報が保管されているディレクトリを記述した場合、URLハッシュで差分ファイルを指定することもできます。
差分データは、[https://github.com/svgmap/svgmapjs/blob/main/SVGMapCustomLayersManager_r3module.html カスタムレイヤーマネージャ]で作成することが可能。（データ形式は後述）
<nowiki><div id="mapcanvas" data-src="Container.svg" data-custom-layers-root="./containerDif/dif0.json"></div></nowiki>

=====地図中心の照準イメージ。=====
参照する画像はあらかじめ用意されたもの以外も利用できます。
<nowiki><img id="centerSight" style="opacity:0.5" src="Xcursor.png" width="15" height="15"/></nowiki>

====任意で設置できる要素：====
=====[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]](後述)を設置するdiv要素=====
<nowiki><div id="layerList" style="left :30px; top: 10px; width:300px;height:90%; position: absolute; "></div></nowiki>
: idが上記の通りである必要があります。
　 styleは任意だが、heightは[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]が展開された状態におけるサイズとなります。格納された状態のサイズは、この要素における文字の縦幅となります。各種オプションについては[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|詳細を参照ください]]
　

=====[[#レイヤー固有のUI|レイヤー固有のUI]](後述)を設置するdiv要素=====
[[#レイヤー固有のUI|レイヤー固有のUI]]を使用するために設置するdiv要素です。

<nowiki><div id="layerSpecificUI" style="right :10px; top: 40px; width:400px;height:400px; position: absolute; background-color: white;opacity:0.8;display:none;"></nowiki>
<nowiki></div></nowiki>
: idが上記の通りである必要があります。styleは任意だが、heightはレイヤリストUIが展開され得る最大のサイズとなります。
　
=====伸縮ボタン=====
<nowiki><img id="zoomupButton" style="left: 5px; top: 5px; position: absolute;" src="zoomup.png" onclick="svgMap.zoomup()" width="20" height="20" /></nowiki>
<nowiki><img id="zoomdownButton" style="left: 5px; top: 25px; position: absolute;" src="zoomdown.png" onclick="svgMap.zoomdown()" width="20" height="20" /></nowiki>
: img要素かつidが上記の値である必要があります。
　伸縮ボタンを一回押すたびに伸縮する比率は、別途svgMap.setZoomRatio(ratio)で設定可能。
　デフォルトの比率はsqrt(3)
　
=====測位ボタン=====
<nowiki><img id="gpsButton" style="left: 5px; top: 45px; position: absolute;" src="gps.png" onclick="svgMap.gps()" width="20" height="20" /></nowiki>
: img要素かつidが上記の値である必要があります。ボタン押下で測位し、測位点を中心にして地図を表示する機能。表示の範囲は測位制度に応じて適当に設置されます。

=====グローバルメッセージ=====
レイヤー固有UIが任意のメッセージを出力可能にするために設置するエリア　[[#レイヤー固有のUI]]のAPI '''putGlobalMessage''' 参照
<nowiki><span id="globalMessage" style="font-size:10px;left:5px;bottom:16px;position:absolute;"></span></nowiki>
: idが上記の値である必要があります。
　styleは任意

=====地図中心の緯度経度値表示=====
<nowiki><font id="centerPos" size="-2" color="brown" style="left: 50px; bottom: 5px; position: absolute;" ></font></nowiki>
: idが上記の値である必要があります。
　styleは任意

=====地図スケールの表示=====
<nowiki><font id="vScale" size="-2" color="black" style="left: 5px; bottom: 28px; position: absolute;">-</font></nowiki>
: idが上記の値である必要があります。
: styleは任意
: 縦50pxに対応したスケール[Km]を表示します
: 近傍に縦50pxのスケールイメージを設置するとわかりやすいでしょう

=====レジューム機能のためのチェックボックス=====
<nowiki><form style="right:10px;top:20px;position:absolute;opacity:0.8" ></nowiki>
<nowiki><input type="checkBox" id="resumeBox" onChange="svgMap.resumeToggle(event)" autocomplete="off"/></nowiki>
<nowiki><label for="resumeBox"/>Keep and Resume view</label></nowiki>
<nowiki></form></nowiki>
: checkboxタイプのform要素であり、idが上記の通りである必要があります。レジューム機能とは、(rev16以前ではcookie、rev17以降ではlocalStorage)を用いて、前回最後に表示された状態（レイヤーの表示非表示状態、表示領域（view port）を再現する機能です。スタイルおよびlabel要素は任意

===== [[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]のためのスタイル=====
<style>
body {
font-family: Meiryo;
}
#layerTable{
background:#ffE0E0;
border: 2px solid #bbb;
}
.layerItem{
background-color: white;
}
.noGroup{
background-color: #fff0f0;
}
#layerList{
background-color: #ffff80;opacity:0.8;
}
</style>
====== [[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]を用いる場合、例えば上記のようなスタイルの定義が必要です。======
* layerList：レイヤーリストUI全体に対するスタイル
* layerTable：レイヤーリストUIの中のテーブルに対するスタイル。
* layerItem：同テーブルに表示される個々のレイヤー表示に対するスタイル
* noGroup：同レイヤー表示のうち、グループに属さないレイヤーに対するスタイル
　

====レイヤー====
SVGMapは古典的な地図情報システムのようなレイヤーの概念を備えていません。一方その上位概念ともみなせる、任意のドキュメントをツリー状に埋め込む機能を備えています。しかしそれでは古典的なユースケースを平易に表現しているとはいえないため、それをラップする古典的なレイヤーの概念と、それに基づくレイヤーユーザインターフェースのフレームワークを持ちます。

フレームワークが最初に読み込む地図コンテンツの起点となる'''[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]'''の中で、animationもしくはiframeを用いて（準拠規格に依る）埋め込まれるsvgコンテンツが、自動的にレイヤーとみなされます。いうまでもなくレイヤーの上下順はSVGコンテンツのスクリプト中での埋め込みの順番の逆順になります。

また、このコンテナsvgコンテンツが参照し埋め込んでいる、各レイヤーのSVGコンテンツのことを、'''[[#レイヤー|レイヤーsvgコンテンツ]]'''と呼ぶこととします。ここで、各[[#レイヤー|レイヤーsvgコンテンツ]]はさらに別のsvgコンテンツを埋め込むことがあります。これらのコンテンツはよくサブレイヤーSVGコンテンツもしくは単にサブレイヤーと呼ばれることもあります。

なお、Rev12以降のSVGMapLv0.1フレームワークではレイヤーフレームワークは本体と独立した実装となり、拡張や切り離しが可能となりました。以下は、標準で提供されるレイヤーフレームワークのVer2 (SVGMapLv0.1_LayerUI2_r*.js)に関して解説します。

レイヤーUIフレームワークが提供するUIは、先述のレイヤーリストUIを設置するdiv要素によって提供されます。このUIは以下の機能を持ちます。
* 折り畳み可能なレイヤーの一覧を表示する機能
* 各レイヤーの表示非表示を切り替える機能
* グルーピングされたレイヤー(後述)をグループとして表現、折り畳み、一括表示非表示する機能。
* そのレイヤーに紐づけられた[[#レイヤー固有のUI]]を出現させる機能。
* 表示されているレイヤーの個数などの情報を表示する機能

===== コンテナsvgコンテンツの記述内容とレイヤーフレームワークの振る舞い =====
* animation要素：　レイヤーとみなされる
** title属性: レイヤーの名称となる。(必須属性) title属性値は他のレイヤーと重複してはならない(ID(このコンテンツ内でのレイヤーの識別子)として振る舞う)
** xlink:href属性: レイヤーsvgコンテンツへの参照
** visibility属性 : レイヤーの初期の表示状態。UIにより変更できる (hidden or visible)
** opacity属性 : レイヤーの透明度
** x,y,width,height属性の振る舞いは共通(viewportがこの属性の値とintersectしていただロードされる)
** class属性: スペース区切りで規定値(複数)と任意値(一つ)を記述できる
*** 詳細は後述の[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供]]を参照
** data-controller属性: (Optional) [[#レイヤー固有のUI]]　の　[[#詳細]]参照
* globalCoordinateSystem要素：(1個つだけ必須要素)
** (コンテナsvgコンテンツにおける)本要素が、このフレームワークによってUser Agentに表示される地図の図法を規定する。
*** なお、それ以外のSVGコンテンツのglobalCoordinateSystem要素は、コンテナsvgコンテンツの図法への変換のために用いられる
*** より詳細は[[#地理座標系の処理]]を参照
* svg要素: (documentRoot要素)
** viewBox属性: 初期の表示範囲を指定。
*** ここに記述する座標値は、SVGの仕様に準ずるが、　拡張記述形式も使用可能　参照：[[#メルカトル図法のドキュメントルート要素のviewBox属性]]

===== レイヤーsvgコンテンツ =====
レイヤーsvgコンテンツは、[[#レイヤー固有のUI|レイヤー固有のUI]]を紐づけることができます。

====クリッカブルオブジェクト====
グラフィックスオブジェクトをクリック（タブレットの場合は、タップもしくは照準アイコンに合わせたうえでタップ）することでそれに紐づけられたインタラクティブ動作を実行する。インタラクティブ動作はフレームワークが独自に提供する、metadataフレームワークに基づく、メタデータの表示機能を対象とします。

なお、image要素(useによって間接的に設置されたimage要素を含む)は、a要素によるハイパーリンクが加えて実装されています。metadaとa要素の双方が設定されているimage要素では、どちらのインタラクティビティを発動させるかをモーダルダイアログによるユーザへの問い合わせが行われます。

====class属性によるレイヤーのグルーピング・クリッカブル機能の提供====
コンテナsvgコンテンツが参照するレイヤー（[[#レイヤー|レイヤーsvgコンテンツ]]）へのリンクを記述する要素(animationもしくはiframe要素)は、class属性によって、各レイヤーに特性を与えることができます。classはスペース区切りで複数指定することができますが、グループ名は一つしか認識されません。
;グルーピング
: 以下の属性値以外の値を記述すると、グループ名として認識され、同じグループ名を持ったレイヤーたちをグルーピングすることができます。グルーピングの効果はレイヤーＵＩにおけるグループ表現と、下記のbatch,switch特性です。グループはレイヤーリストUI上の表現に反映されます。最初に現れたグループ名がこのUIの下に表示されます。ただし地図画面上の描画の順番はこれとは別、SVGの基本的な描画順([https://www.w3.org/TR/SVG11/render.html#PaintersModel Painter Model])に準じます。
;batch
: グルーピングとともに使用します。そのグループに属するレイヤーを一括で表示非表示するための機能がレイヤーＵＩに付加されます。
;switch
: グルーピングとともに使用します。そのグループに属するレイヤーは、どれか一つしか表示されません。batchとの併存はできません。（無視されます（要確認））
;clickable
: Pathなどのベクトル図形要素はデフォルトではインタラクティビティが提供されません。クラス値にclickableを指定することでこのレイヤー（子供のsvgコンテンツを含む）の図形要素においてのみ、インタラクティビティが提供されます。提供されるインタラクティビティは、マウスによって図形をクリックしたとき、そのグラフィックス要素がクリッカブルな要因を備えているかどうかを検索し、備えている場合それに対応するアクションを起こします。
　なお、image要素(useによって間接的に設置されたimage要素を含む)は、このクラスの設定に依らず、a要素によるハイパーリンク、およびmetadataフレームワークを用いたクリッカブルオブジェクトとして機能します。
;editable
: 当該レイヤの[[#レイヤー固有のUI|レイヤー固有UI]]に[[#svgMapAuthoringTool.で呼び出せるAPI|svgMapAuthoringTool]]の図形編集オブジェクトを設置する場合、それを有効に機能させるためにはこの属性が必要です。(なお再編集機能を有効にするにはclickableも必要)

====data-nocache====
コンテナsvgコンテンツが参照するレイヤー（[[#レイヤー|レイヤーsvgコンテンツ]]）へのリンクを記述する要素(animationもしくはiframe要素)に、data-nocache属性をつけることによって、クライアントのコンテンツキャッシュを無効にすることができます。なお、無効化手段はunix-timeクエリパートをそのレイヤー下のすべてのリソースへのアクセスに付加させることによります。

====metadataフレームワーク====
データ格納効率に優れたメタデータのフレームワークが提供されます。このメタデータは先述のクリッカブルオブジェクトとしてインタラクティビティの実装に用いられます。 svgドキュメントルート要素のproperty属性にメタデータの属性名をカンマ区切りで列挙。同文書の図形要素のproperty属性に同じ順序でメタデータの値を記述します。(なお、xlink:title属性でマウスオーバーで機能する吹き出しを設置できます)

ひとつの文書に対して一つのスキーマ（メタデータの属性名とその順番）しか与えられないという制約を持ちます。（その代わり格納効率が高い）クリックやタッチ等によってデフォルトの状態ではブラウザが備えるモーダルダイアログに属性名と属性値がそれぞれ列挙された形で表示されます。metadata表示機能の拡張/カスタマイズについては、ウェブアプリケーションの開発の章で別途解説する'''setShowPoiProperty()'''関数を参照してください。

データ自体にカンマが含まれる場合はエスケープが必要です。

=====例：=====
<svg '''property="id,type,latitude,longitude,title,address,spec"''' ... >
...
<use transform="ref(svg,14118.37511,-4524.39994)" x="0" y="0" xlink:href="#syl8"
'''content="RIS/RJER,地方管理,45.2439994,141.1837511,利尻空港,北海道利尻郡利尻富
士町,1800×45(07/25)"''' xlink:title="利尻空港"/>
...
</svg>

====レイヤーリストUIの詳細====
[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.28.E5.BE.8C.E8.BF.B0.29.E3.82.92.E8.A8.AD.E7.BD.AE.E3.81.99.E3.82.8Bdiv.E8.A6.81.E7.B4.A0|レイヤーリストUIが設置されるdiv要素]]には、以下のプロパティを設定することで、UIの動作を調整するパラメータを与えることができます
* data-customizer [https://github.com/svgmap/svgmapjs/blob/main/SVGMapCustomLayersManager_r3module.html カスタムレイヤーマネージャ]の起動ボタンを設置し、プロパティ値で同ウェブアプリのパスを指定します。
* data-layerstylecontroller 各レイヤーの表示スタイルを調整するUIを設置します(値不要)
* data-hiddenfilter 表示されていないレイヤーをレイヤーリストUI上でも非表示にする機能を稼働させます(値不要)
* data-opened svgMapウェブアプリが起動した直後にレイヤーリストが開かれた状態にします
* data-fixed レイヤーリストが開かれた状態且つ閉じるボタンを表示させません(data-openedと排他)

===動作の制限・差異===
====再描画の制限====
* ブラウザネイティブのSVG描画機能に対して注意すべき点として、このSVGDOMの描画は、基本的に伸縮スクロールのタイミングでしか行われない点です。（ネイティブのSVG描画機能は60fpsで再描画する努力を行っている) そのため、再描画タイミングを意識・明示([[#refreshScreen|refreshScreen]]関数を使用)したアプリケーションの構築が必要になるケースがあります。
*関連情報
**[[内部機構解説#Zoom.2FPan_Controller:]]
**[[解説書#refreshScreen|refreshScreen]]
**[[解説書#setPreRenderController|setPreRenderController]]
**[[解説書#.E6.8B.A1.E5.BC.B5API|preRenderFunction ]]
**[[解説書#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|動的な地図レイヤー]]
**[[解説書#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|レイヤー固有のUI]]
**[[解説書#.E6.8B.A1.E5.BC.B5.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88|拡張イベント]]

===実装されている機能===
多くの機能が実装されていないため、実装されている機能、および拡張された機能をここでは列挙することとします。
====要素====
*path
*globalCoordinateSystem
*circle
*text
*defs
*animation
** 別のsvgコンテンツを取得して埋め込みます。
** コンテナsvgコンテンツで使用した場合は埋め込んだコンテンツは「レイヤー」と見做されます。
** それ以外で使用した場合はタイルやサブレイヤーとして使用できます。
** x,y,width,height属性は、SVGの仕様に基づき埋め込むコンテンツのtransformに影響を与えるとともに、下記の通り動的なコンテンツの読み込み機構が制御されます。
*** この属性で示された領域がtransform後のviewportと交差・包含した場合、その埋め込みコンテンツは動的に取得され表示されます。lazy loadの機構に相当し、タイリングメカニズムを構成します。
*** ただし、visible-min-zoom およびvisible-max-zoom属性で示された拡大率による表示条件を満たしていない場合は取得されません。level of detailの機構に相当します。（x.y,width,height属性と組み合わせることで、タイルピラミッド（ラスター、ベクターを含む）機構を実現します。詳しくは[http://kikakurui.com/x7/X7197-2012-01.html JISX.7197]、[https://www.w3.org/Submission/2011/04/ Tiling and Layering Moduleサブミッション]、もしくは[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html こちらの論文]を参照
** commonQuery属性：[[#レイヤーsvgコンテンツ]]のanimation要素でこの属性を設置すると、そのレイヤーのコンテンツを取得するすべてのGETリクエストのクエリパートにこの属性で設定した値が共通付加されます。(もしKey=Valueの形のクエリを追加したい場合は文字列として"Key="の部分も含めてこの属性値に設定します。)
*iframe
** animationと同等
*image
** 別のビットイメージコンテンツを取得して埋め込みます。
** animation属性のx,y,width,height属性と同様の追加のlazy loadの振る舞いを持ちます。
** visible-min-zoom およびvisible-max-zoom属性の振る舞いも同等です。
** xlink:href属性はspatial fragment をサポートし、(xywhによっ参照されるimageの部分を埋め込む機能をサポートします。)。もしもアスペクト比が異なった場合（ＴＢＤ）
** style:filterプロパティによる画像処理をサポートします。
** data-mercator-tile="true"　属性が設定されている場合、そのビットイメージはメルカトル図法で描画されていることを示します。
** htmlのimg要素のcrossoriginに対応する属性を持つことができます（この場合ビットイメージの埋め込みに際しoriginヘッダが送信）
*view

====属性====
*<code>ref(svg,x,y)</code> ：SVG1.2Tの[https://www.w3.org/TR/SVGTiny12/single-page.html#coords-transform-ref TransformRef]属性により、non-scaling objectが設置できます。Pointフィーチャの可視化に効果的です。　

'''TBD'''
*fill
*stroke
*arrow
*dasharray
*viewvox
*opacity
*style
**image-rendering : pixelated / image要素
**fill
**stroke
**opacity
*meta
**http-equiv="refresh" : [[#レイヤー|レイヤーsvgコンテンツ]]のみ。contentに秒数を設定することで、そのレイヤーを指定秒数ごとに(再読み込み)更新する。script要素はonloadが再実行される。　注：ブラウザのキャッシュが効く可能性を考慮して実装する必要がある。

==第三章：ウェブアプリケーションの開発==
本章はSVGMap Revsion 0.1フレームワークを用いたウェブアプリケーションの開発について解説します。
本フレームワークによる開発部分は以下に分類されます。
*[[#フレームワークの呼び出し|ルートhtml文書]]によるウェブアプリケーション(SVGMapフレームワーク)
* 動的な地図レイヤー(Layers as WebApps) : SVGコンテンツに以下のいずれかの情報を設定する
** [[#レイヤー|レイヤーsvgコンテンツ]]のドキュメントルート要素のdata-controller属性　[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|レイヤー固有のUI]]
** svgドキュメントに設置されたscript要素 [[#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|script要素による動的な地図レイヤー]]

===SVGMapフレームワーク===
[[#フレームワークの呼び出し|ルートhtml文書]]によるウェブアプリケーションはSVGMapLv0.1フレームワークを用いたウェブアプリケーションの基本であり、そのhtml文書と底傘参照されたjavascriptライブラリを読み込んだwindowが持つ''''svgMap''''という名前のインスタンスを用いてフレームワークのための拡張機能を利用することができます。

====SVGMapが持つ基幹オブジェクト====
SVGMapLv0.1フレームワークのインスタンス''''svgMap''''が持つ基幹のオブジェクトを解説します。これらの基幹オブジェクトはそれぞれゲッター(getSvgImages, getSvgImagesProps)によって取得できます。
=====svgImages[]=====
[[#getSvgImages|getSvgImages()]]により取得できる。svgImages[hashID]は、現在ローディングされているSVGドキュメント(“XML” DOMツリー(SVG DOMツリーというよりむしろ))が蓄積されているハッシュテーブル
*ハッシュID：フレームワークが任意に付番した文書ID。ただし、最初にロードされるルートのドキュメントのハッシュキーは、”root”
*なお、[[#レイヤー固有のUI]]のwebAppでは、そのレイヤーに該当するSVGドキュメントが[[#svgImage|svgImage]]で取得できる。

=====svgImagesProps[]=====
[[#getSvgImagesProps|getSvgImagesProps()]]によって取得できる。
同、個々のSVGドキュメントが持つ、各種プロパティが蓄積されているハッシュテーブル。
注記がない限り全てReadonly
*ハッシュID： svgImages同様
*なお、[[#レイヤー固有のUI]]のwebAppでは、そのレイヤーに該当するSVGドキュメントが持つ、各種プロパティが[[#svgImageProps|svgImageProps]]で取得できる。
======プロパティリスト======
*.Path コンテンツのパス（webAppsのdocument(html) rootに対する相対パス。Originが違う場合は絶対パス(クエリパートやフラグメント(ハッシュ)も含む)
*.CRS 地理座標からSVG座標に変換するための変換パラメータ
*.script SVG文書がscript要素を持つとき、そのscriptへのインターフェースが登録される。同script要素で生成されるオブジェクトに暗黙に登録されるメンバー変数については、[[#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|script要素による動的な地図レイヤー]]の章を参照
*.editable 編集可能レイヤーを示す　[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供|レイヤーのclass = editableに対応]]
*.editing 編集可能レイヤーを編集中
*.isClickable クリッカブルなレイヤーを示す
** true:設定　[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供|レイヤーのclass = clickableに対応]]
** 以下をメンバーに持つオブジェクト:ハイライト時のスタイルを設定可能(rev18以降)
*** .hilightFillStyle : ポリゴンオブジェクトのハイライト時スタイル（以下のメンバーが無い場合はハイライトしない）
**** .color : 塗りの色 (CSS の color値として解釈される文字列)
**** .lineWidth : 線幅
*** .hilightStrokeStyle : 線オブジェクトのハイライト時スタイル（以下のメンバーが無い場合はハイライトしない）
**** .color : 線の色 (CSS の color値として解釈される文字列)
**** .widthIncrement : 線幅の増加値
*.parentDocId このSVG文書を埋め込んでいる、親のSVG文書のハッシュID
*.childImages[hashID] このSVG文書が読み込んでいる、子のSVG文書(複数)
*.refresh
**.loadScript
**.timeout
**.start
*.controller レイヤー固有のUIへの(web appsのdoc rootに対する)相対パス
*.isSVG2 その文書がSVG2タイプの文書であるかどうか(CRSとembedの仕方がちがう）
*.rootLayer そのSVG文書が属する「レイヤー」を示す文書
*.scale そのSVG文書の現在のスケール。スケールはそのSVG文書の座標系と画面の座標系との間の値（地理座標系ではない）。拡大するとスケール値は大きくなる
*.preRenderControllerFunction そのSVG文書の再描画(画面更新)シーケンスの直前に実行される関数
*.hash そのレイヤーのURLのフラグメント部（この値は、レイヤ固有WebAppで変更が有効）

====利用可能API====
【TBD】 APIのリストは下記の通りです。
=====SVGMap.で呼び出せるAPI=====
======Geo2SVG======
*Geo2SVG( lat , lng , crs ) : 指定された緯度(lat)・経度(lng)・CRSより、SVG座標を計算する
======POIviewSelection======
*POIviewSelection( poi ) : 指定されたPOIの属性・リンクの表示選択画面を表示する。また、選択したイベントに従い、属性の表示または、リンク先のページを表示する。
======SVG2Geo ======
*SVG2Geo ( svgX , svgY , crs , inv ) : 指定されたSVG座標(svgX , svgY)をCRSにより、GEO座標に変換する。または、invにより逆変換する
======addEvent======
*addEvent(elm,listener,fn) : 指定された要素(elm)にイベント属性(listener)時の呼び出す関数(fn)を設定する (addEventListenerが実装されていなかったブラウザサポートの名残です)
======callFunction======
*callFunction( fname ,p1,p2,p3,p4,p5) : 指定した関数(fname)を引数(p1,p2,p3,p4,p5)を渡してフレームワーク内の任意の関数を実行する。(フレームワークの内部関数も呼び出すことができる)
======captureGISgeometries======
*captureGISgeometries( cbFunc , prop1 , prop2 , prop3 , prop4 , prop5 , prop6 , prop7 ): 現在画面上に表示中の地図コンテンツに対応した、GeoJsonのGeometryデータ構造に準拠のGISgeomerry情報をがレイヤ単位でまとまった連想配列の形で取り出す。非同期処理で、cbFuncの最初の引数に返却される。
** 連想配列のハッシュ値：レイヤID
** geomeryには、src(そのジオメトリのもととなっているSVGの図形要素), href(ビットイメージの場合のリンク)が付加される
** geoJsonのgeometryに相当する情報が含まれる（座標は[経度,緯度]）
** display="none"の図形要素は表示されていないとみなされる。また画面外にある図形要素も表示されていないとみなされる。画面に部分的に表示されている要素は表示されているものとみなされるとともにクリッピングも行われない。
** [[#captureGISgeometriesOption|captureGISgeometriesOption]](true)を設定してから実行すると、ビットイメージもジオメトリとして取得する。（ただし実データは含まれないので必要に応じて[[#getImagePixelData|getImagePixelData]]で取得する）
*** type : Coverage
*** src : 画像情報のURL
*** coordinates : transformのb,c==0の場合、当該画像の南西、北東端が設定される
*** transform : b,c!=0の場合の、画像の座標(左上隅を0,0、右下隅が画像のw,h)から地理座標([経度,緯度])への一次座標変換情報(a,b,c,d,e,f)が設定される

======captureGISgeometriesOption======
*captureGISgeometriesOption(BitImageGeometriesCaptureFlg, TreatRectAsPolygonFlg, SkipVectorRenderingFlg, captureAlsoAsBitImage): captureGISgeometriesでキャプチャするデータの取得条件を設定する。
** BitImageGeometriesCaptureFlg: ビットイメージタイルをカバレッジとして取得するか(Default:false)。captureGISgeometriesを呼び出す前に使用する。
*** 2019.5.17アップデートで、transform matrix(非対角要素あり)を持つビットイメージタイルについても必要な情報を得られるようになった。
** TreatRectAsPolygonFlg: rect要素をポリゴンとして扱う(デフォルトは円もrectもPointとして扱われる)
** SkipVectorRenderingFlg: ベクトル図形の描画をスキップする
** captureAlsoAsBitImage: polygon/polylineの図形を描画したビットイメージをレイヤー単位でカバレッジデータとして取得
*captureGISgeometriesOption(captureGISgeometriesOptionObject) : オブジェクトでも設定できる(rev18以降)（以下そのメンバー変数：全て値はboolean）
** .BitImageGeometriesCaptureFlag, .TreatRectAsPolygonFlag, .SkipVectorRendering, .captureAlsoAsBitImage　上と同様

======checkSmartphone======
*checkSmartphone() : タッチに対応したスマホブラウザなのかどうかを判別
======childDocOp======
*childDocOp(func , docHash , param1, param2 , param3 , param4 , param5) : 指定した文書をルートにして、DOM操作をその子文書に対して実行する。なおこれはlinkedDocOpの直系の子供のみ適用版(自身も適用しない)
======dynamicLoad======
*dynamicLoad( docId , parentElem ) : 指定した文書ID(docId)以下の表示に必要な文書を読み込み、指定したdiv要素(parentElem)に表示する
======escape======
*escape(str) : 以下の文字をHTMLエスケープする(&:&amp,":&quot;,':&#039;,<:&lt;,>:&gt;)
======geo2Screen======
*geo2Screen( lat ,lng ) : 地理座標を指定すると、その画面上のキャンバスの座標(px)を返す
======getBBox======
*getBBox( x , y , width , height ) : 指定された値でviewBoxを作成する

======getBasicPermanentLink======
* getBasicPermanentLink(copyLinkTextToClipboard) : 現在の表示状態(レイヤーの表示非表示および表示領域)を反映した基本的なパーマリンクを生成する
** URLオブジェクトが返却される
** copyLinkTextToClipboardがtrue場合、クリップボードにもURLがコピーされる。
** 生成されるURLは、[[#起動URLによるオプション指定]]の仕様に基づく
** 参考：[[#サブレイヤーパーマリンク]]

======getCentralGeoCoorinates======
*getCentralGeoCoorinates() : グローバル変数 rootViewBox,rootCrsから画面中心地理座標を得る
======getConversionMatrixViaGCS======
*getConversionMatrixViaGCS( fromCrs , toCrs ) : 元座標変換行列(fromCrs)から先座標変換行列(toCrs)への変換行列を作成する

======getCORSURL======
* getCORSURL(originalURL, alsoCrossoriginParam) : クロスオリジンアクセス用URLを生成する。([[#setProxyURLFactory|setProxyURLFactory]]の第4,5引数が設定されている場合)
** alsoCrossoriginParam クロスオリジンアクセスに際してoriginヘッダが必要かを取得する(この引数がある場合は.url, .crossorigin メンバを持つオブヘクトが返却される)
** レイヤー固有UIのウェブアプリなどで独自にクロスオリジンアクセスを行ってデータを取得するような場合にプロキシ経由のURLを生成するのに利用できます。
** 参考：[[#.E3.83.97.E3.83.AD.E3.82.AD.E3.82.B7.E3.81.AE.E8.A8.AD.E5.AE.9A|クロスオリジンアクセスのためのプロキシ設定]]

======getDevicePixelRatio======
*getDevicePixelRatio( docId ) : setDevicePixelRatioで設定した値を取得できる。 docIdが指定されなかった場合は全ての値が得られる

======getElementByImageId======
*getElementByImageId( XMLNode , searchId ) : 指定されたSVG文書群ノード(XMLNode)以下の属性iidが指定されたID(searchId)と等しいノードを返す

======getLoadErrorStatistics======
*getLoadErrorStatistics() : 伸縮スクロール、refreshScreenごとの、リソースの読み込み状況を取得する。
**メンバー変数: timeoutBitImagesCount,timeoutSvgDocCount,otherBitImagesCount,otherSvgDocCount

======getGeoViewBox======
*getGeoViewBox() : コンテナsvgのviewBoxをgeo変換したgeoのviewBoxを取得
======getHashByDocPath ======
*getHashByDocPath ( docPath ) : ターゲットのレイヤーのハッシュをPath名(docPath)から探し出す
======getHyperLink======
*getHyperLink( svgNode ) : 指定されたsvg文書(svgNode)から、親文書をたどり最初に取得できたハイパーリンクを取得
======getInverseMatrix======
*getInverseMatrix(matrix) : 逆行列を求める(matrix.a..f)
======getLayer======
*getLayer(layerID_Numb_Title) : [[#getLayerId|layerID]],title,番号,href(URI)のいずれかで、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]SVGDOMにおけるレイヤーの(svg:animation or svg:iframe)要素を取得する。getLayersと似ているが、getLayersのほうは任意のsvg文書(オプションなしではroot container)に対して、内包されるレイヤーのリストを返却。こちらは[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]に対して検索キーに基づいてレイヤーを返却する

======getLayerId======
*getLayerId( layerKey ) : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]における"レイヤ"概念のレイヤidを検索する。検索に用いることができるのは、getLayerと同じtitle,url,もしくはルートレイヤの要素
* layerIDはレイヤー名とは異なる、フレームワークによって任意に附番された、そのSVGMapドキュメントを識別するための文字列。このlayerIDを基に動作するAPIが多くあります。
* [[#レイヤー固有のUI]]　の　[[#layerID]] も参照

======getLayers======
*getLayers( id ) : オプションなしの場合、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーに該当する要素をリストアップし、返却する。オプションアリの場合、そのidを持つ要素を返却
======getLinearTransformMatrix======
*getLinearTransformMatrix(x1i,y1i,x2i,y2i,x3i,y3i,x1o,y1o,x2o,y2o,x3o,y3o) : ３つの基準点の変換前後の座標を与えると、それに適合する1次変換行列が得られる。(*i:変換前の座標, *o:変換後の座標)
======getMapCanvas======
*getMapCanvas() : 地図キャンバスとなる、おおもとのdiv要素の取得
======getMapCanvasSize======
*getMapCanvasSize() : 地図キャンバスのサイズ(画面サイズ)を取得
======getMouseXY======
*getMouseXY( evt ) : 指定されたイベント時のマウスの画面上の座標(px)を返す
======getNonScalingOffset======
*getNonScalingOffset(svgPoiNode) : 拡大縮小しても伸縮しない図形要素のオフセット値を取得する
======getObject======
*getObject( oname ) : 指定されたオブジェクト(oname)を取得
======getPoiPos======
*getPoiPos( svgPoiNode ) : =getNonScalingOffset
======getRoot2Geo======
*getRoot2Geo() : コンテナsvgのCRSの逆変換CRS( rootのsvg - > geo )を取得
======getRootCrs======
*getRootCrs() : コンテナsvgのCRS ( geo->rootのsvg )を取得
======getRootLayersProps======
*getRootLayersProps() : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の(animetion||iframeで構成される)レイヤー情報を取得する。Arrayが返却、並び順はsvgの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]と同じ（最初のレイヤーが一番下。selectメニュー創るときはひっくり返して使うこと）レイヤー情報：名称、表示非常時状態、レイヤーグループ、グループのフィーチャ(バッチ||スイッチ||ふつう)、編集可、編集中、対応SVGドキュメント、個別ユーザインターフェース、個別凡例
======getRootViewBox======
*getRootViewBox() : aspectを加味し実際に開いているコンテナsvgのviewBoxを取得
======getSvgImages======
*getSvgImages() : svg文書群(XML)の連想配列を取得(ハッシュキーは[[#getLayerId|layerID]]("root"以外は"i"+連番))
* (参考:[[#svgImages.5B.5D|svgImages]])

======getSvgImagesProps======
*getSvgImagesProps() : svg文書群のプロパティ( .Path,.CRS,.script,.editable,.editing,.isClickable,.parentDocId,.childImages,.controller)の連想配列を取得(ハッシュキーは[[#getLayerId|layerID]]("root"以外は"i"+連番))
* (参考:[[#svgImagesProps.5B.5D|svgImagesProps]])

======getSvgTarget======
*getSvgTarget( htmlImg ) : html文書中のimg要素(POI)を入力すると、対応するSVG文書の文書番号とその要素(use)が出力される。対応するuse要素を持つsvg文書自体を取得したい場合は.ownerDocumentする。idからhtml文書のimg要素を取得するには、Document.gelElementById(id)
======getSwLayers ======
*getSwLayers ( cat ) : swLayers[クラス名]に、クラス名ごとのレイヤー(のSVG要素)の全リストを構築する。catがある場合は、catの名称を持つもののリストのみを構築する
======getSymbols======
*getSymbols(svgDoc) : POI編集のsymbol選択を可能にするとともに、defsは、useより前に無いといけないという制約を払った
======getTickerMetadata======
*getTickerMetadata() : 現在Tickerが表示されているグラフィックスオブジェクトのメタデータを取得する
======getTransformedBox ======
*getTransformedBox ( inBox , matrix ) : 指定されたviewBox(inBox)を変換行列にてサイズ変更と移動のみでの座標変換する。b=0、c=0の場合のみ利用可能。たとえば、matrixには、svgImagePropsのCRSを設定することで、そのSVGMapコンテンツのSVG座標系でのviewPortが計算できる。このときmatrixは線形変換の係数が含まれたオブジェクトでも良いし、[[#.E5.A4.9A.E6.A7.98.E3.81.AA.E5.9B.B3.E6.B3.95.E3.81.AE.E5.AE.9A.E7.BE.A9.E3.81.A8.E5.88.A9.E7.94.A8|非線形変換のための関数が含まれたオブジェクト]]でも良い。　svgMap.getTransformedBox(svgMap.getGeoViewBox(),svgImageProps.CRS)

======getUaProp======
*getUaProp() : ブラウザの種類(isIE：IEかどうか、isSP：スマートフォンかどうか)を取得する
======getVerticalScreenScale======
*getVerticalScreenScale(screenLength) : 垂直(緯度)方向のscreenLengthに対する長さを取得する(input: px, return : Km)
======getViewBox======
*getViewBox( svgDoc ) : 指定したSVG文書のviewBoxを取得
======gps======
*gps() : ブラウザの測位APIによって測位しその点を中心に表示、表示縮尺は測位精度を元に適当に決定
======gpsCallback======
*gpsCallback(position) : GPS測位が成功した後に実行されるコールバック関数で、positionを中心とした場所を表示させる
======handleResult======
*handleResult( docId , docPath , parentElem , httpRes , parentSvgDocId ) : SVG文書を(docPathから)svg文書群とそのプロパティをHTTPXMLRequest(httpRes)から親文書(parentSvgDocId)の子文書(docId)として読込み、指定されたHTML要素(parentElem)に貼り付ける
======ignoreMapAspect======
*ignoreMapAspect() : 地図のアスペクト比を、rootSVGのviewBox( or hashのviewBox)そのものに設定する
======initLoad======
*initLoad() : load時に"一回だけ"呼ばれる初期化関数
======isIntersect======
*isIntersect( rect1, rect2 ): rect1(x,y,width,height)とrect2が交差(包含も含む)しているかどうかを返却
======linkedDocOp======
*linkedDocOp( func , docHash , param1, param2 , param3 , param4 , param5 ) : 再帰実行のルートになる文書のハッシュ(docHash)以下の子・孫・・・文書に対して、同じ処理(func( docHash , param1, param2 , param3 , param4 , param5 ))を再帰実行する関数
======loadSVG======
*loadSVG( path , id , parentElem , parentSvgDocId) : SVG文書を(pathから)svg文書群とそのプロパティを親文書(parentSvgDocId)の子文書(id)として読込み、指定されたHTML要素(parentElem)に貼り付ける
======matMul======
*matMul( m1 , m2 ) : 行列の積 x',y' = m2(m1(x,y)) = m(x,y) となる変換行列を構築
======numberFormat======
*numberFormat( number , digits ) : 指定された数値(number)を小数点以下第digit+1位を四捨五入した値を取得
======override======
*[OBSOLUTEWD] override( mname , mval ) : グローバルオブジェクトの関数プロパティでmnameという変数にmvalの値を代入する

======panMap======
* panMap( x, y, options ) : 地図をスムースにスクロールさせる
** x,y : パン量デフォルトはpx
** option.unit でパン量のコンテキストを変化できる
*** "%"||"percent"||"ratio" : 地図キャンバスに対する相対値で指定 (%,percentはパーセント, ratioは比率)
*** "canvas" : 地図キャンバス上の指定した座標を地図中心に
*** Note: 地理座標でパンする場所を変えたい場合は[[#geo2Screen]]を併用すると良い

======parseEscapedCsvLine======
*parseEscapedCsvLine(csv) : CSV 1行分文字列データ(csv)をエスケープを考慮して配列にパースする。
======refreshScreen======
*refreshScreen() : 画面の再描画を実行する（[[解説書#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90|参考情報]]）

======registLayerUiSetter======
*registLayerUiSetter( layerUIinitFunc, layerUIupdateFunc ) : レイヤー選択UI初期化関数と更新用関数を設定する
======reLoadLayer======
*reLoadLayer(layerID_Numb_Title) : 指定したレイヤー([[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーのみ。小孫レイヤーはNG)をリロードする
======resumeToggle======
*resumeToggle(evt) : 引数のイベント(evt)ターゲットのチェックボックスのチェック状態により、setResumeを実行する
======screen2Geo======
*screen2Geo( screenX , screenY ) : 画面上の座標(px)を指定すると、その地理座標を返す
======setCenterHitTest======
*setCenterHitTest(enable) : 自動中心ヒットテストの設定を変更するデフォルト:true

======setCursorCenterZooming======
*setCursorCenterZooming(enable) : (カーソル|ピンチ)位置中心ズーム機能を設定するデフォルト:false

======setCustomModal======
*setCustomModal( messageHTML , buttonMessages , callback,callbackParam) : モーダル画面を出現させ、指定されたメッセージ(messageHTML(String)もしくはdomオブジェクト(Object))、指定されたボタン(buttonMessages(Array))を表示する。ボタンが押された場合、コールバック関数(callback)を引数(クリックしたボタンのインデックス, callbackParam)を渡し呼び出す。
messageにHTML Stringだけではなく、DOM objectが使える点、ボタンに対するcallbackを設定できる点。ただしモーダルダイアログになる点が[[#showModal]]と異なる。

======setDefaultHilightStyle======
*setDefaultHilightStyle( style ) : ヒットテストなどによるオブジェクトのハイライト時のスタイルを設定する
* style : {stroke:{color,widthIncrement}, fill:{color,lineWidth,lineColor}}
** stroke : 線オブジェクトに対してハイライト時の色(color)と線幅増分(widthIncrement)
** fill : 塗りつぶしオブジェクトに対してハイライト時の色(color)、輪郭線幅(lineWidth)、輪郭線色(lineColor)

======setDevicePixelRatio======
*setDevicePixelRatio( dpr (, layerId) ) : zoom計算時に用いる(たとえば２にするとzoom値が本来の２分の１になる)変数を指定値(dpr)に設定する。ズームに応じた表示制御(visible*zoom属性等のLevel of Detail機能)に影響を与える。オプションの[[#getLayerId|layerId]]を指定すると、指定したlayerに対して別個の値を設定する。dprにnullを与えると初期値(1)にクリア。

======setGeoCenter======
*setGeoCenter( lat , lng , radius) : 中心地理座標を指定して地図を移動 (radiusは緯度方向の度1≒110Km) lat,lng:必須 radius:オプション(今の縮尺のまま移動)
======setGeoViewPort======
*setGeoViewPort( lat, lng, latSpan , lngSpan , norefresh) : 地理(グローバル)座標系で指定したエリアを包含する最小のviewportを設定する
======setLayerVisibility======
*setLayerVisibility([[#getLayerId|layerID]]_Numb_Title, visivility, [options]) : 指定した[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーの表示非表示を設定し、layerListUIのアップデートも行う
** layerID : String: [[#getLayerId|layerID]]のの文字列
** visivility : Boolean
** options : Object　以下のメンバー変数でオプションの指定が可能
*** .exec : String : 指定したレイヤーがレイヤー固有UIを持つ場合、その起動を指定できます。与えることができる文字列は[[#.E8.A9.B3.E7.B4.B0|data-controllerの起動オプション]]と同じ。
*** .hash : 指定したレイヤーを表示するときにハッシュ値を設定する

======setMapCanvas : ======
*setMapCanvas : ( mc ) : 地図キャンバスとなる、おおもとのdiv要素を指定した要素(mc)に設定
======setMapCanvasCSS======
*setMapCanvasCSS(mc) : マップキャンバスのCSS(postion、overflow、top、left、width、height)を設定
======setMapCanvasSize======
*setMapCanvasSize( mcs ) : 地図キャンバスのサイズを指定したサイズ(mcs)に設定
======setPreRenderController======
*setPreRenderController( layerID, cntFunc ) : 再描画(画面更新)シーケンスの直前に実行する関数(cntFunc)を設定する。　[[#getLayerId|layerID]]が指定されていると、そのIDをもつSVG文書に対して設定する。指定されていない場合は、全てのSVG文書に対して指定した関数が描画前に実行される。cnfFuncが無い場合は設定を解除する。また、cntFuncには再描画前制御の際に必要になるかもしれないいくつかの変数が第一引数にオブジェクトの形で渡される。(docId,scale,actualViewBox,geoViewBox,viewChanged(zoom|scroll|false) なお、SVGMapLayerUI.jsが有効化されている場合、[[#.E6.8B.A1.E5.BC.B5API|レイヤ固有UIのhtml文書中のscript内にpreRenderFunctionという関数]]がある場合、そのレイヤーを指定したsetPreRenderControllerでの関数設定と同じ振る舞いをする。なお、この処理内容は、動的レイヤー(<script>を持つSVGコンテンツ)のonload関数と同じタイミングで呼び出される関数をレイヤ固有UI等に設置できるものと考えると良い。

======setResume======
*setResume( stat ) : レジュームを実行するかどうかを引数(stat)によって設定し、cookieにレイヤー情報を保存する
======setRootLayersProps======
*setRootLayersProps(layerID_Numb_Title, visible , editing , hashOption , removeLayer , execOption ) : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の(animetion||iframeで構成される)レイヤー情報を設定する。[[#getLayerId|layerID]]_Numb_Titleは、レイヤー番号(root svg container内での順番)、[[#getLayerId|layerID]](svg文書のiid = htmlのid = selectのvalue)、タイトル名(不確実-同じ名前があるかもしれない。最初に当たったものを選択)。変化があるとtrueが返却される。
*visible , editingはtrue,false,nullのいずれか。nullの場合、その値を変化させないという意味。もしくは不合理の場合はfalseが返却される。この時classで設定されているレイヤーグループの特性(switch)に基づいた制御がかかる
*hashOption 指定したレイヤーを表示するとき、ハッシュを指定して表示する
*removeLayer 指定したレイヤーを消去する
*execOption レイヤ固有UIを持つレイヤーを表示する場合の起動方法を指定："hiddenOnLayerLoad", "onClick", "appearOnLayerLoad"のいずれか。[[#.E8.A9.B3.E7.B4.B0|詳細はこちらを参照]]

*setLayerVisibilityと異なり、アップデート(refreshScreen())は別途行う必要がある

======setRootViewBox ======
*setRootViewBox ( rvb ) : aspectを加味し実際に開いているコンテナsvgのviewBoxを指定したコンテナsvgのviewBox(rvg)に設定*setShowPoiProperty( func , docId ) : 特定のレイヤー・svg文書(docId)もしくは、全体に対して別のprop.表示関数(func)を指定する。funcが未指定の場合、設定された関数をクリアする。指定した関数は、帰り値がfalseだった場合、デフォルトprop.表示関数を再度呼び出す
======setShowPoiProperty======
*setShowPoiProperty(func , docId ): 特定のレイヤー・svg文書(いずれもdocIDで指定)もしくは、全体に対してPOIをクリックした時の表示関数をセットする
**セットされていないときは内蔵のデフォルト関数が使用される
**docId: セットされていないときはすべてのレイヤの docIdがルートレイヤに対応するものの場合はそのレイヤー下の子孫文書に対しても
**func: コールバック関数
*** funcがセットされいていないときはクリアする
*** funcの第一引数にはクリックされた要素が入る

======setSmoothZoomInterval======
*setSmoothZoomInterval(zoomInterval) : ズームアニメーションの設定(ズームイン／アウト後のタイル読み込み開始タイマー(ms))(Default:20ms)
======setSmoothZoomTransitionTime======
*setSmoothZoomTransitionTime(zoomTransitionTime) : ズームアップ[[#zoomup]]／ダウン[[#zoomdown]]／パン[[#panMap]]時の遷移時間(Default:300ms)

======setSummarizeCanvas======
*setSummarizeCanvas( val ) : 2Dベクトル図形描画用に統合キャンバス(レイヤー単位でのキャンバス統合)の使用有無を設定する。デフォルトは統合する
======setUpdateCenterPos======
*setUpdateCenterPos(func) : 中心座標書き換え関数を指定した関数に設定(デフォルト:id="centerPos"要素の文字列を適当に書き換える)
======setProxyURLFactory======
*setProxyURLFactory( documentURLviaProxyFunction, imageURLviaProxyFunction, imageCrossOriginAnonymous, imageURLviaProxyFunctionForNonlinearTransformation, imageCrossOriginAnonymousForNonlinearTransformation, LaWAfetchviaProxyFunction ): コンテンツの取得をプロキシ経由等にするために、URL(文字列)を書き換える関数を指定する。
** documentURLviaProxyFunction : svgドキュメント用のプロキシ経由のURLを生成する関数をここに設定する。<code>URLviaProxy = documentURLviaProxyFunction(URL)</code>
** imageURLviaProxyFunction : 同ビットイメージ用
** imageCrossOriginAnonymous : ビットイメージのコンテンツ取得に際しcrossorigin = "anonymous"を設定
** imageURLviaProxyFunctionForNonlinearTransformation: ビットイメージへの非線形図法変換専用のプロキシ経由URL生成関数を設定する。
** imageCrossOriginAnonymousForNonlinearTransformation : 同上のコンテンツ取得に際しcrossorigin = "anonymous"を設定
** LaWAfetchviaProxyFunction : [[#レイヤー固有ユーザインターフェース|LaWA]]内のFetch/XHRに対してプロキシ経由URL生成関数を設定する。
** 参考：[[#.E3.83.97.E3.83.AD.E3.82.AD.E3.82.B7.E3.81.AE.E8.A8.AD.E5.AE.9A|クロスオリジンアクセスのためのプロキシ設定]]

======setZoomRatio ======
*setZoomRatio ( ratio ) : zoomUp、zoomDownボタン押下時のズームレシオを指定した値(ratio)に設定する
======showModal======
*showModal( htm , maxW, maxH) : ダイアログ表示フレームワークを呼び出し、指定したhtm文字列を最大maxW,H値の中で表示する。closeボタンはフレームワークで設置される（参考[[#setCustomModal]]）（API名に反して、この関数はモーダルダイアログではない、ダイアログボックスの挙動を取る）
** htm：ダイアログ内に表示するhtmlのソース文字列、もしくはHTML DOM Elementオブジェクト
** maxW, maxH : Optional: ダイアログのサイズ（もしウィンドサイズに収まらない場合は、このサイズを下回ることがある。指定されていない場合はhtmの内容をベースにサイズが変化する


======showPage======
*showPage( hyperLink ) : 指定されたハイパーリンク先のページを表示する。ハッシュだけの場合は viewPort変化をさせる
======showUseProperty======
*showUseProperty( target ) : 指定されたPOI( target )の属性情報を表示する
======transform ======
*transform ( x , y , mat , calcSize , nonScaling) : 指定された座標を変換する。
======updateLayerListUI======
*updateLayerListUI() : レイヤーリストのUIの表示を更新したりレイヤー固有UIを設定したりする
** '''[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のsvgmap文書をDOMで直接編集したり、setRootLayersPropsで操作した場合、この関数を呼ばないとレイヤ固有UIが正しく設定されないなど多くの処理が破綻するので、必ず呼ぶ必要がある。(近い将来refreshScreenで自動的に反映されるようにする予定)'''

======zoomdown======
*zoomdown( ratio ) : 地図をスムースにズームダウン
** ratioはオプション(デフォルトは1.732)

======zoomup======
*zoomup( ratio ) : 地図をスムースにズームアップ
** ratioはオプション(デフォルトは1.732) (デフォルトは[[#setZoomRatio]]で変更可)

=====svgMapAuthoringTool.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_Authoring_r*.jsを用いた場合に使える
======cancelPointingPoiRegister======
* cancelPointingPoiRegister: initPOIregistToolで設置したUIの地図クリック・タッチでの座標入力イベント(click, touchend)をキャンセルする
======clearTools======
*clearTools: オーサリングツールを除去する。
======initGenericTool======
*initGenericTool(targetDiv,poiDocId,cbFunc,cbFuncParam,options): 点、線、多角形（オプションでそれらのバッファ付き）の総合オーサリングツールを初期化する。
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** options: {withBufferedTools,editingStyle,shapeStyle}　その他オプションをオブジェクトで指定(Optional)
*** withBufferedTools: boolean: trueでバッファ付きツールを追加
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルをブジェクトで指定
*** editingStyle: {opacity,strokeWidth,stroke,fill}：編集中の表示スタイルをブジェクトで指定
*** useXlinkTitle: trueでタイトル編集欄付きツール (Pointツールには影響しない)
*** styleEditor: trueでスタイル編集UI追加

======initPOItools======
*initPOItools(targetDiv,poiDocId,cbFunc,cbFuncParam,getPointOnly,returnSvgElement,options)　: 複数のPOIを編集するツールを初期化する (このツールは一個しか設置できない)
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** getPointOnly : ポイントを取得するのみで、その点にuse要素を設置することはしない(Optional)
** returnSvgElement : trueで編集したSVG要素などがコールバック関数に構造化され返却される(Optional)
** options : {bufferOption,editingStyle,shapeStyle}: その他のオプションをオブジェクトで指定(Optional)
*** bufferOption : trueでバッファ付きツール
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルを指定 (buffer指定時に有効)
*** styleEditor: trueでスタイル編集UI追加

======initPOIregistTool======
*initPOIregistTool(targetDiv,poiDocId,poiId,iconId,title,metaData,cbFunc,cbFuncParam,getPointOnly,returnSvgElement): 一個のPOINTオブジェクトの登録ツール・座標入力ツールを初期化する
** initPOItoolsと異なりこちらのツールは複数個設置できる
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** poiId : 登録するPOIのIDを指定
** iconId : 対象文書内のアイコンのIDを指定
** title : アイコンのタイトルを指定
** metaData : アイコンのメタデータ文字列を指定
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** getPointOnly : ポイントを取得するのみで、その点にuse要素を設置することはしない(Optional)
** returnSvgElement : trueで編集したSVG要素などがコールバック関数に構造化され返却される(Optional)
======initPolygonTools======
*initPolygonTools(targetDiv,poiDocId,cbFunc,cbFuncParam,isPolylineMode,options): POLYGONオブジェクトの"編集"ツール新規追加、削除、変更などが可能　ただし一個しか設置できない
** コンテナsvgコンテンツでclickable及びeditableを設定したレイヤーで再編集可能
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
*** 第一引数に成否、第二引数にcbFuncParam が入る。作成したPOIの情報は、SVGDOMから得るか、指定したdiv内に生成されているフォームから得る（少し使いづらいので、今後もう少し便利にするかもしれません）
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** isPolylineMode : ポリゴンではなくポリラインの編集ツールとする
** options : {bufferOption,editingStyle,shapeStyle}: その他のオプションをオブジェクトで指定(Optional)
*** bufferOption : trueでバッファ付きツール
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルを指定
*** editingStyle: {opacity,strokeWidth,stroke,fill}：編集中の表示スタイルを指定
*** useXlinkTitle: trueでタイトル編集欄付きツール
*** styleEditor: trueでスタイル編集UI追加

======setTargetObject======
*setTargetObject: TBD プログラムから編集対象オブジェクトを指示する（ただし編集中レイヤのオブジェクトに限る）
======isEditingGraphicsElement======
*isEditingGraphicsElement: 編集中のオブジェクトがあるかどうかを確認する

=====svgMapGIStool.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_GIS_r*.jsを用いた場合に使える。なお本機能拡張はJSTS([https://unpkg.com/jsts@1.6.1/dist/jsts.min.js jsts.min.js])の読み込みがさらに必要。

====== 参考：JSTS ======
[https://github.com/bjornharrtell/jsts/ JSTS](JavaScript Topology Suite)は、[https://github.com/locationtech/jts JTS](Java Topology Suite)をjavaScriptに移植した地理空間情報処理ライブラリです。地理空間情報の標準に準拠したAPIを備えています。
* [https://github.com/bjornharrtell/jsts JSTSのプロジェクトページ]
* [http://locationtech.github.io/jts/javadoc/ API](JTS用、JSTSもこれに準ずる)
* [https://www.tsusiatsoftware.net/jts/files/JTS_Library_for_Geometry_2011.pdf JTSの機能概要スライド]

====== buildDifference======
* buildDifference( sourceId1, sourceId2, targetId , strokeColor, strokeWidth, fillColor, progrssCallback, getResultAsGeoJsonCallback,getResultAsGeoJsonCallbackParam)
** JSTSのDifferenceを実行
** 引数はbuildIntersectionの該当引数に対応

======buildIntersection======
*buildIntersection( sourceId1, sourceId2, targetId , strokeColor, strokeWidth, fillColor, progrssCallback, addSourceMetadata, getResultAsGeoJsonCallback, getResultAsGeoJsonCallbackParam, options )
** sourceId1とsourceId2のレイヤーに対してJSTSのIntersectionを実行し、結果をtargetIdレイヤーにコンテンツとして出力する。性能はgetIncludedPointsより低いことが多い intersection処理の振る舞いは[https://bjornharrtell.github.io/jsts/ JSTSを参照]
** sourceId1: sourceId1レイヤーのレイヤーID
** sourceId2: sourceId2レイヤーのレイヤーID
** targetId : targetId レイヤーのレイヤーID
** strokeColor : 線の色 (なお、strokeColor, strokeWidth, fillColor のいずれも指定ない場合は描画しない(getResultAsGeoJsonCallbackがあればそこに結果を変換するのみ))
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** progrssCallback: 変換途中の状況が返されるコールバック関数。
** addSourceMetadata: sourceId1とsourceId2の各図形要素に付随しているメタデータ(contentアトリビュートの値)を演算結果の該当する図形要素に結合して付加する。
** getResultAsGeoJsonCallback: 演算結果をgeoJsonで返却を受けたい場合にコールバック関数を指定する。第一引数に結果が返る
** getResultAsGeoJsonCallbackParam : 上記コールバック関数に送りたい引数(第二引数に入力される)
** options: その他のオプションを指定するオブジェクト(下記、メンバ変数)
*** uniteSource1: trueでsourceId1のジオメトリ群をuniteしてから演算する
*** uniteSource2: trueでsourceId2のジオメトリ群をuniteしてから演算する
*** areaCompare: trueで演算結果と元のジオメトリとの面積比をメタデータに付与
*** resultGroupId: 演算結果を生成するグループを指定
*** opacity: 透明度

======captureGeometries======
*captureGeometries( cbFunc , opt ) : svgMap.captureGISgeometriesの引用
====== coverageImageXY2LatLng======
* coverageImageXY2LatLng(pixWidth , pixHeight, px,py,targetCoverage) : ビットイメージカバレッジのピクセル座標から地理座標を算出する関数
** pixWidth, pixHeight : ビットイメージカバレッジのサイズ
** px,py : ビットイメージカバレッジのピクセル座標
** targetCoverage : getInRangePolygonParts で得られた返り値を設定する
====== drawGeoJson======
* drawGeoJson( geojson , targetSvgDocId, strokeColor, strokeWidth, fillColor, POIiconId, poiTitle, metadata, parentElm, metaDictionary) : geojsonのgeomerty を指定したレイヤーに描画する
** geojson : geojson データのgeopmetry
*** メタデータ : メタデータはgeojsonの本来のメタデータ仕様(type:Featureのオブジェクトにpropertiesを設置する)で設定可能
**** また、連想配列もしくは配列の形で、関数の呼び出し時のmetadataパラメータでデフォルトのメタデータを指定できる。
**** また、geoJSONの任意のデータ階層にmetadataプロパティとしても埋め込める。
**** 加えて、propertiesを同様に任意のデータ階層に設定できる(この場合、上の階層の値は下の階層の値で上書きされる)
*** スタイリング : メタデータ仕様を拡張した、geojsonの[https://github.com/mapbox/simplestyle-spec mapbox拡張仕様]に基づいて、描画スタイルを各Featureに設定可能　上記の拡張properties拡張により、デフォルト描画スタイルを設定することも可能。
**** marker-sizeは未実装。marker-symbolではsvgコンテンツのdefsで登録済みのアイコンのIDを指定する。
**** 参考: properties.で設定できる、スタイル属性名: <code>title, description, marker-size, marker-symbol, marker-color, stroke, stroke-opacity, stroke-width, fill, fill-opacity</code>
** targetSvgDocId : 描画先のレイヤーID
** strokeColor : 線の色
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** POIiconId :　Pointの場合のアイコンID(あらかじめ指定した描画先のレイヤーのコンテンツに該当IDのアイコンが定義されている必要がある)
** poiTitle : POIのタイトル
** metadata : POIのメタデータ（連想配列）
** parentElm : (Optional) 指定した要素の子要素として描画
** metaDictionary: (Optional) メタデータとして要素に埋め込みたい属性名のリストを配列で指定する（これ以外の属性は無視するようになる）

====== drawKml======
* drawKml( kml , targetSvgDocId, strokeColor, strokeWidth, fillColor, POIiconId, poiTitle, metadata, parentElm,styleData) : KMLを指定したレイヤーに描画する
** KML : KML 描画するKMLデータのXML DOM
** targetSvgDocId : 描画先のレイヤーID
** strokeColor : 線の色
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** POIiconId :　Pointの場合のアイコンID(あらかじめ指定した描画先のレイヤーのコンテンツに該当IDのアイコンが定義されている必要がある)
** poiTitle : POIのタイトル
** metadata : POIのメタデータ文字列
** parentElm : (Optional) 指定した要素の子要素として描画
** styleData : TBD

====== getBufferedPolygon ======
* getBufferedPolygon(geom,bufferLength) : 任意のジオメトリ(geom)に対して、指定のバッファ長[m]のポリゴンジオメトリを生成する。
** Note: [[#captureGISgeometries]]で取得したデータ等も演算対象にすることができる。

====== getColorString ======
* getColorString(r,g,b) : r,g,b値から、webColor文字列を生成する

======getExcludedPoints======
*getExcludedPoints(poiID, polyID, cbFunc, param , progrssCallback , pointOnly ) : 指定したpoiID検索対象レイヤーのうち、指定したpolyIDポリゴンコンテンツレイヤーのポリゴンに内包されないものを抽出する。
** パラメータはinverseを除きgetIncludedPointsと同じ。
====== getImage======
* getImage(sourceData, renderingOptions ) : メッシュデータからビットイメージ(mage/pngのdataURL)を生成
** sourceData : 以下のデータ構造を持つオブジェクト
*** width, height メッシュのピクセル数
*** rasterData[py][px] 以下のデータ構造を持つオブジェクト
**** color 以下のデータ構造を持つオブジェクト
***** r,g,b,a
**** inRange : boolean
** renderingOptions : 以下のデータ構造を持つオブジェクト
*** drawOutOfRange : boolean レンジ内ではなくレンジ外を描画する
*** fillColor : boolean 上記条件のピクセルを指定した色で描画する
*** useCoverageColor 上記条件のピクセルをカバレッジの色で描画する

====== getImagePixelData======
* getImagePixelData(capturedSvgMapGeometry, callBackFunction, param) : ラスタ画像のビットマップデータを取得する。
** capturedSvgMapGeometry : [[#captureGISgeometries|captureGISgeometries]]で取得したビットイメージカバレッジのジオメトリ情報をもとに取得する
** callBackFunction : 取得したビットイメージデータが引数に渡される
*** data : RGBA intArray ( CanvasのContext.getImageData(...).dataで得られる情報と同様のデータ)
*** width
*** height
*** param : getImagePixelDataの第三引数がそのまま渡される

====== getIncludedPoints======
* getIncludedPoints(poiID, polyID, cbFunc, param , progrssCallback , inverse , pointOnly ) : 指定したpoiID検索対象レイヤーのうち、指定したpolyIDポリゴンコンテンツレイヤーのポリゴンに内包されるものを抽出する。
** poiID : 検索対象コンテンツレイヤーのレイヤID
** polyID : ポリゴンコンテンツレイヤーのレイヤID
** cbFunc : 検索完了後の結果を返却するコールバック関数　第一引数にポイントがGeoJasonのGeometry形式で返却され、第二引数にその個数、第三引数に(あれば)下記paramが返却される
** param : cbFuncに渡す任意パラメータ(第三引数に入る)
** progrssCallback : 変換途中の状況が返されるコールバック関数。　変換中　時々呼び出され、変換状態[%]が第一引数に渡される。
** inverse : trueで getExcludedPoints
** pointOnly : trueの場合検索対象コンテンツレイヤーのジオメトリがPoint以外の物は無視、false(もしくは未設定)の場合はPolygonやMultiLineStringのデータの場合中心点をPointと見立てて検索なお、ポリゴンやポリラインのしっかりした処理を期待する場合は下記のbuildIntersectionを使用すべき。
====== getInRangePoints======
* getInRangePoints(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : 検索対象のPointジオメトリが、検索条件としてのラスターデータ(カバレッジ)の特定色域に入っているものを検索する（ラスターGIS機能）
** poiID_or_points : 検索対象のPointジオメトリのあるレイヤIDもしくは、geoJsonのPointジオメトリ自体
** coverIDラスターデータ(カバレッジ)のレイヤーID
** rangeData : 色域 .hue, .satulation, .value, .alphaをそれぞれ指定する
*** hue: 0..360
*** satulation, value, alpha : 0..100
*** .hue, .satulation, .value, .alphaそれぞれのレンジは<nowiki>[[range1Min,Max],[range2Min,Max],...[rangenMin,Max]]</nowiki>の形で指定する。
*** データがない場合のデフォルトは<nowiki>{hue:[[0,360]],satulation: [[10,100]],value:[[10,100]],alpha:[[10,100]]}</nowiki> : アルファが10以上の全ての色
*** .outOfBoundsColor : TBD {r:255,g:0,b:0} の形で色を指定するとその色のピクセルは領域外(存在しないもの)として評価をスキップする
** cbFunc : 検索完了後の結果を返却するコールバック関数　第一引数にポイントがGeoJasonのGeometry形式で返却され、第二引数にその個数、第三引数に(あれば)下記paramが返却される
** param : cbFuncに渡す任意パラメータ(第三引数に入る)
** progrssCallback : 変換途中の状況が返されるコールバック関数。　変換中　時々呼び出され、変換状態[%]が第一引数に渡される。
** preCapturedGeometry : svgMap.captureGISgeometries()であらかじめ取得したgeometryがある場合、それを投入するとそれを用いて処理する
** computingOptions : getInRangeGeometriesOnCoverageを参照
====== getInRangeLineParts======
* getInRangeLineParts(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : ラインストリングジオメトリ用のラスターGIS機能パラメータはgetInRangePoints()と同じ
====== getInRangePolygonParts======
* getInRangePolygonParts(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : ポリゴンジオメトリ用のラスターGIS機能パラメータはgetInRangePoints()と同じ

====== getInRangeGeometriesOnCoverage======
* getInRangeGeometriesOnCoverage(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry, computingOptions ) : getInRange*を包含する関数
** computingOptions.targetVectorTypeで以下を設定することでそれぞれの機能を動かすことができる
*** 0:point,1:polyline(multiLineString),2:polygon
** computingOptions:
*** overlappingCoverage : "or"
*** splitByCoverage : boolean カバレッジが複数のビットイメージ(タイル)で構成されている場合、タイルごとに分割した答えを返す
***
====== haltComputing======
* haltComputing() : getIncludedPoints, getExcludedPoints, buildIntersectionを中断する
====== imageUrlEncoder ======
* imageUrlEncoder : オリジナルのURLから、setImageProxyの設定を加味したURLを生成する関数
====== latLng2coverageImageXY======
* latLng2coverageImageXY(pixWidth , pixHeight, lng,lat,targetCoverage) : 地理座標からビットイメージカバレッジのピクセル座標を算出する関数
** pixWidth, pixHeight : ビットイメージカバレッジのサイズ
** lng,lat : 地理座標
** targetCoverage : getInRangePolygonParts で得られた返り値を設定する
====== latLng2GeoJsonPoint======
* latLng2GeoJsonPoint(lat , lng ) : 緯度経度をGeoJsonのPointジオメトリに変換する
====== renderImages ======
* renderImages(sourceDataArray, parentElment, crs, renderingOptions) : ビットイメージカバレッジ×ポリゴンGIS(getInRangePolygonParts)の結果を直接可視化する
**sourceDataArray : [[#getInRangePolygonParts]]の結果を設定
**parentElment: SVGMapコンテンツ内で描画する親要素を設定
**crs: 描画するSVGMapコンテンツのCRS matrix(a,b,c,d,e,f)を設定
**renderingOptions : [[#getImage]]を参照

====== setImageProxy======
* setImageProxy( url , directURLls , useAnonProxy): getInRangePointsは、canvasを使った処理のため、CORSの制約にかかる場合、proxyを設定して回避できる。
** url : encodeURIComponent()でエンコードしたカバレッジのレイヤーのビットイメージのURLを付加すると、proxyとしてimageを返却してくれるURL文字列を指定
** directURLls : proxyを使わず直接アクセスするコンテンツを判定するための文字列の配列（この文字列のどれかが含まれていたら直接アクセス）
** useAnonProxy : Image.crossOrigin = "anonymous"を指定してアクセスする

====== hsv2rgb ======
* hsv2rgb(h, s, v) : hsv値からrgb値の色情報変換
** h (hue): 0..360
** s (saturation): 0..100
** v (value): 0..100
** 帰り値 : {r,g,b}: いずれも0..255

====== rgb2hsv ======
*rgb2hsv(r, g, b): RGB値からHSV値の色情報変換
** rgb: いずれも0..255
** 帰り値:{h,s,v}
*** h:0..360
*** s,v: いずれも0..100

=====svgMapLayerUI.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_LayerUI2_r*.jsを用いた場合に使える。
======assignLayerSpecificUiElement======
* >r4
* assignLayerSpecificUiElement( targetElement , isInline , autoSizing) : レイヤ固有UIを出力する先のDOM要素を指定する
** この関数は、レイヤーUIの初期化前～[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]読み込み前に呼ばれる必要がある（すなわち、load時のみ有効）
** targetElement : 出力先要素：出力先はsvgMapオブジェクトを持つwindowでなくても良い
** isInline : boolean 指定した要素をインライン要素として扱い、UIが存在しえない場合は消える。レイヤ固有UIを消すボタンも付与される
** autoSizing : boolean 自動リサイズを有効化

======customEvents======
*customEvents() : サポートしているイベントを返却

======launchController======
* >r4
* launchController(layerID, cbf) : レイヤ固有UIを出現させる。ただしそのレイヤーがレイヤー固有UIを持っており、且つ表示状態になっている必要がある。
** [[#getLayerId|layerID]] : レイヤーのID
** cbf (optional) : レイヤー固有UIが生成されたとき、第一引数にレイヤー固有UIのwindowオブジェクトが返却される。

======layerSpecificUIhide======
* layerSpecificUIhide() : レイヤ固有UIを隠す

======setLayerListmessage======
* setLayerListmessage( head , foot ) : head 及び footで指定した文字列を　レイヤリストUIのトップのメッセージに設定する。[head]numberOfVisibleLayers[foot] : デフォルトはhead :"Layer List: ", foot :" layers visible"

=====svgMapPWA.で呼び出せるAPI=====
'''実験的機能段階''' :
; 以下のAPIは、SVGMapLv0.1_PWA_r*.jsを用いた場合に使える。
:- SVGMap.jsをPrpgressiveWebApps(PWA)として動作させ、オフラインでも利用できるウェブアプリを構築することができる。
:- Progressive Web Appsが機能するブラウザで有効。Chrome,Edge(PC,Android), Safari(Apple製品)
:- iOS SafariのPWAネイティブキャッシュの50MB制限を回避するIndexedDBによる実装がなされており、そのクォータが許す限りの(iOSでも数百MB以上の)オフライン地図コンテンツを利用できる
:- 同じく、iOS Safariが持たないsyncの一部を代替する機能(オンラインになったらポストする機能)が利用できる
:- zip圧縮されたオフラインコンテンツパッケージ読み込み機構を使う場合はzip.jsおよびそれが利用するArrayBufferReader.js,deflate.js,inflate.jsの読み込みが必要。
:- <code>serviceWorkerPath</code>グローバル変数で、専用のサービスワーカープログラムsvgMapServiceWorker_r*.jsのパスを指定する必要がある。
::- サービスワーカー～svgMapServiceWorker_r*.jsは、同jsと同じディレクトリにあるbaseResources.jsonを読み込み初期設定を行う
::- baseResources.json：　srcにサービスワーカーネイティブのキャッシュに読み込むべきリソースのリストを記載、mapCacheTargetに、SVGMapのコンテンツキャッシュを稼働させるターゲットとなるパスを記載
::-baseResources.jsonの例
<pre>
{
"src": [
"index.html",
"Container_mercator_org.svg",
"SVGMapLv0.1_PWA_r5.js",
"js/SVGMapLv0.1_r16.js",
"js/SVGMapLv0.1_LayerUI2_r3.js",
"js/SVGMapLv0.1_GIS_r2.js",
"js/SVGMapLv0.1_Authoring_r7.js",
"js/jsts.min.js",
"imgs/gps.png",
"imgs/gps_s.png",
"imgs/Xcursor.png",
"imgs/zoomdown.png",
"imgs/zoomdown_s.png",
"imgs/zoomup.png",
"imgs/zoomup_s.png",
"imgs/mappin.png"
],
"mapCacheTarget":"localMaps/"
}
</pre>

* autoPilotDownloader
*:エリアと縮尺を指定し、オートパイロットで地図画面をスクロールさせることで、オフラインキャッシュに地図を保存する動作を自動的に行う機能のオブジェクト。レイヤー固有UIでの利用などを想定しており、以下のメンバー関数を持つ
** halt()
**:オートパイロット動作を中断させる
** searchAll(initialViewBox, minScale, maxScale)
**:- initialViewBoxで指定したエリアを、minScale、maxScaleの間でオートパイロットをかけキャッシュに保存させる
**:- minScale, maxScaleは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の座標系におけるscale値(getRootScale()で取れるもの)
** setProgressCallBack(cbf)
**:オートパイロット動作中の進行状況をcbfの第一引数に返却する
* async clearOfflineContents()
*:SVGMapのオフラインコンテンツを全消去する。SVGMapのオフラインコンテンツはserviceWorkerのネイティブキャッシュ機構とは別の独自キャッシュ機構(indexedDBを使用した機構)として構築される
* clearCache()
*:（未実装）serviceWorkerのネイティブキャッシュを全消去する
* cacheDB
*:SVGMapのオフラインコンテンツデータベースのオブジェクト。IndexedDBをpromise化した簡略的APIをメンバ関数として持つ。
** clear()
**:データベースをクリア
** async connect()
**:データベースに接続
** async delete(path)
**:pathで指定したコンテンツを削除
** async get(path)
**:pathで指定したコンテンツ(blob)を取得
** async getAll()
**:全コンテンツを取得
** async getAllKeys()
**:全Key(コンテンツのpath)を取得
** async put({idCol:path,contentBlob:blobdata})
**:コンテンツ(blobdata)をpathをキーにして格納(上書き)
* deleteCachedLayerMeta()
* async disableCache()
*:serviceWorkerのネイティブのキャッシュ機構とSVGMapの独自キャッシュ機構を全て無効化する
* async enableCache()
*:serviceWorkerのネイティブのキャッシュ機構とSVGMapの独自キャッシュ機構を全て有効化する
* getCachedLayerMeta
* async getPostQueue()
*:postMessageWhenConnectedでポストをリクエストし、未完了のリクエストを取得する
* getRootScale()
*:svgMapの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]座標系における現在の表示のscaleを取得
* getScales()
*:読み込み済み文書全てのscaleを連想配列で返す(hashKeyはdocID)
* getVisibleLayers
* getStorageUsage
* async loadOfflineContents(contentUrlList, overwrite, progressCallBack)
*:-contentUrlListで指定したコンテンツをオフラインキャッシュに読み込む(自ドメイン内のコンテンツ限定)
*:-overwriteをtrueにすると上書きする。progressCallBackは指定した関数の第一引数に進捗状況を返却
* async loadZippedOfflineContents(zip_url,progressCallBack)
*:保存してあるディレクトリに対して、そのzipファイルの中のディレクトリ構造で、コンテンツがあるものと見做したURLもつキャッシュを形成する
* async postMessageWhenConnected(URL, postData, postCompleteCBF)
*:-postDataデータをURLにポストする　オンライン時は即座にポスト、オフライン時はいったんindexedDBにポストデータを格納後オンラインになったらポストする。
*:-postDataは、文字列(この場合form-data決め打ちのリクエスト)、もしくは .bodyメンバー変数を持ったオブジェクト
*:-この場合は .bodyはFormDataタイプのインスタンスもしくは任意のデータ、そしてfetchAPIに準じた.headers, .methodをメンバー変数に持たせることができる。(methodでGETを指定すればGETリクエストも可能)またserviceWorkerが管理する
* async setCachedLayerMeta
* setScaleTrim
* async updateCacheIndex()

=====svgMapCustomLayersManager.で呼び出せるAPI=====

'''実験的機能段階''' :

基本的なフレームワークで提供されているレジューム機能を更に強化し、レイヤーの表示非表示状態、初期表示エリア(viewPort)等をユースケースなどに応じて複数登録、切り替えを可能とする機能を提供します。更に[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]をさらに積極的に編集し、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルに無いレイヤーを追加したり、削除したりした、カスタマイズされた[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]を差分情報の形でlocalStorageに保存・利用する機能を提供します。

:- 以下のAPIは、SVGMapLv0.1_CustomLayersManager_r*.jsを用いた場合に使用できます。
:- SVGMapLv0.1_CustomLayersManager_r*.jsは、svgMapオブジェクトもつwindowで使用するとともに、svgMapオブジェクト用のカスタムレイヤーセットを構築するための別ページのwebAppsにおいても使用することができます。
:- 上記svgMapオブジェクト用のカスタムレイヤーセットを構築するためのwebApps用としてSVGMapCustomLayersManagerApp_r*.js、SVGMapCustomLayersManager.htmlが用意されています。

*registCustomLayer(customLayerObject, applyImmediately, customLayerMetadata)
*applyCustomLayers(customLayersObject, baseLayersPropertySet)
*getDetailedLayersPropertySet(rootContainerDoc, ignoreIid)
*getDetailedLayersPropertySetFromPath(rootContainerUrl, ignoreIid)
*getDif( edit, orig )
*originalLayersProperty
*deepCopy(obj)
*deleteAllCustomLayerSettings()
*deleteCustomLayerSetting( key )
*setCustomLayerSettingIndex(key)
*buildCustomLayersSetting(difObj, editedLayersProperty, originalLayersProperty)
*loadCustomLayerSettings()
*storeCustomLayerSettings( settings )
*getElementByAttr( XMLNode , searchId , atName )

*applyCustomLayersSettingsToCurrentMapView(lpEdit, svgMapWin)
*loadCustomGeoViewboxes()
*storeCustomGeoViewboxes(customViewBoxes)
*buildCustomGeoViewboxSettingObject(key, title, geoViewBoxX, geoViewBoxY, geoViewBoxWidth, geoViewBoxHeight)

====起動URLによるオプション指定====
svgMapフレームワークを導入したhtmlコンテンツは、URLの"#"以降であるフラグメント識別子によってフレームワークにいくつかの起動時オプションを提示することができます。
通常、これらのオプションは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]における記述で示されています。フラグメント識別子による指示はそれをオーバーライドします。
一般的な"&"による区切りで複数の複数のパラメータを指定できます。
=====表示範囲の指定=====
global座標系によって表示範囲を指示することができます。　標準のフラグメント記述に対してそれぞれ"global"文字列の追加が必要です。
なおglobal座標系におけるxは一般的に経度、yは一般的に緯度に対応することに留意してください。
*メディアフラグメントによる指定 : xywh=global:<xmin>,<ymin>,<width>,<height>
*svgViewフラグメントによる指定 : svgView(viewbox(global,<xmin>,<ymin>,<width>,<height>))

=====表示・非表示レイヤーの指定=====
* 表示すべきレイヤー: visibleLayer=<layer title>,<layer title>...
* 非表示すべきレイヤー: hiddenLayer=<layer title>,<layer title>...
* 個々のレイヤーに対するフラグメントの提示 : それぞれのレイヤーに対しては、さらにフラグメントを追加することができます。ただし"="は"%3D",&は"%26"でURLエンコードしてください。<layer title>#fragment1=val1&fragment2=val2　⇒<layer title>#fragment1%3Dval1%26fragment2%3Dval2　

===レイヤー固有のUI===
"[https://satakagi.github.io/mapsForWebWS2020-docs/De-centralizedWebMapping.html#:~:text=To%20achieve%20this,everything%20in%20detail. Layers as WebApps]"(ウェブアプリケーションとしてのレイヤー: webApp Layer)を実現する機構　（LaWA、レイヤーwebApp、webAppレイヤー、アプリレイヤー、レイヤーアプリなどと呼ぶこともある）（[[#レイヤー固有ユーザインターフェース|こちらも参照]]）

====概要====
[[#レイヤー|レイヤーsvgコンテンツ]](フレームワークが最初に読み込むコンテナsvgコンテンツの中で埋め込まれるsvgコンテンツ)に対して、[[#動的な地図レイヤー|動的な地図レイヤー]]の一種として、そのレイヤーに固有の処理ロジックや、可視化・描画ロジック　そしてユーザインターフェースも含むことができる　htmlによるウェブアプリを定義できる機能です。

javascriptを使った独自のロジックによる動的な可視化データの生成が実装可能です。

また、この機能はそのレイヤーの設定やインタラクティブ操作のための表示やユーザインターフェースを地図表現とは別に表示したい場合にも用いることができます。従来のアーキテクチャでは、もしもこのようなレイヤーに固有のUIが必要だった場合でも、地図アプリケーション全体の処理や表示を司るグローバルな空間(ルートhtmlコンテンツのwindowオブジェクト直下)に、サイドエフェクトを考慮しながらコードを組み込む必要があり、結果としてコードのスパゲッティ化が懸念されました。SVGMapのレイヤー固有UIは、レイヤーごとにUIとそのロジックをカプセル化可能にし、これを排除することが可能です。(カプセル化はiframeによって行われます。)さらに、レイヤー固有UIによるウェブアプリは自律分散的な配置にも対応し、UIを備えた地図レイヤーにまでハイパーレイヤリングアーキテクチャを拡張します。

なお、[[#動的な地図レイヤー]]は、htmlによるユーザーインターフェースを持つことができませんが、同種のウェブアプリケーションのカプセル化の効果があります。

このＵＩには主に二つの用途が考えられます。
;凡例
: 各レイヤーはその地図表現の意味を示すための固有の凡例を持つことがあります。その凡例を表示するために利用できます。
;ウェブアプリケーションによる動的な地図レイヤー
: 先述のように、ウェブアプリケーションによる動的な地図レイヤーは独自のロジックによってそのレイヤーの地図表現を動的に変化させる機能を備えることができます。この場合、例えばエンドユーザがFORMで入力したフィルター条件ををもとに表現を変更するようなケースも考えられます。
これらケースでは、そのフォームや凡例は、[[#フレームワークの呼び出し|ルートhtml文書]]に設置することは可能ですが、もしも多くのレイヤーを表示するアプリケーションであり、それらのレイヤーがそれぞれ固有のフィルタ条件を持つような場合、[[#フレームワークの呼び出し|ルートhtml文書]]は、それぞれのレイヤーをフィルタリングするためのFORMとそのフィルタリングロジックをすべて埋め込む必要があり、画面のデザイン、およびロジックのコーディングの双方がスパゲッティ化する可能性があります。さらに、もしもこのアプリケーションに後日さらにレイヤーが追加される場合、スパゲッティ化の問題はより深刻になるかもしれません。凡例の表示についても同様の問題が考えられます。本レイヤー固有ＵＩはこのような問題に対するソリューションを提供しています。

この機能は、ベースのフレームワークrev12以上　且つLayerUI2フレームワークを読み込み、[[#レイヤー固有のUI(後述)を設置するdiv要素|id="layerSpecificUI"のdiv要素]]が[[#フレームワークの呼び出し|ルートhtml文書]]に設置されているときに使用できます。

;サンプル
:[[チュートリアル#WebApp_Layer.E7.B7.A8|開発者向けチュートリアル]]でいくつかのサンプルを見ることができます。

====[[#レイヤー|レイヤーsvgコンテンツ]]での指定====
レイヤー固有UIの設置には、[[#レイヤー|レイヤーsvgコンテンツ]](のルート要素(svg要素))に、data-controller属性を与え、そこにそのレイヤー固有のUIのためのhtml文書のリンク(ただしsame origin)を設置します。またサブセットとして、data-controller属性にビットイメージ(.pngもしくは.jpg, .jpeg, .gif拡張子を持つビットイメージ)へのリンクを与えることでレイヤーの凡例情報の提示をすることもできます。

[[#レイヤー固有のUI(後述)を設置するdiv要素|レイヤー固有ＵＩの表示部位]]には、このように指定されたリソース(ビットイメージもしくはhtml)がレイヤーの選択の状況に応じて、切り替わり表示されます。レイヤーがONになっている間、それに紐付けられたレイヤー固有UI(htmkのwindowオブジェクト)が存在し続け、そのレイヤーのsvgDOMの操作やUIの提供が可能です。

なお、標準のフレームワークでは、表示中のレイヤーの中の選択された一つのUIのみが地図のメインのwindowに配置されたiframeで表示されます。表示中ではあっても選択されていないレイヤーのUI(iframe)は非表示状態で動作しています。

'''サンプル'''
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="9000.0 -9000.0 9000.0 9000.0" go:dataArea="9000.0 -9000.0 9000.0 9000.0"
'''data-controller="../Self-GS-POI_controller.html"'''>
.....

====レイヤー固有のUIのためのhtml文書(webApp)の構造・作法====
レイヤー固有のUIとなるhtml文書は、下記の通り、その初期化等を行うライブラリ <code>svgMapLayerLib.js</code> を読み込む必要があります。（現在のところ通常のjavascriptライブラリのみ提供されます）
CDNからライブラリを読む場合は、<code>https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/svgMapLayerLib.js</code>です。

'''サンプル'''
<!doctype html>
<html>
...
<script src="https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/svgMapLayerLib.js"></script>
...
</html>

====LaWAとS-LaWA（サンドボックス化LaWA）のアーキテクチャ====
SVGMapにおけるレイヤー固有UI（LaWA: Layers as Web Apps）には、セキュリティと用途に応じた2つの動作モードが存在します。2026年のアップデートにより、Web標準のセキュリティモデル（クロスオリジン制約）に準拠した'''S-LaWA（サンドボックス化LaWA）'''が導入されました。 (2026/4/16現在 dev2リリース段階)

=====T-LaWA (Tight-coupled LaWA / 従来の密結合モード)=====
* 親のSVGMapフレームワークと同じオリジン（ドメイン）で動作する、従来型のレイヤーWebAppです。
* iframeのJavaScriptコンテキストに、親フレームワークから直接APIオブジェクトが注入されます。
* 全ての[[#拡張API]]にアクセスでき、複雑なDOM操作や関数渡しが可能ですが、サードパーティ製のレイヤーを読み込む際にはセキュリティ上のリスク（XSS等）を伴います。

=====S-LaWA (Strict/Sandbox LaWA / 分離モード)=====
* 親のSVGMapフレームワークとは異なるオリジンで動作することを前提とした、セキュアなレイヤーWebAppです。
* iframeは完全に隔離（サンドボックス化）され、親フレームワークとの通信は全て非同期メッセージング（postMessage）を介して行われます。
* 悪意のあるスクリプトから親フレームワークを保護できるため、外部のサードパーティ製レイヤーを安全に統合できます。
* 代わりに直接的なオブジェクト参照や関数の受け渡しが禁止されるため、[[#拡張API]]の利用に強い制限がかかります（前節の「S-LaWAでの制限」を参照）。
* レイヤーSVGファイル内に直接記述された <script> 要素は無効化されます。

======【発展機能：S-LaWA Level 2 (CORS非依存モード)】======
* S-LaWAのサブモードとして、配信元の外部サーバーにCORS（Cross-Origin Resource Sharing）設定がされていないSVGレイヤーであっても、安全に読み込んで統合できる仕組みです。
* コンテナ側の <code>animation</code> 要素に <code>data-controller</code> 属性が指定されている場合、SVGMapフレームワークはCORSエラーを回避することが可能です。実際のSVG及びhtmlの取得と展開は全てサンドボックス内のS-LaWAで行われ、サーバー側の設定に依存しないクロスオリジン連携を実現します。

===== 動作モードの指定 (data-lawa-mode) =====
レイヤーがどちらのモードで起動するかは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]内でそのレイヤーを参照している '''<code>animation</code> 要素の <code>xlink:href</code> の値（URLのオリジン）'''、もしくは同要素に付与する '''<code>data-lawa-mode</code>''' 属性で制御できます。

<code>data-lawa-mode="auto"</code> (未指定時のデフォルト): レイヤー（コントローラ）のURLが親フレームワークと同一オリジンであれば '''T-LaWA''' として、クロスオリジンであれば自動的に '''S-LaWA''' として起動します。

<code>data-lawa-mode="isolated"</code>: 同一オリジンであっても、強制的に '''S-LaWA''' として隔離して起動します（開発時のテスト等に有用です）。

<code>data-lawa-mode="tight"</code>: 強制的に '''T-LaWA''' として起動を試みます。（※クロスオリジン環境でこれを指定した場合は、適切なCORS設定やプロキシサーバーの利用が必須となります）

====詳細====

レイヤー固有UIは、SVGMapのグローバルなwindowに設置されたiframeの中で動作します。このiframeの性質と利用できるAPIは、前述の動作モード（T-LaWAかS-LaWAか）によって大きく異なります。

どのような環境・モードで起動された場合でも、レイヤー固有UI内でSVGMapの各種リソースへ安全にアクセスするためには、レイヤーのHTML内で提供される初期化ライブラリ（<code>svgMapLayerLib.js</code> 等）を読み込む必要があります。

'''【重要】''' 各種APIへのアクセスが可能になるのは、iframe自体の "load" イベントではなく、SVGMapフレームワークとの接続が完了した後に発行される '''<code>layerWebAppReady</code>''' イベント以降です。
* 初期化処理は以下のように記述することを強く推奨します。
* <code>window.addEventListener("layerWebAppReady", function(){ /* 初期化処理 */ });</code>

[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が設置されたSVGMapのグローバルなwindowと異なるドメインにレイヤーを設置し、そのレイヤーがレイヤー固有UIを持つこともできます。デフォルト（<code>data-lawa-mode="auto"</code>）では、これは自動的にセキュアなS-LaWAとして起動するため、特別なCORS設定は不要です。ただし前述の通りAPIには制限がかかります。

[[#レイヤー|レイヤーsvgコンテンツ]]のドキュメントルート要素へdata-controller属性を設定する代わりに、コンテナsvgコンテンツにおける[[#レイヤー|レイヤーsvgコンテンツ]]への参照要素にdata-controller属性を設定することもできます。

data-controller属性の代わりに、data-controller-src属性の値に、適切にエスケープすることで直接htmlを記述することもできます。（※この機能は主にT-LaWAでの利用を想定しています）

data-controller属性によって参照されるhtmlコンテンツでは、次節[[#拡張API]]で説明する値や関数が使用できます（※モードによる制限あり）。

data-controller属性のURLには以下のオプションをフラグメント識別子として指定することができます。
* #exec=appearOnLayerLoad||hiddenOnLayerLoad||onClick レイヤー固有UIの起動オプション
** appearOnLayerLoad : レイヤーを表示状態にすると即座にレイヤ固有UIが出現
** hiddenOnLayerLoad : レイヤーを表示状態にすると即座にレイヤ固有UIがhidden状態で起動(そのレイヤ固有UIに含まれるscriptが起動)
** onClick : レイヤー固有UI起動ボタン">"を押したときにレイヤ固有UIが出現(デフォルト)
* #requiredHeight=hhh&requiredWidth=www
** id="layerSpecificUI"のdiv要素のcss値に関わらず、requiredHeight、requiredWidthでiframeの表示を指示

====拡張API====
レイヤー固有UI(iframeのwindowオブジェクトのjavascriptコード)では以下のAPIが拡張されています。
'''【注意】S-LaWA（サンドボックス化LaWA）環境においては、セキュリティ上の理由から親フレームワークのオブジェクトに直接アクセスできません。代わりに <code>svgMapSandboxLayerLib.js</code> が提供する「モック（代替）オブジェクト」を介して非同期に操作が行われます。各項目の「S-LaWAでの仕様」を参照してください。'''

=====イベント=====
*layerWebAppReady : 初期化が完了しLaWAの実行が可能になった (LaWAでは、loadイベントではなくlayerWebAppReadyを使用することを強く推奨します)
*openFrame : そのiframeが、新たに生成された
*closeFrame : 同、消滅した
*hideFrame : 同、隠された
*appearFrame : 同、隠されていたのが再度現れた
*zoomPanMap : [[#.E6.8B.A1.E5.BC.B5.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88|SVGMapフレームワークと同じ]]
*zoomPanMapCompleted : 同上
*screenRefreshed : 同上

'''【S-LaWAでの仕様】''' すべてのイベントがサポートされています。親フレームワークで発生したイベントは、メッセージングを通じてS-LaWA内のwindowオブジェクトに中継・ディスパッチされます。

=====svgImageProps=====
このレイヤー固有UIに紐づいたレイヤーSVGの各種プロパティを参照できる（基本的に全て読み出しのみ） (参考:[[#svgImagesProps.5B.5D]])
*[[解説書#svgImagesProps.5B.5D|プロパティのリストはこちらを参照]]
*svgImageProps.scriptで、動的地図レイヤーのscript要素によって生成されたオブジェクトにもアクセスできます。
*svgMap.getSvgImagesProps(layerID) で得た値と同等。
*.hashは書き込みが有効(参考 [[#サブレイヤーパーマリンク]])

'''【S-LaWAでの仕様】''' 親フレームワークから非同期で同期された静的なコピーデータとして提供されます。<code>.hash</code> プロパティへの書き込みはS-LaWAでもサポートされており、裏側で自動的に親へ同期されます。ただし、<code>.script</code> による親の実行コンテキストへのアクセスはできません。

=====svgImage=====
このレイヤー固有UIに紐づいたレイヤーSVG文書(DOM Documentオブジェクト) (参考：[[#svgImages.5B.5D]])
*このドキュメントを操作することで、そのレイヤーの表示を動的に変化させることが可能です。
*特に、[[解説書#.E5.8B.95.E4.BD.9C.E3.81.AE.E5.88.B6.E9.99.90.E3.83.BB.E5.B7.AE.E7.95.B0|動作の制限に注意して実装してください]]
*svgMap.getSvgImages(layerID) で得た値と同等。

'''【S-LaWAでの仕様】''' S-LaWA環境内に展開された「ローカルXML DOM」が提供されます。このドキュメント（要素の追加・削除・属性変更・テキスト変更など）を操作して <code>svgMap.refreshScreen()</code> を呼び出すと、フレームワークの共通地図キャンバスに送信され更新します。

=====svgMap=====
svgMapフレームワークインスタンス

'''【S-LaWAでの仕様】''' 親のインスタンスの代わりに、S-LaWA用のモッククラス（<code>SandboxSvgMap</code>）が提供されます。以下のメソッドのみが利用可能です。
* <code>refreshScreen()</code>, <code>transform()</code>, <code>getGeoViewBox()</code>, <code>getSvgImageProps()</code>, <code>setShowPoiProperty()</code>, <code>showModal()</code>, <code>getCORSURL()</code>, <code>setCORSproxy()</code>, <code>parseEscapedCsvLine()</code>

=====layerID=====

svgMapフレームワークが管理しているSVG文書ハッシュリスト(svgMap.getSvgImages())における、このレイヤー固有UIに紐づいたレイヤーSVG文書のハッシュキー

[[#getLayerId]]参照

'''【S-LaWAでの仕様】''' 制限なく利用可能です。

=====svgMapGIStool=====
GIStoolsフレームワークを拡張した時、同インスタンス
*[[解説書#svgMapGIStool..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI|svgMapGIStoolが持つAPI]]

'''【S-LaWAでの仕様】''' '''現在のところ利用不可です。'''

=====svgMapAuthoringTool=====
svgMapAuthoringToolフレームワークを拡張した時、同インスタンス
*[[解説書#svgMapAuthoringTool..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI|svgMapAuthoringToolが持つAPI]]

'''【S-LaWAでの仕様】''' '''現在のところ利用不可です。'''

=====controllerSrc=====
レイヤー固有UIのiframeの起動に使われたsrc属性(レイヤー固有UIのパス・URL)が読み出せます。特にレイヤーが異なるドメインから配信されたものの場合、レイヤー固有UIのwindowのlocation属性(及びそれによるURL解決を行うAPI)からは適切な情報が得られません。これ代えてこの値が使用できるケースがあるでしょう。

'''【S-LaWAでの仕様】''' 参照できません。S-LaWAは自身のURLコンテキストで動作するため、自身の <code>location.href</code> などを参照してください。

=====putGlobalMessage(messageText)=====
messageTextを[[#グローバルメッセージ]]エリアに表示する　レイヤーが消滅したら自動でメッセージも消滅します。

'''【S-LaWAでの仕様】''' 現在のところ利用不可です。

=====preRenderFunction=====
この名前の関数を(レイヤー固有UIのwindowに)定義すると、そのレイヤーのSVG文書の再描画(画面更新)シーケンスの直前にこの関数の内容が実行される。詳細は[[解説書#setPreRenderController|setPreRenderControllerを参照]]

'''【S-LaWAでの仕様】''' '''利用可能です。''' S-LaWA内で <code>window.preRenderFunction</code> を定義しておくと、<code>svgMap.refreshScreen()</code> が呼ばれた際や、親からズーム・パンなどのイベントを受信した際に、S-LaWA内でローカルに実行されます。この関数内でローカルDOMを変更することで、描画前の状態更新をエミュレートできます。

=====customHitTester=====
この名前の関数を定義すると、そのレイヤーに固有のヒットテスト（マウスやタッチによって地図上をヒットしたときの振る舞い）機能を追加することができます。ヒットテストは通常のクリッカブルオブジェクト（ポイントやライン・ポリゴンなど）のそれと同等に扱われます。
* customHitTester( position )
** 第一引数に、ヒットされた座標(.screenX,Y:window上の座標、.lat,lng:地理座標、.isMapCenterHitTest:後述)が与えられます。（この値をもとに実際のヒットテスト処理を書く）　この関数の帰り値が'''null'''や'''undefined'''の場合はヒットしなかったこと、'''true'''もしくは文字列もしくはそのレイヤーの任意の図形要素、もしくはそれらの配列の場合はヒットしたことを示します。
*** isMapCenterHitTestが'''true'''の場合、そのヒットテストは伸縮スクロール時自動発生するケースで発生したものです。（もしこのケースでのテストを除外したいなど特別な処理をしたい場合に利用できます）
** ヒットテスト後の振る舞いも通常のクリッカブルオブジェクトと同等で、通常はデフォルトで備えるヒットされたグラフィックスオブジェクトの[[#metadata.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF|メタデータ]]表示パネルが呼び出されます。(帰り値が図形要素の場合）　もしこの振る舞いを変更したい場合は、[[#setShowPoiProperty|setShowPoiProperty]]を用いることが可能です。
** 帰り値がtrue、文字列、およびそれらの配列を返す場合は、[[#setShowPoiProperty|setShowPoiProperty]]を使用してカスタマイズされた処理を行う必要があります。この場合[[#setShowPoiProperty|setShowPoiProperty]]で設定された関数が受け取る引数は、そのSVG文書のドキュメントルート要素であり、その'''"data-hitTestIndex"'''属性に選択されたオブジェクトのインデックス(配列の場合。配列でない場合は常に0)が設定されます。

'''【S-LaWAでの仕様】''' <code>customHitTester</code> 自体は利用できません。（なお<code>svgMap.setShowPoiProperty(func)</code>は利用可能です。）

====サブレイヤーパーマリンク====
(2024/10のdev1ブランチから有効)
*[[#レイヤーsvgコンテンツ]]のURLが任意のフラグメント識別子を持つことができる。
*ただしフラグメント識別子はカンマ","、アンパサンド"&"を含めることはできない。
*[[#レイヤー固有のUI]]が以下を実装する場合、任意のレイヤーの設定をパーマリンク([[#getBasicPermanentLink]])に反映できる。
**[[#レイヤー固有のUI]]は起動時(onload)同フラグメント識別子の情報を解釈し適切な状態に変化させる機能
**[[#レイヤー固有のUI]]は、パーマリンクによる指定に対応した標示状態に表示が切り替わるタイミングで[[#レイヤーsvgコンテンツ]]のURLのフラグメント識別子の内容をそれに対応した値に変更する機能
*[[#レイヤーsvgコンテンツ]]のURLのフラグメント識別子は、[[#svgImageProps]].hashを設定することで変更できる ([[#svgImageProps|⇒仕様参照]])

===動的な地図レイヤー===
svgドキュメントにjavascriptを記述することでも、動的なデータ生成を実装可能としています。
本フレームワークでは、svgドキュメント中に<script>要素を一つだけ記述することができ、その要素の中にjavascriptコードを入れることができます。

DOMを操作し、動的に描画を変化させることが可能です。ただし、[[解説書#.E5.8B.95.E4.BD.9C.E3.81.AE.E5.88.B6.E9.99.90.E3.83.BB.E5.B7.AE.E7.95.B0|動作の制限に注意してください]]

====動的SVGMapコンテンツで利用可能な拡張API====
一般のjavascriptAPIに加えて、動的な地図レイヤーを実装するために以下のAPIが提供されます。（既存のものでも注記があるものも列挙）
*document: このsvgMapドキュメント自身
*READ ONLY変数
**CRS:このドキュメントのCRS : CRS.a....fに、地理座標からこのドキュメントのSVGユーザ座標への変換係数が提供される
**docId:このSVGドキュメントのdocId
**scale：倍率：このドキュメントの座標系と、画面の(px座標系)との間の倍率(この値は等倍が1.0だが、svgMapコンテンツのvisibleMin/MaxZoom値は%(等倍は100)なので注意)
**actualViewBox：このドキュメントの座標系でのviewBox
**geoViewBox：地理座標におけるviewBox
**geoViewport
**viewport
**this.location:相対パス
**(this.verIE)
*refreshScreen(): 描画の更新を明示: refreshScreenを用いていない場合、そのレイヤーのDOMを編集してもそれが即座に表示に反映(更新)するとは限りません。文書のロード、ズーム、スクロールのときが表示のDOMの内容を反映した画面の自動更新のタイミングです。それ以外、多くの場合反映されません（性能確保のための本フレームワークの現在の制限）。DOMO編集をそれ以外のタイミングで表示に反映したい場合、この関数の呼び出しを行うひつようがあります。一方不必要にこの関数を呼び出すとシステム全体の性能が低下するかもしれません。
*transform()
*getCanvasSize()
*linkedDocOp()
*isIntersect()
*drawGeoJson()
*childDocOp()
*onload:この関数を設定すると、ロードされると呼ばれる(ドキュメントロード後、描画前のタイミング。)
** この関数は、DOMトラバース前に同期処理される。
**したがってonloadで実行される処理はその中が非同期でない限り、refreshScreen()しなくてもonload時のDOM編集は直後の描画に反映される。
*onscroll:この関数を設定すると、スクロールされるとき呼ばれる（ほかにズーム以外で画面更新時も）(スクロール後の描画前のタイミング。)
**同上
*onzoom:この関数を設定すると、ズーミングが発生するとき呼ばれる(同上)

====拡張イベント====
*document -> zoomPanMap イベント addEventHandlerすると、ズームパンが起き(viewPortが変化したとき)地図システム全体の描画が完了(含タイムアウト)後に発行される。SVGMap*.jsが地図をウェブアプリ起動後、最初に描画完了した時にもこのイベントが発生する。（レイヤー追加時には発生しない）
**これをイベントリスナに設定した関数は、非同期に実行される。onscroll()と異なり、もしその関数でDOM編集を行った場合は、直後の描画にそれが反映される保証がない。refreshScren()による再描画が必要。
*document -> screenRefreshed イベント addEventHandlerすると、ズームパン以外で地図システム全体の描画が完了(含タイムアウト)後に発行される。主にrefreshScreen()など。このイベントをフックにして、SVGMapコンテンツのDOM操作・再描画（refreshScreen()）を行うと無限ループに陥るので使用方法に注意が必要。
*document -> zoomPanMapCompleted イベント SVGMaplayerUIが有効な時に発行される。　zoomPanMapイベントは伸縮スクロール完了時に発行されるが、その直後にレイヤー固有UIにおいて(XHRやfetchを用いた)非同期なデータ取得とレイヤー書き換えが生じるケースでは、その完了を検知しない。zoomPanMapCompleted イベントはこのような非同期通信の完了後に発行される。

===SVGMapの埋め込み(SVGMapFrame)===
'''実験的機能段階''' :

SVGMapフレームワークはwindow全体に地図コンテンツが占有される形で表示する設計です。ウェブページはwebAppsとしてカプセル化されたレイヤーをsvgMapオブジェクトに差し込む形でアプリケーションが構築されます。すなわち、基本的に[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]windowにはsvgMapオブジェクトだけが単独で存在し、その他のアプリケーションをwindow上に実装する場合は、その開発者がsvgMapオブジェクトとのグローバル空間でのスパゲッティ化に注意を払いながら開発していく必要があります。

それに対して、''SVGMapLv0.1_Frame*.js''が提供する機能は、window内の指定した領域にsvgMapによる地図を埋め込むことを可能にします。さらにこの埋め込まれたsvgMapオブジェクトを　外部からより簡単に操作できるようカプセル化されたインターフェースを提供します。

====ライブラリ====
SVGMapを埋め込むウェブページでは''SVGMapLv0.1_Frame*.js''を導入します。
<!doctype html>
<html>
<script type="text/javascript" src="SVGMapLv0.1_Frame_r4.js"></script>
</html>

====svg-map要素====

svg-mapカスタム要素を使用してsvgMapオブジェクトを任意の場所に埋め込むことができます。
<nowiki>
<!doctype html>
<html>
<script type="text/javascript" src="SVGMapLv0.1_Frame_r4.js"></script>
<body>
<table>
<tr>
<td>
説明用地図
</td>
<td>
<svg-map svgMapAppPage="SVGMapper_r16_layerUICustom.html" id="svgMapTag" latitude="37" longitude="135" zoom="4" layerui="#layerUIarea">
</svg-map>
</td>
</tr>
</table>
</body>
</html></nowiki>

=====属性=====
======svgMapAppPage======
必須属性: 起動するSVGMapLv0.1*.jsが組み込まれたhtmlを指定。
svg-map要素はshadow domとなっており、内部はひとつのiframeとして構成されます。このiframe内のwindowで通常のsvgMapオブジェクトが稼働する形となります。svgMapAppPage属性はこのiframe内で起動するsvgMapオブジェクトを持ったhtmlを指定するものです。

======latitude, longitude======
オプション: 表示領域を下記の属性と組み合わせて指定します。DOMを操作することによって動的に表示領域を変更することが可能です。
======zoom======
オプション: 表示位置の中心点を上の2属性で、ズームレベルをこの属性で指定します。ズームレベルの定義は[https://docs.microsoft.com/ja-jp/azure/azure-maps/zoom-levels-and-tile-grid webMercatorタイルピラミッドのレベル番号]（ただし小数点指定も可能）
======latitude2, longitude2======
オプション: latitude, longitudeと組み合わせて対角線を指定し表示領域を設定します。
======customjson======
オプション: 任意のJSON文字列を(エスケープしたうえで)与えることができます。 SVGMap.jsのあるiframeのwindow.rootMessage.customJsonに、JSON.parseされたうえでその値が反映されます。この値もDOM操作により動的に反映されます。window.rootMessage.customJsonの変化を監視できるようsetterを設けることで動的な変化に対応する実装が可能です。

var rootMessage={
set customJson(json){
...
}
}

======layerui======
オプション: レイヤーUIの出力要素をxlinkで指定します。　この値はmutationをobserveしていません（svg-mapオブジェクトが生成された、最初の一回のみ有効です）

<svg-map svgMapAppPage="SVGMapper_r16_layerUICustom.html" id="svgMapTag" latitude="37" longitude="135" zoom="4" layerui="#layerUIarea">

=====DOM API=====
======setCenter======
setCenter( longitude, latitude, zoom ) : 緯度経度ズームレベルで地図を表示させる
======addLayer======
addLayer(url,title,visibility) : URLで指定したリソースのレイヤーをtitleを付けて追加する

======svgMapObject======
getter svgMapObject : この要素に紐付いたsvgMapオブジェクトを得る

====layer要素====
svg-map要素の子要素として、任意の個数のlayer要素を設置できます。
=====属性=====
======title======
iframeで起動されるsvgMapオブジェクトの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルにある、レイヤー名(title)を指定し、そのレイヤーとlayer要素を紐付ける。該当するレイヤーが無く、且つ下記のsrcが指定されている場合は新しいレイヤーを追加する。なお、任意の属性や子ノードが与えられている場合は、下記の通りレイヤーの読み込み後にそれらの値が該当するレイヤーの[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|data-controller]]の window.rootMessageに設定される。

======src======
iframeで起動されるsvgMapオブジェクトの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルにある、レイヤーをURLを使って指定する
======visibility [TBD] ======
visible もしくは hiddenを設定すると、そのレイヤーの表示状態を制御できる。

======任意の属性======
任意の属性を設定できる。設定した属性名と属性値は、対応するレイヤーの[[#レイヤー固有ユーザインターフェース|data-controller]]で指定されたレイヤーのコントローラのwindowにおけるwindow.rootMessageの対応するメンバ変数に反映される。[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/set setter]を設定することで変化に応じて動作させることが可能になる。

======rootMessage.update()関数======
レイヤーのコントローラのwindow.rootMessage.update()関数(引数なし)が定義されている場合、上記の属性変更(最初の設定も含む)が検知される度にこの関数が呼び出される。

=====子ノード(TEXT CONTENTやXML要素)=====
任意のテキスト(textContent)や、XML要素(xmlContent)を子ノードに入れることができる。
入れられた情報は、同様に対応するレイヤーのdata-controllerの
window.rootMessage.textContent、もしくはwindow.rootMessage.xmlContentメンバ変数に反映される。
XMLに関しては任意の階層化がされていても良い。DOM操作による変化があれば更新されるので、同様にsetterを用いて変化を反映させることが可能。

=====DOMAPI=====
======layerId======
layerId : このレイヤーのレイヤーIDを得る
======svgImage======
svgImage : このレイヤーに紐付いたsvgMapコンテンツ(document)を得る
======svgImageProps======
svgImageProps : このレイヤーに紐づいたsvgMapコンテンツのsvgImagePropsオブジェクト(各種プロパティを格納したオブジェクト)を得る
======controllerWindow======
controllerWindow : (もしあれば)このレイヤーに紐づいたsvgMapコンテンツのレイヤー固有UIを得る

==第四章：内部機構解説==
[[内部機構解説|別ページを参照してください。]]

==第五章：付加機能==
===3D可視化機能===
:- SVGMap.jsはCesium.jsを利用してSVGMapで表示しているレイヤーを3D可視化することができます。
:- 3D可視化はSVGMap.jsの地図ウィンドと独立した別ウィンドで行われます。
:- すなわち、ここから呼び出されるCesiumベースの3D可視化ウェブアプリは、それ専用のwebApps([https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4_module.js cesiumWindow*.js]を読み込んだアプリ。：基本的な3D可視化ウェブアプリとして、[https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4.html cesiumWindow4.html]を用意)を持つ別のブラウジングコンテキストで起動されます。
:- この3D可視化ウェブアプリは、svgmapjsとメッセージングを行いsvgmapjsで表示されているレイヤーを3D可視化します。

====3Dビジュアライザ起動用ボタンの設置====
3D可視化機能を起動するためのUI(ボタン)は、[[#フレームワークの呼び出し|ルートhtml文書]]に設置した以下の要素によって構築されます。
<code><pre><img id="3DviewButton" data-app="cesiumWindow4.html" .../></pre></code>

* <code>id</code>が<code>3DviewButton</code>である必要があります。
* <code>data-app</code>属性で、3D可視化ウェブアプリのパスを指定することが可能です。
** もし指定されていない場合は、ルートhtml文書と同一ディレクトリの<code>cesiumWindow2.html</code>というファイルがデフォルトで指定されます。
** パスは同一オリジンである必要があります。
** 基本的な3D可視化ウェブアプリとして、[https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4.html cesiumWindow4.html]が[https://github.com/svgmap/svgmapjs/ svgmapjsリポジトリ]に用意されています。

解説書

2026-04-17T05:09:51Z

Admin: /* S-LaWA (Strict/Sandbox LaWA / 分離モード) */

=SVGMap.js (Level0.1フレームワーク)解説書=

2018年現在のSVGMapのデータ形式、およびそれを実装した初歩的なフレームワーク(SVGMap Level0.1 Revision*)の解説を行います。

==第一章：SVGMapの基本機構と、更新部分==

この章は、JIS化されたSVGMap ([http://kikakurui.com/x7/X7197-2012-01.html JIS X.7197])や、[https://www.w3.org/Submission/2011/04/ W3C Member Submission]に対する、近年の開発成果に基づいたSVGMapのアップデートを解説しています。

[http://kikakurui.com/x7/X7197-2012-01.html JIS X.7197]もしくは、[https://www.w3.org/Submission/2011/04/ W3C Member Submission]に記載されているように、SVGMapの基本機構は主に以下の機能を　[https://ja.wikipedia.org/wiki/Scalable_Vector_Graphics 汎用的なグラフィイクスデータ記述形式SVG]に拡張することです。
* [[#地理座標系の処理|地理座標処理]]
** SVGの座標系と地理座標系との間の関係を記述する globalCoordinateSystems要素
* タイルピラミッド（タイリングとLevel of Detail）
** コンテンツを埋め込む[[#要素|image要素、animation要素]]のx,y,width,height属性への追加の振る舞いと、visible-min-zoom, visible-max-zoom属性の追加
** 詳細は [https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html こちらの論文]を参照
* 拡張された[[#レイヤー|レイヤー]]
** [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]におけるimage, animation要素の扱い
** [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が埋め込むsvgコンテンツ([[#レイヤー|レイヤーsvgコンテンツ]])の処理

===地理座標系の処理===
SVG2では地理空間座標を記述するスペック(metadata geospatial coordinate systems)が削除されました。これは、W3C SVG仕様の範囲では単なるメタデータであり、ユーザエージェントの振る舞いに何ら影響を及ぼさないことが理由です。　また、JIS SVGMapにおいては、coordinateReferenceSystem 要素が定義され、それに基づくユーザエージェントの振る舞いが規定されていますが、これは一方でW3Cのスペックではないという課題を持ちます。

これを受けて、現在提案されているSVGMapのデータ仕様では、SVG1.1の段階ですでに標準化と実装が行われたスペックを注意深く活用することにより、JIS SVGMapで規定された地理座標系に関する機能のいくつか（すべてではない）を実現する方法を用いることとしています。（[https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/globalView globalView spec]）

なお、JIS SVGMapのcoordinateReferenceSystem要素もサポートしています。

====メルカトル図法を含む任意の図法の定義とその合成機能(＞rev16)====
従来のSVGMapでは、グローバル座標系に緯度経度座標を用いた場合、使用できる図法は[https://ja.wikipedia.org/wiki/%E6%AD%A3%E8%B7%9D%E5%86%86%E7%AD%92%E5%9B%B3%E6%B3%95 PlateCarreeや正距円筒図法]でした。

一方、rev16では[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]を含む任意のSVGMapコンテンツ([[#レイヤー|レイヤーsvgコンテンツ]]やサブレイヤー、タイルなど)のglobalCoordinateSystem 要素のtransform属性に、下記のように"mercator"を指定することで、そのコンテンツの座標系がメルカトル図法([https://en.wikipedia.org/wiki/Web_Mercator_projection web mercator])であることを宣言できます。

<pre><globalCoordinateSystem srsName="http://purl.org/crs/84" transform="mercator" /></pre>

この記述がされたコンテンツのSVGの座標空間はメルカトル図法上のものとなり、この座標系上でのx,y=0,0(左上)は西経180.0度,北緯85.051129度、x,y=1,1(右下)は東経180.0度,南緯85.051129度に対応します。

=====メルカトル図法での地図表示=====
[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]で先述の宣言を行うことで、SVGMap0.1.jsはメルカトル図法で画面上に地図を表示します。このとき、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が参照する各レイヤーはメルカトル図法であっても、それ以外であっても構いません。フレームワーク内でオンザフライの図法変換が実行されます。（逆に[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]がPlateCarreeでレイヤーがメルカトルでも同様）

=====メルカトル図法のドキュメントルート要素のviewBox属性=====
* [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]において、地図の初期表示状態を記述するドキュメントルート要素(<svg>要素)のviewBoxに記述する座標も先述のメルカトル座標系で記述する必要があります。
* 一方、緯度経度で初期表示領域を記述したい場合に対応する仕様が拡張されており、その記述例は下記のとおり、'''global'''を追加します。
<pre><svg viewBox="global,138,35,2,2"></pre>

=====プロキシの設定=====
オンザフライでの図法変換では、多くのケースで非線形の座標変換が必要となります。ビットイメージ（タイルを含む）に対して子の座標変換を実行するためにSVGMap.jsではビット委イメージのピクセルにアクセスしています。これを実現するにはビットイメージがSVGMap.jsと同一オリジンにある必要があります。この条件を満たせないケースに対してフレームワークにはプロキシを設定する機能があります。([[#setProxyURLFactory|setProxyURLFactory API]]を参照)

'''[[クロスオリジンアクセス|詳細な情報をこちらに掲載しました]]'''

=====多様な図法の定義と利用=====
[[#動的な地図レイヤー|javascriptコード]]に記載されたscript要素内に定義した関数の関数名をglobalCoordinateSystem要素のtransform属性に記述することで、その関数を図法変換に用いた図法定義が可能となります。(先述のmercator属性は、フレームワークに特別に組み込まれた関数です）

たとえば、日本の平面直角座標系の地図(固有の基準点を持つ横メルカトル図法)をPlateCarreeやメルカトル図法の地図として合成・表示するケースなどに有効でしょう。

ユーザが定義できるこの関数は引数を持たない関数であり、返り値として以下の３つの関数を返す必要があります。
* {x,y} transform({x,y}) : グローバル座標(WGS84経度緯度)から、そのコンテンツの図法の座標への変換関数入出力値は.x,.yメンバを持つオブジェクト。
* {x,y} inverse({x,y}) : 同、逆変換関数
* number get scale : グローバル座標系に対するコンテンツの図法の座標系の座標値のスケール（グローバル座標系で1変化すると、コンテンツの座標系でいくつ変化するのかを表す）
* 記述例
<code><pre>
<svg ...>
<script>
function azimuthalEquidistant(){
...
return{
transform:function(inp){
var xy = transform_int(inp.y, inp.x, ...);
return{ x:xy.x, y:xy.y}
},
inverse:function(inp){
var latLng = inverse_int(inp.x, inp.y, ...);
return{ x:latLng.lng, y:latLng.lat }
},
scale: 1.0
}
}
</script>
<globalCoordinateSystem srsName="http://purl.org/crs/84" transform="azimuthalEquidistant" />
...map contents in projected coordinate system...
</svg>
</pre></code>

===ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング===
SVG2(SVG1.1 2nd Edition)では、SVG単独によるユーザエージェントという実装想定は撤廃され、よく知られているウェブブラウザの機能の一部としてのSVGデータの描画機能、HTMLやCSSと一体化されたデータ・コンテンツ　へと変化しました。一方、近代のウェブブラウザにおけるコンテンツでは古典的なhtmlに基づくコンテンツデータに対して、javascriptとDOM APIによるプログラムでコンテンツをブラウザ上で動的に生成する（ウェブアプリケーション）機構を備えます。すなわちSVGを実装する現代のユーザエージェントは例外なくウェブアプリケーションの実行が可能となりました。

そこで、SVGMapでは静的なSVGによる地図コンテンツに加え javascriptで動的に生成されるコンテンツ(ウェブアプリケーション)も地図コンテンツ（地図のレイヤー）として扱えることとしました。それにもかかわらず SVGMapは依然として複数のウェブ上で分散する地図データを一つの画面上にレイヤリングする機能（ハイパーレイヤリング）を維持しています。すなわち、ウェブアプリケーションとしての地図レイヤーをレイヤリング（マッシュアップ）する機能が拡張されます。これは、SVGMapのマッシュアップ・ハイパーレイヤリングの概念を、単に地図画像データのレイヤリングから、地図上に表現された動的なオブジェクトのマッシュアップ・レイヤリングに広げています。SVGMapではこのコンセプトを[[リンク集#.E8.A7.A3.E8.AA.AC.E9.9F.B3.E5.A3.B0|"Layers as WebApps"(LaWA : ウェブアプリケーションとしてのレイヤー)]]と呼んでいます。

このようなウェブアプリケーションは、レイヤーごとにカプセル化されることになります。これにより、'''グローバル空間'''(コンテナsvgコンテンツとそれを起動する、svgMap.jsフレームワークを読み込んだウェブページ)のスパゲッティ化なしに、多様な機能を実装していくことが可能になります。

[https://satakagi.github.io/mapsForWebWS2020-docs/De-centralizedWebMapping.html こちらの論文]も参考にしてください。

ウェブアプリケーションによる地図レイヤーを構築するには二つの方法があります。
* svg要素の'''data-controller'''属性で参照されたhtml文書
** [[#レイヤー固有ユーザインターフェース]]と呼ばれる機構です。この方法を用いること推奨します。
* svg要素内の'''script'''子要素 (将来廃止予定)
** htmlによるUIを伴わない実装の場合はscript要素を用いることができます。ただしsrcは属性には非対応、直接コードを埋め込む必要があります。

この機能を用いるにはSVGMapLevel0.1フレームワークを使用する場合は、拡張フレームワーク(SVGMapLv0.1_LayerUI2_r*.js)を更にロードする必要があります。SVGMapLevel0.2フレームワークの場合はデフォルトで機能します。

====レイヤー固有ユーザインターフェース====
SVGMap.jsではさらに、個々の地図レイヤー(レイヤーSVGコンテンツ)がそれぞれのレイヤーに特化した固有の演算ロジックだけでなく、ユーザーインターフェースも備えた[[#レイヤーsvgコンテンツの設定|HTMLを紐づける]]ことができる機能が拡張されています。UIも備えたより完全なwebAppをレイヤーとして実装できるため、カプセル化がより効果的に実現されます。（Layers as Web Apps, LaWA)

たとえば気象情報のレイヤーに対して気象情報の時間変化を表示するアニメーションのコントローラ(スライダーバー)や、気象情報の種類を選択するプルダウンメニュー　などのUIやロジックを任意に構築できます。

レイヤー固有ユーザーインターフェースは、[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]](SVGMap.jsをロードしたhtml)のレイヤー選択UIを通してwindowに設置されたiframe中に呼び出されます。

詳細は[[#レイヤー固有のUI]] を参照してください。



　

====例====
以下に、いくつかのこのような動的な地図コンテンツの例を示しましょう。
;検索によって表示スタイルを変更する機能を持ったレイヤー
: 例えばコンビニエンスストアのＰＯＩレイヤーを表示したとして、そのメタデータを読み取り、検索条件に基づいて（例えば深夜営業している店舗）の表示スタイルを変更するような検索機能を実装したレイヤー　メタデータは書くレイヤーごとに独特の値を持つため、その検索ロジックはレイヤーに固有のものとなることがあります。このケースではそのような機能をレイヤーに組み込むことを可能にします。
;CSVデータなどのレガシーな非SVGデータをHXRで取得し、ブラウザ上でSVG DOMツリーを生成するようなSVG地図コンテンツ。
: このケースでは、サーバからクライアントに送信されるデータの実体はSVG形式の地図データではなく、CSVなどのレガシーなデータです。SVG地図コンテンツには、CSVデータをSVGとして描画するためのデータ読み込み・解読・SVG DOMツリー生成機構を備えたjavascriptコードが含まれます。また、これよりはモダンなgeoJsonやKML等のデータをSVG DOMに変換することも容易に可能でしょう。これをより簡単に実現するためのライブラリも[[#svgMapGIStool.で呼び出せるAPI|svgMapGIStool]]に準備されています。
;タイリングされた地図コンテンツ
: それは、たとえば[https://wiki.openstreetmap.org/wiki/Tiles OpenStreepMapのTile Server]や、[https://en.wikipedia.org/wiki/Tile_Map_ServiceTileMap Tile Map Service]のような、特定のロジックによる数列のような法則性を持ったピラミッド状の地図タイルリソースをタイリングする地図コンテンツのことです。
: 更新されたSVGMapでは、地図コンテンツに内蔵されたjavascriptによるアプリケーションロジックとしてそれらを取り扱うことができます。タイリング規則をそのままウェブアプリケーションとしてで書き下し、スケールやビューポートに応じて適切なタイリング(配置)を行うSVG DOMツリーを生成するSVG地図コンテンツが構築できます。

=====タイリングに関するノート=====
[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html svgMapにおけるタイリング]は従来の地図フレームワークより柔軟で汎用的な概念に基づいています。
openLayersやleafletなどの従来の地図フレームワークでは、このようなタイリング機能は特定の固定的なタイリングロジックとパラメータを伴った機能として地図フレームワーク本体にハードコードされて提供されてきました。さらには地図フレームワークがこれらのタイリングロジックに強く依存したアーキテクチャを持っていました。一方、これらのロジックにはさまざまなバリエーションや最適化のための調整パラメータが存在し、これまで長らくその互換性や相互運用、更には効率の問題を抱えてきました。次のリンクでその多くの議論や多様な提案を参照できるでしょう。[https://wiki.osgeo.org/wiki/Tile_Map_Service_Specification TMSspecs@osgeowiki], [https://wiki.osgeo.org/wiki/Category:Tiling tiling@osgeowiki]
ベクターデータのタイリングにおいては、これらの課題はさらに増幅され、いまだ手法は確立していないといっても良いでしょう。たとえば、我々の研究では、Quad Tree Composite Tiling([https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-in-english スライド]、、[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html ペーパー])のような用途によってはもっと優れたタイリングの手法も見いだされています。

一方、これらのロジックはその多様なバリエーションを含め、javascriptによるプログラムコードとしては容易に記述可能です。多くの場合わずか数十行のロジックで記述できるでしょう。この程度のコードで多くのタイリングの手法が包含できるのであれば、特定のタイリング手法をフレームワークのコアに内包する・さらにはこれら特定のタイリングの手法にコアが依存する必要はなく、先述のウェブアプリケーションによる動的な地図レイヤーとして実装すれば良いであろうというのがSVGMapにおけるタイリング扱いです。3DマップのフレームワークであるCesiumはこれに似たタイリングポリシーを持っているようです。

=====SVG以外のデータサポートに関するノート=====
前章に記載した方針と同様、他の地図表示フレームワークと異なりSVGMapではSVGとして規定されたコンテンツ(もちろんビットイメージの埋め込みは可能)以外のネイティブサポートは行いません。例えばgeoJsonやKML, WKTなど地図業界でしばしば用いられるデータをSVGMapで表示したい場合は、変換ルーチンを埋め込んだ動的な地図コンテンツ（webAppレイヤー）としてそれらを扱います。SVGMap.jsの拡張モジュールである[[#svgMapGIStool.で呼び出せるAPI|SVGMapGIS.js]]には、これらのデータをwebAppsで読み込みSVGに変換するためのAPIがあります。

===トポロジースイート(地理空間情報処理)===
Rev.13で拡張

SVGMapLevel0.1 Revision 13以降では、SVGMapコンテンツに対してトポロジー演算機能(地理空間情報処理機能)を適用する拡張フレームワークが提供されます。この機能を用いるにはSVGMapLevel0.1フレームワークに加えて、拡張フレームワーク(SVGMapLv0.1_GIS_r*.js)をロードする必要があります。このフレームワークでは、[[#svgMapGIStool.で呼び出せるAPI|拡張されたAPI]]が利用可能です。フレームワークに内蔵された基本的な演算機能に加え、geoJSONと整合するインターフェースを備え、[https://github.com/bjornharrtell/jsts jsts]を組み込み、より高度な機能を実装するための機構も持ちます。

この機能を用いると、特定のレイヤーに登録されているポリゴンの範囲に入っている、特定のレイヤーのポイントをフィルタリングして表示の色を変更する。といったことが可能です。ただし、これらはすべてすでにブラウザ上にロードされている限られた量のコンテンツの中での演算に限定されます。もしもサーバ上にしかないデータに対してこれらの演算を試みたい場合、従来通りサーバサイド技術によってそれは実現すべきです。

また、主題情報を含むウェブマップコンテンツの多くのレイヤーがラスタータイルによって提供されているという現状を考慮し、このスイートはラスターレイヤーをカバレッジとして扱った空間情報処理を行う機能の実装も進められています。現在のところ、カバレッジとポイントとの間での演算が可能です。また、そのために便利なカラーピッカー等の付加的な機能の実装も進められています。

===オーサリングシステム===
Rev.14で拡張

SVGMapLevel0.1 Revision 14以降では、SVGMapコンテンツを編集するツール機能が実装された拡張フレームワークが提供されます。[[#svgMapAuthoringTool.で呼び出せるAPI|フレームワークが提供するAPI]]を使って、オーサリング機能を持ったレイヤーを作ることが可能です。コンテンツは、SVG DOMとして構築されます。なお編集したオブジェクトを保存したり登録するためには別のサービスやアプリケーションの開発が必要です。

===3D可視化システム===
Rev.15で拡張

[https://cesiumjs.org/ Cesium.js]を用いて、SVGMap.jsが表示できるすべてのコンテンツを3D可視化するシステムです。詳細解説はTBD ([[#svgMapCesiumWrapper.で呼び出せるAPI|フレームワークが提供するAPI]])

===プログレッシブウェブアプリケーション===
Rev.16で拡張

[https://developer.mozilla.org/docs/Web/Progressive_web_apps Progressive Web Apps]をサポートしたブラウザにおいて、SVGMap.jsをオフラインでも利用可能にする拡張機能です。詳細解説はTBD ([[#svgMapPWA.で呼び出せるAPI|フレームワークが提供するAPI]])

===SVGMapコンテンツのバックエンドソフトウェア (参考)===
本解説書は主にコンテンツ形式とユーザーエージェント側のソフトウェアについて解説していますが、サーバ・バックエンド側についてもここで少し言及します。

shapefileやcsvなどから、静的なSVGMapコンテンツを生成するためのソフトウェアが[https://github.com/svgmap/svgMapTools オープンソース]で準備されています。これらのソフトウェアでは、[[#タイリングに関するノート|高度なタイリング手法]]を用いた地図タイルを生成することができます。使用方法などは同リポジトリに用意されているチュートリアルを参照してください。

一方、もちろんSVGMapの仕様に準拠すれば、これらのソフトウェアに頼らず、自由にバックエンドを構築することができます。例えばよく知られた地図タイルサービスを用いたり、古典的な[https://wiki.openstreetmap.org/wiki/Web_feature_service WFS ]や[https://wiki.openstreetmap.org/wiki/WMS WMS]のような動的地図・地理空間情報サービスをベースにして比較的容易にそれらを構築することもできます。[https://github.com/svgmap/svgMapLv0.1/tree/master/appLayers SVGMap.jsのリポジトリのappLayersディレクトリ]にはそのようなシステムを構築する際のフロントエンド側の動的レイヤーのサンプルが掲載されています。

==第二章：SVGMap Revsion 0.1フレームワーク==
SVGMapは究極的には既存のすべてのウェブブラウザがネイティブの機能としてそれを備えることを目標とし、既存のHTML,CSS,SVGなどのウェブブラウザの標準規格との整合性を備え、且つ既存のWeb Mappingの規格との整合性をも備えた仕様として検討と標準化を進めています。しかし今のところまだその標準化は完遂されていないため、その完全な実装がなされたウェブブラウザは存在しません。一方、既存のウェブブザでSVGMapの機能が実行可能となるような拡張をJavascriptによるフレームワークとして構築することが可能です。SVGMap Revision 0.1フレームワークは、このようなJavascriptによるSVGMapの仕様に基づいた初歩的な制限と拡張がされた実装です。その実装はオープンソースとして[https://github.com/svgmap/svgMapLv0.1 こちらのgitubリポジトリ]で公開されています。

そのアーキテクチャの特徴は、ブラウザネイティブのSVGレンダラーを使用せず、HTML,CSS,HTMLCanvas2DAPIを用いてSVGMapが実装されている点です。この特徴は主にこのフレームワークの開発が開始された時期に起因しています。当時のウェブブラウザの多くはSVGが実装されていませんでした。また実装されていたとしても、大規模なベクトルデータのレンダリング、および伸縮スクロール・インタラクティブな操作に対する性能面での処理制御に問題がありました。これらの問題のいくつかは現在のブラウザで解消されているものがあるかもしれません。またこれらの問題の解決とともに、SVGMapフレームワークはLevel番号を上げつつよりネイティブの機能に基づいた実装に移行するかもしれません。<font size="-2">参考までに、[http://svg2.mbsrv.net/devinfo/devkddi/lvl0.5/ 実験的なネイティブのレンダラを用いた実装(2010年)]があります。</font>

SVGのベクトル描画機能は[https://github.com/canvg/canvg canvg]のpathパーサなどを引用することで実装されています。一方、地図としてあまり用いられないと想定された多くの要素やプロパティ、アトリビュートの実装が省略されています。

===追加・拡張された機能：===
====フレームワークの呼び出し====
本フレームワークを用いる場合、SVGMapコンテンツをブラウザに直接読み込ませることはできません。フレームワークを動作させるjavascriptライブラリをロードしたhtmlコンテンツ(WebApps)を準備し、そこでSVGMapコンテンツを読み込み表示させます。利用者には、このhtmlコンテンツのURLを告知します。このhtmlコンテンツを以降'''ルートhtml文書'''と呼ぶことにします。

SVGMapのフレームワークはgithubリポジトリ：https://github.com/svgmap/svgmapjs　で公開されています。

htmlコンテンツの<body>要素直下に以下の要素を配置します。
=====フレームワークを実装したjavascriptライブラリを読み込むscript要素=====
これがSVGMap.jsのコアのフレームワークを構成します。

<nowiki><script type="module">
import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

上のスクリプトで必要なモジュールが読み込まれます。[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]のwindowのメンバには、svgMapオブジェクトを設定しています。

[https://svgmap.org/devinfo/devkddi/tutorials/tutorial5_esm/tutorial5.html 実働サンプル(tutorial5_esm)]

もしくは https://github.com/svgmap/svgmapjs の内容を独自のウェブホストにコピーしそれを用いることもできます。(下の例は[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]のhtmlに対して、svgmapサブディレクトリにjsを置いた場合)
<nowiki><script type="module">
import { svgMap } from './svgmapjs/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

===== GISモジュールを利用する場合 =====
svgMap.jsの地理空間演算機能(GISモジュール)では、jsts.jsを使用しています。そのためGISモジュールを機能させるにはjsts.jsの読み込みが必要です。下記のようになります。もちろん独自のウェブホストにjstsをコピーしてそれを利用することも可能です。

<nowiki><script type="text/javascript" src="https://unpkg.com/jsts@1.6.1/dist/jsts.min.js"></script>
<script type="module">
import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

======本解説書でAPIを説明している、現在利用可能な拡張フレームワーク======
ECMA Script Module対応の内容に現在更新中

* [[#svgMapCesiumWrapper.で呼び出せるAPI|SVGMapLv0.1_CesiumWrapper_r*.js]] (実験的)
** https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/experimental/Cesium3D/SVGMapLv0.1_CesiumWrapper_r3.js
* [[#svgMapPWA.で呼び出せるAPI|SVGMapLv0.1_PWA_r*.js]] (実験的)
** https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/experimental/PWA/SVGMapLv0.1_PWA_r5.js

まだ実験的なsvgMapCesiumWrapperは、[http://www.svgmap.org/devinfo/devkddi/lvl0.1/cesiumSvgMap/top.html svgMap cesium visualizer]ページを参照ください。
SVGMapPWA(ProgressiveWebApp)については、[https://svgmap.org/devinfo/devkddi/lvl0.1/svgMapPWA/ SVGMap PWA Test]ページを参照ください。

=====SVGMapコンテンツを配置するためのdiv要素=====
id属性に"mapcanvas"を設定し、data-src属性(もしくはtitle属性(to be obsoluted))には、地図フレームワークが最初に読み込む、SVGMap.jsが表示する地図コンテンツの起点となるSVGコンテンツ（以降'''コンテナsvgコンテンツ'''と呼びます）のパスを指定したdiv要素を設置します。

コンテナsvgコンテンツはまた、'''[[#レイヤー|ここで記述するレイヤー]]'''を持つことができる特別のコンテンツです。

（要確認：地図のサイズ・配置はこのdiv要素のサイズとなります。無指定の場合は全ウィンドサイズ）
<nowiki><div id="mapcanvas" title="Container.svg"></div></nowiki>

<nowiki><div id="mapcanvas" data-src="Container.svg"></div></nowiki>

======差分データの指定======
data-custom-layers-root属性でContainer.svgに対するレイヤーの差分情報のパスを指定することができます。
もしくは、data-custom-layers-root属性に、レイヤーの差分情報が保管されているディレクトリを記述した場合、URLハッシュで差分ファイルを指定することもできます。
差分データは、[https://github.com/svgmap/svgmapjs/blob/main/SVGMapCustomLayersManager_r3module.html カスタムレイヤーマネージャ]で作成することが可能。（データ形式は後述）
<nowiki><div id="mapcanvas" data-src="Container.svg" data-custom-layers-root="./containerDif/dif0.json"></div></nowiki>

=====地図中心の照準イメージ。=====
参照する画像はあらかじめ用意されたもの以外も利用できます。
<nowiki><img id="centerSight" style="opacity:0.5" src="Xcursor.png" width="15" height="15"/></nowiki>

====任意で設置できる要素：====
=====[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]](後述)を設置するdiv要素=====
<nowiki><div id="layerList" style="left :30px; top: 10px; width:300px;height:90%; position: absolute; "></div></nowiki>
: idが上記の通りである必要があります。
　 styleは任意だが、heightは[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]が展開された状態におけるサイズとなります。格納された状態のサイズは、この要素における文字の縦幅となります。各種オプションについては[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|詳細を参照ください]]
　

=====[[#レイヤー固有のUI|レイヤー固有のUI]](後述)を設置するdiv要素=====
[[#レイヤー固有のUI|レイヤー固有のUI]]を使用するために設置するdiv要素です。

<nowiki><div id="layerSpecificUI" style="right :10px; top: 40px; width:400px;height:400px; position: absolute; background-color: white;opacity:0.8;display:none;"></nowiki>
<nowiki></div></nowiki>
: idが上記の通りである必要があります。styleは任意だが、heightはレイヤリストUIが展開され得る最大のサイズとなります。
　
=====伸縮ボタン=====
<nowiki><img id="zoomupButton" style="left: 5px; top: 5px; position: absolute;" src="zoomup.png" onclick="svgMap.zoomup()" width="20" height="20" /></nowiki>
<nowiki><img id="zoomdownButton" style="left: 5px; top: 25px; position: absolute;" src="zoomdown.png" onclick="svgMap.zoomdown()" width="20" height="20" /></nowiki>
: img要素かつidが上記の値である必要があります。
　伸縮ボタンを一回押すたびに伸縮する比率は、別途svgMap.setZoomRatio(ratio)で設定可能。
　デフォルトの比率はsqrt(3)
　
=====測位ボタン=====
<nowiki><img id="gpsButton" style="left: 5px; top: 45px; position: absolute;" src="gps.png" onclick="svgMap.gps()" width="20" height="20" /></nowiki>
: img要素かつidが上記の値である必要があります。ボタン押下で測位し、測位点を中心にして地図を表示する機能。表示の範囲は測位制度に応じて適当に設置されます。

=====グローバルメッセージ=====
レイヤー固有UIが任意のメッセージを出力可能にするために設置するエリア　[[#レイヤー固有のUI]]のAPI '''putGlobalMessage''' 参照
<nowiki><span id="globalMessage" style="font-size:10px;left:5px;bottom:16px;position:absolute;"></span></nowiki>
: idが上記の値である必要があります。
　styleは任意

=====地図中心の緯度経度値表示=====
<nowiki><font id="centerPos" size="-2" color="brown" style="left: 50px; bottom: 5px; position: absolute;" ></font></nowiki>
: idが上記の値である必要があります。
　styleは任意

=====地図スケールの表示=====
<nowiki><font id="vScale" size="-2" color="black" style="left: 5px; bottom: 28px; position: absolute;">-</font></nowiki>
: idが上記の値である必要があります。
: styleは任意
: 縦50pxに対応したスケール[Km]を表示します
: 近傍に縦50pxのスケールイメージを設置するとわかりやすいでしょう

=====レジューム機能のためのチェックボックス=====
<nowiki><form style="right:10px;top:20px;position:absolute;opacity:0.8" ></nowiki>
<nowiki><input type="checkBox" id="resumeBox" onChange="svgMap.resumeToggle(event)" autocomplete="off"/></nowiki>
<nowiki><label for="resumeBox"/>Keep and Resume view</label></nowiki>
<nowiki></form></nowiki>
: checkboxタイプのform要素であり、idが上記の通りである必要があります。レジューム機能とは、(rev16以前ではcookie、rev17以降ではlocalStorage)を用いて、前回最後に表示された状態（レイヤーの表示非表示状態、表示領域（view port）を再現する機能です。スタイルおよびlabel要素は任意

===== [[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]のためのスタイル=====
<style>
body {
font-family: Meiryo;
}
#layerTable{
background:#ffE0E0;
border: 2px solid #bbb;
}
.layerItem{
background-color: white;
}
.noGroup{
background-color: #fff0f0;
}
#layerList{
background-color: #ffff80;opacity:0.8;
}
</style>
====== [[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]を用いる場合、例えば上記のようなスタイルの定義が必要です。======
* layerList：レイヤーリストUI全体に対するスタイル
* layerTable：レイヤーリストUIの中のテーブルに対するスタイル。
* layerItem：同テーブルに表示される個々のレイヤー表示に対するスタイル
* noGroup：同レイヤー表示のうち、グループに属さないレイヤーに対するスタイル
　

====レイヤー====
SVGMapは古典的な地図情報システムのようなレイヤーの概念を備えていません。一方その上位概念ともみなせる、任意のドキュメントをツリー状に埋め込む機能を備えています。しかしそれでは古典的なユースケースを平易に表現しているとはいえないため、それをラップする古典的なレイヤーの概念と、それに基づくレイヤーユーザインターフェースのフレームワークを持ちます。

フレームワークが最初に読み込む地図コンテンツの起点となる'''[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]'''の中で、animationもしくはiframeを用いて（準拠規格に依る）埋め込まれるsvgコンテンツが、自動的にレイヤーとみなされます。いうまでもなくレイヤーの上下順はSVGコンテンツのスクリプト中での埋め込みの順番の逆順になります。

また、このコンテナsvgコンテンツが参照し埋め込んでいる、各レイヤーのSVGコンテンツのことを、'''[[#レイヤー|レイヤーsvgコンテンツ]]'''と呼ぶこととします。ここで、各[[#レイヤー|レイヤーsvgコンテンツ]]はさらに別のsvgコンテンツを埋め込むことがあります。これらのコンテンツはよくサブレイヤーSVGコンテンツもしくは単にサブレイヤーと呼ばれることもあります。

なお、Rev12以降のSVGMapLv0.1フレームワークではレイヤーフレームワークは本体と独立した実装となり、拡張や切り離しが可能となりました。以下は、標準で提供されるレイヤーフレームワークのVer2 (SVGMapLv0.1_LayerUI2_r*.js)に関して解説します。

レイヤーUIフレームワークが提供するUIは、先述のレイヤーリストUIを設置するdiv要素によって提供されます。このUIは以下の機能を持ちます。
* 折り畳み可能なレイヤーの一覧を表示する機能
* 各レイヤーの表示非表示を切り替える機能
* グルーピングされたレイヤー(後述)をグループとして表現、折り畳み、一括表示非表示する機能。
* そのレイヤーに紐づけられた[[#レイヤー固有のUI]]を出現させる機能。
* 表示されているレイヤーの個数などの情報を表示する機能

===== コンテナsvgコンテンツの記述内容とレイヤーフレームワークの振る舞い =====
* animation要素：　レイヤーとみなされる
** title属性: レイヤーの名称となる。(必須属性) title属性値は他のレイヤーと重複してはならない(ID(このコンテンツ内でのレイヤーの識別子)として振る舞う)
** xlink:href属性: レイヤーsvgコンテンツへの参照
** visibility属性 : レイヤーの初期の表示状態。UIにより変更できる (hidden or visible)
** opacity属性 : レイヤーの透明度
** x,y,width,height属性の振る舞いは共通(viewportがこの属性の値とintersectしていただロードされる)
** class属性: スペース区切りで規定値(複数)と任意値(一つ)を記述できる
*** 詳細は後述の[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供]]を参照
** data-controller属性: (Optional) [[#レイヤー固有のUI]]　の　[[#詳細]]参照
* globalCoordinateSystem要素：(1個つだけ必須要素)
** (コンテナsvgコンテンツにおける)本要素が、このフレームワークによってUser Agentに表示される地図の図法を規定する。
*** なお、それ以外のSVGコンテンツのglobalCoordinateSystem要素は、コンテナsvgコンテンツの図法への変換のために用いられる
*** より詳細は[[#地理座標系の処理]]を参照
* svg要素: (documentRoot要素)
** viewBox属性: 初期の表示範囲を指定。
*** ここに記述する座標値は、SVGの仕様に準ずるが、　拡張記述形式も使用可能　参照：[[#メルカトル図法のドキュメントルート要素のviewBox属性]]

===== レイヤーsvgコンテンツ =====
レイヤーsvgコンテンツは、[[#レイヤー固有のUI|レイヤー固有のUI]]を紐づけることができます。

====クリッカブルオブジェクト====
グラフィックスオブジェクトをクリック（タブレットの場合は、タップもしくは照準アイコンに合わせたうえでタップ）することでそれに紐づけられたインタラクティブ動作を実行する。インタラクティブ動作はフレームワークが独自に提供する、metadataフレームワークに基づく、メタデータの表示機能を対象とします。

なお、image要素(useによって間接的に設置されたimage要素を含む)は、a要素によるハイパーリンクが加えて実装されています。metadaとa要素の双方が設定されているimage要素では、どちらのインタラクティビティを発動させるかをモーダルダイアログによるユーザへの問い合わせが行われます。

====class属性によるレイヤーのグルーピング・クリッカブル機能の提供====
コンテナsvgコンテンツが参照するレイヤー（[[#レイヤー|レイヤーsvgコンテンツ]]）へのリンクを記述する要素(animationもしくはiframe要素)は、class属性によって、各レイヤーに特性を与えることができます。classはスペース区切りで複数指定することができますが、グループ名は一つしか認識されません。
;グルーピング
: 以下の属性値以外の値を記述すると、グループ名として認識され、同じグループ名を持ったレイヤーたちをグルーピングすることができます。グルーピングの効果はレイヤーＵＩにおけるグループ表現と、下記のbatch,switch特性です。グループはレイヤーリストUI上の表現に反映されます。最初に現れたグループ名がこのUIの下に表示されます。ただし地図画面上の描画の順番はこれとは別、SVGの基本的な描画順([https://www.w3.org/TR/SVG11/render.html#PaintersModel Painter Model])に準じます。
;batch
: グルーピングとともに使用します。そのグループに属するレイヤーを一括で表示非表示するための機能がレイヤーＵＩに付加されます。
;switch
: グルーピングとともに使用します。そのグループに属するレイヤーは、どれか一つしか表示されません。batchとの併存はできません。（無視されます（要確認））
;clickable
: Pathなどのベクトル図形要素はデフォルトではインタラクティビティが提供されません。クラス値にclickableを指定することでこのレイヤー（子供のsvgコンテンツを含む）の図形要素においてのみ、インタラクティビティが提供されます。提供されるインタラクティビティは、マウスによって図形をクリックしたとき、そのグラフィックス要素がクリッカブルな要因を備えているかどうかを検索し、備えている場合それに対応するアクションを起こします。
　なお、image要素(useによって間接的に設置されたimage要素を含む)は、このクラスの設定に依らず、a要素によるハイパーリンク、およびmetadataフレームワークを用いたクリッカブルオブジェクトとして機能します。
;editable
: 当該レイヤの[[#レイヤー固有のUI|レイヤー固有UI]]に[[#svgMapAuthoringTool.で呼び出せるAPI|svgMapAuthoringTool]]の図形編集オブジェクトを設置する場合、それを有効に機能させるためにはこの属性が必要です。(なお再編集機能を有効にするにはclickableも必要)

====data-nocache====
コンテナsvgコンテンツが参照するレイヤー（[[#レイヤー|レイヤーsvgコンテンツ]]）へのリンクを記述する要素(animationもしくはiframe要素)に、data-nocache属性をつけることによって、クライアントのコンテンツキャッシュを無効にすることができます。なお、無効化手段はunix-timeクエリパートをそのレイヤー下のすべてのリソースへのアクセスに付加させることによります。

====metadataフレームワーク====
データ格納効率に優れたメタデータのフレームワークが提供されます。このメタデータは先述のクリッカブルオブジェクトとしてインタラクティビティの実装に用いられます。 svgドキュメントルート要素のproperty属性にメタデータの属性名をカンマ区切りで列挙。同文書の図形要素のproperty属性に同じ順序でメタデータの値を記述します。(なお、xlink:title属性でマウスオーバーで機能する吹き出しを設置できます)

ひとつの文書に対して一つのスキーマ（メタデータの属性名とその順番）しか与えられないという制約を持ちます。（その代わり格納効率が高い）クリックやタッチ等によってデフォルトの状態ではブラウザが備えるモーダルダイアログに属性名と属性値がそれぞれ列挙された形で表示されます。metadata表示機能の拡張/カスタマイズについては、ウェブアプリケーションの開発の章で別途解説する'''setShowPoiProperty()'''関数を参照してください。

データ自体にカンマが含まれる場合はエスケープが必要です。

=====例：=====
<svg '''property="id,type,latitude,longitude,title,address,spec"''' ... >
...
<use transform="ref(svg,14118.37511,-4524.39994)" x="0" y="0" xlink:href="#syl8"
'''content="RIS/RJER,地方管理,45.2439994,141.1837511,利尻空港,北海道利尻郡利尻富
士町,1800×45(07/25)"''' xlink:title="利尻空港"/>
...
</svg>

====レイヤーリストUIの詳細====
[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.28.E5.BE.8C.E8.BF.B0.29.E3.82.92.E8.A8.AD.E7.BD.AE.E3.81.99.E3.82.8Bdiv.E8.A6.81.E7.B4.A0|レイヤーリストUIが設置されるdiv要素]]には、以下のプロパティを設定することで、UIの動作を調整するパラメータを与えることができます
* data-customizer [https://github.com/svgmap/svgmapjs/blob/main/SVGMapCustomLayersManager_r3module.html カスタムレイヤーマネージャ]の起動ボタンを設置し、プロパティ値で同ウェブアプリのパスを指定します。
* data-layerstylecontroller 各レイヤーの表示スタイルを調整するUIを設置します(値不要)
* data-hiddenfilter 表示されていないレイヤーをレイヤーリストUI上でも非表示にする機能を稼働させます(値不要)
* data-opened svgMapウェブアプリが起動した直後にレイヤーリストが開かれた状態にします
* data-fixed レイヤーリストが開かれた状態且つ閉じるボタンを表示させません(data-openedと排他)

===動作の制限・差異===
====再描画の制限====
* ブラウザネイティブのSVG描画機能に対して注意すべき点として、このSVGDOMの描画は、基本的に伸縮スクロールのタイミングでしか行われない点です。（ネイティブのSVG描画機能は60fpsで再描画する努力を行っている) そのため、再描画タイミングを意識・明示([[#refreshScreen|refreshScreen]]関数を使用)したアプリケーションの構築が必要になるケースがあります。
*関連情報
**[[内部機構解説#Zoom.2FPan_Controller:]]
**[[解説書#refreshScreen|refreshScreen]]
**[[解説書#setPreRenderController|setPreRenderController]]
**[[解説書#.E6.8B.A1.E5.BC.B5API|preRenderFunction ]]
**[[解説書#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|動的な地図レイヤー]]
**[[解説書#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|レイヤー固有のUI]]
**[[解説書#.E6.8B.A1.E5.BC.B5.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88|拡張イベント]]

===実装されている機能===
多くの機能が実装されていないため、実装されている機能、および拡張された機能をここでは列挙することとします。
====要素====
*path
*globalCoordinateSystem
*circle
*text
*defs
*animation
** 別のsvgコンテンツを取得して埋め込みます。
** コンテナsvgコンテンツで使用した場合は埋め込んだコンテンツは「レイヤー」と見做されます。
** それ以外で使用した場合はタイルやサブレイヤーとして使用できます。
** x,y,width,height属性は、SVGの仕様に基づき埋め込むコンテンツのtransformに影響を与えるとともに、下記の通り動的なコンテンツの読み込み機構が制御されます。
*** この属性で示された領域がtransform後のviewportと交差・包含した場合、その埋め込みコンテンツは動的に取得され表示されます。lazy loadの機構に相当し、タイリングメカニズムを構成します。
*** ただし、visible-min-zoom およびvisible-max-zoom属性で示された拡大率による表示条件を満たしていない場合は取得されません。level of detailの機構に相当します。（x.y,width,height属性と組み合わせることで、タイルピラミッド（ラスター、ベクターを含む）機構を実現します。詳しくは[http://kikakurui.com/x7/X7197-2012-01.html JISX.7197]、[https://www.w3.org/Submission/2011/04/ Tiling and Layering Moduleサブミッション]、もしくは[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html こちらの論文]を参照
** commonQuery属性：[[#レイヤーsvgコンテンツ]]のanimation要素でこの属性を設置すると、そのレイヤーのコンテンツを取得するすべてのGETリクエストのクエリパートにこの属性で設定した値が共通付加されます。(もしKey=Valueの形のクエリを追加したい場合は文字列として"Key="の部分も含めてこの属性値に設定します。)
*iframe
** animationと同等
*image
** 別のビットイメージコンテンツを取得して埋め込みます。
** animation属性のx,y,width,height属性と同様の追加のlazy loadの振る舞いを持ちます。
** visible-min-zoom およびvisible-max-zoom属性の振る舞いも同等です。
** xlink:href属性はspatial fragment をサポートし、(xywhによっ参照されるimageの部分を埋め込む機能をサポートします。)。もしもアスペクト比が異なった場合（ＴＢＤ）
** style:filterプロパティによる画像処理をサポートします。
** data-mercator-tile="true"　属性が設定されている場合、そのビットイメージはメルカトル図法で描画されていることを示します。
** htmlのimg要素のcrossoriginに対応する属性を持つことができます（この場合ビットイメージの埋め込みに際しoriginヘッダが送信）
*view

====属性====
*<code>ref(svg,x,y)</code> ：SVG1.2Tの[https://www.w3.org/TR/SVGTiny12/single-page.html#coords-transform-ref TransformRef]属性により、non-scaling objectが設置できます。Pointフィーチャの可視化に効果的です。　

'''TBD'''
*fill
*stroke
*arrow
*dasharray
*viewvox
*opacity
*style
**image-rendering : pixelated / image要素
**fill
**stroke
**opacity
*meta
**http-equiv="refresh" : [[#レイヤー|レイヤーsvgコンテンツ]]のみ。contentに秒数を設定することで、そのレイヤーを指定秒数ごとに(再読み込み)更新する。script要素はonloadが再実行される。　注：ブラウザのキャッシュが効く可能性を考慮して実装する必要がある。

==第三章：ウェブアプリケーションの開発==
本章はSVGMap Revsion 0.1フレームワークを用いたウェブアプリケーションの開発について解説します。
本フレームワークによる開発部分は以下に分類されます。
*[[#フレームワークの呼び出し|ルートhtml文書]]によるウェブアプリケーション(SVGMapフレームワーク)
* 動的な地図レイヤー(Layers as WebApps) : SVGコンテンツに以下のいずれかの情報を設定する
** [[#レイヤー|レイヤーsvgコンテンツ]]のドキュメントルート要素のdata-controller属性　[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|レイヤー固有のUI]]
** svgドキュメントに設置されたscript要素 [[#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|script要素による動的な地図レイヤー]]

===SVGMapフレームワーク===
[[#フレームワークの呼び出し|ルートhtml文書]]によるウェブアプリケーションはSVGMapLv0.1フレームワークを用いたウェブアプリケーションの基本であり、そのhtml文書と底傘参照されたjavascriptライブラリを読み込んだwindowが持つ''''svgMap''''という名前のインスタンスを用いてフレームワークのための拡張機能を利用することができます。

====SVGMapが持つ基幹オブジェクト====
SVGMapLv0.1フレームワークのインスタンス''''svgMap''''が持つ基幹のオブジェクトを解説します。これらの基幹オブジェクトはそれぞれゲッター(getSvgImages, getSvgImagesProps)によって取得できます。
=====svgImages[]=====
[[#getSvgImages|getSvgImages()]]により取得できる。svgImages[hashID]は、現在ローディングされているSVGドキュメント(“XML” DOMツリー(SVG DOMツリーというよりむしろ))が蓄積されているハッシュテーブル
*ハッシュID：フレームワークが任意に付番した文書ID。ただし、最初にロードされるルートのドキュメントのハッシュキーは、”root”
*なお、[[#レイヤー固有のUI]]のwebAppでは、そのレイヤーに該当するSVGドキュメントが[[#svgImage|svgImage]]で取得できる。

=====svgImagesProps[]=====
[[#getSvgImagesProps|getSvgImagesProps()]]によって取得できる。
同、個々のSVGドキュメントが持つ、各種プロパティが蓄積されているハッシュテーブル。
注記がない限り全てReadonly
*ハッシュID： svgImages同様
*なお、[[#レイヤー固有のUI]]のwebAppでは、そのレイヤーに該当するSVGドキュメントが持つ、各種プロパティが[[#svgImageProps|svgImageProps]]で取得できる。
======プロパティリスト======
*.Path コンテンツのパス（webAppsのdocument(html) rootに対する相対パス。Originが違う場合は絶対パス(クエリパートやフラグメント(ハッシュ)も含む)
*.CRS 地理座標からSVG座標に変換するための変換パラメータ
*.script SVG文書がscript要素を持つとき、そのscriptへのインターフェースが登録される。同script要素で生成されるオブジェクトに暗黙に登録されるメンバー変数については、[[#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|script要素による動的な地図レイヤー]]の章を参照
*.editable 編集可能レイヤーを示す　[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供|レイヤーのclass = editableに対応]]
*.editing 編集可能レイヤーを編集中
*.isClickable クリッカブルなレイヤーを示す
** true:設定　[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供|レイヤーのclass = clickableに対応]]
** 以下をメンバーに持つオブジェクト:ハイライト時のスタイルを設定可能(rev18以降)
*** .hilightFillStyle : ポリゴンオブジェクトのハイライト時スタイル（以下のメンバーが無い場合はハイライトしない）
**** .color : 塗りの色 (CSS の color値として解釈される文字列)
**** .lineWidth : 線幅
*** .hilightStrokeStyle : 線オブジェクトのハイライト時スタイル（以下のメンバーが無い場合はハイライトしない）
**** .color : 線の色 (CSS の color値として解釈される文字列)
**** .widthIncrement : 線幅の増加値
*.parentDocId このSVG文書を埋め込んでいる、親のSVG文書のハッシュID
*.childImages[hashID] このSVG文書が読み込んでいる、子のSVG文書(複数)
*.refresh
**.loadScript
**.timeout
**.start
*.controller レイヤー固有のUIへの(web appsのdoc rootに対する)相対パス
*.isSVG2 その文書がSVG2タイプの文書であるかどうか(CRSとembedの仕方がちがう）
*.rootLayer そのSVG文書が属する「レイヤー」を示す文書
*.scale そのSVG文書の現在のスケール。スケールはそのSVG文書の座標系と画面の座標系との間の値（地理座標系ではない）。拡大するとスケール値は大きくなる
*.preRenderControllerFunction そのSVG文書の再描画(画面更新)シーケンスの直前に実行される関数
*.hash そのレイヤーのURLのフラグメント部（この値は、レイヤ固有WebAppで変更が有効）

====利用可能API====
【TBD】 APIのリストは下記の通りです。
=====SVGMap.で呼び出せるAPI=====
======Geo2SVG======
*Geo2SVG( lat , lng , crs ) : 指定された緯度(lat)・経度(lng)・CRSより、SVG座標を計算する
======POIviewSelection======
*POIviewSelection( poi ) : 指定されたPOIの属性・リンクの表示選択画面を表示する。また、選択したイベントに従い、属性の表示または、リンク先のページを表示する。
======SVG2Geo ======
*SVG2Geo ( svgX , svgY , crs , inv ) : 指定されたSVG座標(svgX , svgY)をCRSにより、GEO座標に変換する。または、invにより逆変換する
======addEvent======
*addEvent(elm,listener,fn) : 指定された要素(elm)にイベント属性(listener)時の呼び出す関数(fn)を設定する (addEventListenerが実装されていなかったブラウザサポートの名残です)
======callFunction======
*callFunction( fname ,p1,p2,p3,p4,p5) : 指定した関数(fname)を引数(p1,p2,p3,p4,p5)を渡してフレームワーク内の任意の関数を実行する。(フレームワークの内部関数も呼び出すことができる)
======captureGISgeometries======
*captureGISgeometries( cbFunc , prop1 , prop2 , prop3 , prop4 , prop5 , prop6 , prop7 ): 現在画面上に表示中の地図コンテンツに対応した、GeoJsonのGeometryデータ構造に準拠のGISgeomerry情報をがレイヤ単位でまとまった連想配列の形で取り出す。非同期処理で、cbFuncの最初の引数に返却される。
** 連想配列のハッシュ値：レイヤID
** geomeryには、src(そのジオメトリのもととなっているSVGの図形要素), href(ビットイメージの場合のリンク)が付加される
** geoJsonのgeometryに相当する情報が含まれる（座標は[経度,緯度]）
** display="none"の図形要素は表示されていないとみなされる。また画面外にある図形要素も表示されていないとみなされる。画面に部分的に表示されている要素は表示されているものとみなされるとともにクリッピングも行われない。
** [[#captureGISgeometriesOption|captureGISgeometriesOption]](true)を設定してから実行すると、ビットイメージもジオメトリとして取得する。（ただし実データは含まれないので必要に応じて[[#getImagePixelData|getImagePixelData]]で取得する）
*** type : Coverage
*** src : 画像情報のURL
*** coordinates : transformのb,c==0の場合、当該画像の南西、北東端が設定される
*** transform : b,c!=0の場合の、画像の座標(左上隅を0,0、右下隅が画像のw,h)から地理座標([経度,緯度])への一次座標変換情報(a,b,c,d,e,f)が設定される

======captureGISgeometriesOption======
*captureGISgeometriesOption(BitImageGeometriesCaptureFlg, TreatRectAsPolygonFlg, SkipVectorRenderingFlg, captureAlsoAsBitImage): captureGISgeometriesでキャプチャするデータの取得条件を設定する。
** BitImageGeometriesCaptureFlg: ビットイメージタイルをカバレッジとして取得するか(Default:false)。captureGISgeometriesを呼び出す前に使用する。
*** 2019.5.17アップデートで、transform matrix(非対角要素あり)を持つビットイメージタイルについても必要な情報を得られるようになった。
** TreatRectAsPolygonFlg: rect要素をポリゴンとして扱う(デフォルトは円もrectもPointとして扱われる)
** SkipVectorRenderingFlg: ベクトル図形の描画をスキップする
** captureAlsoAsBitImage: polygon/polylineの図形を描画したビットイメージをレイヤー単位でカバレッジデータとして取得
*captureGISgeometriesOption(captureGISgeometriesOptionObject) : オブジェクトでも設定できる(rev18以降)（以下そのメンバー変数：全て値はboolean）
** .BitImageGeometriesCaptureFlag, .TreatRectAsPolygonFlag, .SkipVectorRendering, .captureAlsoAsBitImage　上と同様

======checkSmartphone======
*checkSmartphone() : タッチに対応したスマホブラウザなのかどうかを判別
======childDocOp======
*childDocOp(func , docHash , param1, param2 , param3 , param4 , param5) : 指定した文書をルートにして、DOM操作をその子文書に対して実行する。なおこれはlinkedDocOpの直系の子供のみ適用版(自身も適用しない)
======dynamicLoad======
*dynamicLoad( docId , parentElem ) : 指定した文書ID(docId)以下の表示に必要な文書を読み込み、指定したdiv要素(parentElem)に表示する
======escape======
*escape(str) : 以下の文字をHTMLエスケープする(&:&amp,":&quot;,':&#039;,<:&lt;,>:&gt;)
======geo2Screen======
*geo2Screen( lat ,lng ) : 地理座標を指定すると、その画面上のキャンバスの座標(px)を返す
======getBBox======
*getBBox( x , y , width , height ) : 指定された値でviewBoxを作成する

======getBasicPermanentLink======
* getBasicPermanentLink(copyLinkTextToClipboard) : 現在の表示状態(レイヤーの表示非表示および表示領域)を反映した基本的なパーマリンクを生成する
** URLオブジェクトが返却される
** copyLinkTextToClipboardがtrue場合、クリップボードにもURLがコピーされる。
** 生成されるURLは、[[#起動URLによるオプション指定]]の仕様に基づく
** 参考：[[#サブレイヤーパーマリンク]]

======getCentralGeoCoorinates======
*getCentralGeoCoorinates() : グローバル変数 rootViewBox,rootCrsから画面中心地理座標を得る
======getConversionMatrixViaGCS======
*getConversionMatrixViaGCS( fromCrs , toCrs ) : 元座標変換行列(fromCrs)から先座標変換行列(toCrs)への変換行列を作成する

======getCORSURL======
* getCORSURL(originalURL, alsoCrossoriginParam) : クロスオリジンアクセス用URLを生成する。([[#setProxyURLFactory|setProxyURLFactory]]の第4,5引数が設定されている場合)
** alsoCrossoriginParam クロスオリジンアクセスに際してoriginヘッダが必要かを取得する(この引数がある場合は.url, .crossorigin メンバを持つオブヘクトが返却される)
** レイヤー固有UIのウェブアプリなどで独自にクロスオリジンアクセスを行ってデータを取得するような場合にプロキシ経由のURLを生成するのに利用できます。
** 参考：[[#.E3.83.97.E3.83.AD.E3.82.AD.E3.82.B7.E3.81.AE.E8.A8.AD.E5.AE.9A|クロスオリジンアクセスのためのプロキシ設定]]

======getDevicePixelRatio======
*getDevicePixelRatio( docId ) : setDevicePixelRatioで設定した値を取得できる。 docIdが指定されなかった場合は全ての値が得られる

======getElementByImageId======
*getElementByImageId( XMLNode , searchId ) : 指定されたSVG文書群ノード(XMLNode)以下の属性iidが指定されたID(searchId)と等しいノードを返す

======getLoadErrorStatistics======
*getLoadErrorStatistics() : 伸縮スクロール、refreshScreenごとの、リソースの読み込み状況を取得する。
**メンバー変数: timeoutBitImagesCount,timeoutSvgDocCount,otherBitImagesCount,otherSvgDocCount

======getGeoViewBox======
*getGeoViewBox() : コンテナsvgのviewBoxをgeo変換したgeoのviewBoxを取得
======getHashByDocPath ======
*getHashByDocPath ( docPath ) : ターゲットのレイヤーのハッシュをPath名(docPath)から探し出す
======getHyperLink======
*getHyperLink( svgNode ) : 指定されたsvg文書(svgNode)から、親文書をたどり最初に取得できたハイパーリンクを取得
======getInverseMatrix======
*getInverseMatrix(matrix) : 逆行列を求める(matrix.a..f)
======getLayer======
*getLayer(layerID_Numb_Title) : [[#getLayerId|layerID]],title,番号,href(URI)のいずれかで、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]SVGDOMにおけるレイヤーの(svg:animation or svg:iframe)要素を取得する。getLayersと似ているが、getLayersのほうは任意のsvg文書(オプションなしではroot container)に対して、内包されるレイヤーのリストを返却。こちらは[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]に対して検索キーに基づいてレイヤーを返却する

======getLayerId======
*getLayerId( layerKey ) : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]における"レイヤ"概念のレイヤidを検索する。検索に用いることができるのは、getLayerと同じtitle,url,もしくはルートレイヤの要素
* layerIDはレイヤー名とは異なる、フレームワークによって任意に附番された、そのSVGMapドキュメントを識別するための文字列。このlayerIDを基に動作するAPIが多くあります。
* [[#レイヤー固有のUI]]　の　[[#layerID]] も参照

======getLayers======
*getLayers( id ) : オプションなしの場合、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーに該当する要素をリストアップし、返却する。オプションアリの場合、そのidを持つ要素を返却
======getLinearTransformMatrix======
*getLinearTransformMatrix(x1i,y1i,x2i,y2i,x3i,y3i,x1o,y1o,x2o,y2o,x3o,y3o) : ３つの基準点の変換前後の座標を与えると、それに適合する1次変換行列が得られる。(*i:変換前の座標, *o:変換後の座標)
======getMapCanvas======
*getMapCanvas() : 地図キャンバスとなる、おおもとのdiv要素の取得
======getMapCanvasSize======
*getMapCanvasSize() : 地図キャンバスのサイズ(画面サイズ)を取得
======getMouseXY======
*getMouseXY( evt ) : 指定されたイベント時のマウスの画面上の座標(px)を返す
======getNonScalingOffset======
*getNonScalingOffset(svgPoiNode) : 拡大縮小しても伸縮しない図形要素のオフセット値を取得する
======getObject======
*getObject( oname ) : 指定されたオブジェクト(oname)を取得
======getPoiPos======
*getPoiPos( svgPoiNode ) : =getNonScalingOffset
======getRoot2Geo======
*getRoot2Geo() : コンテナsvgのCRSの逆変換CRS( rootのsvg - > geo )を取得
======getRootCrs======
*getRootCrs() : コンテナsvgのCRS ( geo->rootのsvg )を取得
======getRootLayersProps======
*getRootLayersProps() : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の(animetion||iframeで構成される)レイヤー情報を取得する。Arrayが返却、並び順はsvgの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]と同じ（最初のレイヤーが一番下。selectメニュー創るときはひっくり返して使うこと）レイヤー情報：名称、表示非常時状態、レイヤーグループ、グループのフィーチャ(バッチ||スイッチ||ふつう)、編集可、編集中、対応SVGドキュメント、個別ユーザインターフェース、個別凡例
======getRootViewBox======
*getRootViewBox() : aspectを加味し実際に開いているコンテナsvgのviewBoxを取得
======getSvgImages======
*getSvgImages() : svg文書群(XML)の連想配列を取得(ハッシュキーは[[#getLayerId|layerID]]("root"以外は"i"+連番))
* (参考:[[#svgImages.5B.5D|svgImages]])

======getSvgImagesProps======
*getSvgImagesProps() : svg文書群のプロパティ( .Path,.CRS,.script,.editable,.editing,.isClickable,.parentDocId,.childImages,.controller)の連想配列を取得(ハッシュキーは[[#getLayerId|layerID]]("root"以外は"i"+連番))
* (参考:[[#svgImagesProps.5B.5D|svgImagesProps]])

======getSvgTarget======
*getSvgTarget( htmlImg ) : html文書中のimg要素(POI)を入力すると、対応するSVG文書の文書番号とその要素(use)が出力される。対応するuse要素を持つsvg文書自体を取得したい場合は.ownerDocumentする。idからhtml文書のimg要素を取得するには、Document.gelElementById(id)
======getSwLayers ======
*getSwLayers ( cat ) : swLayers[クラス名]に、クラス名ごとのレイヤー(のSVG要素)の全リストを構築する。catがある場合は、catの名称を持つもののリストのみを構築する
======getSymbols======
*getSymbols(svgDoc) : POI編集のsymbol選択を可能にするとともに、defsは、useより前に無いといけないという制約を払った
======getTickerMetadata======
*getTickerMetadata() : 現在Tickerが表示されているグラフィックスオブジェクトのメタデータを取得する
======getTransformedBox ======
*getTransformedBox ( inBox , matrix ) : 指定されたviewBox(inBox)を変換行列にてサイズ変更と移動のみでの座標変換する。b=0、c=0の場合のみ利用可能。たとえば、matrixには、svgImagePropsのCRSを設定することで、そのSVGMapコンテンツのSVG座標系でのviewPortが計算できる。このときmatrixは線形変換の係数が含まれたオブジェクトでも良いし、[[#.E5.A4.9A.E6.A7.98.E3.81.AA.E5.9B.B3.E6.B3.95.E3.81.AE.E5.AE.9A.E7.BE.A9.E3.81.A8.E5.88.A9.E7.94.A8|非線形変換のための関数が含まれたオブジェクト]]でも良い。　svgMap.getTransformedBox(svgMap.getGeoViewBox(),svgImageProps.CRS)

======getUaProp======
*getUaProp() : ブラウザの種類(isIE：IEかどうか、isSP：スマートフォンかどうか)を取得する
======getVerticalScreenScale======
*getVerticalScreenScale(screenLength) : 垂直(緯度)方向のscreenLengthに対する長さを取得する(input: px, return : Km)
======getViewBox======
*getViewBox( svgDoc ) : 指定したSVG文書のviewBoxを取得
======gps======
*gps() : ブラウザの測位APIによって測位しその点を中心に表示、表示縮尺は測位精度を元に適当に決定
======gpsCallback======
*gpsCallback(position) : GPS測位が成功した後に実行されるコールバック関数で、positionを中心とした場所を表示させる
======handleResult======
*handleResult( docId , docPath , parentElem , httpRes , parentSvgDocId ) : SVG文書を(docPathから)svg文書群とそのプロパティをHTTPXMLRequest(httpRes)から親文書(parentSvgDocId)の子文書(docId)として読込み、指定されたHTML要素(parentElem)に貼り付ける
======ignoreMapAspect======
*ignoreMapAspect() : 地図のアスペクト比を、rootSVGのviewBox( or hashのviewBox)そのものに設定する
======initLoad======
*initLoad() : load時に"一回だけ"呼ばれる初期化関数
======isIntersect======
*isIntersect( rect1, rect2 ): rect1(x,y,width,height)とrect2が交差(包含も含む)しているかどうかを返却
======linkedDocOp======
*linkedDocOp( func , docHash , param1, param2 , param3 , param4 , param5 ) : 再帰実行のルートになる文書のハッシュ(docHash)以下の子・孫・・・文書に対して、同じ処理(func( docHash , param1, param2 , param3 , param4 , param5 ))を再帰実行する関数
======loadSVG======
*loadSVG( path , id , parentElem , parentSvgDocId) : SVG文書を(pathから)svg文書群とそのプロパティを親文書(parentSvgDocId)の子文書(id)として読込み、指定されたHTML要素(parentElem)に貼り付ける
======matMul======
*matMul( m1 , m2 ) : 行列の積 x',y' = m2(m1(x,y)) = m(x,y) となる変換行列を構築
======numberFormat======
*numberFormat( number , digits ) : 指定された数値(number)を小数点以下第digit+1位を四捨五入した値を取得
======override======
*[OBSOLUTEWD] override( mname , mval ) : グローバルオブジェクトの関数プロパティでmnameという変数にmvalの値を代入する

======panMap======
* panMap( x, y, options ) : 地図をスムースにスクロールさせる
** x,y : パン量デフォルトはpx
** option.unit でパン量のコンテキストを変化できる
*** "%"||"percent"||"ratio" : 地図キャンバスに対する相対値で指定 (%,percentはパーセント, ratioは比率)
*** "canvas" : 地図キャンバス上の指定した座標を地図中心に
*** Note: 地理座標でパンする場所を変えたい場合は[[#geo2Screen]]を併用すると良い

======parseEscapedCsvLine======
*parseEscapedCsvLine(csv) : CSV 1行分文字列データ(csv)をエスケープを考慮して配列にパースする。
======refreshScreen======
*refreshScreen() : 画面の再描画を実行する（[[解説書#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90|参考情報]]）

======registLayerUiSetter======
*registLayerUiSetter( layerUIinitFunc, layerUIupdateFunc ) : レイヤー選択UI初期化関数と更新用関数を設定する
======reLoadLayer======
*reLoadLayer(layerID_Numb_Title) : 指定したレイヤー([[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーのみ。小孫レイヤーはNG)をリロードする
======resumeToggle======
*resumeToggle(evt) : 引数のイベント(evt)ターゲットのチェックボックスのチェック状態により、setResumeを実行する
======screen2Geo======
*screen2Geo( screenX , screenY ) : 画面上の座標(px)を指定すると、その地理座標を返す
======setCenterHitTest======
*setCenterHitTest(enable) : 自動中心ヒットテストの設定を変更するデフォルト:true

======setCursorCenterZooming======
*setCursorCenterZooming(enable) : (カーソル|ピンチ)位置中心ズーム機能を設定するデフォルト:false

======setCustomModal======
*setCustomModal( messageHTML , buttonMessages , callback,callbackParam) : モーダル画面を出現させ、指定されたメッセージ(messageHTML(String)もしくはdomオブジェクト(Object))、指定されたボタン(buttonMessages(Array))を表示する。ボタンが押された場合、コールバック関数(callback)を引数(クリックしたボタンのインデックス, callbackParam)を渡し呼び出す。
messageにHTML Stringだけではなく、DOM objectが使える点、ボタンに対するcallbackを設定できる点。ただしモーダルダイアログになる点が[[#showModal]]と異なる。

======setDefaultHilightStyle======
*setDefaultHilightStyle( style ) : ヒットテストなどによるオブジェクトのハイライト時のスタイルを設定する
* style : {stroke:{color,widthIncrement}, fill:{color,lineWidth,lineColor}}
** stroke : 線オブジェクトに対してハイライト時の色(color)と線幅増分(widthIncrement)
** fill : 塗りつぶしオブジェクトに対してハイライト時の色(color)、輪郭線幅(lineWidth)、輪郭線色(lineColor)

======setDevicePixelRatio======
*setDevicePixelRatio( dpr (, layerId) ) : zoom計算時に用いる(たとえば２にするとzoom値が本来の２分の１になる)変数を指定値(dpr)に設定する。ズームに応じた表示制御(visible*zoom属性等のLevel of Detail機能)に影響を与える。オプションの[[#getLayerId|layerId]]を指定すると、指定したlayerに対して別個の値を設定する。dprにnullを与えると初期値(1)にクリア。

======setGeoCenter======
*setGeoCenter( lat , lng , radius) : 中心地理座標を指定して地図を移動 (radiusは緯度方向の度1≒110Km) lat,lng:必須 radius:オプション(今の縮尺のまま移動)
======setGeoViewPort======
*setGeoViewPort( lat, lng, latSpan , lngSpan , norefresh) : 地理(グローバル)座標系で指定したエリアを包含する最小のviewportを設定する
======setLayerVisibility======
*setLayerVisibility([[#getLayerId|layerID]]_Numb_Title, visivility, [options]) : 指定した[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーの表示非表示を設定し、layerListUIのアップデートも行う
** layerID : String: [[#getLayerId|layerID]]のの文字列
** visivility : Boolean
** options : Object　以下のメンバー変数でオプションの指定が可能
*** .exec : String : 指定したレイヤーがレイヤー固有UIを持つ場合、その起動を指定できます。与えることができる文字列は[[#.E8.A9.B3.E7.B4.B0|data-controllerの起動オプション]]と同じ。
*** .hash : 指定したレイヤーを表示するときにハッシュ値を設定する

======setMapCanvas : ======
*setMapCanvas : ( mc ) : 地図キャンバスとなる、おおもとのdiv要素を指定した要素(mc)に設定
======setMapCanvasCSS======
*setMapCanvasCSS(mc) : マップキャンバスのCSS(postion、overflow、top、left、width、height)を設定
======setMapCanvasSize======
*setMapCanvasSize( mcs ) : 地図キャンバスのサイズを指定したサイズ(mcs)に設定
======setPreRenderController======
*setPreRenderController( layerID, cntFunc ) : 再描画(画面更新)シーケンスの直前に実行する関数(cntFunc)を設定する。　[[#getLayerId|layerID]]が指定されていると、そのIDをもつSVG文書に対して設定する。指定されていない場合は、全てのSVG文書に対して指定した関数が描画前に実行される。cnfFuncが無い場合は設定を解除する。また、cntFuncには再描画前制御の際に必要になるかもしれないいくつかの変数が第一引数にオブジェクトの形で渡される。(docId,scale,actualViewBox,geoViewBox,viewChanged(zoom|scroll|false) なお、SVGMapLayerUI.jsが有効化されている場合、[[#.E6.8B.A1.E5.BC.B5API|レイヤ固有UIのhtml文書中のscript内にpreRenderFunctionという関数]]がある場合、そのレイヤーを指定したsetPreRenderControllerでの関数設定と同じ振る舞いをする。なお、この処理内容は、動的レイヤー(<script>を持つSVGコンテンツ)のonload関数と同じタイミングで呼び出される関数をレイヤ固有UI等に設置できるものと考えると良い。

======setResume======
*setResume( stat ) : レジュームを実行するかどうかを引数(stat)によって設定し、cookieにレイヤー情報を保存する
======setRootLayersProps======
*setRootLayersProps(layerID_Numb_Title, visible , editing , hashOption , removeLayer , execOption ) : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の(animetion||iframeで構成される)レイヤー情報を設定する。[[#getLayerId|layerID]]_Numb_Titleは、レイヤー番号(root svg container内での順番)、[[#getLayerId|layerID]](svg文書のiid = htmlのid = selectのvalue)、タイトル名(不確実-同じ名前があるかもしれない。最初に当たったものを選択)。変化があるとtrueが返却される。
*visible , editingはtrue,false,nullのいずれか。nullの場合、その値を変化させないという意味。もしくは不合理の場合はfalseが返却される。この時classで設定されているレイヤーグループの特性(switch)に基づいた制御がかかる
*hashOption 指定したレイヤーを表示するとき、ハッシュを指定して表示する
*removeLayer 指定したレイヤーを消去する
*execOption レイヤ固有UIを持つレイヤーを表示する場合の起動方法を指定："hiddenOnLayerLoad", "onClick", "appearOnLayerLoad"のいずれか。[[#.E8.A9.B3.E7.B4.B0|詳細はこちらを参照]]

*setLayerVisibilityと異なり、アップデート(refreshScreen())は別途行う必要がある

======setRootViewBox ======
*setRootViewBox ( rvb ) : aspectを加味し実際に開いているコンテナsvgのviewBoxを指定したコンテナsvgのviewBox(rvg)に設定*setShowPoiProperty( func , docId ) : 特定のレイヤー・svg文書(docId)もしくは、全体に対して別のprop.表示関数(func)を指定する。funcが未指定の場合、設定された関数をクリアする。指定した関数は、帰り値がfalseだった場合、デフォルトprop.表示関数を再度呼び出す
======setShowPoiProperty======
*setShowPoiProperty(func , docId ): 特定のレイヤー・svg文書(いずれもdocIDで指定)もしくは、全体に対してPOIをクリックした時の表示関数をセットする
**セットされていないときは内蔵のデフォルト関数が使用される
**docId: セットされていないときはすべてのレイヤの docIdがルートレイヤに対応するものの場合はそのレイヤー下の子孫文書に対しても
**func: コールバック関数
*** funcがセットされいていないときはクリアする
*** funcの第一引数にはクリックされた要素が入る

======setSmoothZoomInterval======
*setSmoothZoomInterval(zoomInterval) : ズームアニメーションの設定(ズームイン／アウト後のタイル読み込み開始タイマー(ms))(Default:20ms)
======setSmoothZoomTransitionTime======
*setSmoothZoomTransitionTime(zoomTransitionTime) : ズームアップ[[#zoomup]]／ダウン[[#zoomdown]]／パン[[#panMap]]時の遷移時間(Default:300ms)

======setSummarizeCanvas======
*setSummarizeCanvas( val ) : 2Dベクトル図形描画用に統合キャンバス(レイヤー単位でのキャンバス統合)の使用有無を設定する。デフォルトは統合する
======setUpdateCenterPos======
*setUpdateCenterPos(func) : 中心座標書き換え関数を指定した関数に設定(デフォルト:id="centerPos"要素の文字列を適当に書き換える)
======setProxyURLFactory======
*setProxyURLFactory( documentURLviaProxyFunction, imageURLviaProxyFunction, imageCrossOriginAnonymous, imageURLviaProxyFunctionForNonlinearTransformation, imageCrossOriginAnonymousForNonlinearTransformation, LaWAfetchviaProxyFunction ): コンテンツの取得をプロキシ経由等にするために、URL(文字列)を書き換える関数を指定する。
** documentURLviaProxyFunction : svgドキュメント用のプロキシ経由のURLを生成する関数をここに設定する。<code>URLviaProxy = documentURLviaProxyFunction(URL)</code>
** imageURLviaProxyFunction : 同ビットイメージ用
** imageCrossOriginAnonymous : ビットイメージのコンテンツ取得に際しcrossorigin = "anonymous"を設定
** imageURLviaProxyFunctionForNonlinearTransformation: ビットイメージへの非線形図法変換専用のプロキシ経由URL生成関数を設定する。
** imageCrossOriginAnonymousForNonlinearTransformation : 同上のコンテンツ取得に際しcrossorigin = "anonymous"を設定
** LaWAfetchviaProxyFunction : [[#レイヤー固有ユーザインターフェース|LaWA]]内のFetch/XHRに対してプロキシ経由URL生成関数を設定する。
** 参考：[[#.E3.83.97.E3.83.AD.E3.82.AD.E3.82.B7.E3.81.AE.E8.A8.AD.E5.AE.9A|クロスオリジンアクセスのためのプロキシ設定]]

======setZoomRatio ======
*setZoomRatio ( ratio ) : zoomUp、zoomDownボタン押下時のズームレシオを指定した値(ratio)に設定する
======showModal======
*showModal( htm , maxW, maxH) : ダイアログ表示フレームワークを呼び出し、指定したhtm文字列を最大maxW,H値の中で表示する。closeボタンはフレームワークで設置される（参考[[#setCustomModal]]）（API名に反して、この関数はモーダルダイアログではない、ダイアログボックスの挙動を取る）
** htm：ダイアログ内に表示するhtmlのソース文字列、もしくはHTML DOM Elementオブジェクト
** maxW, maxH : Optional: ダイアログのサイズ（もしウィンドサイズに収まらない場合は、このサイズを下回ることがある。指定されていない場合はhtmの内容をベースにサイズが変化する


======showPage======
*showPage( hyperLink ) : 指定されたハイパーリンク先のページを表示する。ハッシュだけの場合は viewPort変化をさせる
======showUseProperty======
*showUseProperty( target ) : 指定されたPOI( target )の属性情報を表示する
======transform ======
*transform ( x , y , mat , calcSize , nonScaling) : 指定された座標を変換する。
======updateLayerListUI======
*updateLayerListUI() : レイヤーリストのUIの表示を更新したりレイヤー固有UIを設定したりする
** '''[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のsvgmap文書をDOMで直接編集したり、setRootLayersPropsで操作した場合、この関数を呼ばないとレイヤ固有UIが正しく設定されないなど多くの処理が破綻するので、必ず呼ぶ必要がある。(近い将来refreshScreenで自動的に反映されるようにする予定)'''

======zoomdown======
*zoomdown( ratio ) : 地図をスムースにズームダウン
** ratioはオプション(デフォルトは1.732)

======zoomup======
*zoomup( ratio ) : 地図をスムースにズームアップ
** ratioはオプション(デフォルトは1.732) (デフォルトは[[#setZoomRatio]]で変更可)

=====svgMapAuthoringTool.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_Authoring_r*.jsを用いた場合に使える
======cancelPointingPoiRegister======
* cancelPointingPoiRegister: initPOIregistToolで設置したUIの地図クリック・タッチでの座標入力イベント(click, touchend)をキャンセルする
======clearTools======
*clearTools: オーサリングツールを除去する。
======initGenericTool======
*initGenericTool(targetDiv,poiDocId,cbFunc,cbFuncParam,options): 点、線、多角形（オプションでそれらのバッファ付き）の総合オーサリングツールを初期化する。
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** options: {withBufferedTools,editingStyle,shapeStyle}　その他オプションをオブジェクトで指定(Optional)
*** withBufferedTools: boolean: trueでバッファ付きツールを追加
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルをブジェクトで指定
*** editingStyle: {opacity,strokeWidth,stroke,fill}：編集中の表示スタイルをブジェクトで指定
*** useXlinkTitle: trueでタイトル編集欄付きツール (Pointツールには影響しない)
*** styleEditor: trueでスタイル編集UI追加

======initPOItools======
*initPOItools(targetDiv,poiDocId,cbFunc,cbFuncParam,getPointOnly,returnSvgElement,options)　: 複数のPOIを編集するツールを初期化する (このツールは一個しか設置できない)
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** getPointOnly : ポイントを取得するのみで、その点にuse要素を設置することはしない(Optional)
** returnSvgElement : trueで編集したSVG要素などがコールバック関数に構造化され返却される(Optional)
** options : {bufferOption,editingStyle,shapeStyle}: その他のオプションをオブジェクトで指定(Optional)
*** bufferOption : trueでバッファ付きツール
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルを指定 (buffer指定時に有効)
*** styleEditor: trueでスタイル編集UI追加

======initPOIregistTool======
*initPOIregistTool(targetDiv,poiDocId,poiId,iconId,title,metaData,cbFunc,cbFuncParam,getPointOnly,returnSvgElement): 一個のPOINTオブジェクトの登録ツール・座標入力ツールを初期化する
** initPOItoolsと異なりこちらのツールは複数個設置できる
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** poiId : 登録するPOIのIDを指定
** iconId : 対象文書内のアイコンのIDを指定
** title : アイコンのタイトルを指定
** metaData : アイコンのメタデータ文字列を指定
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** getPointOnly : ポイントを取得するのみで、その点にuse要素を設置することはしない(Optional)
** returnSvgElement : trueで編集したSVG要素などがコールバック関数に構造化され返却される(Optional)
======initPolygonTools======
*initPolygonTools(targetDiv,poiDocId,cbFunc,cbFuncParam,isPolylineMode,options): POLYGONオブジェクトの"編集"ツール新規追加、削除、変更などが可能　ただし一個しか設置できない
** コンテナsvgコンテンツでclickable及びeditableを設定したレイヤーで再編集可能
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
*** 第一引数に成否、第二引数にcbFuncParam が入る。作成したPOIの情報は、SVGDOMから得るか、指定したdiv内に生成されているフォームから得る（少し使いづらいので、今後もう少し便利にするかもしれません）
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** isPolylineMode : ポリゴンではなくポリラインの編集ツールとする
** options : {bufferOption,editingStyle,shapeStyle}: その他のオプションをオブジェクトで指定(Optional)
*** bufferOption : trueでバッファ付きツール
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルを指定
*** editingStyle: {opacity,strokeWidth,stroke,fill}：編集中の表示スタイルを指定
*** useXlinkTitle: trueでタイトル編集欄付きツール
*** styleEditor: trueでスタイル編集UI追加

======setTargetObject======
*setTargetObject: TBD プログラムから編集対象オブジェクトを指示する（ただし編集中レイヤのオブジェクトに限る）
======isEditingGraphicsElement======
*isEditingGraphicsElement: 編集中のオブジェクトがあるかどうかを確認する

=====svgMapGIStool.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_GIS_r*.jsを用いた場合に使える。なお本機能拡張はJSTS([https://unpkg.com/jsts@1.6.1/dist/jsts.min.js jsts.min.js])の読み込みがさらに必要。

====== 参考：JSTS ======
[https://github.com/bjornharrtell/jsts/ JSTS](JavaScript Topology Suite)は、[https://github.com/locationtech/jts JTS](Java Topology Suite)をjavaScriptに移植した地理空間情報処理ライブラリです。地理空間情報の標準に準拠したAPIを備えています。
* [https://github.com/bjornharrtell/jsts JSTSのプロジェクトページ]
* [http://locationtech.github.io/jts/javadoc/ API](JTS用、JSTSもこれに準ずる)
* [https://www.tsusiatsoftware.net/jts/files/JTS_Library_for_Geometry_2011.pdf JTSの機能概要スライド]

====== buildDifference======
* buildDifference( sourceId1, sourceId2, targetId , strokeColor, strokeWidth, fillColor, progrssCallback, getResultAsGeoJsonCallback,getResultAsGeoJsonCallbackParam)
** JSTSのDifferenceを実行
** 引数はbuildIntersectionの該当引数に対応

======buildIntersection======
*buildIntersection( sourceId1, sourceId2, targetId , strokeColor, strokeWidth, fillColor, progrssCallback, addSourceMetadata, getResultAsGeoJsonCallback, getResultAsGeoJsonCallbackParam, options )
** sourceId1とsourceId2のレイヤーに対してJSTSのIntersectionを実行し、結果をtargetIdレイヤーにコンテンツとして出力する。性能はgetIncludedPointsより低いことが多い intersection処理の振る舞いは[https://bjornharrtell.github.io/jsts/ JSTSを参照]
** sourceId1: sourceId1レイヤーのレイヤーID
** sourceId2: sourceId2レイヤーのレイヤーID
** targetId : targetId レイヤーのレイヤーID
** strokeColor : 線の色 (なお、strokeColor, strokeWidth, fillColor のいずれも指定ない場合は描画しない(getResultAsGeoJsonCallbackがあればそこに結果を変換するのみ))
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** progrssCallback: 変換途中の状況が返されるコールバック関数。
** addSourceMetadata: sourceId1とsourceId2の各図形要素に付随しているメタデータ(contentアトリビュートの値)を演算結果の該当する図形要素に結合して付加する。
** getResultAsGeoJsonCallback: 演算結果をgeoJsonで返却を受けたい場合にコールバック関数を指定する。第一引数に結果が返る
** getResultAsGeoJsonCallbackParam : 上記コールバック関数に送りたい引数(第二引数に入力される)
** options: その他のオプションを指定するオブジェクト(下記、メンバ変数)
*** uniteSource1: trueでsourceId1のジオメトリ群をuniteしてから演算する
*** uniteSource2: trueでsourceId2のジオメトリ群をuniteしてから演算する
*** areaCompare: trueで演算結果と元のジオメトリとの面積比をメタデータに付与
*** resultGroupId: 演算結果を生成するグループを指定
*** opacity: 透明度

======captureGeometries======
*captureGeometries( cbFunc , opt ) : svgMap.captureGISgeometriesの引用
====== coverageImageXY2LatLng======
* coverageImageXY2LatLng(pixWidth , pixHeight, px,py,targetCoverage) : ビットイメージカバレッジのピクセル座標から地理座標を算出する関数
** pixWidth, pixHeight : ビットイメージカバレッジのサイズ
** px,py : ビットイメージカバレッジのピクセル座標
** targetCoverage : getInRangePolygonParts で得られた返り値を設定する
====== drawGeoJson======
* drawGeoJson( geojson , targetSvgDocId, strokeColor, strokeWidth, fillColor, POIiconId, poiTitle, metadata, parentElm, metaDictionary) : geojsonのgeomerty を指定したレイヤーに描画する
** geojson : geojson データのgeopmetry
*** メタデータ : メタデータはgeojsonの本来のメタデータ仕様(type:Featureのオブジェクトにpropertiesを設置する)で設定可能
**** また、連想配列もしくは配列の形で、関数の呼び出し時のmetadataパラメータでデフォルトのメタデータを指定できる。
**** また、geoJSONの任意のデータ階層にmetadataプロパティとしても埋め込める。
**** 加えて、propertiesを同様に任意のデータ階層に設定できる(この場合、上の階層の値は下の階層の値で上書きされる)
*** スタイリング : メタデータ仕様を拡張した、geojsonの[https://github.com/mapbox/simplestyle-spec mapbox拡張仕様]に基づいて、描画スタイルを各Featureに設定可能　上記の拡張properties拡張により、デフォルト描画スタイルを設定することも可能。
**** marker-sizeは未実装。marker-symbolではsvgコンテンツのdefsで登録済みのアイコンのIDを指定する。
**** 参考: properties.で設定できる、スタイル属性名: <code>title, description, marker-size, marker-symbol, marker-color, stroke, stroke-opacity, stroke-width, fill, fill-opacity</code>
** targetSvgDocId : 描画先のレイヤーID
** strokeColor : 線の色
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** POIiconId :　Pointの場合のアイコンID(あらかじめ指定した描画先のレイヤーのコンテンツに該当IDのアイコンが定義されている必要がある)
** poiTitle : POIのタイトル
** metadata : POIのメタデータ（連想配列）
** parentElm : (Optional) 指定した要素の子要素として描画
** metaDictionary: (Optional) メタデータとして要素に埋め込みたい属性名のリストを配列で指定する（これ以外の属性は無視するようになる）

====== drawKml======
* drawKml( kml , targetSvgDocId, strokeColor, strokeWidth, fillColor, POIiconId, poiTitle, metadata, parentElm,styleData) : KMLを指定したレイヤーに描画する
** KML : KML 描画するKMLデータのXML DOM
** targetSvgDocId : 描画先のレイヤーID
** strokeColor : 線の色
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** POIiconId :　Pointの場合のアイコンID(あらかじめ指定した描画先のレイヤーのコンテンツに該当IDのアイコンが定義されている必要がある)
** poiTitle : POIのタイトル
** metadata : POIのメタデータ文字列
** parentElm : (Optional) 指定した要素の子要素として描画
** styleData : TBD

====== getBufferedPolygon ======
* getBufferedPolygon(geom,bufferLength) : 任意のジオメトリ(geom)に対して、指定のバッファ長[m]のポリゴンジオメトリを生成する。
** Note: [[#captureGISgeometries]]で取得したデータ等も演算対象にすることができる。

====== getColorString ======
* getColorString(r,g,b) : r,g,b値から、webColor文字列を生成する

======getExcludedPoints======
*getExcludedPoints(poiID, polyID, cbFunc, param , progrssCallback , pointOnly ) : 指定したpoiID検索対象レイヤーのうち、指定したpolyIDポリゴンコンテンツレイヤーのポリゴンに内包されないものを抽出する。
** パラメータはinverseを除きgetIncludedPointsと同じ。
====== getImage======
* getImage(sourceData, renderingOptions ) : メッシュデータからビットイメージ(mage/pngのdataURL)を生成
** sourceData : 以下のデータ構造を持つオブジェクト
*** width, height メッシュのピクセル数
*** rasterData[py][px] 以下のデータ構造を持つオブジェクト
**** color 以下のデータ構造を持つオブジェクト
***** r,g,b,a
**** inRange : boolean
** renderingOptions : 以下のデータ構造を持つオブジェクト
*** drawOutOfRange : boolean レンジ内ではなくレンジ外を描画する
*** fillColor : boolean 上記条件のピクセルを指定した色で描画する
*** useCoverageColor 上記条件のピクセルをカバレッジの色で描画する

====== getImagePixelData======
* getImagePixelData(capturedSvgMapGeometry, callBackFunction, param) : ラスタ画像のビットマップデータを取得する。
** capturedSvgMapGeometry : [[#captureGISgeometries|captureGISgeometries]]で取得したビットイメージカバレッジのジオメトリ情報をもとに取得する
** callBackFunction : 取得したビットイメージデータが引数に渡される
*** data : RGBA intArray ( CanvasのContext.getImageData(...).dataで得られる情報と同様のデータ)
*** width
*** height
*** param : getImagePixelDataの第三引数がそのまま渡される

====== getIncludedPoints======
* getIncludedPoints(poiID, polyID, cbFunc, param , progrssCallback , inverse , pointOnly ) : 指定したpoiID検索対象レイヤーのうち、指定したpolyIDポリゴンコンテンツレイヤーのポリゴンに内包されるものを抽出する。
** poiID : 検索対象コンテンツレイヤーのレイヤID
** polyID : ポリゴンコンテンツレイヤーのレイヤID
** cbFunc : 検索完了後の結果を返却するコールバック関数　第一引数にポイントがGeoJasonのGeometry形式で返却され、第二引数にその個数、第三引数に(あれば)下記paramが返却される
** param : cbFuncに渡す任意パラメータ(第三引数に入る)
** progrssCallback : 変換途中の状況が返されるコールバック関数。　変換中　時々呼び出され、変換状態[%]が第一引数に渡される。
** inverse : trueで getExcludedPoints
** pointOnly : trueの場合検索対象コンテンツレイヤーのジオメトリがPoint以外の物は無視、false(もしくは未設定)の場合はPolygonやMultiLineStringのデータの場合中心点をPointと見立てて検索なお、ポリゴンやポリラインのしっかりした処理を期待する場合は下記のbuildIntersectionを使用すべき。
====== getInRangePoints======
* getInRangePoints(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : 検索対象のPointジオメトリが、検索条件としてのラスターデータ(カバレッジ)の特定色域に入っているものを検索する（ラスターGIS機能）
** poiID_or_points : 検索対象のPointジオメトリのあるレイヤIDもしくは、geoJsonのPointジオメトリ自体
** coverIDラスターデータ(カバレッジ)のレイヤーID
** rangeData : 色域 .hue, .satulation, .value, .alphaをそれぞれ指定する
*** hue: 0..360
*** satulation, value, alpha : 0..100
*** .hue, .satulation, .value, .alphaそれぞれのレンジは<nowiki>[[range1Min,Max],[range2Min,Max],...[rangenMin,Max]]</nowiki>の形で指定する。
*** データがない場合のデフォルトは<nowiki>{hue:[[0,360]],satulation: [[10,100]],value:[[10,100]],alpha:[[10,100]]}</nowiki> : アルファが10以上の全ての色
*** .outOfBoundsColor : TBD {r:255,g:0,b:0} の形で色を指定するとその色のピクセルは領域外(存在しないもの)として評価をスキップする
** cbFunc : 検索完了後の結果を返却するコールバック関数　第一引数にポイントがGeoJasonのGeometry形式で返却され、第二引数にその個数、第三引数に(あれば)下記paramが返却される
** param : cbFuncに渡す任意パラメータ(第三引数に入る)
** progrssCallback : 変換途中の状況が返されるコールバック関数。　変換中　時々呼び出され、変換状態[%]が第一引数に渡される。
** preCapturedGeometry : svgMap.captureGISgeometries()であらかじめ取得したgeometryがある場合、それを投入するとそれを用いて処理する
** computingOptions : getInRangeGeometriesOnCoverageを参照
====== getInRangeLineParts======
* getInRangeLineParts(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : ラインストリングジオメトリ用のラスターGIS機能パラメータはgetInRangePoints()と同じ
====== getInRangePolygonParts======
* getInRangePolygonParts(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : ポリゴンジオメトリ用のラスターGIS機能パラメータはgetInRangePoints()と同じ

====== getInRangeGeometriesOnCoverage======
* getInRangeGeometriesOnCoverage(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry, computingOptions ) : getInRange*を包含する関数
** computingOptions.targetVectorTypeで以下を設定することでそれぞれの機能を動かすことができる
*** 0:point,1:polyline(multiLineString),2:polygon
** computingOptions:
*** overlappingCoverage : "or"
*** splitByCoverage : boolean カバレッジが複数のビットイメージ(タイル)で構成されている場合、タイルごとに分割した答えを返す
***
====== haltComputing======
* haltComputing() : getIncludedPoints, getExcludedPoints, buildIntersectionを中断する
====== imageUrlEncoder ======
* imageUrlEncoder : オリジナルのURLから、setImageProxyの設定を加味したURLを生成する関数
====== latLng2coverageImageXY======
* latLng2coverageImageXY(pixWidth , pixHeight, lng,lat,targetCoverage) : 地理座標からビットイメージカバレッジのピクセル座標を算出する関数
** pixWidth, pixHeight : ビットイメージカバレッジのサイズ
** lng,lat : 地理座標
** targetCoverage : getInRangePolygonParts で得られた返り値を設定する
====== latLng2GeoJsonPoint======
* latLng2GeoJsonPoint(lat , lng ) : 緯度経度をGeoJsonのPointジオメトリに変換する
====== renderImages ======
* renderImages(sourceDataArray, parentElment, crs, renderingOptions) : ビットイメージカバレッジ×ポリゴンGIS(getInRangePolygonParts)の結果を直接可視化する
**sourceDataArray : [[#getInRangePolygonParts]]の結果を設定
**parentElment: SVGMapコンテンツ内で描画する親要素を設定
**crs: 描画するSVGMapコンテンツのCRS matrix(a,b,c,d,e,f)を設定
**renderingOptions : [[#getImage]]を参照

====== setImageProxy======
* setImageProxy( url , directURLls , useAnonProxy): getInRangePointsは、canvasを使った処理のため、CORSの制約にかかる場合、proxyを設定して回避できる。
** url : encodeURIComponent()でエンコードしたカバレッジのレイヤーのビットイメージのURLを付加すると、proxyとしてimageを返却してくれるURL文字列を指定
** directURLls : proxyを使わず直接アクセスするコンテンツを判定するための文字列の配列（この文字列のどれかが含まれていたら直接アクセス）
** useAnonProxy : Image.crossOrigin = "anonymous"を指定してアクセスする

====== hsv2rgb ======
* hsv2rgb(h, s, v) : hsv値からrgb値の色情報変換
** h (hue): 0..360
** s (saturation): 0..100
** v (value): 0..100
** 帰り値 : {r,g,b}: いずれも0..255

====== rgb2hsv ======
*rgb2hsv(r, g, b): RGB値からHSV値の色情報変換
** rgb: いずれも0..255
** 帰り値:{h,s,v}
*** h:0..360
*** s,v: いずれも0..100

=====svgMapLayerUI.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_LayerUI2_r*.jsを用いた場合に使える。
======assignLayerSpecificUiElement======
* >r4
* assignLayerSpecificUiElement( targetElement , isInline , autoSizing) : レイヤ固有UIを出力する先のDOM要素を指定する
** この関数は、レイヤーUIの初期化前～[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]読み込み前に呼ばれる必要がある（すなわち、load時のみ有効）
** targetElement : 出力先要素：出力先はsvgMapオブジェクトを持つwindowでなくても良い
** isInline : boolean 指定した要素をインライン要素として扱い、UIが存在しえない場合は消える。レイヤ固有UIを消すボタンも付与される
** autoSizing : boolean 自動リサイズを有効化

======customEvents======
*customEvents() : サポートしているイベントを返却

======launchController======
* >r4
* launchController(layerID, cbf) : レイヤ固有UIを出現させる。ただしそのレイヤーがレイヤー固有UIを持っており、且つ表示状態になっている必要がある。
** [[#getLayerId|layerID]] : レイヤーのID
** cbf (optional) : レイヤー固有UIが生成されたとき、第一引数にレイヤー固有UIのwindowオブジェクトが返却される。

======layerSpecificUIhide======
* layerSpecificUIhide() : レイヤ固有UIを隠す

======setLayerListmessage======
* setLayerListmessage( head , foot ) : head 及び footで指定した文字列を　レイヤリストUIのトップのメッセージに設定する。[head]numberOfVisibleLayers[foot] : デフォルトはhead :"Layer List: ", foot :" layers visible"

=====svgMapPWA.で呼び出せるAPI=====
'''実験的機能段階''' :
; 以下のAPIは、SVGMapLv0.1_PWA_r*.jsを用いた場合に使える。
:- SVGMap.jsをPrpgressiveWebApps(PWA)として動作させ、オフラインでも利用できるウェブアプリを構築することができる。
:- Progressive Web Appsが機能するブラウザで有効。Chrome,Edge(PC,Android), Safari(Apple製品)
:- iOS SafariのPWAネイティブキャッシュの50MB制限を回避するIndexedDBによる実装がなされており、そのクォータが許す限りの(iOSでも数百MB以上の)オフライン地図コンテンツを利用できる
:- 同じく、iOS Safariが持たないsyncの一部を代替する機能(オンラインになったらポストする機能)が利用できる
:- zip圧縮されたオフラインコンテンツパッケージ読み込み機構を使う場合はzip.jsおよびそれが利用するArrayBufferReader.js,deflate.js,inflate.jsの読み込みが必要。
:- <code>serviceWorkerPath</code>グローバル変数で、専用のサービスワーカープログラムsvgMapServiceWorker_r*.jsのパスを指定する必要がある。
::- サービスワーカー～svgMapServiceWorker_r*.jsは、同jsと同じディレクトリにあるbaseResources.jsonを読み込み初期設定を行う
::- baseResources.json：　srcにサービスワーカーネイティブのキャッシュに読み込むべきリソースのリストを記載、mapCacheTargetに、SVGMapのコンテンツキャッシュを稼働させるターゲットとなるパスを記載
::-baseResources.jsonの例
<pre>
{
"src": [
"index.html",
"Container_mercator_org.svg",
"SVGMapLv0.1_PWA_r5.js",
"js/SVGMapLv0.1_r16.js",
"js/SVGMapLv0.1_LayerUI2_r3.js",
"js/SVGMapLv0.1_GIS_r2.js",
"js/SVGMapLv0.1_Authoring_r7.js",
"js/jsts.min.js",
"imgs/gps.png",
"imgs/gps_s.png",
"imgs/Xcursor.png",
"imgs/zoomdown.png",
"imgs/zoomdown_s.png",
"imgs/zoomup.png",
"imgs/zoomup_s.png",
"imgs/mappin.png"
],
"mapCacheTarget":"localMaps/"
}
</pre>

* autoPilotDownloader
*:エリアと縮尺を指定し、オートパイロットで地図画面をスクロールさせることで、オフラインキャッシュに地図を保存する動作を自動的に行う機能のオブジェクト。レイヤー固有UIでの利用などを想定しており、以下のメンバー関数を持つ
** halt()
**:オートパイロット動作を中断させる
** searchAll(initialViewBox, minScale, maxScale)
**:- initialViewBoxで指定したエリアを、minScale、maxScaleの間でオートパイロットをかけキャッシュに保存させる
**:- minScale, maxScaleは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の座標系におけるscale値(getRootScale()で取れるもの)
** setProgressCallBack(cbf)
**:オートパイロット動作中の進行状況をcbfの第一引数に返却する
* async clearOfflineContents()
*:SVGMapのオフラインコンテンツを全消去する。SVGMapのオフラインコンテンツはserviceWorkerのネイティブキャッシュ機構とは別の独自キャッシュ機構(indexedDBを使用した機構)として構築される
* clearCache()
*:（未実装）serviceWorkerのネイティブキャッシュを全消去する
* cacheDB
*:SVGMapのオフラインコンテンツデータベースのオブジェクト。IndexedDBをpromise化した簡略的APIをメンバ関数として持つ。
** clear()
**:データベースをクリア
** async connect()
**:データベースに接続
** async delete(path)
**:pathで指定したコンテンツを削除
** async get(path)
**:pathで指定したコンテンツ(blob)を取得
** async getAll()
**:全コンテンツを取得
** async getAllKeys()
**:全Key(コンテンツのpath)を取得
** async put({idCol:path,contentBlob:blobdata})
**:コンテンツ(blobdata)をpathをキーにして格納(上書き)
* deleteCachedLayerMeta()
* async disableCache()
*:serviceWorkerのネイティブのキャッシュ機構とSVGMapの独自キャッシュ機構を全て無効化する
* async enableCache()
*:serviceWorkerのネイティブのキャッシュ機構とSVGMapの独自キャッシュ機構を全て有効化する
* getCachedLayerMeta
* async getPostQueue()
*:postMessageWhenConnectedでポストをリクエストし、未完了のリクエストを取得する
* getRootScale()
*:svgMapの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]座標系における現在の表示のscaleを取得
* getScales()
*:読み込み済み文書全てのscaleを連想配列で返す(hashKeyはdocID)
* getVisibleLayers
* getStorageUsage
* async loadOfflineContents(contentUrlList, overwrite, progressCallBack)
*:-contentUrlListで指定したコンテンツをオフラインキャッシュに読み込む(自ドメイン内のコンテンツ限定)
*:-overwriteをtrueにすると上書きする。progressCallBackは指定した関数の第一引数に進捗状況を返却
* async loadZippedOfflineContents(zip_url,progressCallBack)
*:保存してあるディレクトリに対して、そのzipファイルの中のディレクトリ構造で、コンテンツがあるものと見做したURLもつキャッシュを形成する
* async postMessageWhenConnected(URL, postData, postCompleteCBF)
*:-postDataデータをURLにポストする　オンライン時は即座にポスト、オフライン時はいったんindexedDBにポストデータを格納後オンラインになったらポストする。
*:-postDataは、文字列(この場合form-data決め打ちのリクエスト)、もしくは .bodyメンバー変数を持ったオブジェクト
*:-この場合は .bodyはFormDataタイプのインスタンスもしくは任意のデータ、そしてfetchAPIに準じた.headers, .methodをメンバー変数に持たせることができる。(methodでGETを指定すればGETリクエストも可能)またserviceWorkerが管理する
* async setCachedLayerMeta
* setScaleTrim
* async updateCacheIndex()

=====svgMapCustomLayersManager.で呼び出せるAPI=====

'''実験的機能段階''' :

基本的なフレームワークで提供されているレジューム機能を更に強化し、レイヤーの表示非表示状態、初期表示エリア(viewPort)等をユースケースなどに応じて複数登録、切り替えを可能とする機能を提供します。更に[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]をさらに積極的に編集し、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルに無いレイヤーを追加したり、削除したりした、カスタマイズされた[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]を差分情報の形でlocalStorageに保存・利用する機能を提供します。

:- 以下のAPIは、SVGMapLv0.1_CustomLayersManager_r*.jsを用いた場合に使用できます。
:- SVGMapLv0.1_CustomLayersManager_r*.jsは、svgMapオブジェクトもつwindowで使用するとともに、svgMapオブジェクト用のカスタムレイヤーセットを構築するための別ページのwebAppsにおいても使用することができます。
:- 上記svgMapオブジェクト用のカスタムレイヤーセットを構築するためのwebApps用としてSVGMapCustomLayersManagerApp_r*.js、SVGMapCustomLayersManager.htmlが用意されています。

*registCustomLayer(customLayerObject, applyImmediately, customLayerMetadata)
*applyCustomLayers(customLayersObject, baseLayersPropertySet)
*getDetailedLayersPropertySet(rootContainerDoc, ignoreIid)
*getDetailedLayersPropertySetFromPath(rootContainerUrl, ignoreIid)
*getDif( edit, orig )
*originalLayersProperty
*deepCopy(obj)
*deleteAllCustomLayerSettings()
*deleteCustomLayerSetting( key )
*setCustomLayerSettingIndex(key)
*buildCustomLayersSetting(difObj, editedLayersProperty, originalLayersProperty)
*loadCustomLayerSettings()
*storeCustomLayerSettings( settings )
*getElementByAttr( XMLNode , searchId , atName )

*applyCustomLayersSettingsToCurrentMapView(lpEdit, svgMapWin)
*loadCustomGeoViewboxes()
*storeCustomGeoViewboxes(customViewBoxes)
*buildCustomGeoViewboxSettingObject(key, title, geoViewBoxX, geoViewBoxY, geoViewBoxWidth, geoViewBoxHeight)

====起動URLによるオプション指定====
svgMapフレームワークを導入したhtmlコンテンツは、URLの"#"以降であるフラグメント識別子によってフレームワークにいくつかの起動時オプションを提示することができます。
通常、これらのオプションは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]における記述で示されています。フラグメント識別子による指示はそれをオーバーライドします。
一般的な"&"による区切りで複数の複数のパラメータを指定できます。
=====表示範囲の指定=====
global座標系によって表示範囲を指示することができます。　標準のフラグメント記述に対してそれぞれ"global"文字列の追加が必要です。
なおglobal座標系におけるxは一般的に経度、yは一般的に緯度に対応することに留意してください。
*メディアフラグメントによる指定 : xywh=global:<xmin>,<ymin>,<width>,<height>
*svgViewフラグメントによる指定 : svgView(viewbox(global,<xmin>,<ymin>,<width>,<height>))

=====表示・非表示レイヤーの指定=====
* 表示すべきレイヤー: visibleLayer=<layer title>,<layer title>...
* 非表示すべきレイヤー: hiddenLayer=<layer title>,<layer title>...
* 個々のレイヤーに対するフラグメントの提示 : それぞれのレイヤーに対しては、さらにフラグメントを追加することができます。ただし"="は"%3D",&は"%26"でURLエンコードしてください。<layer title>#fragment1=val1&fragment2=val2　⇒<layer title>#fragment1%3Dval1%26fragment2%3Dval2　

===レイヤー固有のUI===
"[https://satakagi.github.io/mapsForWebWS2020-docs/De-centralizedWebMapping.html#:~:text=To%20achieve%20this,everything%20in%20detail. Layers as WebApps]"(ウェブアプリケーションとしてのレイヤー: webApp Layer)を実現する機構　（LaWA、レイヤーwebApp、webAppレイヤー、アプリレイヤー、レイヤーアプリなどと呼ぶこともある）（[[#レイヤー固有ユーザインターフェース|こちらも参照]]）

====概要====
[[#レイヤー|レイヤーsvgコンテンツ]](フレームワークが最初に読み込むコンテナsvgコンテンツの中で埋め込まれるsvgコンテンツ)に対して、[[#動的な地図レイヤー|動的な地図レイヤー]]の一種として、そのレイヤーに固有の処理ロジックや、可視化・描画ロジック　そしてユーザインターフェースも含むことができる　htmlによるウェブアプリを定義できる機能です。

javascriptを使った独自のロジックによる動的な可視化データの生成が実装可能です。

また、この機能はそのレイヤーの設定やインタラクティブ操作のための表示やユーザインターフェースを地図表現とは別に表示したい場合にも用いることができます。従来のアーキテクチャでは、もしもこのようなレイヤーに固有のUIが必要だった場合でも、地図アプリケーション全体の処理や表示を司るグローバルな空間(ルートhtmlコンテンツのwindowオブジェクト直下)に、サイドエフェクトを考慮しながらコードを組み込む必要があり、結果としてコードのスパゲッティ化が懸念されました。SVGMapのレイヤー固有UIは、レイヤーごとにUIとそのロジックをカプセル化可能にし、これを排除することが可能です。(カプセル化はiframeによって行われます。)さらに、レイヤー固有UIによるウェブアプリは自律分散的な配置にも対応し、UIを備えた地図レイヤーにまでハイパーレイヤリングアーキテクチャを拡張します。

なお、[[#動的な地図レイヤー]]は、htmlによるユーザーインターフェースを持つことができませんが、同種のウェブアプリケーションのカプセル化の効果があります。

このＵＩには主に二つの用途が考えられます。
;凡例
: 各レイヤーはその地図表現の意味を示すための固有の凡例を持つことがあります。その凡例を表示するために利用できます。
;ウェブアプリケーションによる動的な地図レイヤー
: 先述のように、ウェブアプリケーションによる動的な地図レイヤーは独自のロジックによってそのレイヤーの地図表現を動的に変化させる機能を備えることができます。この場合、例えばエンドユーザがFORMで入力したフィルター条件ををもとに表現を変更するようなケースも考えられます。
これらケースでは、そのフォームや凡例は、[[#フレームワークの呼び出し|ルートhtml文書]]に設置することは可能ですが、もしも多くのレイヤーを表示するアプリケーションであり、それらのレイヤーがそれぞれ固有のフィルタ条件を持つような場合、[[#フレームワークの呼び出し|ルートhtml文書]]は、それぞれのレイヤーをフィルタリングするためのFORMとそのフィルタリングロジックをすべて埋め込む必要があり、画面のデザイン、およびロジックのコーディングの双方がスパゲッティ化する可能性があります。さらに、もしもこのアプリケーションに後日さらにレイヤーが追加される場合、スパゲッティ化の問題はより深刻になるかもしれません。凡例の表示についても同様の問題が考えられます。本レイヤー固有ＵＩはこのような問題に対するソリューションを提供しています。

この機能は、ベースのフレームワークrev12以上　且つLayerUI2フレームワークを読み込み、[[#レイヤー固有のUI(後述)を設置するdiv要素|id="layerSpecificUI"のdiv要素]]が[[#フレームワークの呼び出し|ルートhtml文書]]に設置されているときに使用できます。

;サンプル
:[[チュートリアル#WebApp_Layer.E7.B7.A8|開発者向けチュートリアル]]でいくつかのサンプルを見ることができます。

====[[#レイヤー|レイヤーsvgコンテンツ]]での指定====
レイヤー固有UIの設置には、[[#レイヤー|レイヤーsvgコンテンツ]](のルート要素(svg要素))に、data-controller属性を与え、そこにそのレイヤー固有のUIのためのhtml文書のリンク(ただしsame origin)を設置します。またサブセットとして、data-controller属性にビットイメージ(.pngもしくは.jpg, .jpeg, .gif拡張子を持つビットイメージ)へのリンクを与えることでレイヤーの凡例情報の提示をすることもできます。

[[#レイヤー固有のUI(後述)を設置するdiv要素|レイヤー固有ＵＩの表示部位]]には、このように指定されたリソース(ビットイメージもしくはhtml)がレイヤーの選択の状況に応じて、切り替わり表示されます。レイヤーがONになっている間、それに紐付けられたレイヤー固有UI(htmkのwindowオブジェクト)が存在し続け、そのレイヤーのsvgDOMの操作やUIの提供が可能です。

なお、標準のフレームワークでは、表示中のレイヤーの中の選択された一つのUIのみが地図のメインのwindowに配置されたiframeで表示されます。表示中ではあっても選択されていないレイヤーのUI(iframe)は非表示状態で動作しています。

'''サンプル'''
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="9000.0 -9000.0 9000.0 9000.0" go:dataArea="9000.0 -9000.0 9000.0 9000.0"
'''data-controller="../Self-GS-POI_controller.html"'''>
.....

====レイヤー固有のUIのためのhtml文書(webApp)の構造・作法====
レイヤー固有のUIとなるhtml文書は、下記の通り、その初期化等を行うライブラリ <code>svgMapLayerLib.js</code> を読み込む必要があります。（現在のところ通常のjavascriptライブラリのみ提供されます）
CDNからライブラリを読む場合は、<code>https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/svgMapLayerLib.js</code>です。

'''サンプル'''
<!doctype html>
<html>
...
<script src="https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/svgMapLayerLib.js"></script>
...
</html>

====LaWAとS-LaWA（サンドボックス化LaWA）のアーキテクチャ====
SVGMapにおけるレイヤー固有UI（LaWA: Layers as Web Apps）には、セキュリティと用途に応じた2つの動作モードが存在します。2026年のアップデートにより、Web標準のセキュリティモデル（クロスオリジン制約）に準拠した'''S-LaWA（サンドボックス化LaWA）'''が導入されました。 (2026/4/16現在 dev2リリース段階)

=====T-LaWA (Tight-coupled LaWA / 従来の密結合モード)=====
* 親のSVGMapフレームワークと同じオリジン（ドメイン）で動作する、従来型のレイヤーWebAppです。
* iframeのJavaScriptコンテキストに、親フレームワークから直接APIオブジェクトが注入されます。
* 全ての[[#拡張API]]にアクセスでき、複雑なDOM操作や関数渡しが可能ですが、サードパーティ製のレイヤーを読み込む際にはセキュリティ上のリスク（XSS等）を伴います。

=====S-LaWA (Strict/Sandbox LaWA / 分離モード)=====
* 親のSVGMapフレームワークとは異なるオリジンで動作することを前提とした、セキュアなレイヤーWebAppです。
* iframeは完全に隔離（サンドボックス化）され、親フレームワークとの通信は全て非同期メッセージング（postMessage）を介して行われます。
* 悪意のあるスクリプトから親フレームワークを保護できるため、外部のサードパーティ製レイヤーを安全に統合できます。
* 代わりに直接的なオブジェクト参照や関数の受け渡しが禁止されるため、[[#拡張API]]の利用に強い制限がかかります（前節の「S-LaWAでの制限」を参照）。
* レイヤーSVGファイル内に直接記述された <script> 要素は除去され無効化されます。

======【発展機能：S-LaWA Level 2 (CORS非依存モード)】======
* S-LaWAのサブモードとして、配信元の外部サーバーにCORS（Cross-Origin Resource Sharing）設定がされていないSVGレイヤーであっても、安全に読み込んで統合できる仕組みです。
* コンテナ側の <code>animation</code> 要素に <code>data-controller</code> 属性が指定されている場合、SVGMapフレームワークはCORSエラーを回避することが可能です。実際のSVG及びhtmlの取得と展開は全てサンドボックス内のS-LaWAで行われ、サーバー側の設定に依存しないクロスオリジン連携を実現します。

===== 動作モードの指定 (data-lawa-mode) =====
レイヤーがどちらのモードで起動するかは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]内でそのレイヤーを参照している '''<code>animation</code> 要素の <code>xlink:href</code> の値（URLのオリジン）'''、もしくは同要素に付与する '''<code>data-lawa-mode</code>''' 属性で制御できます。

<code>data-lawa-mode="auto"</code> (未指定時のデフォルト): レイヤー（コントローラ）のURLが親フレームワークと同一オリジンであれば '''T-LaWA''' として、クロスオリジンであれば自動的に '''S-LaWA''' として起動します。

<code>data-lawa-mode="isolated"</code>: 同一オリジンであっても、強制的に '''S-LaWA''' として隔離して起動します（開発時のテスト等に有用です）。

<code>data-lawa-mode="tight"</code>: 強制的に '''T-LaWA''' として起動を試みます。（※クロスオリジン環境でこれを指定した場合は、適切なCORS設定やプロキシサーバーの利用が必須となります）

====詳細====

レイヤー固有UIは、SVGMapのグローバルなwindowに設置されたiframeの中で動作します。このiframeの性質と利用できるAPIは、前述の動作モード（T-LaWAかS-LaWAか）によって大きく異なります。

どのような環境・モードで起動された場合でも、レイヤー固有UI内でSVGMapの各種リソースへ安全にアクセスするためには、レイヤーのHTML内で提供される初期化ライブラリ（<code>svgMapLayerLib.js</code> 等）を読み込む必要があります。

'''【重要】''' 各種APIへのアクセスが可能になるのは、iframe自体の "load" イベントではなく、SVGMapフレームワークとの接続が完了した後に発行される '''<code>layerWebAppReady</code>''' イベント以降です。
* 初期化処理は以下のように記述することを強く推奨します。
* <code>window.addEventListener("layerWebAppReady", function(){ /* 初期化処理 */ });</code>

[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が設置されたSVGMapのグローバルなwindowと異なるドメインにレイヤーを設置し、そのレイヤーがレイヤー固有UIを持つこともできます。デフォルト（<code>data-lawa-mode="auto"</code>）では、これは自動的にセキュアなS-LaWAとして起動するため、特別なCORS設定は不要です。ただし前述の通りAPIには制限がかかります。

[[#レイヤー|レイヤーsvgコンテンツ]]のドキュメントルート要素へdata-controller属性を設定する代わりに、コンテナsvgコンテンツにおける[[#レイヤー|レイヤーsvgコンテンツ]]への参照要素にdata-controller属性を設定することもできます。

data-controller属性の代わりに、data-controller-src属性の値に、適切にエスケープすることで直接htmlを記述することもできます。（※この機能は主にT-LaWAでの利用を想定しています）

data-controller属性によって参照されるhtmlコンテンツでは、次節[[#拡張API]]で説明する値や関数が使用できます（※モードによる制限あり）。

data-controller属性のURLには以下のオプションをフラグメント識別子として指定することができます。
* #exec=appearOnLayerLoad||hiddenOnLayerLoad||onClick レイヤー固有UIの起動オプション
** appearOnLayerLoad : レイヤーを表示状態にすると即座にレイヤ固有UIが出現
** hiddenOnLayerLoad : レイヤーを表示状態にすると即座にレイヤ固有UIがhidden状態で起動(そのレイヤ固有UIに含まれるscriptが起動)
** onClick : レイヤー固有UI起動ボタン">"を押したときにレイヤ固有UIが出現(デフォルト)
* #requiredHeight=hhh&requiredWidth=www
** id="layerSpecificUI"のdiv要素のcss値に関わらず、requiredHeight、requiredWidthでiframeの表示を指示

====拡張API====
レイヤー固有UI(iframeのwindowオブジェクトのjavascriptコード)では以下のAPIが拡張されています。
'''【注意】S-LaWA（サンドボックス化LaWA）環境においては、セキュリティ上の理由から親フレームワークのオブジェクトに直接アクセスできません。代わりに <code>svgMapSandboxLayerLib.js</code> が提供する「モック（代替）オブジェクト」を介して非同期に操作が行われます。各項目の「S-LaWAでの仕様」を参照してください。'''

=====イベント=====
*layerWebAppReady : 初期化が完了しLaWAの実行が可能になった (LaWAでは、loadイベントではなくlayerWebAppReadyを使用することを強く推奨します)
*openFrame : そのiframeが、新たに生成された
*closeFrame : 同、消滅した
*hideFrame : 同、隠された
*appearFrame : 同、隠されていたのが再度現れた
*zoomPanMap : [[#.E6.8B.A1.E5.BC.B5.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88|SVGMapフレームワークと同じ]]
*zoomPanMapCompleted : 同上
*screenRefreshed : 同上

'''【S-LaWAでの仕様】''' すべてのイベントがサポートされています。親フレームワークで発生したイベントは、メッセージングを通じてS-LaWA内のwindowオブジェクトに中継・ディスパッチされます。

=====svgImageProps=====
このレイヤー固有UIに紐づいたレイヤーSVGの各種プロパティを参照できる（基本的に全て読み出しのみ） (参考:[[#svgImagesProps.5B.5D]])
*[[解説書#svgImagesProps.5B.5D|プロパティのリストはこちらを参照]]
*svgImageProps.scriptで、動的地図レイヤーのscript要素によって生成されたオブジェクトにもアクセスできます。
*svgMap.getSvgImagesProps(layerID) で得た値と同等。
*.hashは書き込みが有効(参考 [[#サブレイヤーパーマリンク]])

'''【S-LaWAでの仕様】''' 親フレームワークから非同期で同期された静的なコピーデータとして提供されます。<code>.hash</code> プロパティへの書き込みはS-LaWAでもサポートされており、裏側で自動的に親へ同期されます。ただし、<code>.script</code> による親の実行コンテキストへのアクセスはできません。

=====svgImage=====
このレイヤー固有UIに紐づいたレイヤーSVG文書(DOM Documentオブジェクト) (参考：[[#svgImages.5B.5D]])
*このドキュメントを操作することで、そのレイヤーの表示を動的に変化させることが可能です。
*特に、[[解説書#.E5.8B.95.E4.BD.9C.E3.81.AE.E5.88.B6.E9.99.90.E3.83.BB.E5.B7.AE.E7.95.B0|動作の制限に注意して実装してください]]
*svgMap.getSvgImages(layerID) で得た値と同等。

'''【S-LaWAでの仕様】''' S-LaWA環境内に展開された「ローカルXML DOM」が提供されます。このドキュメント（要素の追加・削除・属性変更・テキスト変更など）を操作して <code>svgMap.refreshScreen()</code> を呼び出すと、フレームワークの共通地図キャンバスに送信され更新します。

=====svgMap=====
svgMapフレームワークインスタンス

'''【S-LaWAでの仕様】''' 親のインスタンスの代わりに、S-LaWA用のモッククラス（<code>SandboxSvgMap</code>）が提供されます。以下のメソッドのみが利用可能です。
* <code>refreshScreen()</code>, <code>transform()</code>, <code>getGeoViewBox()</code>, <code>getSvgImageProps()</code>, <code>setShowPoiProperty()</code>, <code>showModal()</code>, <code>getCORSURL()</code>, <code>setCORSproxy()</code>, <code>parseEscapedCsvLine()</code>

=====layerID=====

svgMapフレームワークが管理しているSVG文書ハッシュリスト(svgMap.getSvgImages())における、このレイヤー固有UIに紐づいたレイヤーSVG文書のハッシュキー

[[#getLayerId]]参照

'''【S-LaWAでの仕様】''' 制限なく利用可能です。

=====svgMapGIStool=====
GIStoolsフレームワークを拡張した時、同インスタンス
*[[解説書#svgMapGIStool..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI|svgMapGIStoolが持つAPI]]

'''【S-LaWAでの仕様】''' '''現在のところ利用不可です。'''

=====svgMapAuthoringTool=====
svgMapAuthoringToolフレームワークを拡張した時、同インスタンス
*[[解説書#svgMapAuthoringTool..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI|svgMapAuthoringToolが持つAPI]]

'''【S-LaWAでの仕様】''' '''現在のところ利用不可です。'''

=====controllerSrc=====
レイヤー固有UIのiframeの起動に使われたsrc属性(レイヤー固有UIのパス・URL)が読み出せます。特にレイヤーが異なるドメインから配信されたものの場合、レイヤー固有UIのwindowのlocation属性(及びそれによるURL解決を行うAPI)からは適切な情報が得られません。これ代えてこの値が使用できるケースがあるでしょう。

'''【S-LaWAでの仕様】''' 参照できません。S-LaWAは自身のURLコンテキストで動作するため、自身の <code>location.href</code> などを参照してください。

=====putGlobalMessage(messageText)=====
messageTextを[[#グローバルメッセージ]]エリアに表示する　レイヤーが消滅したら自動でメッセージも消滅します。

'''【S-LaWAでの仕様】''' 現在のところ利用不可です。

=====preRenderFunction=====
この名前の関数を(レイヤー固有UIのwindowに)定義すると、そのレイヤーのSVG文書の再描画(画面更新)シーケンスの直前にこの関数の内容が実行される。詳細は[[解説書#setPreRenderController|setPreRenderControllerを参照]]

'''【S-LaWAでの仕様】''' '''利用可能です。''' S-LaWA内で <code>window.preRenderFunction</code> を定義しておくと、<code>svgMap.refreshScreen()</code> が呼ばれた際や、親からズーム・パンなどのイベントを受信した際に、S-LaWA内でローカルに実行されます。この関数内でローカルDOMを変更することで、描画前の状態更新をエミュレートできます。

=====customHitTester=====
この名前の関数を定義すると、そのレイヤーに固有のヒットテスト（マウスやタッチによって地図上をヒットしたときの振る舞い）機能を追加することができます。ヒットテストは通常のクリッカブルオブジェクト（ポイントやライン・ポリゴンなど）のそれと同等に扱われます。
* customHitTester( position )
** 第一引数に、ヒットされた座標(.screenX,Y:window上の座標、.lat,lng:地理座標、.isMapCenterHitTest:後述)が与えられます。（この値をもとに実際のヒットテスト処理を書く）　この関数の帰り値が'''null'''や'''undefined'''の場合はヒットしなかったこと、'''true'''もしくは文字列もしくはそのレイヤーの任意の図形要素、もしくはそれらの配列の場合はヒットしたことを示します。
*** isMapCenterHitTestが'''true'''の場合、そのヒットテストは伸縮スクロール時自動発生するケースで発生したものです。（もしこのケースでのテストを除外したいなど特別な処理をしたい場合に利用できます）
** ヒットテスト後の振る舞いも通常のクリッカブルオブジェクトと同等で、通常はデフォルトで備えるヒットされたグラフィックスオブジェクトの[[#metadata.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF|メタデータ]]表示パネルが呼び出されます。(帰り値が図形要素の場合）　もしこの振る舞いを変更したい場合は、[[#setShowPoiProperty|setShowPoiProperty]]を用いることが可能です。
** 帰り値がtrue、文字列、およびそれらの配列を返す場合は、[[#setShowPoiProperty|setShowPoiProperty]]を使用してカスタマイズされた処理を行う必要があります。この場合[[#setShowPoiProperty|setShowPoiProperty]]で設定された関数が受け取る引数は、そのSVG文書のドキュメントルート要素であり、その'''"data-hitTestIndex"'''属性に選択されたオブジェクトのインデックス(配列の場合。配列でない場合は常に0)が設定されます。

'''【S-LaWAでの仕様】''' <code>customHitTester</code> 自体は利用できません。（なお<code>svgMap.setShowPoiProperty(func)</code>は利用可能です。）

====サブレイヤーパーマリンク====
(2024/10のdev1ブランチから有効)
*[[#レイヤーsvgコンテンツ]]のURLが任意のフラグメント識別子を持つことができる。
*ただしフラグメント識別子はカンマ","、アンパサンド"&"を含めることはできない。
*[[#レイヤー固有のUI]]が以下を実装する場合、任意のレイヤーの設定をパーマリンク([[#getBasicPermanentLink]])に反映できる。
**[[#レイヤー固有のUI]]は起動時(onload)同フラグメント識別子の情報を解釈し適切な状態に変化させる機能
**[[#レイヤー固有のUI]]は、パーマリンクによる指定に対応した標示状態に表示が切り替わるタイミングで[[#レイヤーsvgコンテンツ]]のURLのフラグメント識別子の内容をそれに対応した値に変更する機能
*[[#レイヤーsvgコンテンツ]]のURLのフラグメント識別子は、[[#svgImageProps]].hashを設定することで変更できる ([[#svgImageProps|⇒仕様参照]])

===動的な地図レイヤー===
svgドキュメントにjavascriptを記述することでも、動的なデータ生成を実装可能としています。
本フレームワークでは、svgドキュメント中に<script>要素を一つだけ記述することができ、その要素の中にjavascriptコードを入れることができます。

DOMを操作し、動的に描画を変化させることが可能です。ただし、[[解説書#.E5.8B.95.E4.BD.9C.E3.81.AE.E5.88.B6.E9.99.90.E3.83.BB.E5.B7.AE.E7.95.B0|動作の制限に注意してください]]

====動的SVGMapコンテンツで利用可能な拡張API====
一般のjavascriptAPIに加えて、動的な地図レイヤーを実装するために以下のAPIが提供されます。（既存のものでも注記があるものも列挙）
*document: このsvgMapドキュメント自身
*READ ONLY変数
**CRS:このドキュメントのCRS : CRS.a....fに、地理座標からこのドキュメントのSVGユーザ座標への変換係数が提供される
**docId:このSVGドキュメントのdocId
**scale：倍率：このドキュメントの座標系と、画面の(px座標系)との間の倍率(この値は等倍が1.0だが、svgMapコンテンツのvisibleMin/MaxZoom値は%(等倍は100)なので注意)
**actualViewBox：このドキュメントの座標系でのviewBox
**geoViewBox：地理座標におけるviewBox
**geoViewport
**viewport
**this.location:相対パス
**(this.verIE)
*refreshScreen(): 描画の更新を明示: refreshScreenを用いていない場合、そのレイヤーのDOMを編集してもそれが即座に表示に反映(更新)するとは限りません。文書のロード、ズーム、スクロールのときが表示のDOMの内容を反映した画面の自動更新のタイミングです。それ以外、多くの場合反映されません（性能確保のための本フレームワークの現在の制限）。DOMO編集をそれ以外のタイミングで表示に反映したい場合、この関数の呼び出しを行うひつようがあります。一方不必要にこの関数を呼び出すとシステム全体の性能が低下するかもしれません。
*transform()
*getCanvasSize()
*linkedDocOp()
*isIntersect()
*drawGeoJson()
*childDocOp()
*onload:この関数を設定すると、ロードされると呼ばれる(ドキュメントロード後、描画前のタイミング。)
** この関数は、DOMトラバース前に同期処理される。
**したがってonloadで実行される処理はその中が非同期でない限り、refreshScreen()しなくてもonload時のDOM編集は直後の描画に反映される。
*onscroll:この関数を設定すると、スクロールされるとき呼ばれる（ほかにズーム以外で画面更新時も）(スクロール後の描画前のタイミング。)
**同上
*onzoom:この関数を設定すると、ズーミングが発生するとき呼ばれる(同上)

====拡張イベント====
*document -> zoomPanMap イベント addEventHandlerすると、ズームパンが起き(viewPortが変化したとき)地図システム全体の描画が完了(含タイムアウト)後に発行される。SVGMap*.jsが地図をウェブアプリ起動後、最初に描画完了した時にもこのイベントが発生する。（レイヤー追加時には発生しない）
**これをイベントリスナに設定した関数は、非同期に実行される。onscroll()と異なり、もしその関数でDOM編集を行った場合は、直後の描画にそれが反映される保証がない。refreshScren()による再描画が必要。
*document -> screenRefreshed イベント addEventHandlerすると、ズームパン以外で地図システム全体の描画が完了(含タイムアウト)後に発行される。主にrefreshScreen()など。このイベントをフックにして、SVGMapコンテンツのDOM操作・再描画（refreshScreen()）を行うと無限ループに陥るので使用方法に注意が必要。
*document -> zoomPanMapCompleted イベント SVGMaplayerUIが有効な時に発行される。　zoomPanMapイベントは伸縮スクロール完了時に発行されるが、その直後にレイヤー固有UIにおいて(XHRやfetchを用いた)非同期なデータ取得とレイヤー書き換えが生じるケースでは、その完了を検知しない。zoomPanMapCompleted イベントはこのような非同期通信の完了後に発行される。

===SVGMapの埋め込み(SVGMapFrame)===
'''実験的機能段階''' :

SVGMapフレームワークはwindow全体に地図コンテンツが占有される形で表示する設計です。ウェブページはwebAppsとしてカプセル化されたレイヤーをsvgMapオブジェクトに差し込む形でアプリケーションが構築されます。すなわち、基本的に[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]windowにはsvgMapオブジェクトだけが単独で存在し、その他のアプリケーションをwindow上に実装する場合は、その開発者がsvgMapオブジェクトとのグローバル空間でのスパゲッティ化に注意を払いながら開発していく必要があります。

それに対して、''SVGMapLv0.1_Frame*.js''が提供する機能は、window内の指定した領域にsvgMapによる地図を埋め込むことを可能にします。さらにこの埋め込まれたsvgMapオブジェクトを　外部からより簡単に操作できるようカプセル化されたインターフェースを提供します。

====ライブラリ====
SVGMapを埋め込むウェブページでは''SVGMapLv0.1_Frame*.js''を導入します。
<!doctype html>
<html>
<script type="text/javascript" src="SVGMapLv0.1_Frame_r4.js"></script>
</html>

====svg-map要素====

svg-mapカスタム要素を使用してsvgMapオブジェクトを任意の場所に埋め込むことができます。
<nowiki>
<!doctype html>
<html>
<script type="text/javascript" src="SVGMapLv0.1_Frame_r4.js"></script>
<body>
<table>
<tr>
<td>
説明用地図
</td>
<td>
<svg-map svgMapAppPage="SVGMapper_r16_layerUICustom.html" id="svgMapTag" latitude="37" longitude="135" zoom="4" layerui="#layerUIarea">
</svg-map>
</td>
</tr>
</table>
</body>
</html></nowiki>

=====属性=====
======svgMapAppPage======
必須属性: 起動するSVGMapLv0.1*.jsが組み込まれたhtmlを指定。
svg-map要素はshadow domとなっており、内部はひとつのiframeとして構成されます。このiframe内のwindowで通常のsvgMapオブジェクトが稼働する形となります。svgMapAppPage属性はこのiframe内で起動するsvgMapオブジェクトを持ったhtmlを指定するものです。

======latitude, longitude======
オプション: 表示領域を下記の属性と組み合わせて指定します。DOMを操作することによって動的に表示領域を変更することが可能です。
======zoom======
オプション: 表示位置の中心点を上の2属性で、ズームレベルをこの属性で指定します。ズームレベルの定義は[https://docs.microsoft.com/ja-jp/azure/azure-maps/zoom-levels-and-tile-grid webMercatorタイルピラミッドのレベル番号]（ただし小数点指定も可能）
======latitude2, longitude2======
オプション: latitude, longitudeと組み合わせて対角線を指定し表示領域を設定します。
======customjson======
オプション: 任意のJSON文字列を(エスケープしたうえで)与えることができます。 SVGMap.jsのあるiframeのwindow.rootMessage.customJsonに、JSON.parseされたうえでその値が反映されます。この値もDOM操作により動的に反映されます。window.rootMessage.customJsonの変化を監視できるようsetterを設けることで動的な変化に対応する実装が可能です。

var rootMessage={
set customJson(json){
...
}
}

======layerui======
オプション: レイヤーUIの出力要素をxlinkで指定します。　この値はmutationをobserveしていません（svg-mapオブジェクトが生成された、最初の一回のみ有効です）

<svg-map svgMapAppPage="SVGMapper_r16_layerUICustom.html" id="svgMapTag" latitude="37" longitude="135" zoom="4" layerui="#layerUIarea">

=====DOM API=====
======setCenter======
setCenter( longitude, latitude, zoom ) : 緯度経度ズームレベルで地図を表示させる
======addLayer======
addLayer(url,title,visibility) : URLで指定したリソースのレイヤーをtitleを付けて追加する

======svgMapObject======
getter svgMapObject : この要素に紐付いたsvgMapオブジェクトを得る

====layer要素====
svg-map要素の子要素として、任意の個数のlayer要素を設置できます。
=====属性=====
======title======
iframeで起動されるsvgMapオブジェクトの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルにある、レイヤー名(title)を指定し、そのレイヤーとlayer要素を紐付ける。該当するレイヤーが無く、且つ下記のsrcが指定されている場合は新しいレイヤーを追加する。なお、任意の属性や子ノードが与えられている場合は、下記の通りレイヤーの読み込み後にそれらの値が該当するレイヤーの[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|data-controller]]の window.rootMessageに設定される。

======src======
iframeで起動されるsvgMapオブジェクトの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルにある、レイヤーをURLを使って指定する
======visibility [TBD] ======
visible もしくは hiddenを設定すると、そのレイヤーの表示状態を制御できる。

======任意の属性======
任意の属性を設定できる。設定した属性名と属性値は、対応するレイヤーの[[#レイヤー固有ユーザインターフェース|data-controller]]で指定されたレイヤーのコントローラのwindowにおけるwindow.rootMessageの対応するメンバ変数に反映される。[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/set setter]を設定することで変化に応じて動作させることが可能になる。

======rootMessage.update()関数======
レイヤーのコントローラのwindow.rootMessage.update()関数(引数なし)が定義されている場合、上記の属性変更(最初の設定も含む)が検知される度にこの関数が呼び出される。

=====子ノード(TEXT CONTENTやXML要素)=====
任意のテキスト(textContent)や、XML要素(xmlContent)を子ノードに入れることができる。
入れられた情報は、同様に対応するレイヤーのdata-controllerの
window.rootMessage.textContent、もしくはwindow.rootMessage.xmlContentメンバ変数に反映される。
XMLに関しては任意の階層化がされていても良い。DOM操作による変化があれば更新されるので、同様にsetterを用いて変化を反映させることが可能。

=====DOMAPI=====
======layerId======
layerId : このレイヤーのレイヤーIDを得る
======svgImage======
svgImage : このレイヤーに紐付いたsvgMapコンテンツ(document)を得る
======svgImageProps======
svgImageProps : このレイヤーに紐づいたsvgMapコンテンツのsvgImagePropsオブジェクト(各種プロパティを格納したオブジェクト)を得る
======controllerWindow======
controllerWindow : (もしあれば)このレイヤーに紐づいたsvgMapコンテンツのレイヤー固有UIを得る

==第四章：内部機構解説==
[[内部機構解説|別ページを参照してください。]]

==第五章：付加機能==
===3D可視化機能===
:- SVGMap.jsはCesium.jsを利用してSVGMapで表示しているレイヤーを3D可視化することができます。
:- 3D可視化はSVGMap.jsの地図ウィンドと独立した別ウィンドで行われます。
:- すなわち、ここから呼び出されるCesiumベースの3D可視化ウェブアプリは、それ専用のwebApps([https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4_module.js cesiumWindow*.js]を読み込んだアプリ。：基本的な3D可視化ウェブアプリとして、[https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4.html cesiumWindow4.html]を用意)を持つ別のブラウジングコンテキストで起動されます。
:- この3D可視化ウェブアプリは、svgmapjsとメッセージングを行いsvgmapjsで表示されているレイヤーを3D可視化します。

====3Dビジュアライザ起動用ボタンの設置====
3D可視化機能を起動するためのUI(ボタン)は、[[#フレームワークの呼び出し|ルートhtml文書]]に設置した以下の要素によって構築されます。
<code><pre><img id="3DviewButton" data-app="cesiumWindow4.html" .../></pre></code>

* <code>id</code>が<code>3DviewButton</code>である必要があります。
* <code>data-app</code>属性で、3D可視化ウェブアプリのパスを指定することが可能です。
** もし指定されていない場合は、ルートhtml文書と同一ディレクトリの<code>cesiumWindow2.html</code>というファイルがデフォルトで指定されます。
** パスは同一オリジンである必要があります。
** 基本的な3D可視化ウェブアプリとして、[https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4.html cesiumWindow4.html]が[https://github.com/svgmap/svgmapjs/ svgmapjsリポジトリ]に用意されています。

解説書

2026-04-16T08:43:12Z

Admin: /* 【発展機能：S-LaWA Level 2 (CORS非依存モード)】 */

=SVGMap.js (Level0.1フレームワーク)解説書=

2018年現在のSVGMapのデータ形式、およびそれを実装した初歩的なフレームワーク(SVGMap Level0.1 Revision*)の解説を行います。

==第一章：SVGMapの基本機構と、更新部分==

この章は、JIS化されたSVGMap ([http://kikakurui.com/x7/X7197-2012-01.html JIS X.7197])や、[https://www.w3.org/Submission/2011/04/ W3C Member Submission]に対する、近年の開発成果に基づいたSVGMapのアップデートを解説しています。

[http://kikakurui.com/x7/X7197-2012-01.html JIS X.7197]もしくは、[https://www.w3.org/Submission/2011/04/ W3C Member Submission]に記載されているように、SVGMapの基本機構は主に以下の機能を　[https://ja.wikipedia.org/wiki/Scalable_Vector_Graphics 汎用的なグラフィイクスデータ記述形式SVG]に拡張することです。
* [[#地理座標系の処理|地理座標処理]]
** SVGの座標系と地理座標系との間の関係を記述する globalCoordinateSystems要素
* タイルピラミッド（タイリングとLevel of Detail）
** コンテンツを埋め込む[[#要素|image要素、animation要素]]のx,y,width,height属性への追加の振る舞いと、visible-min-zoom, visible-max-zoom属性の追加
** 詳細は [https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html こちらの論文]を参照
* 拡張された[[#レイヤー|レイヤー]]
** [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]におけるimage, animation要素の扱い
** [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が埋め込むsvgコンテンツ([[#レイヤー|レイヤーsvgコンテンツ]])の処理

===地理座標系の処理===
SVG2では地理空間座標を記述するスペック(metadata geospatial coordinate systems)が削除されました。これは、W3C SVG仕様の範囲では単なるメタデータであり、ユーザエージェントの振る舞いに何ら影響を及ぼさないことが理由です。　また、JIS SVGMapにおいては、coordinateReferenceSystem 要素が定義され、それに基づくユーザエージェントの振る舞いが規定されていますが、これは一方でW3Cのスペックではないという課題を持ちます。

これを受けて、現在提案されているSVGMapのデータ仕様では、SVG1.1の段階ですでに標準化と実装が行われたスペックを注意深く活用することにより、JIS SVGMapで規定された地理座標系に関する機能のいくつか（すべてではない）を実現する方法を用いることとしています。（[https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/globalView globalView spec]）

なお、JIS SVGMapのcoordinateReferenceSystem要素もサポートしています。

====メルカトル図法を含む任意の図法の定義とその合成機能(＞rev16)====
従来のSVGMapでは、グローバル座標系に緯度経度座標を用いた場合、使用できる図法は[https://ja.wikipedia.org/wiki/%E6%AD%A3%E8%B7%9D%E5%86%86%E7%AD%92%E5%9B%B3%E6%B3%95 PlateCarreeや正距円筒図法]でした。

一方、rev16では[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]を含む任意のSVGMapコンテンツ([[#レイヤー|レイヤーsvgコンテンツ]]やサブレイヤー、タイルなど)のglobalCoordinateSystem 要素のtransform属性に、下記のように"mercator"を指定することで、そのコンテンツの座標系がメルカトル図法([https://en.wikipedia.org/wiki/Web_Mercator_projection web mercator])であることを宣言できます。

<pre><globalCoordinateSystem srsName="http://purl.org/crs/84" transform="mercator" /></pre>

この記述がされたコンテンツのSVGの座標空間はメルカトル図法上のものとなり、この座標系上でのx,y=0,0(左上)は西経180.0度,北緯85.051129度、x,y=1,1(右下)は東経180.0度,南緯85.051129度に対応します。

=====メルカトル図法での地図表示=====
[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]で先述の宣言を行うことで、SVGMap0.1.jsはメルカトル図法で画面上に地図を表示します。このとき、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が参照する各レイヤーはメルカトル図法であっても、それ以外であっても構いません。フレームワーク内でオンザフライの図法変換が実行されます。（逆に[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]がPlateCarreeでレイヤーがメルカトルでも同様）

=====メルカトル図法のドキュメントルート要素のviewBox属性=====
* [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]において、地図の初期表示状態を記述するドキュメントルート要素(<svg>要素)のviewBoxに記述する座標も先述のメルカトル座標系で記述する必要があります。
* 一方、緯度経度で初期表示領域を記述したい場合に対応する仕様が拡張されており、その記述例は下記のとおり、'''global'''を追加します。
<pre><svg viewBox="global,138,35,2,2"></pre>

=====プロキシの設定=====
オンザフライでの図法変換では、多くのケースで非線形の座標変換が必要となります。ビットイメージ（タイルを含む）に対して子の座標変換を実行するためにSVGMap.jsではビット委イメージのピクセルにアクセスしています。これを実現するにはビットイメージがSVGMap.jsと同一オリジンにある必要があります。この条件を満たせないケースに対してフレームワークにはプロキシを設定する機能があります。([[#setProxyURLFactory|setProxyURLFactory API]]を参照)

'''[[クロスオリジンアクセス|詳細な情報をこちらに掲載しました]]'''

=====多様な図法の定義と利用=====
[[#動的な地図レイヤー|javascriptコード]]に記載されたscript要素内に定義した関数の関数名をglobalCoordinateSystem要素のtransform属性に記述することで、その関数を図法変換に用いた図法定義が可能となります。(先述のmercator属性は、フレームワークに特別に組み込まれた関数です）

たとえば、日本の平面直角座標系の地図(固有の基準点を持つ横メルカトル図法)をPlateCarreeやメルカトル図法の地図として合成・表示するケースなどに有効でしょう。

ユーザが定義できるこの関数は引数を持たない関数であり、返り値として以下の３つの関数を返す必要があります。
* {x,y} transform({x,y}) : グローバル座標(WGS84経度緯度)から、そのコンテンツの図法の座標への変換関数入出力値は.x,.yメンバを持つオブジェクト。
* {x,y} inverse({x,y}) : 同、逆変換関数
* number get scale : グローバル座標系に対するコンテンツの図法の座標系の座標値のスケール（グローバル座標系で1変化すると、コンテンツの座標系でいくつ変化するのかを表す）
* 記述例
<code><pre>
<svg ...>
<script>
function azimuthalEquidistant(){
...
return{
transform:function(inp){
var xy = transform_int(inp.y, inp.x, ...);
return{ x:xy.x, y:xy.y}
},
inverse:function(inp){
var latLng = inverse_int(inp.x, inp.y, ...);
return{ x:latLng.lng, y:latLng.lat }
},
scale: 1.0
}
}
</script>
<globalCoordinateSystem srsName="http://purl.org/crs/84" transform="azimuthalEquidistant" />
...map contents in projected coordinate system...
</svg>
</pre></code>

===ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング===
SVG2(SVG1.1 2nd Edition)では、SVG単独によるユーザエージェントという実装想定は撤廃され、よく知られているウェブブラウザの機能の一部としてのSVGデータの描画機能、HTMLやCSSと一体化されたデータ・コンテンツ　へと変化しました。一方、近代のウェブブラウザにおけるコンテンツでは古典的なhtmlに基づくコンテンツデータに対して、javascriptとDOM APIによるプログラムでコンテンツをブラウザ上で動的に生成する（ウェブアプリケーション）機構を備えます。すなわちSVGを実装する現代のユーザエージェントは例外なくウェブアプリケーションの実行が可能となりました。

そこで、SVGMapでは静的なSVGによる地図コンテンツに加え javascriptで動的に生成されるコンテンツ(ウェブアプリケーション)も地図コンテンツ（地図のレイヤー）として扱えることとしました。それにもかかわらず SVGMapは依然として複数のウェブ上で分散する地図データを一つの画面上にレイヤリングする機能（ハイパーレイヤリング）を維持しています。すなわち、ウェブアプリケーションとしての地図レイヤーをレイヤリング（マッシュアップ）する機能が拡張されます。これは、SVGMapのマッシュアップ・ハイパーレイヤリングの概念を、単に地図画像データのレイヤリングから、地図上に表現された動的なオブジェクトのマッシュアップ・レイヤリングに広げています。SVGMapではこのコンセプトを[[リンク集#.E8.A7.A3.E8.AA.AC.E9.9F.B3.E5.A3.B0|"Layers as WebApps"(LaWA : ウェブアプリケーションとしてのレイヤー)]]と呼んでいます。

このようなウェブアプリケーションは、レイヤーごとにカプセル化されることになります。これにより、'''グローバル空間'''(コンテナsvgコンテンツとそれを起動する、svgMap.jsフレームワークを読み込んだウェブページ)のスパゲッティ化なしに、多様な機能を実装していくことが可能になります。

[https://satakagi.github.io/mapsForWebWS2020-docs/De-centralizedWebMapping.html こちらの論文]も参考にしてください。

ウェブアプリケーションによる地図レイヤーを構築するには二つの方法があります。
* svg要素の'''data-controller'''属性で参照されたhtml文書
** [[#レイヤー固有ユーザインターフェース]]と呼ばれる機構です。この方法を用いること推奨します。
* svg要素内の'''script'''子要素 (将来廃止予定)
** htmlによるUIを伴わない実装の場合はscript要素を用いることができます。ただしsrcは属性には非対応、直接コードを埋め込む必要があります。

この機能を用いるにはSVGMapLevel0.1フレームワークを使用する場合は、拡張フレームワーク(SVGMapLv0.1_LayerUI2_r*.js)を更にロードする必要があります。SVGMapLevel0.2フレームワークの場合はデフォルトで機能します。

====レイヤー固有ユーザインターフェース====
SVGMap.jsではさらに、個々の地図レイヤー(レイヤーSVGコンテンツ)がそれぞれのレイヤーに特化した固有の演算ロジックだけでなく、ユーザーインターフェースも備えた[[#レイヤーsvgコンテンツの設定|HTMLを紐づける]]ことができる機能が拡張されています。UIも備えたより完全なwebAppをレイヤーとして実装できるため、カプセル化がより効果的に実現されます。（Layers as Web Apps, LaWA)

たとえば気象情報のレイヤーに対して気象情報の時間変化を表示するアニメーションのコントローラ(スライダーバー)や、気象情報の種類を選択するプルダウンメニュー　などのUIやロジックを任意に構築できます。

レイヤー固有ユーザーインターフェースは、[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]](SVGMap.jsをロードしたhtml)のレイヤー選択UIを通してwindowに設置されたiframe中に呼び出されます。

詳細は[[#レイヤー固有のUI]] を参照してください。



　

====例====
以下に、いくつかのこのような動的な地図コンテンツの例を示しましょう。
;検索によって表示スタイルを変更する機能を持ったレイヤー
: 例えばコンビニエンスストアのＰＯＩレイヤーを表示したとして、そのメタデータを読み取り、検索条件に基づいて（例えば深夜営業している店舗）の表示スタイルを変更するような検索機能を実装したレイヤー　メタデータは書くレイヤーごとに独特の値を持つため、その検索ロジックはレイヤーに固有のものとなることがあります。このケースではそのような機能をレイヤーに組み込むことを可能にします。
;CSVデータなどのレガシーな非SVGデータをHXRで取得し、ブラウザ上でSVG DOMツリーを生成するようなSVG地図コンテンツ。
: このケースでは、サーバからクライアントに送信されるデータの実体はSVG形式の地図データではなく、CSVなどのレガシーなデータです。SVG地図コンテンツには、CSVデータをSVGとして描画するためのデータ読み込み・解読・SVG DOMツリー生成機構を備えたjavascriptコードが含まれます。また、これよりはモダンなgeoJsonやKML等のデータをSVG DOMに変換することも容易に可能でしょう。これをより簡単に実現するためのライブラリも[[#svgMapGIStool.で呼び出せるAPI|svgMapGIStool]]に準備されています。
;タイリングされた地図コンテンツ
: それは、たとえば[https://wiki.openstreetmap.org/wiki/Tiles OpenStreepMapのTile Server]や、[https://en.wikipedia.org/wiki/Tile_Map_ServiceTileMap Tile Map Service]のような、特定のロジックによる数列のような法則性を持ったピラミッド状の地図タイルリソースをタイリングする地図コンテンツのことです。
: 更新されたSVGMapでは、地図コンテンツに内蔵されたjavascriptによるアプリケーションロジックとしてそれらを取り扱うことができます。タイリング規則をそのままウェブアプリケーションとしてで書き下し、スケールやビューポートに応じて適切なタイリング(配置)を行うSVG DOMツリーを生成するSVG地図コンテンツが構築できます。

=====タイリングに関するノート=====
[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html svgMapにおけるタイリング]は従来の地図フレームワークより柔軟で汎用的な概念に基づいています。
openLayersやleafletなどの従来の地図フレームワークでは、このようなタイリング機能は特定の固定的なタイリングロジックとパラメータを伴った機能として地図フレームワーク本体にハードコードされて提供されてきました。さらには地図フレームワークがこれらのタイリングロジックに強く依存したアーキテクチャを持っていました。一方、これらのロジックにはさまざまなバリエーションや最適化のための調整パラメータが存在し、これまで長らくその互換性や相互運用、更には効率の問題を抱えてきました。次のリンクでその多くの議論や多様な提案を参照できるでしょう。[https://wiki.osgeo.org/wiki/Tile_Map_Service_Specification TMSspecs@osgeowiki], [https://wiki.osgeo.org/wiki/Category:Tiling tiling@osgeowiki]
ベクターデータのタイリングにおいては、これらの課題はさらに増幅され、いまだ手法は確立していないといっても良いでしょう。たとえば、我々の研究では、Quad Tree Composite Tiling([https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-in-english スライド]、、[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html ペーパー])のような用途によってはもっと優れたタイリングの手法も見いだされています。

一方、これらのロジックはその多様なバリエーションを含め、javascriptによるプログラムコードとしては容易に記述可能です。多くの場合わずか数十行のロジックで記述できるでしょう。この程度のコードで多くのタイリングの手法が包含できるのであれば、特定のタイリング手法をフレームワークのコアに内包する・さらにはこれら特定のタイリングの手法にコアが依存する必要はなく、先述のウェブアプリケーションによる動的な地図レイヤーとして実装すれば良いであろうというのがSVGMapにおけるタイリング扱いです。3DマップのフレームワークであるCesiumはこれに似たタイリングポリシーを持っているようです。

=====SVG以外のデータサポートに関するノート=====
前章に記載した方針と同様、他の地図表示フレームワークと異なりSVGMapではSVGとして規定されたコンテンツ(もちろんビットイメージの埋め込みは可能)以外のネイティブサポートは行いません。例えばgeoJsonやKML, WKTなど地図業界でしばしば用いられるデータをSVGMapで表示したい場合は、変換ルーチンを埋め込んだ動的な地図コンテンツ（webAppレイヤー）としてそれらを扱います。SVGMap.jsの拡張モジュールである[[#svgMapGIStool.で呼び出せるAPI|SVGMapGIS.js]]には、これらのデータをwebAppsで読み込みSVGに変換するためのAPIがあります。

===トポロジースイート(地理空間情報処理)===
Rev.13で拡張

SVGMapLevel0.1 Revision 13以降では、SVGMapコンテンツに対してトポロジー演算機能(地理空間情報処理機能)を適用する拡張フレームワークが提供されます。この機能を用いるにはSVGMapLevel0.1フレームワークに加えて、拡張フレームワーク(SVGMapLv0.1_GIS_r*.js)をロードする必要があります。このフレームワークでは、[[#svgMapGIStool.で呼び出せるAPI|拡張されたAPI]]が利用可能です。フレームワークに内蔵された基本的な演算機能に加え、geoJSONと整合するインターフェースを備え、[https://github.com/bjornharrtell/jsts jsts]を組み込み、より高度な機能を実装するための機構も持ちます。

この機能を用いると、特定のレイヤーに登録されているポリゴンの範囲に入っている、特定のレイヤーのポイントをフィルタリングして表示の色を変更する。といったことが可能です。ただし、これらはすべてすでにブラウザ上にロードされている限られた量のコンテンツの中での演算に限定されます。もしもサーバ上にしかないデータに対してこれらの演算を試みたい場合、従来通りサーバサイド技術によってそれは実現すべきです。

また、主題情報を含むウェブマップコンテンツの多くのレイヤーがラスタータイルによって提供されているという現状を考慮し、このスイートはラスターレイヤーをカバレッジとして扱った空間情報処理を行う機能の実装も進められています。現在のところ、カバレッジとポイントとの間での演算が可能です。また、そのために便利なカラーピッカー等の付加的な機能の実装も進められています。

===オーサリングシステム===
Rev.14で拡張

SVGMapLevel0.1 Revision 14以降では、SVGMapコンテンツを編集するツール機能が実装された拡張フレームワークが提供されます。[[#svgMapAuthoringTool.で呼び出せるAPI|フレームワークが提供するAPI]]を使って、オーサリング機能を持ったレイヤーを作ることが可能です。コンテンツは、SVG DOMとして構築されます。なお編集したオブジェクトを保存したり登録するためには別のサービスやアプリケーションの開発が必要です。

===3D可視化システム===
Rev.15で拡張

[https://cesiumjs.org/ Cesium.js]を用いて、SVGMap.jsが表示できるすべてのコンテンツを3D可視化するシステムです。詳細解説はTBD ([[#svgMapCesiumWrapper.で呼び出せるAPI|フレームワークが提供するAPI]])

===プログレッシブウェブアプリケーション===
Rev.16で拡張

[https://developer.mozilla.org/docs/Web/Progressive_web_apps Progressive Web Apps]をサポートしたブラウザにおいて、SVGMap.jsをオフラインでも利用可能にする拡張機能です。詳細解説はTBD ([[#svgMapPWA.で呼び出せるAPI|フレームワークが提供するAPI]])

===SVGMapコンテンツのバックエンドソフトウェア (参考)===
本解説書は主にコンテンツ形式とユーザーエージェント側のソフトウェアについて解説していますが、サーバ・バックエンド側についてもここで少し言及します。

shapefileやcsvなどから、静的なSVGMapコンテンツを生成するためのソフトウェアが[https://github.com/svgmap/svgMapTools オープンソース]で準備されています。これらのソフトウェアでは、[[#タイリングに関するノート|高度なタイリング手法]]を用いた地図タイルを生成することができます。使用方法などは同リポジトリに用意されているチュートリアルを参照してください。

一方、もちろんSVGMapの仕様に準拠すれば、これらのソフトウェアに頼らず、自由にバックエンドを構築することができます。例えばよく知られた地図タイルサービスを用いたり、古典的な[https://wiki.openstreetmap.org/wiki/Web_feature_service WFS ]や[https://wiki.openstreetmap.org/wiki/WMS WMS]のような動的地図・地理空間情報サービスをベースにして比較的容易にそれらを構築することもできます。[https://github.com/svgmap/svgMapLv0.1/tree/master/appLayers SVGMap.jsのリポジトリのappLayersディレクトリ]にはそのようなシステムを構築する際のフロントエンド側の動的レイヤーのサンプルが掲載されています。

==第二章：SVGMap Revsion 0.1フレームワーク==
SVGMapは究極的には既存のすべてのウェブブラウザがネイティブの機能としてそれを備えることを目標とし、既存のHTML,CSS,SVGなどのウェブブラウザの標準規格との整合性を備え、且つ既存のWeb Mappingの規格との整合性をも備えた仕様として検討と標準化を進めています。しかし今のところまだその標準化は完遂されていないため、その完全な実装がなされたウェブブラウザは存在しません。一方、既存のウェブブザでSVGMapの機能が実行可能となるような拡張をJavascriptによるフレームワークとして構築することが可能です。SVGMap Revision 0.1フレームワークは、このようなJavascriptによるSVGMapの仕様に基づいた初歩的な制限と拡張がされた実装です。その実装はオープンソースとして[https://github.com/svgmap/svgMapLv0.1 こちらのgitubリポジトリ]で公開されています。

そのアーキテクチャの特徴は、ブラウザネイティブのSVGレンダラーを使用せず、HTML,CSS,HTMLCanvas2DAPIを用いてSVGMapが実装されている点です。この特徴は主にこのフレームワークの開発が開始された時期に起因しています。当時のウェブブラウザの多くはSVGが実装されていませんでした。また実装されていたとしても、大規模なベクトルデータのレンダリング、および伸縮スクロール・インタラクティブな操作に対する性能面での処理制御に問題がありました。これらの問題のいくつかは現在のブラウザで解消されているものがあるかもしれません。またこれらの問題の解決とともに、SVGMapフレームワークはLevel番号を上げつつよりネイティブの機能に基づいた実装に移行するかもしれません。<font size="-2">参考までに、[http://svg2.mbsrv.net/devinfo/devkddi/lvl0.5/ 実験的なネイティブのレンダラを用いた実装(2010年)]があります。</font>

SVGのベクトル描画機能は[https://github.com/canvg/canvg canvg]のpathパーサなどを引用することで実装されています。一方、地図としてあまり用いられないと想定された多くの要素やプロパティ、アトリビュートの実装が省略されています。

===追加・拡張された機能：===
====フレームワークの呼び出し====
本フレームワークを用いる場合、SVGMapコンテンツをブラウザに直接読み込ませることはできません。フレームワークを動作させるjavascriptライブラリをロードしたhtmlコンテンツ(WebApps)を準備し、そこでSVGMapコンテンツを読み込み表示させます。利用者には、このhtmlコンテンツのURLを告知します。このhtmlコンテンツを以降'''ルートhtml文書'''と呼ぶことにします。

SVGMapのフレームワークはgithubリポジトリ：https://github.com/svgmap/svgmapjs　で公開されています。

htmlコンテンツの<body>要素直下に以下の要素を配置します。
=====フレームワークを実装したjavascriptライブラリを読み込むscript要素=====
これがSVGMap.jsのコアのフレームワークを構成します。

<nowiki><script type="module">
import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

上のスクリプトで必要なモジュールが読み込まれます。[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]のwindowのメンバには、svgMapオブジェクトを設定しています。

[https://svgmap.org/devinfo/devkddi/tutorials/tutorial5_esm/tutorial5.html 実働サンプル(tutorial5_esm)]

もしくは https://github.com/svgmap/svgmapjs の内容を独自のウェブホストにコピーしそれを用いることもできます。(下の例は[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]のhtmlに対して、svgmapサブディレクトリにjsを置いた場合)
<nowiki><script type="module">
import { svgMap } from './svgmapjs/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

===== GISモジュールを利用する場合 =====
svgMap.jsの地理空間演算機能(GISモジュール)では、jsts.jsを使用しています。そのためGISモジュールを機能させるにはjsts.jsの読み込みが必要です。下記のようになります。もちろん独自のウェブホストにjstsをコピーしてそれを利用することも可能です。

<nowiki><script type="text/javascript" src="https://unpkg.com/jsts@1.6.1/dist/jsts.min.js"></script>
<script type="module">
import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

======本解説書でAPIを説明している、現在利用可能な拡張フレームワーク======
ECMA Script Module対応の内容に現在更新中

* [[#svgMapCesiumWrapper.で呼び出せるAPI|SVGMapLv0.1_CesiumWrapper_r*.js]] (実験的)
** https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/experimental/Cesium3D/SVGMapLv0.1_CesiumWrapper_r3.js
* [[#svgMapPWA.で呼び出せるAPI|SVGMapLv0.1_PWA_r*.js]] (実験的)
** https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/experimental/PWA/SVGMapLv0.1_PWA_r5.js

まだ実験的なsvgMapCesiumWrapperは、[http://www.svgmap.org/devinfo/devkddi/lvl0.1/cesiumSvgMap/top.html svgMap cesium visualizer]ページを参照ください。
SVGMapPWA(ProgressiveWebApp)については、[https://svgmap.org/devinfo/devkddi/lvl0.1/svgMapPWA/ SVGMap PWA Test]ページを参照ください。

=====SVGMapコンテンツを配置するためのdiv要素=====
id属性に"mapcanvas"を設定し、data-src属性(もしくはtitle属性(to be obsoluted))には、地図フレームワークが最初に読み込む、SVGMap.jsが表示する地図コンテンツの起点となるSVGコンテンツ（以降'''コンテナsvgコンテンツ'''と呼びます）のパスを指定したdiv要素を設置します。

コンテナsvgコンテンツはまた、'''[[#レイヤー|ここで記述するレイヤー]]'''を持つことができる特別のコンテンツです。

（要確認：地図のサイズ・配置はこのdiv要素のサイズとなります。無指定の場合は全ウィンドサイズ）
<nowiki><div id="mapcanvas" title="Container.svg"></div></nowiki>

<nowiki><div id="mapcanvas" data-src="Container.svg"></div></nowiki>

======差分データの指定======
data-custom-layers-root属性でContainer.svgに対するレイヤーの差分情報のパスを指定することができます。
もしくは、data-custom-layers-root属性に、レイヤーの差分情報が保管されているディレクトリを記述した場合、URLハッシュで差分ファイルを指定することもできます。
差分データは、[https://github.com/svgmap/svgmapjs/blob/main/SVGMapCustomLayersManager_r3module.html カスタムレイヤーマネージャ]で作成することが可能。（データ形式は後述）
<nowiki><div id="mapcanvas" data-src="Container.svg" data-custom-layers-root="./containerDif/dif0.json"></div></nowiki>

=====地図中心の照準イメージ。=====
参照する画像はあらかじめ用意されたもの以外も利用できます。
<nowiki><img id="centerSight" style="opacity:0.5" src="Xcursor.png" width="15" height="15"/></nowiki>

====任意で設置できる要素：====
=====[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]](後述)を設置するdiv要素=====
<nowiki><div id="layerList" style="left :30px; top: 10px; width:300px;height:90%; position: absolute; "></div></nowiki>
: idが上記の通りである必要があります。
　 styleは任意だが、heightは[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]が展開された状態におけるサイズとなります。格納された状態のサイズは、この要素における文字の縦幅となります。各種オプションについては[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|詳細を参照ください]]
　

=====[[#レイヤー固有のUI|レイヤー固有のUI]](後述)を設置するdiv要素=====
[[#レイヤー固有のUI|レイヤー固有のUI]]を使用するために設置するdiv要素です。

<nowiki><div id="layerSpecificUI" style="right :10px; top: 40px; width:400px;height:400px; position: absolute; background-color: white;opacity:0.8;display:none;"></nowiki>
<nowiki></div></nowiki>
: idが上記の通りである必要があります。styleは任意だが、heightはレイヤリストUIが展開され得る最大のサイズとなります。
　
=====伸縮ボタン=====
<nowiki><img id="zoomupButton" style="left: 5px; top: 5px; position: absolute;" src="zoomup.png" onclick="svgMap.zoomup()" width="20" height="20" /></nowiki>
<nowiki><img id="zoomdownButton" style="left: 5px; top: 25px; position: absolute;" src="zoomdown.png" onclick="svgMap.zoomdown()" width="20" height="20" /></nowiki>
: img要素かつidが上記の値である必要があります。
　伸縮ボタンを一回押すたびに伸縮する比率は、別途svgMap.setZoomRatio(ratio)で設定可能。
　デフォルトの比率はsqrt(3)
　
=====測位ボタン=====
<nowiki><img id="gpsButton" style="left: 5px; top: 45px; position: absolute;" src="gps.png" onclick="svgMap.gps()" width="20" height="20" /></nowiki>
: img要素かつidが上記の値である必要があります。ボタン押下で測位し、測位点を中心にして地図を表示する機能。表示の範囲は測位制度に応じて適当に設置されます。

=====グローバルメッセージ=====
レイヤー固有UIが任意のメッセージを出力可能にするために設置するエリア　[[#レイヤー固有のUI]]のAPI '''putGlobalMessage''' 参照
<nowiki><span id="globalMessage" style="font-size:10px;left:5px;bottom:16px;position:absolute;"></span></nowiki>
: idが上記の値である必要があります。
　styleは任意

=====地図中心の緯度経度値表示=====
<nowiki><font id="centerPos" size="-2" color="brown" style="left: 50px; bottom: 5px; position: absolute;" ></font></nowiki>
: idが上記の値である必要があります。
　styleは任意

=====地図スケールの表示=====
<nowiki><font id="vScale" size="-2" color="black" style="left: 5px; bottom: 28px; position: absolute;">-</font></nowiki>
: idが上記の値である必要があります。
: styleは任意
: 縦50pxに対応したスケール[Km]を表示します
: 近傍に縦50pxのスケールイメージを設置するとわかりやすいでしょう

=====レジューム機能のためのチェックボックス=====
<nowiki><form style="right:10px;top:20px;position:absolute;opacity:0.8" ></nowiki>
<nowiki><input type="checkBox" id="resumeBox" onChange="svgMap.resumeToggle(event)" autocomplete="off"/></nowiki>
<nowiki><label for="resumeBox"/>Keep and Resume view</label></nowiki>
<nowiki></form></nowiki>
: checkboxタイプのform要素であり、idが上記の通りである必要があります。レジューム機能とは、(rev16以前ではcookie、rev17以降ではlocalStorage)を用いて、前回最後に表示された状態（レイヤーの表示非表示状態、表示領域（view port）を再現する機能です。スタイルおよびlabel要素は任意

===== [[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]のためのスタイル=====
<style>
body {
font-family: Meiryo;
}
#layerTable{
background:#ffE0E0;
border: 2px solid #bbb;
}
.layerItem{
background-color: white;
}
.noGroup{
background-color: #fff0f0;
}
#layerList{
background-color: #ffff80;opacity:0.8;
}
</style>
====== [[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]を用いる場合、例えば上記のようなスタイルの定義が必要です。======
* layerList：レイヤーリストUI全体に対するスタイル
* layerTable：レイヤーリストUIの中のテーブルに対するスタイル。
* layerItem：同テーブルに表示される個々のレイヤー表示に対するスタイル
* noGroup：同レイヤー表示のうち、グループに属さないレイヤーに対するスタイル
　

====レイヤー====
SVGMapは古典的な地図情報システムのようなレイヤーの概念を備えていません。一方その上位概念ともみなせる、任意のドキュメントをツリー状に埋め込む機能を備えています。しかしそれでは古典的なユースケースを平易に表現しているとはいえないため、それをラップする古典的なレイヤーの概念と、それに基づくレイヤーユーザインターフェースのフレームワークを持ちます。

フレームワークが最初に読み込む地図コンテンツの起点となる'''[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]'''の中で、animationもしくはiframeを用いて（準拠規格に依る）埋め込まれるsvgコンテンツが、自動的にレイヤーとみなされます。いうまでもなくレイヤーの上下順はSVGコンテンツのスクリプト中での埋め込みの順番の逆順になります。

また、このコンテナsvgコンテンツが参照し埋め込んでいる、各レイヤーのSVGコンテンツのことを、'''[[#レイヤー|レイヤーsvgコンテンツ]]'''と呼ぶこととします。ここで、各[[#レイヤー|レイヤーsvgコンテンツ]]はさらに別のsvgコンテンツを埋め込むことがあります。これらのコンテンツはよくサブレイヤーSVGコンテンツもしくは単にサブレイヤーと呼ばれることもあります。

なお、Rev12以降のSVGMapLv0.1フレームワークではレイヤーフレームワークは本体と独立した実装となり、拡張や切り離しが可能となりました。以下は、標準で提供されるレイヤーフレームワークのVer2 (SVGMapLv0.1_LayerUI2_r*.js)に関して解説します。

レイヤーUIフレームワークが提供するUIは、先述のレイヤーリストUIを設置するdiv要素によって提供されます。このUIは以下の機能を持ちます。
* 折り畳み可能なレイヤーの一覧を表示する機能
* 各レイヤーの表示非表示を切り替える機能
* グルーピングされたレイヤー(後述)をグループとして表現、折り畳み、一括表示非表示する機能。
* そのレイヤーに紐づけられた[[#レイヤー固有のUI]]を出現させる機能。
* 表示されているレイヤーの個数などの情報を表示する機能

===== コンテナsvgコンテンツの記述内容とレイヤーフレームワークの振る舞い =====
* animation要素：　レイヤーとみなされる
** title属性: レイヤーの名称となる。(必須属性) title属性値は他のレイヤーと重複してはならない(ID(このコンテンツ内でのレイヤーの識別子)として振る舞う)
** xlink:href属性: レイヤーsvgコンテンツへの参照
** visibility属性 : レイヤーの初期の表示状態。UIにより変更できる (hidden or visible)
** opacity属性 : レイヤーの透明度
** x,y,width,height属性の振る舞いは共通(viewportがこの属性の値とintersectしていただロードされる)
** class属性: スペース区切りで規定値(複数)と任意値(一つ)を記述できる
*** 詳細は後述の[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供]]を参照
** data-controller属性: (Optional) [[#レイヤー固有のUI]]　の　[[#詳細]]参照
* globalCoordinateSystem要素：(1個つだけ必須要素)
** (コンテナsvgコンテンツにおける)本要素が、このフレームワークによってUser Agentに表示される地図の図法を規定する。
*** なお、それ以外のSVGコンテンツのglobalCoordinateSystem要素は、コンテナsvgコンテンツの図法への変換のために用いられる
*** より詳細は[[#地理座標系の処理]]を参照
* svg要素: (documentRoot要素)
** viewBox属性: 初期の表示範囲を指定。
*** ここに記述する座標値は、SVGの仕様に準ずるが、　拡張記述形式も使用可能　参照：[[#メルカトル図法のドキュメントルート要素のviewBox属性]]

===== レイヤーsvgコンテンツ =====
レイヤーsvgコンテンツは、[[#レイヤー固有のUI|レイヤー固有のUI]]を紐づけることができます。

====クリッカブルオブジェクト====
グラフィックスオブジェクトをクリック（タブレットの場合は、タップもしくは照準アイコンに合わせたうえでタップ）することでそれに紐づけられたインタラクティブ動作を実行する。インタラクティブ動作はフレームワークが独自に提供する、metadataフレームワークに基づく、メタデータの表示機能を対象とします。

なお、image要素(useによって間接的に設置されたimage要素を含む)は、a要素によるハイパーリンクが加えて実装されています。metadaとa要素の双方が設定されているimage要素では、どちらのインタラクティビティを発動させるかをモーダルダイアログによるユーザへの問い合わせが行われます。

====class属性によるレイヤーのグルーピング・クリッカブル機能の提供====
コンテナsvgコンテンツが参照するレイヤー（[[#レイヤー|レイヤーsvgコンテンツ]]）へのリンクを記述する要素(animationもしくはiframe要素)は、class属性によって、各レイヤーに特性を与えることができます。classはスペース区切りで複数指定することができますが、グループ名は一つしか認識されません。
;グルーピング
: 以下の属性値以外の値を記述すると、グループ名として認識され、同じグループ名を持ったレイヤーたちをグルーピングすることができます。グルーピングの効果はレイヤーＵＩにおけるグループ表現と、下記のbatch,switch特性です。グループはレイヤーリストUI上の表現に反映されます。最初に現れたグループ名がこのUIの下に表示されます。ただし地図画面上の描画の順番はこれとは別、SVGの基本的な描画順([https://www.w3.org/TR/SVG11/render.html#PaintersModel Painter Model])に準じます。
;batch
: グルーピングとともに使用します。そのグループに属するレイヤーを一括で表示非表示するための機能がレイヤーＵＩに付加されます。
;switch
: グルーピングとともに使用します。そのグループに属するレイヤーは、どれか一つしか表示されません。batchとの併存はできません。（無視されます（要確認））
;clickable
: Pathなどのベクトル図形要素はデフォルトではインタラクティビティが提供されません。クラス値にclickableを指定することでこのレイヤー（子供のsvgコンテンツを含む）の図形要素においてのみ、インタラクティビティが提供されます。提供されるインタラクティビティは、マウスによって図形をクリックしたとき、そのグラフィックス要素がクリッカブルな要因を備えているかどうかを検索し、備えている場合それに対応するアクションを起こします。
　なお、image要素(useによって間接的に設置されたimage要素を含む)は、このクラスの設定に依らず、a要素によるハイパーリンク、およびmetadataフレームワークを用いたクリッカブルオブジェクトとして機能します。
;editable
: 当該レイヤの[[#レイヤー固有のUI|レイヤー固有UI]]に[[#svgMapAuthoringTool.で呼び出せるAPI|svgMapAuthoringTool]]の図形編集オブジェクトを設置する場合、それを有効に機能させるためにはこの属性が必要です。(なお再編集機能を有効にするにはclickableも必要)

====data-nocache====
コンテナsvgコンテンツが参照するレイヤー（[[#レイヤー|レイヤーsvgコンテンツ]]）へのリンクを記述する要素(animationもしくはiframe要素)に、data-nocache属性をつけることによって、クライアントのコンテンツキャッシュを無効にすることができます。なお、無効化手段はunix-timeクエリパートをそのレイヤー下のすべてのリソースへのアクセスに付加させることによります。

====metadataフレームワーク====
データ格納効率に優れたメタデータのフレームワークが提供されます。このメタデータは先述のクリッカブルオブジェクトとしてインタラクティビティの実装に用いられます。 svgドキュメントルート要素のproperty属性にメタデータの属性名をカンマ区切りで列挙。同文書の図形要素のproperty属性に同じ順序でメタデータの値を記述します。(なお、xlink:title属性でマウスオーバーで機能する吹き出しを設置できます)

ひとつの文書に対して一つのスキーマ（メタデータの属性名とその順番）しか与えられないという制約を持ちます。（その代わり格納効率が高い）クリックやタッチ等によってデフォルトの状態ではブラウザが備えるモーダルダイアログに属性名と属性値がそれぞれ列挙された形で表示されます。metadata表示機能の拡張/カスタマイズについては、ウェブアプリケーションの開発の章で別途解説する'''setShowPoiProperty()'''関数を参照してください。

データ自体にカンマが含まれる場合はエスケープが必要です。

=====例：=====
<svg '''property="id,type,latitude,longitude,title,address,spec"''' ... >
...
<use transform="ref(svg,14118.37511,-4524.39994)" x="0" y="0" xlink:href="#syl8"
'''content="RIS/RJER,地方管理,45.2439994,141.1837511,利尻空港,北海道利尻郡利尻富
士町,1800×45(07/25)"''' xlink:title="利尻空港"/>
...
</svg>

====レイヤーリストUIの詳細====
[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.28.E5.BE.8C.E8.BF.B0.29.E3.82.92.E8.A8.AD.E7.BD.AE.E3.81.99.E3.82.8Bdiv.E8.A6.81.E7.B4.A0|レイヤーリストUIが設置されるdiv要素]]には、以下のプロパティを設定することで、UIの動作を調整するパラメータを与えることができます
* data-customizer [https://github.com/svgmap/svgmapjs/blob/main/SVGMapCustomLayersManager_r3module.html カスタムレイヤーマネージャ]の起動ボタンを設置し、プロパティ値で同ウェブアプリのパスを指定します。
* data-layerstylecontroller 各レイヤーの表示スタイルを調整するUIを設置します(値不要)
* data-hiddenfilter 表示されていないレイヤーをレイヤーリストUI上でも非表示にする機能を稼働させます(値不要)
* data-opened svgMapウェブアプリが起動した直後にレイヤーリストが開かれた状態にします
* data-fixed レイヤーリストが開かれた状態且つ閉じるボタンを表示させません(data-openedと排他)

===動作の制限・差異===
====再描画の制限====
* ブラウザネイティブのSVG描画機能に対して注意すべき点として、このSVGDOMの描画は、基本的に伸縮スクロールのタイミングでしか行われない点です。（ネイティブのSVG描画機能は60fpsで再描画する努力を行っている) そのため、再描画タイミングを意識・明示([[#refreshScreen|refreshScreen]]関数を使用)したアプリケーションの構築が必要になるケースがあります。
*関連情報
**[[内部機構解説#Zoom.2FPan_Controller:]]
**[[解説書#refreshScreen|refreshScreen]]
**[[解説書#setPreRenderController|setPreRenderController]]
**[[解説書#.E6.8B.A1.E5.BC.B5API|preRenderFunction ]]
**[[解説書#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|動的な地図レイヤー]]
**[[解説書#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|レイヤー固有のUI]]
**[[解説書#.E6.8B.A1.E5.BC.B5.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88|拡張イベント]]

===実装されている機能===
多くの機能が実装されていないため、実装されている機能、および拡張された機能をここでは列挙することとします。
====要素====
*path
*globalCoordinateSystem
*circle
*text
*defs
*animation
** 別のsvgコンテンツを取得して埋め込みます。
** コンテナsvgコンテンツで使用した場合は埋め込んだコンテンツは「レイヤー」と見做されます。
** それ以外で使用した場合はタイルやサブレイヤーとして使用できます。
** x,y,width,height属性は、SVGの仕様に基づき埋め込むコンテンツのtransformに影響を与えるとともに、下記の通り動的なコンテンツの読み込み機構が制御されます。
*** この属性で示された領域がtransform後のviewportと交差・包含した場合、その埋め込みコンテンツは動的に取得され表示されます。lazy loadの機構に相当し、タイリングメカニズムを構成します。
*** ただし、visible-min-zoom およびvisible-max-zoom属性で示された拡大率による表示条件を満たしていない場合は取得されません。level of detailの機構に相当します。（x.y,width,height属性と組み合わせることで、タイルピラミッド（ラスター、ベクターを含む）機構を実現します。詳しくは[http://kikakurui.com/x7/X7197-2012-01.html JISX.7197]、[https://www.w3.org/Submission/2011/04/ Tiling and Layering Moduleサブミッション]、もしくは[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html こちらの論文]を参照
** commonQuery属性：[[#レイヤーsvgコンテンツ]]のanimation要素でこの属性を設置すると、そのレイヤーのコンテンツを取得するすべてのGETリクエストのクエリパートにこの属性で設定した値が共通付加されます。(もしKey=Valueの形のクエリを追加したい場合は文字列として"Key="の部分も含めてこの属性値に設定します。)
*iframe
** animationと同等
*image
** 別のビットイメージコンテンツを取得して埋め込みます。
** animation属性のx,y,width,height属性と同様の追加のlazy loadの振る舞いを持ちます。
** visible-min-zoom およびvisible-max-zoom属性の振る舞いも同等です。
** xlink:href属性はspatial fragment をサポートし、(xywhによっ参照されるimageの部分を埋め込む機能をサポートします。)。もしもアスペクト比が異なった場合（ＴＢＤ）
** style:filterプロパティによる画像処理をサポートします。
** data-mercator-tile="true"　属性が設定されている場合、そのビットイメージはメルカトル図法で描画されていることを示します。
** htmlのimg要素のcrossoriginに対応する属性を持つことができます（この場合ビットイメージの埋め込みに際しoriginヘッダが送信）
*view

====属性====
*<code>ref(svg,x,y)</code> ：SVG1.2Tの[https://www.w3.org/TR/SVGTiny12/single-page.html#coords-transform-ref TransformRef]属性により、non-scaling objectが設置できます。Pointフィーチャの可視化に効果的です。　

'''TBD'''
*fill
*stroke
*arrow
*dasharray
*viewvox
*opacity
*style
**image-rendering : pixelated / image要素
**fill
**stroke
**opacity
*meta
**http-equiv="refresh" : [[#レイヤー|レイヤーsvgコンテンツ]]のみ。contentに秒数を設定することで、そのレイヤーを指定秒数ごとに(再読み込み)更新する。script要素はonloadが再実行される。　注：ブラウザのキャッシュが効く可能性を考慮して実装する必要がある。

==第三章：ウェブアプリケーションの開発==
本章はSVGMap Revsion 0.1フレームワークを用いたウェブアプリケーションの開発について解説します。
本フレームワークによる開発部分は以下に分類されます。
*[[#フレームワークの呼び出し|ルートhtml文書]]によるウェブアプリケーション(SVGMapフレームワーク)
* 動的な地図レイヤー(Layers as WebApps) : SVGコンテンツに以下のいずれかの情報を設定する
** [[#レイヤー|レイヤーsvgコンテンツ]]のドキュメントルート要素のdata-controller属性　[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|レイヤー固有のUI]]
** svgドキュメントに設置されたscript要素 [[#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|script要素による動的な地図レイヤー]]

===SVGMapフレームワーク===
[[#フレームワークの呼び出し|ルートhtml文書]]によるウェブアプリケーションはSVGMapLv0.1フレームワークを用いたウェブアプリケーションの基本であり、そのhtml文書と底傘参照されたjavascriptライブラリを読み込んだwindowが持つ''''svgMap''''という名前のインスタンスを用いてフレームワークのための拡張機能を利用することができます。

====SVGMapが持つ基幹オブジェクト====
SVGMapLv0.1フレームワークのインスタンス''''svgMap''''が持つ基幹のオブジェクトを解説します。これらの基幹オブジェクトはそれぞれゲッター(getSvgImages, getSvgImagesProps)によって取得できます。
=====svgImages[]=====
[[#getSvgImages|getSvgImages()]]により取得できる。svgImages[hashID]は、現在ローディングされているSVGドキュメント(“XML” DOMツリー(SVG DOMツリーというよりむしろ))が蓄積されているハッシュテーブル
*ハッシュID：フレームワークが任意に付番した文書ID。ただし、最初にロードされるルートのドキュメントのハッシュキーは、”root”
*なお、[[#レイヤー固有のUI]]のwebAppでは、そのレイヤーに該当するSVGドキュメントが[[#svgImage|svgImage]]で取得できる。

=====svgImagesProps[]=====
[[#getSvgImagesProps|getSvgImagesProps()]]によって取得できる。
同、個々のSVGドキュメントが持つ、各種プロパティが蓄積されているハッシュテーブル。
注記がない限り全てReadonly
*ハッシュID： svgImages同様
*なお、[[#レイヤー固有のUI]]のwebAppでは、そのレイヤーに該当するSVGドキュメントが持つ、各種プロパティが[[#svgImageProps|svgImageProps]]で取得できる。
======プロパティリスト======
*.Path コンテンツのパス（webAppsのdocument(html) rootに対する相対パス。Originが違う場合は絶対パス(クエリパートやフラグメント(ハッシュ)も含む)
*.CRS 地理座標からSVG座標に変換するための変換パラメータ
*.script SVG文書がscript要素を持つとき、そのscriptへのインターフェースが登録される。同script要素で生成されるオブジェクトに暗黙に登録されるメンバー変数については、[[#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|script要素による動的な地図レイヤー]]の章を参照
*.editable 編集可能レイヤーを示す　[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供|レイヤーのclass = editableに対応]]
*.editing 編集可能レイヤーを編集中
*.isClickable クリッカブルなレイヤーを示す
** true:設定　[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供|レイヤーのclass = clickableに対応]]
** 以下をメンバーに持つオブジェクト:ハイライト時のスタイルを設定可能(rev18以降)
*** .hilightFillStyle : ポリゴンオブジェクトのハイライト時スタイル（以下のメンバーが無い場合はハイライトしない）
**** .color : 塗りの色 (CSS の color値として解釈される文字列)
**** .lineWidth : 線幅
*** .hilightStrokeStyle : 線オブジェクトのハイライト時スタイル（以下のメンバーが無い場合はハイライトしない）
**** .color : 線の色 (CSS の color値として解釈される文字列)
**** .widthIncrement : 線幅の増加値
*.parentDocId このSVG文書を埋め込んでいる、親のSVG文書のハッシュID
*.childImages[hashID] このSVG文書が読み込んでいる、子のSVG文書(複数)
*.refresh
**.loadScript
**.timeout
**.start
*.controller レイヤー固有のUIへの(web appsのdoc rootに対する)相対パス
*.isSVG2 その文書がSVG2タイプの文書であるかどうか(CRSとembedの仕方がちがう）
*.rootLayer そのSVG文書が属する「レイヤー」を示す文書
*.scale そのSVG文書の現在のスケール。スケールはそのSVG文書の座標系と画面の座標系との間の値（地理座標系ではない）。拡大するとスケール値は大きくなる
*.preRenderControllerFunction そのSVG文書の再描画(画面更新)シーケンスの直前に実行される関数
*.hash そのレイヤーのURLのフラグメント部（この値は、レイヤ固有WebAppで変更が有効）

====利用可能API====
【TBD】 APIのリストは下記の通りです。
=====SVGMap.で呼び出せるAPI=====
======Geo2SVG======
*Geo2SVG( lat , lng , crs ) : 指定された緯度(lat)・経度(lng)・CRSより、SVG座標を計算する
======POIviewSelection======
*POIviewSelection( poi ) : 指定されたPOIの属性・リンクの表示選択画面を表示する。また、選択したイベントに従い、属性の表示または、リンク先のページを表示する。
======SVG2Geo ======
*SVG2Geo ( svgX , svgY , crs , inv ) : 指定されたSVG座標(svgX , svgY)をCRSにより、GEO座標に変換する。または、invにより逆変換する
======addEvent======
*addEvent(elm,listener,fn) : 指定された要素(elm)にイベント属性(listener)時の呼び出す関数(fn)を設定する (addEventListenerが実装されていなかったブラウザサポートの名残です)
======callFunction======
*callFunction( fname ,p1,p2,p3,p4,p5) : 指定した関数(fname)を引数(p1,p2,p3,p4,p5)を渡してフレームワーク内の任意の関数を実行する。(フレームワークの内部関数も呼び出すことができる)
======captureGISgeometries======
*captureGISgeometries( cbFunc , prop1 , prop2 , prop3 , prop4 , prop5 , prop6 , prop7 ): 現在画面上に表示中の地図コンテンツに対応した、GeoJsonのGeometryデータ構造に準拠のGISgeomerry情報をがレイヤ単位でまとまった連想配列の形で取り出す。非同期処理で、cbFuncの最初の引数に返却される。
** 連想配列のハッシュ値：レイヤID
** geomeryには、src(そのジオメトリのもととなっているSVGの図形要素), href(ビットイメージの場合のリンク)が付加される
** geoJsonのgeometryに相当する情報が含まれる（座標は[経度,緯度]）
** display="none"の図形要素は表示されていないとみなされる。また画面外にある図形要素も表示されていないとみなされる。画面に部分的に表示されている要素は表示されているものとみなされるとともにクリッピングも行われない。
** [[#captureGISgeometriesOption|captureGISgeometriesOption]](true)を設定してから実行すると、ビットイメージもジオメトリとして取得する。（ただし実データは含まれないので必要に応じて[[#getImagePixelData|getImagePixelData]]で取得する）
*** type : Coverage
*** src : 画像情報のURL
*** coordinates : transformのb,c==0の場合、当該画像の南西、北東端が設定される
*** transform : b,c!=0の場合の、画像の座標(左上隅を0,0、右下隅が画像のw,h)から地理座標([経度,緯度])への一次座標変換情報(a,b,c,d,e,f)が設定される

======captureGISgeometriesOption======
*captureGISgeometriesOption(BitImageGeometriesCaptureFlg, TreatRectAsPolygonFlg, SkipVectorRenderingFlg, captureAlsoAsBitImage): captureGISgeometriesでキャプチャするデータの取得条件を設定する。
** BitImageGeometriesCaptureFlg: ビットイメージタイルをカバレッジとして取得するか(Default:false)。captureGISgeometriesを呼び出す前に使用する。
*** 2019.5.17アップデートで、transform matrix(非対角要素あり)を持つビットイメージタイルについても必要な情報を得られるようになった。
** TreatRectAsPolygonFlg: rect要素をポリゴンとして扱う(デフォルトは円もrectもPointとして扱われる)
** SkipVectorRenderingFlg: ベクトル図形の描画をスキップする
** captureAlsoAsBitImage: polygon/polylineの図形を描画したビットイメージをレイヤー単位でカバレッジデータとして取得
*captureGISgeometriesOption(captureGISgeometriesOptionObject) : オブジェクトでも設定できる(rev18以降)（以下そのメンバー変数：全て値はboolean）
** .BitImageGeometriesCaptureFlag, .TreatRectAsPolygonFlag, .SkipVectorRendering, .captureAlsoAsBitImage　上と同様

======checkSmartphone======
*checkSmartphone() : タッチに対応したスマホブラウザなのかどうかを判別
======childDocOp======
*childDocOp(func , docHash , param1, param2 , param3 , param4 , param5) : 指定した文書をルートにして、DOM操作をその子文書に対して実行する。なおこれはlinkedDocOpの直系の子供のみ適用版(自身も適用しない)
======dynamicLoad======
*dynamicLoad( docId , parentElem ) : 指定した文書ID(docId)以下の表示に必要な文書を読み込み、指定したdiv要素(parentElem)に表示する
======escape======
*escape(str) : 以下の文字をHTMLエスケープする(&:&amp,":&quot;,':&#039;,<:&lt;,>:&gt;)
======geo2Screen======
*geo2Screen( lat ,lng ) : 地理座標を指定すると、その画面上のキャンバスの座標(px)を返す
======getBBox======
*getBBox( x , y , width , height ) : 指定された値でviewBoxを作成する

======getBasicPermanentLink======
* getBasicPermanentLink(copyLinkTextToClipboard) : 現在の表示状態(レイヤーの表示非表示および表示領域)を反映した基本的なパーマリンクを生成する
** URLオブジェクトが返却される
** copyLinkTextToClipboardがtrue場合、クリップボードにもURLがコピーされる。
** 生成されるURLは、[[#起動URLによるオプション指定]]の仕様に基づく
** 参考：[[#サブレイヤーパーマリンク]]

======getCentralGeoCoorinates======
*getCentralGeoCoorinates() : グローバル変数 rootViewBox,rootCrsから画面中心地理座標を得る
======getConversionMatrixViaGCS======
*getConversionMatrixViaGCS( fromCrs , toCrs ) : 元座標変換行列(fromCrs)から先座標変換行列(toCrs)への変換行列を作成する

======getCORSURL======
* getCORSURL(originalURL, alsoCrossoriginParam) : クロスオリジンアクセス用URLを生成する。([[#setProxyURLFactory|setProxyURLFactory]]の第4,5引数が設定されている場合)
** alsoCrossoriginParam クロスオリジンアクセスに際してoriginヘッダが必要かを取得する(この引数がある場合は.url, .crossorigin メンバを持つオブヘクトが返却される)
** レイヤー固有UIのウェブアプリなどで独自にクロスオリジンアクセスを行ってデータを取得するような場合にプロキシ経由のURLを生成するのに利用できます。
** 参考：[[#.E3.83.97.E3.83.AD.E3.82.AD.E3.82.B7.E3.81.AE.E8.A8.AD.E5.AE.9A|クロスオリジンアクセスのためのプロキシ設定]]

======getDevicePixelRatio======
*getDevicePixelRatio( docId ) : setDevicePixelRatioで設定した値を取得できる。 docIdが指定されなかった場合は全ての値が得られる

======getElementByImageId======
*getElementByImageId( XMLNode , searchId ) : 指定されたSVG文書群ノード(XMLNode)以下の属性iidが指定されたID(searchId)と等しいノードを返す

======getLoadErrorStatistics======
*getLoadErrorStatistics() : 伸縮スクロール、refreshScreenごとの、リソースの読み込み状況を取得する。
**メンバー変数: timeoutBitImagesCount,timeoutSvgDocCount,otherBitImagesCount,otherSvgDocCount

======getGeoViewBox======
*getGeoViewBox() : コンテナsvgのviewBoxをgeo変換したgeoのviewBoxを取得
======getHashByDocPath ======
*getHashByDocPath ( docPath ) : ターゲットのレイヤーのハッシュをPath名(docPath)から探し出す
======getHyperLink======
*getHyperLink( svgNode ) : 指定されたsvg文書(svgNode)から、親文書をたどり最初に取得できたハイパーリンクを取得
======getInverseMatrix======
*getInverseMatrix(matrix) : 逆行列を求める(matrix.a..f)
======getLayer======
*getLayer(layerID_Numb_Title) : [[#getLayerId|layerID]],title,番号,href(URI)のいずれかで、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]SVGDOMにおけるレイヤーの(svg:animation or svg:iframe)要素を取得する。getLayersと似ているが、getLayersのほうは任意のsvg文書(オプションなしではroot container)に対して、内包されるレイヤーのリストを返却。こちらは[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]に対して検索キーに基づいてレイヤーを返却する

======getLayerId======
*getLayerId( layerKey ) : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]における"レイヤ"概念のレイヤidを検索する。検索に用いることができるのは、getLayerと同じtitle,url,もしくはルートレイヤの要素
* layerIDはレイヤー名とは異なる、フレームワークによって任意に附番された、そのSVGMapドキュメントを識別するための文字列。このlayerIDを基に動作するAPIが多くあります。
* [[#レイヤー固有のUI]]　の　[[#layerID]] も参照

======getLayers======
*getLayers( id ) : オプションなしの場合、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーに該当する要素をリストアップし、返却する。オプションアリの場合、そのidを持つ要素を返却
======getLinearTransformMatrix======
*getLinearTransformMatrix(x1i,y1i,x2i,y2i,x3i,y3i,x1o,y1o,x2o,y2o,x3o,y3o) : ３つの基準点の変換前後の座標を与えると、それに適合する1次変換行列が得られる。(*i:変換前の座標, *o:変換後の座標)
======getMapCanvas======
*getMapCanvas() : 地図キャンバスとなる、おおもとのdiv要素の取得
======getMapCanvasSize======
*getMapCanvasSize() : 地図キャンバスのサイズ(画面サイズ)を取得
======getMouseXY======
*getMouseXY( evt ) : 指定されたイベント時のマウスの画面上の座標(px)を返す
======getNonScalingOffset======
*getNonScalingOffset(svgPoiNode) : 拡大縮小しても伸縮しない図形要素のオフセット値を取得する
======getObject======
*getObject( oname ) : 指定されたオブジェクト(oname)を取得
======getPoiPos======
*getPoiPos( svgPoiNode ) : =getNonScalingOffset
======getRoot2Geo======
*getRoot2Geo() : コンテナsvgのCRSの逆変換CRS( rootのsvg - > geo )を取得
======getRootCrs======
*getRootCrs() : コンテナsvgのCRS ( geo->rootのsvg )を取得
======getRootLayersProps======
*getRootLayersProps() : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の(animetion||iframeで構成される)レイヤー情報を取得する。Arrayが返却、並び順はsvgの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]と同じ（最初のレイヤーが一番下。selectメニュー創るときはひっくり返して使うこと）レイヤー情報：名称、表示非常時状態、レイヤーグループ、グループのフィーチャ(バッチ||スイッチ||ふつう)、編集可、編集中、対応SVGドキュメント、個別ユーザインターフェース、個別凡例
======getRootViewBox======
*getRootViewBox() : aspectを加味し実際に開いているコンテナsvgのviewBoxを取得
======getSvgImages======
*getSvgImages() : svg文書群(XML)の連想配列を取得(ハッシュキーは[[#getLayerId|layerID]]("root"以外は"i"+連番))
* (参考:[[#svgImages.5B.5D|svgImages]])

======getSvgImagesProps======
*getSvgImagesProps() : svg文書群のプロパティ( .Path,.CRS,.script,.editable,.editing,.isClickable,.parentDocId,.childImages,.controller)の連想配列を取得(ハッシュキーは[[#getLayerId|layerID]]("root"以外は"i"+連番))
* (参考:[[#svgImagesProps.5B.5D|svgImagesProps]])

======getSvgTarget======
*getSvgTarget( htmlImg ) : html文書中のimg要素(POI)を入力すると、対応するSVG文書の文書番号とその要素(use)が出力される。対応するuse要素を持つsvg文書自体を取得したい場合は.ownerDocumentする。idからhtml文書のimg要素を取得するには、Document.gelElementById(id)
======getSwLayers ======
*getSwLayers ( cat ) : swLayers[クラス名]に、クラス名ごとのレイヤー(のSVG要素)の全リストを構築する。catがある場合は、catの名称を持つもののリストのみを構築する
======getSymbols======
*getSymbols(svgDoc) : POI編集のsymbol選択を可能にするとともに、defsは、useより前に無いといけないという制約を払った
======getTickerMetadata======
*getTickerMetadata() : 現在Tickerが表示されているグラフィックスオブジェクトのメタデータを取得する
======getTransformedBox ======
*getTransformedBox ( inBox , matrix ) : 指定されたviewBox(inBox)を変換行列にてサイズ変更と移動のみでの座標変換する。b=0、c=0の場合のみ利用可能。たとえば、matrixには、svgImagePropsのCRSを設定することで、そのSVGMapコンテンツのSVG座標系でのviewPortが計算できる。このときmatrixは線形変換の係数が含まれたオブジェクトでも良いし、[[#.E5.A4.9A.E6.A7.98.E3.81.AA.E5.9B.B3.E6.B3.95.E3.81.AE.E5.AE.9A.E7.BE.A9.E3.81.A8.E5.88.A9.E7.94.A8|非線形変換のための関数が含まれたオブジェクト]]でも良い。　svgMap.getTransformedBox(svgMap.getGeoViewBox(),svgImageProps.CRS)

======getUaProp======
*getUaProp() : ブラウザの種類(isIE：IEかどうか、isSP：スマートフォンかどうか)を取得する
======getVerticalScreenScale======
*getVerticalScreenScale(screenLength) : 垂直(緯度)方向のscreenLengthに対する長さを取得する(input: px, return : Km)
======getViewBox======
*getViewBox( svgDoc ) : 指定したSVG文書のviewBoxを取得
======gps======
*gps() : ブラウザの測位APIによって測位しその点を中心に表示、表示縮尺は測位精度を元に適当に決定
======gpsCallback======
*gpsCallback(position) : GPS測位が成功した後に実行されるコールバック関数で、positionを中心とした場所を表示させる
======handleResult======
*handleResult( docId , docPath , parentElem , httpRes , parentSvgDocId ) : SVG文書を(docPathから)svg文書群とそのプロパティをHTTPXMLRequest(httpRes)から親文書(parentSvgDocId)の子文書(docId)として読込み、指定されたHTML要素(parentElem)に貼り付ける
======ignoreMapAspect======
*ignoreMapAspect() : 地図のアスペクト比を、rootSVGのviewBox( or hashのviewBox)そのものに設定する
======initLoad======
*initLoad() : load時に"一回だけ"呼ばれる初期化関数
======isIntersect======
*isIntersect( rect1, rect2 ): rect1(x,y,width,height)とrect2が交差(包含も含む)しているかどうかを返却
======linkedDocOp======
*linkedDocOp( func , docHash , param1, param2 , param3 , param4 , param5 ) : 再帰実行のルートになる文書のハッシュ(docHash)以下の子・孫・・・文書に対して、同じ処理(func( docHash , param1, param2 , param3 , param4 , param5 ))を再帰実行する関数
======loadSVG======
*loadSVG( path , id , parentElem , parentSvgDocId) : SVG文書を(pathから)svg文書群とそのプロパティを親文書(parentSvgDocId)の子文書(id)として読込み、指定されたHTML要素(parentElem)に貼り付ける
======matMul======
*matMul( m1 , m2 ) : 行列の積 x',y' = m2(m1(x,y)) = m(x,y) となる変換行列を構築
======numberFormat======
*numberFormat( number , digits ) : 指定された数値(number)を小数点以下第digit+1位を四捨五入した値を取得
======override======
*[OBSOLUTEWD] override( mname , mval ) : グローバルオブジェクトの関数プロパティでmnameという変数にmvalの値を代入する

======panMap======
* panMap( x, y, options ) : 地図をスムースにスクロールさせる
** x,y : パン量デフォルトはpx
** option.unit でパン量のコンテキストを変化できる
*** "%"||"percent"||"ratio" : 地図キャンバスに対する相対値で指定 (%,percentはパーセント, ratioは比率)
*** "canvas" : 地図キャンバス上の指定した座標を地図中心に
*** Note: 地理座標でパンする場所を変えたい場合は[[#geo2Screen]]を併用すると良い

======parseEscapedCsvLine======
*parseEscapedCsvLine(csv) : CSV 1行分文字列データ(csv)をエスケープを考慮して配列にパースする。
======refreshScreen======
*refreshScreen() : 画面の再描画を実行する（[[解説書#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90|参考情報]]）

======registLayerUiSetter======
*registLayerUiSetter( layerUIinitFunc, layerUIupdateFunc ) : レイヤー選択UI初期化関数と更新用関数を設定する
======reLoadLayer======
*reLoadLayer(layerID_Numb_Title) : 指定したレイヤー([[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーのみ。小孫レイヤーはNG)をリロードする
======resumeToggle======
*resumeToggle(evt) : 引数のイベント(evt)ターゲットのチェックボックスのチェック状態により、setResumeを実行する
======screen2Geo======
*screen2Geo( screenX , screenY ) : 画面上の座標(px)を指定すると、その地理座標を返す
======setCenterHitTest======
*setCenterHitTest(enable) : 自動中心ヒットテストの設定を変更するデフォルト:true

======setCursorCenterZooming======
*setCursorCenterZooming(enable) : (カーソル|ピンチ)位置中心ズーム機能を設定するデフォルト:false

======setCustomModal======
*setCustomModal( messageHTML , buttonMessages , callback,callbackParam) : モーダル画面を出現させ、指定されたメッセージ(messageHTML(String)もしくはdomオブジェクト(Object))、指定されたボタン(buttonMessages(Array))を表示する。ボタンが押された場合、コールバック関数(callback)を引数(クリックしたボタンのインデックス, callbackParam)を渡し呼び出す。
messageにHTML Stringだけではなく、DOM objectが使える点、ボタンに対するcallbackを設定できる点。ただしモーダルダイアログになる点が[[#showModal]]と異なる。

======setDefaultHilightStyle======
*setDefaultHilightStyle( style ) : ヒットテストなどによるオブジェクトのハイライト時のスタイルを設定する
* style : {stroke:{color,widthIncrement}, fill:{color,lineWidth,lineColor}}
** stroke : 線オブジェクトに対してハイライト時の色(color)と線幅増分(widthIncrement)
** fill : 塗りつぶしオブジェクトに対してハイライト時の色(color)、輪郭線幅(lineWidth)、輪郭線色(lineColor)

======setDevicePixelRatio======
*setDevicePixelRatio( dpr (, layerId) ) : zoom計算時に用いる(たとえば２にするとzoom値が本来の２分の１になる)変数を指定値(dpr)に設定する。ズームに応じた表示制御(visible*zoom属性等のLevel of Detail機能)に影響を与える。オプションの[[#getLayerId|layerId]]を指定すると、指定したlayerに対して別個の値を設定する。dprにnullを与えると初期値(1)にクリア。

======setGeoCenter======
*setGeoCenter( lat , lng , radius) : 中心地理座標を指定して地図を移動 (radiusは緯度方向の度1≒110Km) lat,lng:必須 radius:オプション(今の縮尺のまま移動)
======setGeoViewPort======
*setGeoViewPort( lat, lng, latSpan , lngSpan , norefresh) : 地理(グローバル)座標系で指定したエリアを包含する最小のviewportを設定する
======setLayerVisibility======
*setLayerVisibility([[#getLayerId|layerID]]_Numb_Title, visivility, [options]) : 指定した[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーの表示非表示を設定し、layerListUIのアップデートも行う
** layerID : String: [[#getLayerId|layerID]]のの文字列
** visivility : Boolean
** options : Object　以下のメンバー変数でオプションの指定が可能
*** .exec : String : 指定したレイヤーがレイヤー固有UIを持つ場合、その起動を指定できます。与えることができる文字列は[[#.E8.A9.B3.E7.B4.B0|data-controllerの起動オプション]]と同じ。
*** .hash : 指定したレイヤーを表示するときにハッシュ値を設定する

======setMapCanvas : ======
*setMapCanvas : ( mc ) : 地図キャンバスとなる、おおもとのdiv要素を指定した要素(mc)に設定
======setMapCanvasCSS======
*setMapCanvasCSS(mc) : マップキャンバスのCSS(postion、overflow、top、left、width、height)を設定
======setMapCanvasSize======
*setMapCanvasSize( mcs ) : 地図キャンバスのサイズを指定したサイズ(mcs)に設定
======setPreRenderController======
*setPreRenderController( layerID, cntFunc ) : 再描画(画面更新)シーケンスの直前に実行する関数(cntFunc)を設定する。　[[#getLayerId|layerID]]が指定されていると、そのIDをもつSVG文書に対して設定する。指定されていない場合は、全てのSVG文書に対して指定した関数が描画前に実行される。cnfFuncが無い場合は設定を解除する。また、cntFuncには再描画前制御の際に必要になるかもしれないいくつかの変数が第一引数にオブジェクトの形で渡される。(docId,scale,actualViewBox,geoViewBox,viewChanged(zoom|scroll|false) なお、SVGMapLayerUI.jsが有効化されている場合、[[#.E6.8B.A1.E5.BC.B5API|レイヤ固有UIのhtml文書中のscript内にpreRenderFunctionという関数]]がある場合、そのレイヤーを指定したsetPreRenderControllerでの関数設定と同じ振る舞いをする。なお、この処理内容は、動的レイヤー(<script>を持つSVGコンテンツ)のonload関数と同じタイミングで呼び出される関数をレイヤ固有UI等に設置できるものと考えると良い。

======setResume======
*setResume( stat ) : レジュームを実行するかどうかを引数(stat)によって設定し、cookieにレイヤー情報を保存する
======setRootLayersProps======
*setRootLayersProps(layerID_Numb_Title, visible , editing , hashOption , removeLayer , execOption ) : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の(animetion||iframeで構成される)レイヤー情報を設定する。[[#getLayerId|layerID]]_Numb_Titleは、レイヤー番号(root svg container内での順番)、[[#getLayerId|layerID]](svg文書のiid = htmlのid = selectのvalue)、タイトル名(不確実-同じ名前があるかもしれない。最初に当たったものを選択)。変化があるとtrueが返却される。
*visible , editingはtrue,false,nullのいずれか。nullの場合、その値を変化させないという意味。もしくは不合理の場合はfalseが返却される。この時classで設定されているレイヤーグループの特性(switch)に基づいた制御がかかる
*hashOption 指定したレイヤーを表示するとき、ハッシュを指定して表示する
*removeLayer 指定したレイヤーを消去する
*execOption レイヤ固有UIを持つレイヤーを表示する場合の起動方法を指定："hiddenOnLayerLoad", "onClick", "appearOnLayerLoad"のいずれか。[[#.E8.A9.B3.E7.B4.B0|詳細はこちらを参照]]

*setLayerVisibilityと異なり、アップデート(refreshScreen())は別途行う必要がある

======setRootViewBox ======
*setRootViewBox ( rvb ) : aspectを加味し実際に開いているコンテナsvgのviewBoxを指定したコンテナsvgのviewBox(rvg)に設定*setShowPoiProperty( func , docId ) : 特定のレイヤー・svg文書(docId)もしくは、全体に対して別のprop.表示関数(func)を指定する。funcが未指定の場合、設定された関数をクリアする。指定した関数は、帰り値がfalseだった場合、デフォルトprop.表示関数を再度呼び出す
======setShowPoiProperty======
*setShowPoiProperty(func , docId ): 特定のレイヤー・svg文書(いずれもdocIDで指定)もしくは、全体に対してPOIをクリックした時の表示関数をセットする
**セットされていないときは内蔵のデフォルト関数が使用される
**docId: セットされていないときはすべてのレイヤの docIdがルートレイヤに対応するものの場合はそのレイヤー下の子孫文書に対しても
**func: コールバック関数
*** funcがセットされいていないときはクリアする
*** funcの第一引数にはクリックされた要素が入る

======setSmoothZoomInterval======
*setSmoothZoomInterval(zoomInterval) : ズームアニメーションの設定(ズームイン／アウト後のタイル読み込み開始タイマー(ms))(Default:20ms)
======setSmoothZoomTransitionTime======
*setSmoothZoomTransitionTime(zoomTransitionTime) : ズームアップ[[#zoomup]]／ダウン[[#zoomdown]]／パン[[#panMap]]時の遷移時間(Default:300ms)

======setSummarizeCanvas======
*setSummarizeCanvas( val ) : 2Dベクトル図形描画用に統合キャンバス(レイヤー単位でのキャンバス統合)の使用有無を設定する。デフォルトは統合する
======setUpdateCenterPos======
*setUpdateCenterPos(func) : 中心座標書き換え関数を指定した関数に設定(デフォルト:id="centerPos"要素の文字列を適当に書き換える)
======setProxyURLFactory======
*setProxyURLFactory( documentURLviaProxyFunction, imageURLviaProxyFunction, imageCrossOriginAnonymous, imageURLviaProxyFunctionForNonlinearTransformation, imageCrossOriginAnonymousForNonlinearTransformation, LaWAfetchviaProxyFunction ): コンテンツの取得をプロキシ経由等にするために、URL(文字列)を書き換える関数を指定する。
** documentURLviaProxyFunction : svgドキュメント用のプロキシ経由のURLを生成する関数をここに設定する。<code>URLviaProxy = documentURLviaProxyFunction(URL)</code>
** imageURLviaProxyFunction : 同ビットイメージ用
** imageCrossOriginAnonymous : ビットイメージのコンテンツ取得に際しcrossorigin = "anonymous"を設定
** imageURLviaProxyFunctionForNonlinearTransformation: ビットイメージへの非線形図法変換専用のプロキシ経由URL生成関数を設定する。
** imageCrossOriginAnonymousForNonlinearTransformation : 同上のコンテンツ取得に際しcrossorigin = "anonymous"を設定
** LaWAfetchviaProxyFunction : [[#レイヤー固有ユーザインターフェース|LaWA]]内のFetch/XHRに対してプロキシ経由URL生成関数を設定する。
** 参考：[[#.E3.83.97.E3.83.AD.E3.82.AD.E3.82.B7.E3.81.AE.E8.A8.AD.E5.AE.9A|クロスオリジンアクセスのためのプロキシ設定]]

======setZoomRatio ======
*setZoomRatio ( ratio ) : zoomUp、zoomDownボタン押下時のズームレシオを指定した値(ratio)に設定する
======showModal======
*showModal( htm , maxW, maxH) : ダイアログ表示フレームワークを呼び出し、指定したhtm文字列を最大maxW,H値の中で表示する。closeボタンはフレームワークで設置される（参考[[#setCustomModal]]）（API名に反して、この関数はモーダルダイアログではない、ダイアログボックスの挙動を取る）
** htm：ダイアログ内に表示するhtmlのソース文字列、もしくはHTML DOM Elementオブジェクト
** maxW, maxH : Optional: ダイアログのサイズ（もしウィンドサイズに収まらない場合は、このサイズを下回ることがある。指定されていない場合はhtmの内容をベースにサイズが変化する


======showPage======
*showPage( hyperLink ) : 指定されたハイパーリンク先のページを表示する。ハッシュだけの場合は viewPort変化をさせる
======showUseProperty======
*showUseProperty( target ) : 指定されたPOI( target )の属性情報を表示する
======transform ======
*transform ( x , y , mat , calcSize , nonScaling) : 指定された座標を変換する。
======updateLayerListUI======
*updateLayerListUI() : レイヤーリストのUIの表示を更新したりレイヤー固有UIを設定したりする
** '''[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のsvgmap文書をDOMで直接編集したり、setRootLayersPropsで操作した場合、この関数を呼ばないとレイヤ固有UIが正しく設定されないなど多くの処理が破綻するので、必ず呼ぶ必要がある。(近い将来refreshScreenで自動的に反映されるようにする予定)'''

======zoomdown======
*zoomdown( ratio ) : 地図をスムースにズームダウン
** ratioはオプション(デフォルトは1.732)

======zoomup======
*zoomup( ratio ) : 地図をスムースにズームアップ
** ratioはオプション(デフォルトは1.732) (デフォルトは[[#setZoomRatio]]で変更可)

=====svgMapAuthoringTool.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_Authoring_r*.jsを用いた場合に使える
======cancelPointingPoiRegister======
* cancelPointingPoiRegister: initPOIregistToolで設置したUIの地図クリック・タッチでの座標入力イベント(click, touchend)をキャンセルする
======clearTools======
*clearTools: オーサリングツールを除去する。
======initGenericTool======
*initGenericTool(targetDiv,poiDocId,cbFunc,cbFuncParam,options): 点、線、多角形（オプションでそれらのバッファ付き）の総合オーサリングツールを初期化する。
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** options: {withBufferedTools,editingStyle,shapeStyle}　その他オプションをオブジェクトで指定(Optional)
*** withBufferedTools: boolean: trueでバッファ付きツールを追加
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルをブジェクトで指定
*** editingStyle: {opacity,strokeWidth,stroke,fill}：編集中の表示スタイルをブジェクトで指定
*** useXlinkTitle: trueでタイトル編集欄付きツール (Pointツールには影響しない)
*** styleEditor: trueでスタイル編集UI追加

======initPOItools======
*initPOItools(targetDiv,poiDocId,cbFunc,cbFuncParam,getPointOnly,returnSvgElement,options)　: 複数のPOIを編集するツールを初期化する (このツールは一個しか設置できない)
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** getPointOnly : ポイントを取得するのみで、その点にuse要素を設置することはしない(Optional)
** returnSvgElement : trueで編集したSVG要素などがコールバック関数に構造化され返却される(Optional)
** options : {bufferOption,editingStyle,shapeStyle}: その他のオプションをオブジェクトで指定(Optional)
*** bufferOption : trueでバッファ付きツール
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルを指定 (buffer指定時に有効)
*** styleEditor: trueでスタイル編集UI追加

======initPOIregistTool======
*initPOIregistTool(targetDiv,poiDocId,poiId,iconId,title,metaData,cbFunc,cbFuncParam,getPointOnly,returnSvgElement): 一個のPOINTオブジェクトの登録ツール・座標入力ツールを初期化する
** initPOItoolsと異なりこちらのツールは複数個設置できる
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** poiId : 登録するPOIのIDを指定
** iconId : 対象文書内のアイコンのIDを指定
** title : アイコンのタイトルを指定
** metaData : アイコンのメタデータ文字列を指定
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** getPointOnly : ポイントを取得するのみで、その点にuse要素を設置することはしない(Optional)
** returnSvgElement : trueで編集したSVG要素などがコールバック関数に構造化され返却される(Optional)
======initPolygonTools======
*initPolygonTools(targetDiv,poiDocId,cbFunc,cbFuncParam,isPolylineMode,options): POLYGONオブジェクトの"編集"ツール新規追加、削除、変更などが可能　ただし一個しか設置できない
** コンテナsvgコンテンツでclickable及びeditableを設定したレイヤーで再編集可能
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
*** 第一引数に成否、第二引数にcbFuncParam が入る。作成したPOIの情報は、SVGDOMから得るか、指定したdiv内に生成されているフォームから得る（少し使いづらいので、今後もう少し便利にするかもしれません）
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** isPolylineMode : ポリゴンではなくポリラインの編集ツールとする
** options : {bufferOption,editingStyle,shapeStyle}: その他のオプションをオブジェクトで指定(Optional)
*** bufferOption : trueでバッファ付きツール
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルを指定
*** editingStyle: {opacity,strokeWidth,stroke,fill}：編集中の表示スタイルを指定
*** useXlinkTitle: trueでタイトル編集欄付きツール
*** styleEditor: trueでスタイル編集UI追加

======setTargetObject======
*setTargetObject: TBD プログラムから編集対象オブジェクトを指示する（ただし編集中レイヤのオブジェクトに限る）
======isEditingGraphicsElement======
*isEditingGraphicsElement: 編集中のオブジェクトがあるかどうかを確認する

=====svgMapGIStool.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_GIS_r*.jsを用いた場合に使える。なお本機能拡張はJSTS([https://unpkg.com/jsts@1.6.1/dist/jsts.min.js jsts.min.js])の読み込みがさらに必要。

====== 参考：JSTS ======
[https://github.com/bjornharrtell/jsts/ JSTS](JavaScript Topology Suite)は、[https://github.com/locationtech/jts JTS](Java Topology Suite)をjavaScriptに移植した地理空間情報処理ライブラリです。地理空間情報の標準に準拠したAPIを備えています。
* [https://github.com/bjornharrtell/jsts JSTSのプロジェクトページ]
* [http://locationtech.github.io/jts/javadoc/ API](JTS用、JSTSもこれに準ずる)
* [https://www.tsusiatsoftware.net/jts/files/JTS_Library_for_Geometry_2011.pdf JTSの機能概要スライド]

====== buildDifference======
* buildDifference( sourceId1, sourceId2, targetId , strokeColor, strokeWidth, fillColor, progrssCallback, getResultAsGeoJsonCallback,getResultAsGeoJsonCallbackParam)
** JSTSのDifferenceを実行
** 引数はbuildIntersectionの該当引数に対応

======buildIntersection======
*buildIntersection( sourceId1, sourceId2, targetId , strokeColor, strokeWidth, fillColor, progrssCallback, addSourceMetadata, getResultAsGeoJsonCallback, getResultAsGeoJsonCallbackParam, options )
** sourceId1とsourceId2のレイヤーに対してJSTSのIntersectionを実行し、結果をtargetIdレイヤーにコンテンツとして出力する。性能はgetIncludedPointsより低いことが多い intersection処理の振る舞いは[https://bjornharrtell.github.io/jsts/ JSTSを参照]
** sourceId1: sourceId1レイヤーのレイヤーID
** sourceId2: sourceId2レイヤーのレイヤーID
** targetId : targetId レイヤーのレイヤーID
** strokeColor : 線の色 (なお、strokeColor, strokeWidth, fillColor のいずれも指定ない場合は描画しない(getResultAsGeoJsonCallbackがあればそこに結果を変換するのみ))
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** progrssCallback: 変換途中の状況が返されるコールバック関数。
** addSourceMetadata: sourceId1とsourceId2の各図形要素に付随しているメタデータ(contentアトリビュートの値)を演算結果の該当する図形要素に結合して付加する。
** getResultAsGeoJsonCallback: 演算結果をgeoJsonで返却を受けたい場合にコールバック関数を指定する。第一引数に結果が返る
** getResultAsGeoJsonCallbackParam : 上記コールバック関数に送りたい引数(第二引数に入力される)
** options: その他のオプションを指定するオブジェクト(下記、メンバ変数)
*** uniteSource1: trueでsourceId1のジオメトリ群をuniteしてから演算する
*** uniteSource2: trueでsourceId2のジオメトリ群をuniteしてから演算する
*** areaCompare: trueで演算結果と元のジオメトリとの面積比をメタデータに付与
*** resultGroupId: 演算結果を生成するグループを指定
*** opacity: 透明度

======captureGeometries======
*captureGeometries( cbFunc , opt ) : svgMap.captureGISgeometriesの引用
====== coverageImageXY2LatLng======
* coverageImageXY2LatLng(pixWidth , pixHeight, px,py,targetCoverage) : ビットイメージカバレッジのピクセル座標から地理座標を算出する関数
** pixWidth, pixHeight : ビットイメージカバレッジのサイズ
** px,py : ビットイメージカバレッジのピクセル座標
** targetCoverage : getInRangePolygonParts で得られた返り値を設定する
====== drawGeoJson======
* drawGeoJson( geojson , targetSvgDocId, strokeColor, strokeWidth, fillColor, POIiconId, poiTitle, metadata, parentElm, metaDictionary) : geojsonのgeomerty を指定したレイヤーに描画する
** geojson : geojson データのgeopmetry
*** メタデータ : メタデータはgeojsonの本来のメタデータ仕様(type:Featureのオブジェクトにpropertiesを設置する)で設定可能
**** また、連想配列もしくは配列の形で、関数の呼び出し時のmetadataパラメータでデフォルトのメタデータを指定できる。
**** また、geoJSONの任意のデータ階層にmetadataプロパティとしても埋め込める。
**** 加えて、propertiesを同様に任意のデータ階層に設定できる(この場合、上の階層の値は下の階層の値で上書きされる)
*** スタイリング : メタデータ仕様を拡張した、geojsonの[https://github.com/mapbox/simplestyle-spec mapbox拡張仕様]に基づいて、描画スタイルを各Featureに設定可能　上記の拡張properties拡張により、デフォルト描画スタイルを設定することも可能。
**** marker-sizeは未実装。marker-symbolではsvgコンテンツのdefsで登録済みのアイコンのIDを指定する。
**** 参考: properties.で設定できる、スタイル属性名: <code>title, description, marker-size, marker-symbol, marker-color, stroke, stroke-opacity, stroke-width, fill, fill-opacity</code>
** targetSvgDocId : 描画先のレイヤーID
** strokeColor : 線の色
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** POIiconId :　Pointの場合のアイコンID(あらかじめ指定した描画先のレイヤーのコンテンツに該当IDのアイコンが定義されている必要がある)
** poiTitle : POIのタイトル
** metadata : POIのメタデータ（連想配列）
** parentElm : (Optional) 指定した要素の子要素として描画
** metaDictionary: (Optional) メタデータとして要素に埋め込みたい属性名のリストを配列で指定する（これ以外の属性は無視するようになる）

====== drawKml======
* drawKml( kml , targetSvgDocId, strokeColor, strokeWidth, fillColor, POIiconId, poiTitle, metadata, parentElm,styleData) : KMLを指定したレイヤーに描画する
** KML : KML 描画するKMLデータのXML DOM
** targetSvgDocId : 描画先のレイヤーID
** strokeColor : 線の色
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** POIiconId :　Pointの場合のアイコンID(あらかじめ指定した描画先のレイヤーのコンテンツに該当IDのアイコンが定義されている必要がある)
** poiTitle : POIのタイトル
** metadata : POIのメタデータ文字列
** parentElm : (Optional) 指定した要素の子要素として描画
** styleData : TBD

====== getBufferedPolygon ======
* getBufferedPolygon(geom,bufferLength) : 任意のジオメトリ(geom)に対して、指定のバッファ長[m]のポリゴンジオメトリを生成する。
** Note: [[#captureGISgeometries]]で取得したデータ等も演算対象にすることができる。

====== getColorString ======
* getColorString(r,g,b) : r,g,b値から、webColor文字列を生成する

======getExcludedPoints======
*getExcludedPoints(poiID, polyID, cbFunc, param , progrssCallback , pointOnly ) : 指定したpoiID検索対象レイヤーのうち、指定したpolyIDポリゴンコンテンツレイヤーのポリゴンに内包されないものを抽出する。
** パラメータはinverseを除きgetIncludedPointsと同じ。
====== getImage======
* getImage(sourceData, renderingOptions ) : メッシュデータからビットイメージ(mage/pngのdataURL)を生成
** sourceData : 以下のデータ構造を持つオブジェクト
*** width, height メッシュのピクセル数
*** rasterData[py][px] 以下のデータ構造を持つオブジェクト
**** color 以下のデータ構造を持つオブジェクト
***** r,g,b,a
**** inRange : boolean
** renderingOptions : 以下のデータ構造を持つオブジェクト
*** drawOutOfRange : boolean レンジ内ではなくレンジ外を描画する
*** fillColor : boolean 上記条件のピクセルを指定した色で描画する
*** useCoverageColor 上記条件のピクセルをカバレッジの色で描画する

====== getImagePixelData======
* getImagePixelData(capturedSvgMapGeometry, callBackFunction, param) : ラスタ画像のビットマップデータを取得する。
** capturedSvgMapGeometry : [[#captureGISgeometries|captureGISgeometries]]で取得したビットイメージカバレッジのジオメトリ情報をもとに取得する
** callBackFunction : 取得したビットイメージデータが引数に渡される
*** data : RGBA intArray ( CanvasのContext.getImageData(...).dataで得られる情報と同様のデータ)
*** width
*** height
*** param : getImagePixelDataの第三引数がそのまま渡される

====== getIncludedPoints======
* getIncludedPoints(poiID, polyID, cbFunc, param , progrssCallback , inverse , pointOnly ) : 指定したpoiID検索対象レイヤーのうち、指定したpolyIDポリゴンコンテンツレイヤーのポリゴンに内包されるものを抽出する。
** poiID : 検索対象コンテンツレイヤーのレイヤID
** polyID : ポリゴンコンテンツレイヤーのレイヤID
** cbFunc : 検索完了後の結果を返却するコールバック関数　第一引数にポイントがGeoJasonのGeometry形式で返却され、第二引数にその個数、第三引数に(あれば)下記paramが返却される
** param : cbFuncに渡す任意パラメータ(第三引数に入る)
** progrssCallback : 変換途中の状況が返されるコールバック関数。　変換中　時々呼び出され、変換状態[%]が第一引数に渡される。
** inverse : trueで getExcludedPoints
** pointOnly : trueの場合検索対象コンテンツレイヤーのジオメトリがPoint以外の物は無視、false(もしくは未設定)の場合はPolygonやMultiLineStringのデータの場合中心点をPointと見立てて検索なお、ポリゴンやポリラインのしっかりした処理を期待する場合は下記のbuildIntersectionを使用すべき。
====== getInRangePoints======
* getInRangePoints(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : 検索対象のPointジオメトリが、検索条件としてのラスターデータ(カバレッジ)の特定色域に入っているものを検索する（ラスターGIS機能）
** poiID_or_points : 検索対象のPointジオメトリのあるレイヤIDもしくは、geoJsonのPointジオメトリ自体
** coverIDラスターデータ(カバレッジ)のレイヤーID
** rangeData : 色域 .hue, .satulation, .value, .alphaをそれぞれ指定する
*** hue: 0..360
*** satulation, value, alpha : 0..100
*** .hue, .satulation, .value, .alphaそれぞれのレンジは<nowiki>[[range1Min,Max],[range2Min,Max],...[rangenMin,Max]]</nowiki>の形で指定する。
*** データがない場合のデフォルトは<nowiki>{hue:[[0,360]],satulation: [[10,100]],value:[[10,100]],alpha:[[10,100]]}</nowiki> : アルファが10以上の全ての色
*** .outOfBoundsColor : TBD {r:255,g:0,b:0} の形で色を指定するとその色のピクセルは領域外(存在しないもの)として評価をスキップする
** cbFunc : 検索完了後の結果を返却するコールバック関数　第一引数にポイントがGeoJasonのGeometry形式で返却され、第二引数にその個数、第三引数に(あれば)下記paramが返却される
** param : cbFuncに渡す任意パラメータ(第三引数に入る)
** progrssCallback : 変換途中の状況が返されるコールバック関数。　変換中　時々呼び出され、変換状態[%]が第一引数に渡される。
** preCapturedGeometry : svgMap.captureGISgeometries()であらかじめ取得したgeometryがある場合、それを投入するとそれを用いて処理する
** computingOptions : getInRangeGeometriesOnCoverageを参照
====== getInRangeLineParts======
* getInRangeLineParts(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : ラインストリングジオメトリ用のラスターGIS機能パラメータはgetInRangePoints()と同じ
====== getInRangePolygonParts======
* getInRangePolygonParts(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : ポリゴンジオメトリ用のラスターGIS機能パラメータはgetInRangePoints()と同じ

====== getInRangeGeometriesOnCoverage======
* getInRangeGeometriesOnCoverage(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry, computingOptions ) : getInRange*を包含する関数
** computingOptions.targetVectorTypeで以下を設定することでそれぞれの機能を動かすことができる
*** 0:point,1:polyline(multiLineString),2:polygon
** computingOptions:
*** overlappingCoverage : "or"
*** splitByCoverage : boolean カバレッジが複数のビットイメージ(タイル)で構成されている場合、タイルごとに分割した答えを返す
***
====== haltComputing======
* haltComputing() : getIncludedPoints, getExcludedPoints, buildIntersectionを中断する
====== imageUrlEncoder ======
* imageUrlEncoder : オリジナルのURLから、setImageProxyの設定を加味したURLを生成する関数
====== latLng2coverageImageXY======
* latLng2coverageImageXY(pixWidth , pixHeight, lng,lat,targetCoverage) : 地理座標からビットイメージカバレッジのピクセル座標を算出する関数
** pixWidth, pixHeight : ビットイメージカバレッジのサイズ
** lng,lat : 地理座標
** targetCoverage : getInRangePolygonParts で得られた返り値を設定する
====== latLng2GeoJsonPoint======
* latLng2GeoJsonPoint(lat , lng ) : 緯度経度をGeoJsonのPointジオメトリに変換する
====== renderImages ======
* renderImages(sourceDataArray, parentElment, crs, renderingOptions) : ビットイメージカバレッジ×ポリゴンGIS(getInRangePolygonParts)の結果を直接可視化する
**sourceDataArray : [[#getInRangePolygonParts]]の結果を設定
**parentElment: SVGMapコンテンツ内で描画する親要素を設定
**crs: 描画するSVGMapコンテンツのCRS matrix(a,b,c,d,e,f)を設定
**renderingOptions : [[#getImage]]を参照

====== setImageProxy======
* setImageProxy( url , directURLls , useAnonProxy): getInRangePointsは、canvasを使った処理のため、CORSの制約にかかる場合、proxyを設定して回避できる。
** url : encodeURIComponent()でエンコードしたカバレッジのレイヤーのビットイメージのURLを付加すると、proxyとしてimageを返却してくれるURL文字列を指定
** directURLls : proxyを使わず直接アクセスするコンテンツを判定するための文字列の配列（この文字列のどれかが含まれていたら直接アクセス）
** useAnonProxy : Image.crossOrigin = "anonymous"を指定してアクセスする

====== hsv2rgb ======
* hsv2rgb(h, s, v) : hsv値からrgb値の色情報変換
** h (hue): 0..360
** s (saturation): 0..100
** v (value): 0..100
** 帰り値 : {r,g,b}: いずれも0..255

====== rgb2hsv ======
*rgb2hsv(r, g, b): RGB値からHSV値の色情報変換
** rgb: いずれも0..255
** 帰り値:{h,s,v}
*** h:0..360
*** s,v: いずれも0..100

=====svgMapLayerUI.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_LayerUI2_r*.jsを用いた場合に使える。
======assignLayerSpecificUiElement======
* >r4
* assignLayerSpecificUiElement( targetElement , isInline , autoSizing) : レイヤ固有UIを出力する先のDOM要素を指定する
** この関数は、レイヤーUIの初期化前～[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]読み込み前に呼ばれる必要がある（すなわち、load時のみ有効）
** targetElement : 出力先要素：出力先はsvgMapオブジェクトを持つwindowでなくても良い
** isInline : boolean 指定した要素をインライン要素として扱い、UIが存在しえない場合は消える。レイヤ固有UIを消すボタンも付与される
** autoSizing : boolean 自動リサイズを有効化

======customEvents======
*customEvents() : サポートしているイベントを返却

======launchController======
* >r4
* launchController(layerID, cbf) : レイヤ固有UIを出現させる。ただしそのレイヤーがレイヤー固有UIを持っており、且つ表示状態になっている必要がある。
** [[#getLayerId|layerID]] : レイヤーのID
** cbf (optional) : レイヤー固有UIが生成されたとき、第一引数にレイヤー固有UIのwindowオブジェクトが返却される。

======layerSpecificUIhide======
* layerSpecificUIhide() : レイヤ固有UIを隠す

======setLayerListmessage======
* setLayerListmessage( head , foot ) : head 及び footで指定した文字列を　レイヤリストUIのトップのメッセージに設定する。[head]numberOfVisibleLayers[foot] : デフォルトはhead :"Layer List: ", foot :" layers visible"

=====svgMapPWA.で呼び出せるAPI=====
'''実験的機能段階''' :
; 以下のAPIは、SVGMapLv0.1_PWA_r*.jsを用いた場合に使える。
:- SVGMap.jsをPrpgressiveWebApps(PWA)として動作させ、オフラインでも利用できるウェブアプリを構築することができる。
:- Progressive Web Appsが機能するブラウザで有効。Chrome,Edge(PC,Android), Safari(Apple製品)
:- iOS SafariのPWAネイティブキャッシュの50MB制限を回避するIndexedDBによる実装がなされており、そのクォータが許す限りの(iOSでも数百MB以上の)オフライン地図コンテンツを利用できる
:- 同じく、iOS Safariが持たないsyncの一部を代替する機能(オンラインになったらポストする機能)が利用できる
:- zip圧縮されたオフラインコンテンツパッケージ読み込み機構を使う場合はzip.jsおよびそれが利用するArrayBufferReader.js,deflate.js,inflate.jsの読み込みが必要。
:- <code>serviceWorkerPath</code>グローバル変数で、専用のサービスワーカープログラムsvgMapServiceWorker_r*.jsのパスを指定する必要がある。
::- サービスワーカー～svgMapServiceWorker_r*.jsは、同jsと同じディレクトリにあるbaseResources.jsonを読み込み初期設定を行う
::- baseResources.json：　srcにサービスワーカーネイティブのキャッシュに読み込むべきリソースのリストを記載、mapCacheTargetに、SVGMapのコンテンツキャッシュを稼働させるターゲットとなるパスを記載
::-baseResources.jsonの例
<pre>
{
"src": [
"index.html",
"Container_mercator_org.svg",
"SVGMapLv0.1_PWA_r5.js",
"js/SVGMapLv0.1_r16.js",
"js/SVGMapLv0.1_LayerUI2_r3.js",
"js/SVGMapLv0.1_GIS_r2.js",
"js/SVGMapLv0.1_Authoring_r7.js",
"js/jsts.min.js",
"imgs/gps.png",
"imgs/gps_s.png",
"imgs/Xcursor.png",
"imgs/zoomdown.png",
"imgs/zoomdown_s.png",
"imgs/zoomup.png",
"imgs/zoomup_s.png",
"imgs/mappin.png"
],
"mapCacheTarget":"localMaps/"
}
</pre>

* autoPilotDownloader
*:エリアと縮尺を指定し、オートパイロットで地図画面をスクロールさせることで、オフラインキャッシュに地図を保存する動作を自動的に行う機能のオブジェクト。レイヤー固有UIでの利用などを想定しており、以下のメンバー関数を持つ
** halt()
**:オートパイロット動作を中断させる
** searchAll(initialViewBox, minScale, maxScale)
**:- initialViewBoxで指定したエリアを、minScale、maxScaleの間でオートパイロットをかけキャッシュに保存させる
**:- minScale, maxScaleは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の座標系におけるscale値(getRootScale()で取れるもの)
** setProgressCallBack(cbf)
**:オートパイロット動作中の進行状況をcbfの第一引数に返却する
* async clearOfflineContents()
*:SVGMapのオフラインコンテンツを全消去する。SVGMapのオフラインコンテンツはserviceWorkerのネイティブキャッシュ機構とは別の独自キャッシュ機構(indexedDBを使用した機構)として構築される
* clearCache()
*:（未実装）serviceWorkerのネイティブキャッシュを全消去する
* cacheDB
*:SVGMapのオフラインコンテンツデータベースのオブジェクト。IndexedDBをpromise化した簡略的APIをメンバ関数として持つ。
** clear()
**:データベースをクリア
** async connect()
**:データベースに接続
** async delete(path)
**:pathで指定したコンテンツを削除
** async get(path)
**:pathで指定したコンテンツ(blob)を取得
** async getAll()
**:全コンテンツを取得
** async getAllKeys()
**:全Key(コンテンツのpath)を取得
** async put({idCol:path,contentBlob:blobdata})
**:コンテンツ(blobdata)をpathをキーにして格納(上書き)
* deleteCachedLayerMeta()
* async disableCache()
*:serviceWorkerのネイティブのキャッシュ機構とSVGMapの独自キャッシュ機構を全て無効化する
* async enableCache()
*:serviceWorkerのネイティブのキャッシュ機構とSVGMapの独自キャッシュ機構を全て有効化する
* getCachedLayerMeta
* async getPostQueue()
*:postMessageWhenConnectedでポストをリクエストし、未完了のリクエストを取得する
* getRootScale()
*:svgMapの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]座標系における現在の表示のscaleを取得
* getScales()
*:読み込み済み文書全てのscaleを連想配列で返す(hashKeyはdocID)
* getVisibleLayers
* getStorageUsage
* async loadOfflineContents(contentUrlList, overwrite, progressCallBack)
*:-contentUrlListで指定したコンテンツをオフラインキャッシュに読み込む(自ドメイン内のコンテンツ限定)
*:-overwriteをtrueにすると上書きする。progressCallBackは指定した関数の第一引数に進捗状況を返却
* async loadZippedOfflineContents(zip_url,progressCallBack)
*:保存してあるディレクトリに対して、そのzipファイルの中のディレクトリ構造で、コンテンツがあるものと見做したURLもつキャッシュを形成する
* async postMessageWhenConnected(URL, postData, postCompleteCBF)
*:-postDataデータをURLにポストする　オンライン時は即座にポスト、オフライン時はいったんindexedDBにポストデータを格納後オンラインになったらポストする。
*:-postDataは、文字列(この場合form-data決め打ちのリクエスト)、もしくは .bodyメンバー変数を持ったオブジェクト
*:-この場合は .bodyはFormDataタイプのインスタンスもしくは任意のデータ、そしてfetchAPIに準じた.headers, .methodをメンバー変数に持たせることができる。(methodでGETを指定すればGETリクエストも可能)またserviceWorkerが管理する
* async setCachedLayerMeta
* setScaleTrim
* async updateCacheIndex()

=====svgMapCustomLayersManager.で呼び出せるAPI=====

'''実験的機能段階''' :

基本的なフレームワークで提供されているレジューム機能を更に強化し、レイヤーの表示非表示状態、初期表示エリア(viewPort)等をユースケースなどに応じて複数登録、切り替えを可能とする機能を提供します。更に[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]をさらに積極的に編集し、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルに無いレイヤーを追加したり、削除したりした、カスタマイズされた[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]を差分情報の形でlocalStorageに保存・利用する機能を提供します。

:- 以下のAPIは、SVGMapLv0.1_CustomLayersManager_r*.jsを用いた場合に使用できます。
:- SVGMapLv0.1_CustomLayersManager_r*.jsは、svgMapオブジェクトもつwindowで使用するとともに、svgMapオブジェクト用のカスタムレイヤーセットを構築するための別ページのwebAppsにおいても使用することができます。
:- 上記svgMapオブジェクト用のカスタムレイヤーセットを構築するためのwebApps用としてSVGMapCustomLayersManagerApp_r*.js、SVGMapCustomLayersManager.htmlが用意されています。

*registCustomLayer(customLayerObject, applyImmediately, customLayerMetadata)
*applyCustomLayers(customLayersObject, baseLayersPropertySet)
*getDetailedLayersPropertySet(rootContainerDoc, ignoreIid)
*getDetailedLayersPropertySetFromPath(rootContainerUrl, ignoreIid)
*getDif( edit, orig )
*originalLayersProperty
*deepCopy(obj)
*deleteAllCustomLayerSettings()
*deleteCustomLayerSetting( key )
*setCustomLayerSettingIndex(key)
*buildCustomLayersSetting(difObj, editedLayersProperty, originalLayersProperty)
*loadCustomLayerSettings()
*storeCustomLayerSettings( settings )
*getElementByAttr( XMLNode , searchId , atName )

*applyCustomLayersSettingsToCurrentMapView(lpEdit, svgMapWin)
*loadCustomGeoViewboxes()
*storeCustomGeoViewboxes(customViewBoxes)
*buildCustomGeoViewboxSettingObject(key, title, geoViewBoxX, geoViewBoxY, geoViewBoxWidth, geoViewBoxHeight)

====起動URLによるオプション指定====
svgMapフレームワークを導入したhtmlコンテンツは、URLの"#"以降であるフラグメント識別子によってフレームワークにいくつかの起動時オプションを提示することができます。
通常、これらのオプションは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]における記述で示されています。フラグメント識別子による指示はそれをオーバーライドします。
一般的な"&"による区切りで複数の複数のパラメータを指定できます。
=====表示範囲の指定=====
global座標系によって表示範囲を指示することができます。　標準のフラグメント記述に対してそれぞれ"global"文字列の追加が必要です。
なおglobal座標系におけるxは一般的に経度、yは一般的に緯度に対応することに留意してください。
*メディアフラグメントによる指定 : xywh=global:<xmin>,<ymin>,<width>,<height>
*svgViewフラグメントによる指定 : svgView(viewbox(global,<xmin>,<ymin>,<width>,<height>))

=====表示・非表示レイヤーの指定=====
* 表示すべきレイヤー: visibleLayer=<layer title>,<layer title>...
* 非表示すべきレイヤー: hiddenLayer=<layer title>,<layer title>...
* 個々のレイヤーに対するフラグメントの提示 : それぞれのレイヤーに対しては、さらにフラグメントを追加することができます。ただし"="は"%3D",&は"%26"でURLエンコードしてください。<layer title>#fragment1=val1&fragment2=val2　⇒<layer title>#fragment1%3Dval1%26fragment2%3Dval2　

===レイヤー固有のUI===
"[https://satakagi.github.io/mapsForWebWS2020-docs/De-centralizedWebMapping.html#:~:text=To%20achieve%20this,everything%20in%20detail. Layers as WebApps]"(ウェブアプリケーションとしてのレイヤー: webApp Layer)を実現する機構　（LaWA、レイヤーwebApp、webAppレイヤー、アプリレイヤー、レイヤーアプリなどと呼ぶこともある）（[[#レイヤー固有ユーザインターフェース|こちらも参照]]）

====概要====
[[#レイヤー|レイヤーsvgコンテンツ]](フレームワークが最初に読み込むコンテナsvgコンテンツの中で埋め込まれるsvgコンテンツ)に対して、[[#動的な地図レイヤー|動的な地図レイヤー]]の一種として、そのレイヤーに固有の処理ロジックや、可視化・描画ロジック　そしてユーザインターフェースも含むことができる　htmlによるウェブアプリを定義できる機能です。

javascriptを使った独自のロジックによる動的な可視化データの生成が実装可能です。

また、この機能はそのレイヤーの設定やインタラクティブ操作のための表示やユーザインターフェースを地図表現とは別に表示したい場合にも用いることができます。従来のアーキテクチャでは、もしもこのようなレイヤーに固有のUIが必要だった場合でも、地図アプリケーション全体の処理や表示を司るグローバルな空間(ルートhtmlコンテンツのwindowオブジェクト直下)に、サイドエフェクトを考慮しながらコードを組み込む必要があり、結果としてコードのスパゲッティ化が懸念されました。SVGMapのレイヤー固有UIは、レイヤーごとにUIとそのロジックをカプセル化可能にし、これを排除することが可能です。(カプセル化はiframeによって行われます。)さらに、レイヤー固有UIによるウェブアプリは自律分散的な配置にも対応し、UIを備えた地図レイヤーにまでハイパーレイヤリングアーキテクチャを拡張します。

なお、[[#動的な地図レイヤー]]は、htmlによるユーザーインターフェースを持つことができませんが、同種のウェブアプリケーションのカプセル化の効果があります。

このＵＩには主に二つの用途が考えられます。
;凡例
: 各レイヤーはその地図表現の意味を示すための固有の凡例を持つことがあります。その凡例を表示するために利用できます。
;ウェブアプリケーションによる動的な地図レイヤー
: 先述のように、ウェブアプリケーションによる動的な地図レイヤーは独自のロジックによってそのレイヤーの地図表現を動的に変化させる機能を備えることができます。この場合、例えばエンドユーザがFORMで入力したフィルター条件ををもとに表現を変更するようなケースも考えられます。
これらケースでは、そのフォームや凡例は、[[#フレームワークの呼び出し|ルートhtml文書]]に設置することは可能ですが、もしも多くのレイヤーを表示するアプリケーションであり、それらのレイヤーがそれぞれ固有のフィルタ条件を持つような場合、[[#フレームワークの呼び出し|ルートhtml文書]]は、それぞれのレイヤーをフィルタリングするためのFORMとそのフィルタリングロジックをすべて埋め込む必要があり、画面のデザイン、およびロジックのコーディングの双方がスパゲッティ化する可能性があります。さらに、もしもこのアプリケーションに後日さらにレイヤーが追加される場合、スパゲッティ化の問題はより深刻になるかもしれません。凡例の表示についても同様の問題が考えられます。本レイヤー固有ＵＩはこのような問題に対するソリューションを提供しています。

この機能は、ベースのフレームワークrev12以上　且つLayerUI2フレームワークを読み込み、[[#レイヤー固有のUI(後述)を設置するdiv要素|id="layerSpecificUI"のdiv要素]]が[[#フレームワークの呼び出し|ルートhtml文書]]に設置されているときに使用できます。

;サンプル
:[[チュートリアル#WebApp_Layer.E7.B7.A8|開発者向けチュートリアル]]でいくつかのサンプルを見ることができます。

====[[#レイヤー|レイヤーsvgコンテンツ]]での指定====
レイヤー固有UIの設置には、[[#レイヤー|レイヤーsvgコンテンツ]](のルート要素(svg要素))に、data-controller属性を与え、そこにそのレイヤー固有のUIのためのhtml文書のリンク(ただしsame origin)を設置します。またサブセットとして、data-controller属性にビットイメージ(.pngもしくは.jpg, .jpeg, .gif拡張子を持つビットイメージ)へのリンクを与えることでレイヤーの凡例情報の提示をすることもできます。

[[#レイヤー固有のUI(後述)を設置するdiv要素|レイヤー固有ＵＩの表示部位]]には、このように指定されたリソース(ビットイメージもしくはhtml)がレイヤーの選択の状況に応じて、切り替わり表示されます。レイヤーがONになっている間、それに紐付けられたレイヤー固有UI(htmkのwindowオブジェクト)が存在し続け、そのレイヤーのsvgDOMの操作やUIの提供が可能です。

なお、標準のフレームワークでは、表示中のレイヤーの中の選択された一つのUIのみが地図のメインのwindowに配置されたiframeで表示されます。表示中ではあっても選択されていないレイヤーのUI(iframe)は非表示状態で動作しています。

'''サンプル'''
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="9000.0 -9000.0 9000.0 9000.0" go:dataArea="9000.0 -9000.0 9000.0 9000.0"
'''data-controller="../Self-GS-POI_controller.html"'''>
.....

====レイヤー固有のUIのためのhtml文書(webApp)の構造・作法====
レイヤー固有のUIとなるhtml文書は、下記の通り、その初期化等を行うライブラリ <code>svgMapLayerLib.js</code> を読み込む必要があります。（現在のところ通常のjavascriptライブラリのみ提供されます）
CDNからライブラリを読む場合は、<code>https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/svgMapLayerLib.js</code>です。

'''サンプル'''
<!doctype html>
<html>
...
<script src="https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/svgMapLayerLib.js"></script>
...
</html>

====LaWAとS-LaWA（サンドボックス化LaWA）のアーキテクチャ====
SVGMapにおけるレイヤー固有UI（LaWA: Layers as Web Apps）には、セキュリティと用途に応じた2つの動作モードが存在します。2026年のアップデートにより、Web標準のセキュリティモデル（クロスオリジン制約）に準拠した'''S-LaWA（サンドボックス化LaWA）'''が導入されました。 (2026/4/16現在 dev2リリース段階)

=====T-LaWA (Tight-coupled LaWA / 従来の密結合モード)=====
* 親のSVGMapフレームワークと同じオリジン（ドメイン）で動作する、従来型のレイヤーWebAppです。
* iframeのJavaScriptコンテキストに、親フレームワークから直接APIオブジェクトが注入されます。
* 全ての[[#拡張API]]にアクセスでき、複雑なDOM操作や関数渡しが可能ですが、サードパーティ製のレイヤーを読み込む際にはセキュリティ上のリスク（XSS等）を伴います。

=====S-LaWA (Strict/Sandbox LaWA / 分離モード)=====
* 親のSVGMapフレームワークとは異なるオリジンで動作することを前提とした、セキュアなレイヤーWebAppです。
* iframeは完全に隔離（サンドボックス化）され、親フレームワークとの通信は全て非同期メッセージング（postMessage）を介して行われます。
* 悪意のあるスクリプトから親フレームワークを保護できるため、外部のサードパーティ製レイヤーを安全に統合できます。
* 代わりに直接的なオブジェクト参照や関数の受け渡しが禁止されるため、[[#拡張API]]の利用に強い制限がかかります（前節の「S-LaWAでの制限」を参照）。

======【発展機能：S-LaWA Level 2 (CORS非依存モード)】======
* S-LaWAのサブモードとして、配信元の外部サーバーにCORS（Cross-Origin Resource Sharing）設定がされていないSVGレイヤーであっても、安全に読み込んで統合できる仕組みです。
* コンテナ側の <code>animation</code> 要素に <code>data-controller</code> 属性が指定されている場合、SVGMapフレームワークはCORSエラーを回避することが可能です。実際のSVG及びhtmlの取得と展開は全てサンドボックス内のS-LaWAで行われ、サーバー側の設定に依存しないクロスオリジン連携を実現します。

===== 動作モードの指定 (data-lawa-mode) =====
レイヤーがどちらのモードで起動するかは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]内でそのレイヤーを参照している '''<code>animation</code> 要素の <code>xlink:href</code> の値（URLのオリジン）'''、もしくは同要素に付与する '''<code>data-lawa-mode</code>''' 属性で制御できます。

<code>data-lawa-mode="auto"</code> (未指定時のデフォルト): レイヤー（コントローラ）のURLが親フレームワークと同一オリジンであれば '''T-LaWA''' として、クロスオリジンであれば自動的に '''S-LaWA''' として起動します。

<code>data-lawa-mode="isolated"</code>: 同一オリジンであっても、強制的に '''S-LaWA''' として隔離して起動します（開発時のテスト等に有用です）。

<code>data-lawa-mode="tight"</code>: 強制的に '''T-LaWA''' として起動を試みます。（※クロスオリジン環境でこれを指定した場合は、適切なCORS設定やプロキシサーバーの利用が必須となります）

====詳細====

レイヤー固有UIは、SVGMapのグローバルなwindowに設置されたiframeの中で動作します。このiframeの性質と利用できるAPIは、前述の動作モード（T-LaWAかS-LaWAか）によって大きく異なります。

どのような環境・モードで起動された場合でも、レイヤー固有UI内でSVGMapの各種リソースへ安全にアクセスするためには、レイヤーのHTML内で提供される初期化ライブラリ（<code>svgMapLayerLib.js</code> 等）を読み込む必要があります。

'''【重要】''' 各種APIへのアクセスが可能になるのは、iframe自体の "load" イベントではなく、SVGMapフレームワークとの接続が完了した後に発行される '''<code>layerWebAppReady</code>''' イベント以降です。
* 初期化処理は以下のように記述することを強く推奨します。
* <code>window.addEventListener("layerWebAppReady", function(){ /* 初期化処理 */ });</code>

[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が設置されたSVGMapのグローバルなwindowと異なるドメインにレイヤーを設置し、そのレイヤーがレイヤー固有UIを持つこともできます。デフォルト（<code>data-lawa-mode="auto"</code>）では、これは自動的にセキュアなS-LaWAとして起動するため、特別なCORS設定は不要です。ただし前述の通りAPIには制限がかかります。

[[#レイヤー|レイヤーsvgコンテンツ]]のドキュメントルート要素へdata-controller属性を設定する代わりに、コンテナsvgコンテンツにおける[[#レイヤー|レイヤーsvgコンテンツ]]への参照要素にdata-controller属性を設定することもできます。

data-controller属性の代わりに、data-controller-src属性の値に、適切にエスケープすることで直接htmlを記述することもできます。（※この機能は主にT-LaWAでの利用を想定しています）

data-controller属性によって参照されるhtmlコンテンツでは、次節[[#拡張API]]で説明する値や関数が使用できます（※モードによる制限あり）。

data-controller属性のURLには以下のオプションをフラグメント識別子として指定することができます。
* #exec=appearOnLayerLoad||hiddenOnLayerLoad||onClick レイヤー固有UIの起動オプション
** appearOnLayerLoad : レイヤーを表示状態にすると即座にレイヤ固有UIが出現
** hiddenOnLayerLoad : レイヤーを表示状態にすると即座にレイヤ固有UIがhidden状態で起動(そのレイヤ固有UIに含まれるscriptが起動)
** onClick : レイヤー固有UI起動ボタン">"を押したときにレイヤ固有UIが出現(デフォルト)
* #requiredHeight=hhh&requiredWidth=www
** id="layerSpecificUI"のdiv要素のcss値に関わらず、requiredHeight、requiredWidthでiframeの表示を指示

====拡張API====
レイヤー固有UI(iframeのwindowオブジェクトのjavascriptコード)では以下のAPIが拡張されています。
'''【注意】S-LaWA（サンドボックス化LaWA）環境においては、セキュリティ上の理由から親フレームワークのオブジェクトに直接アクセスできません。代わりに <code>svgMapSandboxLayerLib.js</code> が提供する「モック（代替）オブジェクト」を介して非同期に操作が行われます。各項目の「S-LaWAでの仕様」を参照してください。'''

=====イベント=====
*layerWebAppReady : 初期化が完了しLaWAの実行が可能になった (LaWAでは、loadイベントではなくlayerWebAppReadyを使用することを強く推奨します)
*openFrame : そのiframeが、新たに生成された
*closeFrame : 同、消滅した
*hideFrame : 同、隠された
*appearFrame : 同、隠されていたのが再度現れた
*zoomPanMap : [[#.E6.8B.A1.E5.BC.B5.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88|SVGMapフレームワークと同じ]]
*zoomPanMapCompleted : 同上
*screenRefreshed : 同上

'''【S-LaWAでの仕様】''' すべてのイベントがサポートされています。親フレームワークで発生したイベントは、メッセージングを通じてS-LaWA内のwindowオブジェクトに中継・ディスパッチされます。

=====svgImageProps=====
このレイヤー固有UIに紐づいたレイヤーSVGの各種プロパティを参照できる（基本的に全て読み出しのみ） (参考:[[#svgImagesProps.5B.5D]])
*[[解説書#svgImagesProps.5B.5D|プロパティのリストはこちらを参照]]
*svgImageProps.scriptで、動的地図レイヤーのscript要素によって生成されたオブジェクトにもアクセスできます。
*svgMap.getSvgImagesProps(layerID) で得た値と同等。
*.hashは書き込みが有効(参考 [[#サブレイヤーパーマリンク]])

'''【S-LaWAでの仕様】''' 親フレームワークから非同期で同期された静的なコピーデータとして提供されます。<code>.hash</code> プロパティへの書き込みはS-LaWAでもサポートされており、裏側で自動的に親へ同期されます。ただし、<code>.script</code> による親の実行コンテキストへのアクセスはできません。

=====svgImage=====
このレイヤー固有UIに紐づいたレイヤーSVG文書(DOM Documentオブジェクト) (参考：[[#svgImages.5B.5D]])
*このドキュメントを操作することで、そのレイヤーの表示を動的に変化させることが可能です。
*特に、[[解説書#.E5.8B.95.E4.BD.9C.E3.81.AE.E5.88.B6.E9.99.90.E3.83.BB.E5.B7.AE.E7.95.B0|動作の制限に注意して実装してください]]
*svgMap.getSvgImages(layerID) で得た値と同等。

'''【S-LaWAでの仕様】''' S-LaWA環境内に展開された「ローカルXML DOM」が提供されます。このドキュメント（要素の追加・削除・属性変更・テキスト変更など）を操作して <code>svgMap.refreshScreen()</code> を呼び出すと、フレームワークの共通地図キャンバスに送信され更新します。

=====svgMap=====
svgMapフレームワークインスタンス

'''【S-LaWAでの仕様】''' 親のインスタンスの代わりに、S-LaWA用のモッククラス（<code>SandboxSvgMap</code>）が提供されます。以下のメソッドのみが利用可能です。
* <code>refreshScreen()</code>, <code>transform()</code>, <code>getGeoViewBox()</code>, <code>getSvgImageProps()</code>, <code>setShowPoiProperty()</code>, <code>showModal()</code>, <code>getCORSURL()</code>, <code>setCORSproxy()</code>, <code>parseEscapedCsvLine()</code>

=====layerID=====

svgMapフレームワークが管理しているSVG文書ハッシュリスト(svgMap.getSvgImages())における、このレイヤー固有UIに紐づいたレイヤーSVG文書のハッシュキー

[[#getLayerId]]参照

'''【S-LaWAでの仕様】''' 制限なく利用可能です。

=====svgMapGIStool=====
GIStoolsフレームワークを拡張した時、同インスタンス
*[[解説書#svgMapGIStool..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI|svgMapGIStoolが持つAPI]]

'''【S-LaWAでの仕様】''' '''現在のところ利用不可です。'''

=====svgMapAuthoringTool=====
svgMapAuthoringToolフレームワークを拡張した時、同インスタンス
*[[解説書#svgMapAuthoringTool..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI|svgMapAuthoringToolが持つAPI]]

'''【S-LaWAでの仕様】''' '''現在のところ利用不可です。'''

=====controllerSrc=====
レイヤー固有UIのiframeの起動に使われたsrc属性(レイヤー固有UIのパス・URL)が読み出せます。特にレイヤーが異なるドメインから配信されたものの場合、レイヤー固有UIのwindowのlocation属性(及びそれによるURL解決を行うAPI)からは適切な情報が得られません。これ代えてこの値が使用できるケースがあるでしょう。

'''【S-LaWAでの仕様】''' 参照できません。S-LaWAは自身のURLコンテキストで動作するため、自身の <code>location.href</code> などを参照してください。

=====putGlobalMessage(messageText)=====
messageTextを[[#グローバルメッセージ]]エリアに表示する　レイヤーが消滅したら自動でメッセージも消滅します。

'''【S-LaWAでの仕様】''' 現在のところ利用不可です。

=====preRenderFunction=====
この名前の関数を(レイヤー固有UIのwindowに)定義すると、そのレイヤーのSVG文書の再描画(画面更新)シーケンスの直前にこの関数の内容が実行される。詳細は[[解説書#setPreRenderController|setPreRenderControllerを参照]]

'''【S-LaWAでの仕様】''' '''利用可能です。''' S-LaWA内で <code>window.preRenderFunction</code> を定義しておくと、<code>svgMap.refreshScreen()</code> が呼ばれた際や、親からズーム・パンなどのイベントを受信した際に、S-LaWA内でローカルに実行されます。この関数内でローカルDOMを変更することで、描画前の状態更新をエミュレートできます。

=====customHitTester=====
この名前の関数を定義すると、そのレイヤーに固有のヒットテスト（マウスやタッチによって地図上をヒットしたときの振る舞い）機能を追加することができます。ヒットテストは通常のクリッカブルオブジェクト（ポイントやライン・ポリゴンなど）のそれと同等に扱われます。
* customHitTester( position )
** 第一引数に、ヒットされた座標(.screenX,Y:window上の座標、.lat,lng:地理座標、.isMapCenterHitTest:後述)が与えられます。（この値をもとに実際のヒットテスト処理を書く）　この関数の帰り値が'''null'''や'''undefined'''の場合はヒットしなかったこと、'''true'''もしくは文字列もしくはそのレイヤーの任意の図形要素、もしくはそれらの配列の場合はヒットしたことを示します。
*** isMapCenterHitTestが'''true'''の場合、そのヒットテストは伸縮スクロール時自動発生するケースで発生したものです。（もしこのケースでのテストを除外したいなど特別な処理をしたい場合に利用できます）
** ヒットテスト後の振る舞いも通常のクリッカブルオブジェクトと同等で、通常はデフォルトで備えるヒットされたグラフィックスオブジェクトの[[#metadata.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF|メタデータ]]表示パネルが呼び出されます。(帰り値が図形要素の場合）　もしこの振る舞いを変更したい場合は、[[#setShowPoiProperty|setShowPoiProperty]]を用いることが可能です。
** 帰り値がtrue、文字列、およびそれらの配列を返す場合は、[[#setShowPoiProperty|setShowPoiProperty]]を使用してカスタマイズされた処理を行う必要があります。この場合[[#setShowPoiProperty|setShowPoiProperty]]で設定された関数が受け取る引数は、そのSVG文書のドキュメントルート要素であり、その'''"data-hitTestIndex"'''属性に選択されたオブジェクトのインデックス(配列の場合。配列でない場合は常に0)が設定されます。

'''【S-LaWAでの仕様】''' <code>customHitTester</code> 自体は利用できません。（なお<code>svgMap.setShowPoiProperty(func)</code>は利用可能です。）

====サブレイヤーパーマリンク====
(2024/10のdev1ブランチから有効)
*[[#レイヤーsvgコンテンツ]]のURLが任意のフラグメント識別子を持つことができる。
*ただしフラグメント識別子はカンマ","、アンパサンド"&"を含めることはできない。
*[[#レイヤー固有のUI]]が以下を実装する場合、任意のレイヤーの設定をパーマリンク([[#getBasicPermanentLink]])に反映できる。
**[[#レイヤー固有のUI]]は起動時(onload)同フラグメント識別子の情報を解釈し適切な状態に変化させる機能
**[[#レイヤー固有のUI]]は、パーマリンクによる指定に対応した標示状態に表示が切り替わるタイミングで[[#レイヤーsvgコンテンツ]]のURLのフラグメント識別子の内容をそれに対応した値に変更する機能
*[[#レイヤーsvgコンテンツ]]のURLのフラグメント識別子は、[[#svgImageProps]].hashを設定することで変更できる ([[#svgImageProps|⇒仕様参照]])

===動的な地図レイヤー===
svgドキュメントにjavascriptを記述することでも、動的なデータ生成を実装可能としています。
本フレームワークでは、svgドキュメント中に<script>要素を一つだけ記述することができ、その要素の中にjavascriptコードを入れることができます。

DOMを操作し、動的に描画を変化させることが可能です。ただし、[[解説書#.E5.8B.95.E4.BD.9C.E3.81.AE.E5.88.B6.E9.99.90.E3.83.BB.E5.B7.AE.E7.95.B0|動作の制限に注意してください]]

====動的SVGMapコンテンツで利用可能な拡張API====
一般のjavascriptAPIに加えて、動的な地図レイヤーを実装するために以下のAPIが提供されます。（既存のものでも注記があるものも列挙）
*document: このsvgMapドキュメント自身
*READ ONLY変数
**CRS:このドキュメントのCRS : CRS.a....fに、地理座標からこのドキュメントのSVGユーザ座標への変換係数が提供される
**docId:このSVGドキュメントのdocId
**scale：倍率：このドキュメントの座標系と、画面の(px座標系)との間の倍率(この値は等倍が1.0だが、svgMapコンテンツのvisibleMin/MaxZoom値は%(等倍は100)なので注意)
**actualViewBox：このドキュメントの座標系でのviewBox
**geoViewBox：地理座標におけるviewBox
**geoViewport
**viewport
**this.location:相対パス
**(this.verIE)
*refreshScreen(): 描画の更新を明示: refreshScreenを用いていない場合、そのレイヤーのDOMを編集してもそれが即座に表示に反映(更新)するとは限りません。文書のロード、ズーム、スクロールのときが表示のDOMの内容を反映した画面の自動更新のタイミングです。それ以外、多くの場合反映されません（性能確保のための本フレームワークの現在の制限）。DOMO編集をそれ以外のタイミングで表示に反映したい場合、この関数の呼び出しを行うひつようがあります。一方不必要にこの関数を呼び出すとシステム全体の性能が低下するかもしれません。
*transform()
*getCanvasSize()
*linkedDocOp()
*isIntersect()
*drawGeoJson()
*childDocOp()
*onload:この関数を設定すると、ロードされると呼ばれる(ドキュメントロード後、描画前のタイミング。)
** この関数は、DOMトラバース前に同期処理される。
**したがってonloadで実行される処理はその中が非同期でない限り、refreshScreen()しなくてもonload時のDOM編集は直後の描画に反映される。
*onscroll:この関数を設定すると、スクロールされるとき呼ばれる（ほかにズーム以外で画面更新時も）(スクロール後の描画前のタイミング。)
**同上
*onzoom:この関数を設定すると、ズーミングが発生するとき呼ばれる(同上)

====拡張イベント====
*document -> zoomPanMap イベント addEventHandlerすると、ズームパンが起き(viewPortが変化したとき)地図システム全体の描画が完了(含タイムアウト)後に発行される。SVGMap*.jsが地図をウェブアプリ起動後、最初に描画完了した時にもこのイベントが発生する。（レイヤー追加時には発生しない）
**これをイベントリスナに設定した関数は、非同期に実行される。onscroll()と異なり、もしその関数でDOM編集を行った場合は、直後の描画にそれが反映される保証がない。refreshScren()による再描画が必要。
*document -> screenRefreshed イベント addEventHandlerすると、ズームパン以外で地図システム全体の描画が完了(含タイムアウト)後に発行される。主にrefreshScreen()など。このイベントをフックにして、SVGMapコンテンツのDOM操作・再描画（refreshScreen()）を行うと無限ループに陥るので使用方法に注意が必要。
*document -> zoomPanMapCompleted イベント SVGMaplayerUIが有効な時に発行される。　zoomPanMapイベントは伸縮スクロール完了時に発行されるが、その直後にレイヤー固有UIにおいて(XHRやfetchを用いた)非同期なデータ取得とレイヤー書き換えが生じるケースでは、その完了を検知しない。zoomPanMapCompleted イベントはこのような非同期通信の完了後に発行される。

===SVGMapの埋め込み(SVGMapFrame)===
'''実験的機能段階''' :

SVGMapフレームワークはwindow全体に地図コンテンツが占有される形で表示する設計です。ウェブページはwebAppsとしてカプセル化されたレイヤーをsvgMapオブジェクトに差し込む形でアプリケーションが構築されます。すなわち、基本的に[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]windowにはsvgMapオブジェクトだけが単独で存在し、その他のアプリケーションをwindow上に実装する場合は、その開発者がsvgMapオブジェクトとのグローバル空間でのスパゲッティ化に注意を払いながら開発していく必要があります。

それに対して、''SVGMapLv0.1_Frame*.js''が提供する機能は、window内の指定した領域にsvgMapによる地図を埋め込むことを可能にします。さらにこの埋め込まれたsvgMapオブジェクトを　外部からより簡単に操作できるようカプセル化されたインターフェースを提供します。

====ライブラリ====
SVGMapを埋め込むウェブページでは''SVGMapLv0.1_Frame*.js''を導入します。
<!doctype html>
<html>
<script type="text/javascript" src="SVGMapLv0.1_Frame_r4.js"></script>
</html>

====svg-map要素====

svg-mapカスタム要素を使用してsvgMapオブジェクトを任意の場所に埋め込むことができます。
<nowiki>
<!doctype html>
<html>
<script type="text/javascript" src="SVGMapLv0.1_Frame_r4.js"></script>
<body>
<table>
<tr>
<td>
説明用地図
</td>
<td>
<svg-map svgMapAppPage="SVGMapper_r16_layerUICustom.html" id="svgMapTag" latitude="37" longitude="135" zoom="4" layerui="#layerUIarea">
</svg-map>
</td>
</tr>
</table>
</body>
</html></nowiki>

=====属性=====
======svgMapAppPage======
必須属性: 起動するSVGMapLv0.1*.jsが組み込まれたhtmlを指定。
svg-map要素はshadow domとなっており、内部はひとつのiframeとして構成されます。このiframe内のwindowで通常のsvgMapオブジェクトが稼働する形となります。svgMapAppPage属性はこのiframe内で起動するsvgMapオブジェクトを持ったhtmlを指定するものです。

======latitude, longitude======
オプション: 表示領域を下記の属性と組み合わせて指定します。DOMを操作することによって動的に表示領域を変更することが可能です。
======zoom======
オプション: 表示位置の中心点を上の2属性で、ズームレベルをこの属性で指定します。ズームレベルの定義は[https://docs.microsoft.com/ja-jp/azure/azure-maps/zoom-levels-and-tile-grid webMercatorタイルピラミッドのレベル番号]（ただし小数点指定も可能）
======latitude2, longitude2======
オプション: latitude, longitudeと組み合わせて対角線を指定し表示領域を設定します。
======customjson======
オプション: 任意のJSON文字列を(エスケープしたうえで)与えることができます。 SVGMap.jsのあるiframeのwindow.rootMessage.customJsonに、JSON.parseされたうえでその値が反映されます。この値もDOM操作により動的に反映されます。window.rootMessage.customJsonの変化を監視できるようsetterを設けることで動的な変化に対応する実装が可能です。

var rootMessage={
set customJson(json){
...
}
}

======layerui======
オプション: レイヤーUIの出力要素をxlinkで指定します。　この値はmutationをobserveしていません（svg-mapオブジェクトが生成された、最初の一回のみ有効です）

<svg-map svgMapAppPage="SVGMapper_r16_layerUICustom.html" id="svgMapTag" latitude="37" longitude="135" zoom="4" layerui="#layerUIarea">

=====DOM API=====
======setCenter======
setCenter( longitude, latitude, zoom ) : 緯度経度ズームレベルで地図を表示させる
======addLayer======
addLayer(url,title,visibility) : URLで指定したリソースのレイヤーをtitleを付けて追加する

======svgMapObject======
getter svgMapObject : この要素に紐付いたsvgMapオブジェクトを得る

====layer要素====
svg-map要素の子要素として、任意の個数のlayer要素を設置できます。
=====属性=====
======title======
iframeで起動されるsvgMapオブジェクトの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルにある、レイヤー名(title)を指定し、そのレイヤーとlayer要素を紐付ける。該当するレイヤーが無く、且つ下記のsrcが指定されている場合は新しいレイヤーを追加する。なお、任意の属性や子ノードが与えられている場合は、下記の通りレイヤーの読み込み後にそれらの値が該当するレイヤーの[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|data-controller]]の window.rootMessageに設定される。

======src======
iframeで起動されるsvgMapオブジェクトの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルにある、レイヤーをURLを使って指定する
======visibility [TBD] ======
visible もしくは hiddenを設定すると、そのレイヤーの表示状態を制御できる。

======任意の属性======
任意の属性を設定できる。設定した属性名と属性値は、対応するレイヤーの[[#レイヤー固有ユーザインターフェース|data-controller]]で指定されたレイヤーのコントローラのwindowにおけるwindow.rootMessageの対応するメンバ変数に反映される。[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/set setter]を設定することで変化に応じて動作させることが可能になる。

======rootMessage.update()関数======
レイヤーのコントローラのwindow.rootMessage.update()関数(引数なし)が定義されている場合、上記の属性変更(最初の設定も含む)が検知される度にこの関数が呼び出される。

=====子ノード(TEXT CONTENTやXML要素)=====
任意のテキスト(textContent)や、XML要素(xmlContent)を子ノードに入れることができる。
入れられた情報は、同様に対応するレイヤーのdata-controllerの
window.rootMessage.textContent、もしくはwindow.rootMessage.xmlContentメンバ変数に反映される。
XMLに関しては任意の階層化がされていても良い。DOM操作による変化があれば更新されるので、同様にsetterを用いて変化を反映させることが可能。

=====DOMAPI=====
======layerId======
layerId : このレイヤーのレイヤーIDを得る
======svgImage======
svgImage : このレイヤーに紐付いたsvgMapコンテンツ(document)を得る
======svgImageProps======
svgImageProps : このレイヤーに紐づいたsvgMapコンテンツのsvgImagePropsオブジェクト(各種プロパティを格納したオブジェクト)を得る
======controllerWindow======
controllerWindow : (もしあれば)このレイヤーに紐づいたsvgMapコンテンツのレイヤー固有UIを得る

==第四章：内部機構解説==
[[内部機構解説|別ページを参照してください。]]

==第五章：付加機能==
===3D可視化機能===
:- SVGMap.jsはCesium.jsを利用してSVGMapで表示しているレイヤーを3D可視化することができます。
:- 3D可視化はSVGMap.jsの地図ウィンドと独立した別ウィンドで行われます。
:- すなわち、ここから呼び出されるCesiumベースの3D可視化ウェブアプリは、それ専用のwebApps([https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4_module.js cesiumWindow*.js]を読み込んだアプリ。：基本的な3D可視化ウェブアプリとして、[https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4.html cesiumWindow4.html]を用意)を持つ別のブラウジングコンテキストで起動されます。
:- この3D可視化ウェブアプリは、svgmapjsとメッセージングを行いsvgmapjsで表示されているレイヤーを3D可視化します。

====3Dビジュアライザ起動用ボタンの設置====
3D可視化機能を起動するためのUI(ボタン)は、[[#フレームワークの呼び出し|ルートhtml文書]]に設置した以下の要素によって構築されます。
<code><pre><img id="3DviewButton" data-app="cesiumWindow4.html" .../></pre></code>

* <code>id</code>が<code>3DviewButton</code>である必要があります。
* <code>data-app</code>属性で、3D可視化ウェブアプリのパスを指定することが可能です。
** もし指定されていない場合は、ルートhtml文書と同一ディレクトリの<code>cesiumWindow2.html</code>というファイルがデフォルトで指定されます。
** パスは同一オリジンである必要があります。
** 基本的な3D可視化ウェブアプリとして、[https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4.html cesiumWindow4.html]が[https://github.com/svgmap/svgmapjs/ svgmapjsリポジトリ]に用意されています。

解説書

2026-04-16T08:42:41Z

Admin: /* 【発展機能：S-LaWA Level 2 (CORS非依存モード)】 */

=SVGMap.js (Level0.1フレームワーク)解説書=

2018年現在のSVGMapのデータ形式、およびそれを実装した初歩的なフレームワーク(SVGMap Level0.1 Revision*)の解説を行います。

==第一章：SVGMapの基本機構と、更新部分==

この章は、JIS化されたSVGMap ([http://kikakurui.com/x7/X7197-2012-01.html JIS X.7197])や、[https://www.w3.org/Submission/2011/04/ W3C Member Submission]に対する、近年の開発成果に基づいたSVGMapのアップデートを解説しています。

[http://kikakurui.com/x7/X7197-2012-01.html JIS X.7197]もしくは、[https://www.w3.org/Submission/2011/04/ W3C Member Submission]に記載されているように、SVGMapの基本機構は主に以下の機能を　[https://ja.wikipedia.org/wiki/Scalable_Vector_Graphics 汎用的なグラフィイクスデータ記述形式SVG]に拡張することです。
* [[#地理座標系の処理|地理座標処理]]
** SVGの座標系と地理座標系との間の関係を記述する globalCoordinateSystems要素
* タイルピラミッド（タイリングとLevel of Detail）
** コンテンツを埋め込む[[#要素|image要素、animation要素]]のx,y,width,height属性への追加の振る舞いと、visible-min-zoom, visible-max-zoom属性の追加
** 詳細は [https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html こちらの論文]を参照
* 拡張された[[#レイヤー|レイヤー]]
** [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]におけるimage, animation要素の扱い
** [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が埋め込むsvgコンテンツ([[#レイヤー|レイヤーsvgコンテンツ]])の処理

===地理座標系の処理===
SVG2では地理空間座標を記述するスペック(metadata geospatial coordinate systems)が削除されました。これは、W3C SVG仕様の範囲では単なるメタデータであり、ユーザエージェントの振る舞いに何ら影響を及ぼさないことが理由です。　また、JIS SVGMapにおいては、coordinateReferenceSystem 要素が定義され、それに基づくユーザエージェントの振る舞いが規定されていますが、これは一方でW3Cのスペックではないという課題を持ちます。

これを受けて、現在提案されているSVGMapのデータ仕様では、SVG1.1の段階ですでに標準化と実装が行われたスペックを注意深く活用することにより、JIS SVGMapで規定された地理座標系に関する機能のいくつか（すべてではない）を実現する方法を用いることとしています。（[https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/globalView globalView spec]）

なお、JIS SVGMapのcoordinateReferenceSystem要素もサポートしています。

====メルカトル図法を含む任意の図法の定義とその合成機能(＞rev16)====
従来のSVGMapでは、グローバル座標系に緯度経度座標を用いた場合、使用できる図法は[https://ja.wikipedia.org/wiki/%E6%AD%A3%E8%B7%9D%E5%86%86%E7%AD%92%E5%9B%B3%E6%B3%95 PlateCarreeや正距円筒図法]でした。

一方、rev16では[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]を含む任意のSVGMapコンテンツ([[#レイヤー|レイヤーsvgコンテンツ]]やサブレイヤー、タイルなど)のglobalCoordinateSystem 要素のtransform属性に、下記のように"mercator"を指定することで、そのコンテンツの座標系がメルカトル図法([https://en.wikipedia.org/wiki/Web_Mercator_projection web mercator])であることを宣言できます。

<pre><globalCoordinateSystem srsName="http://purl.org/crs/84" transform="mercator" /></pre>

この記述がされたコンテンツのSVGの座標空間はメルカトル図法上のものとなり、この座標系上でのx,y=0,0(左上)は西経180.0度,北緯85.051129度、x,y=1,1(右下)は東経180.0度,南緯85.051129度に対応します。

=====メルカトル図法での地図表示=====
[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]で先述の宣言を行うことで、SVGMap0.1.jsはメルカトル図法で画面上に地図を表示します。このとき、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が参照する各レイヤーはメルカトル図法であっても、それ以外であっても構いません。フレームワーク内でオンザフライの図法変換が実行されます。（逆に[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]がPlateCarreeでレイヤーがメルカトルでも同様）

=====メルカトル図法のドキュメントルート要素のviewBox属性=====
* [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]において、地図の初期表示状態を記述するドキュメントルート要素(<svg>要素)のviewBoxに記述する座標も先述のメルカトル座標系で記述する必要があります。
* 一方、緯度経度で初期表示領域を記述したい場合に対応する仕様が拡張されており、その記述例は下記のとおり、'''global'''を追加します。
<pre><svg viewBox="global,138,35,2,2"></pre>

=====プロキシの設定=====
オンザフライでの図法変換では、多くのケースで非線形の座標変換が必要となります。ビットイメージ（タイルを含む）に対して子の座標変換を実行するためにSVGMap.jsではビット委イメージのピクセルにアクセスしています。これを実現するにはビットイメージがSVGMap.jsと同一オリジンにある必要があります。この条件を満たせないケースに対してフレームワークにはプロキシを設定する機能があります。([[#setProxyURLFactory|setProxyURLFactory API]]を参照)

'''[[クロスオリジンアクセス|詳細な情報をこちらに掲載しました]]'''

=====多様な図法の定義と利用=====
[[#動的な地図レイヤー|javascriptコード]]に記載されたscript要素内に定義した関数の関数名をglobalCoordinateSystem要素のtransform属性に記述することで、その関数を図法変換に用いた図法定義が可能となります。(先述のmercator属性は、フレームワークに特別に組み込まれた関数です）

たとえば、日本の平面直角座標系の地図(固有の基準点を持つ横メルカトル図法)をPlateCarreeやメルカトル図法の地図として合成・表示するケースなどに有効でしょう。

ユーザが定義できるこの関数は引数を持たない関数であり、返り値として以下の３つの関数を返す必要があります。
* {x,y} transform({x,y}) : グローバル座標(WGS84経度緯度)から、そのコンテンツの図法の座標への変換関数入出力値は.x,.yメンバを持つオブジェクト。
* {x,y} inverse({x,y}) : 同、逆変換関数
* number get scale : グローバル座標系に対するコンテンツの図法の座標系の座標値のスケール（グローバル座標系で1変化すると、コンテンツの座標系でいくつ変化するのかを表す）
* 記述例
<code><pre>
<svg ...>
<script>
function azimuthalEquidistant(){
...
return{
transform:function(inp){
var xy = transform_int(inp.y, inp.x, ...);
return{ x:xy.x, y:xy.y}
},
inverse:function(inp){
var latLng = inverse_int(inp.x, inp.y, ...);
return{ x:latLng.lng, y:latLng.lat }
},
scale: 1.0
}
}
</script>
<globalCoordinateSystem srsName="http://purl.org/crs/84" transform="azimuthalEquidistant" />
...map contents in projected coordinate system...
</svg>
</pre></code>

===ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング===
SVG2(SVG1.1 2nd Edition)では、SVG単独によるユーザエージェントという実装想定は撤廃され、よく知られているウェブブラウザの機能の一部としてのSVGデータの描画機能、HTMLやCSSと一体化されたデータ・コンテンツ　へと変化しました。一方、近代のウェブブラウザにおけるコンテンツでは古典的なhtmlに基づくコンテンツデータに対して、javascriptとDOM APIによるプログラムでコンテンツをブラウザ上で動的に生成する（ウェブアプリケーション）機構を備えます。すなわちSVGを実装する現代のユーザエージェントは例外なくウェブアプリケーションの実行が可能となりました。

そこで、SVGMapでは静的なSVGによる地図コンテンツに加え javascriptで動的に生成されるコンテンツ(ウェブアプリケーション)も地図コンテンツ（地図のレイヤー）として扱えることとしました。それにもかかわらず SVGMapは依然として複数のウェブ上で分散する地図データを一つの画面上にレイヤリングする機能（ハイパーレイヤリング）を維持しています。すなわち、ウェブアプリケーションとしての地図レイヤーをレイヤリング（マッシュアップ）する機能が拡張されます。これは、SVGMapのマッシュアップ・ハイパーレイヤリングの概念を、単に地図画像データのレイヤリングから、地図上に表現された動的なオブジェクトのマッシュアップ・レイヤリングに広げています。SVGMapではこのコンセプトを[[リンク集#.E8.A7.A3.E8.AA.AC.E9.9F.B3.E5.A3.B0|"Layers as WebApps"(LaWA : ウェブアプリケーションとしてのレイヤー)]]と呼んでいます。

このようなウェブアプリケーションは、レイヤーごとにカプセル化されることになります。これにより、'''グローバル空間'''(コンテナsvgコンテンツとそれを起動する、svgMap.jsフレームワークを読み込んだウェブページ)のスパゲッティ化なしに、多様な機能を実装していくことが可能になります。

[https://satakagi.github.io/mapsForWebWS2020-docs/De-centralizedWebMapping.html こちらの論文]も参考にしてください。

ウェブアプリケーションによる地図レイヤーを構築するには二つの方法があります。
* svg要素の'''data-controller'''属性で参照されたhtml文書
** [[#レイヤー固有ユーザインターフェース]]と呼ばれる機構です。この方法を用いること推奨します。
* svg要素内の'''script'''子要素 (将来廃止予定)
** htmlによるUIを伴わない実装の場合はscript要素を用いることができます。ただしsrcは属性には非対応、直接コードを埋め込む必要があります。

この機能を用いるにはSVGMapLevel0.1フレームワークを使用する場合は、拡張フレームワーク(SVGMapLv0.1_LayerUI2_r*.js)を更にロードする必要があります。SVGMapLevel0.2フレームワークの場合はデフォルトで機能します。

====レイヤー固有ユーザインターフェース====
SVGMap.jsではさらに、個々の地図レイヤー(レイヤーSVGコンテンツ)がそれぞれのレイヤーに特化した固有の演算ロジックだけでなく、ユーザーインターフェースも備えた[[#レイヤーsvgコンテンツの設定|HTMLを紐づける]]ことができる機能が拡張されています。UIも備えたより完全なwebAppをレイヤーとして実装できるため、カプセル化がより効果的に実現されます。（Layers as Web Apps, LaWA)

たとえば気象情報のレイヤーに対して気象情報の時間変化を表示するアニメーションのコントローラ(スライダーバー)や、気象情報の種類を選択するプルダウンメニュー　などのUIやロジックを任意に構築できます。

レイヤー固有ユーザーインターフェースは、[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]](SVGMap.jsをロードしたhtml)のレイヤー選択UIを通してwindowに設置されたiframe中に呼び出されます。

詳細は[[#レイヤー固有のUI]] を参照してください。



　

====例====
以下に、いくつかのこのような動的な地図コンテンツの例を示しましょう。
;検索によって表示スタイルを変更する機能を持ったレイヤー
: 例えばコンビニエンスストアのＰＯＩレイヤーを表示したとして、そのメタデータを読み取り、検索条件に基づいて（例えば深夜営業している店舗）の表示スタイルを変更するような検索機能を実装したレイヤー　メタデータは書くレイヤーごとに独特の値を持つため、その検索ロジックはレイヤーに固有のものとなることがあります。このケースではそのような機能をレイヤーに組み込むことを可能にします。
;CSVデータなどのレガシーな非SVGデータをHXRで取得し、ブラウザ上でSVG DOMツリーを生成するようなSVG地図コンテンツ。
: このケースでは、サーバからクライアントに送信されるデータの実体はSVG形式の地図データではなく、CSVなどのレガシーなデータです。SVG地図コンテンツには、CSVデータをSVGとして描画するためのデータ読み込み・解読・SVG DOMツリー生成機構を備えたjavascriptコードが含まれます。また、これよりはモダンなgeoJsonやKML等のデータをSVG DOMに変換することも容易に可能でしょう。これをより簡単に実現するためのライブラリも[[#svgMapGIStool.で呼び出せるAPI|svgMapGIStool]]に準備されています。
;タイリングされた地図コンテンツ
: それは、たとえば[https://wiki.openstreetmap.org/wiki/Tiles OpenStreepMapのTile Server]や、[https://en.wikipedia.org/wiki/Tile_Map_ServiceTileMap Tile Map Service]のような、特定のロジックによる数列のような法則性を持ったピラミッド状の地図タイルリソースをタイリングする地図コンテンツのことです。
: 更新されたSVGMapでは、地図コンテンツに内蔵されたjavascriptによるアプリケーションロジックとしてそれらを取り扱うことができます。タイリング規則をそのままウェブアプリケーションとしてで書き下し、スケールやビューポートに応じて適切なタイリング(配置)を行うSVG DOMツリーを生成するSVG地図コンテンツが構築できます。

=====タイリングに関するノート=====
[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html svgMapにおけるタイリング]は従来の地図フレームワークより柔軟で汎用的な概念に基づいています。
openLayersやleafletなどの従来の地図フレームワークでは、このようなタイリング機能は特定の固定的なタイリングロジックとパラメータを伴った機能として地図フレームワーク本体にハードコードされて提供されてきました。さらには地図フレームワークがこれらのタイリングロジックに強く依存したアーキテクチャを持っていました。一方、これらのロジックにはさまざまなバリエーションや最適化のための調整パラメータが存在し、これまで長らくその互換性や相互運用、更には効率の問題を抱えてきました。次のリンクでその多くの議論や多様な提案を参照できるでしょう。[https://wiki.osgeo.org/wiki/Tile_Map_Service_Specification TMSspecs@osgeowiki], [https://wiki.osgeo.org/wiki/Category:Tiling tiling@osgeowiki]
ベクターデータのタイリングにおいては、これらの課題はさらに増幅され、いまだ手法は確立していないといっても良いでしょう。たとえば、我々の研究では、Quad Tree Composite Tiling([https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-in-english スライド]、、[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html ペーパー])のような用途によってはもっと優れたタイリングの手法も見いだされています。

一方、これらのロジックはその多様なバリエーションを含め、javascriptによるプログラムコードとしては容易に記述可能です。多くの場合わずか数十行のロジックで記述できるでしょう。この程度のコードで多くのタイリングの手法が包含できるのであれば、特定のタイリング手法をフレームワークのコアに内包する・さらにはこれら特定のタイリングの手法にコアが依存する必要はなく、先述のウェブアプリケーションによる動的な地図レイヤーとして実装すれば良いであろうというのがSVGMapにおけるタイリング扱いです。3DマップのフレームワークであるCesiumはこれに似たタイリングポリシーを持っているようです。

=====SVG以外のデータサポートに関するノート=====
前章に記載した方針と同様、他の地図表示フレームワークと異なりSVGMapではSVGとして規定されたコンテンツ(もちろんビットイメージの埋め込みは可能)以外のネイティブサポートは行いません。例えばgeoJsonやKML, WKTなど地図業界でしばしば用いられるデータをSVGMapで表示したい場合は、変換ルーチンを埋め込んだ動的な地図コンテンツ（webAppレイヤー）としてそれらを扱います。SVGMap.jsの拡張モジュールである[[#svgMapGIStool.で呼び出せるAPI|SVGMapGIS.js]]には、これらのデータをwebAppsで読み込みSVGに変換するためのAPIがあります。

===トポロジースイート(地理空間情報処理)===
Rev.13で拡張

SVGMapLevel0.1 Revision 13以降では、SVGMapコンテンツに対してトポロジー演算機能(地理空間情報処理機能)を適用する拡張フレームワークが提供されます。この機能を用いるにはSVGMapLevel0.1フレームワークに加えて、拡張フレームワーク(SVGMapLv0.1_GIS_r*.js)をロードする必要があります。このフレームワークでは、[[#svgMapGIStool.で呼び出せるAPI|拡張されたAPI]]が利用可能です。フレームワークに内蔵された基本的な演算機能に加え、geoJSONと整合するインターフェースを備え、[https://github.com/bjornharrtell/jsts jsts]を組み込み、より高度な機能を実装するための機構も持ちます。

この機能を用いると、特定のレイヤーに登録されているポリゴンの範囲に入っている、特定のレイヤーのポイントをフィルタリングして表示の色を変更する。といったことが可能です。ただし、これらはすべてすでにブラウザ上にロードされている限られた量のコンテンツの中での演算に限定されます。もしもサーバ上にしかないデータに対してこれらの演算を試みたい場合、従来通りサーバサイド技術によってそれは実現すべきです。

また、主題情報を含むウェブマップコンテンツの多くのレイヤーがラスタータイルによって提供されているという現状を考慮し、このスイートはラスターレイヤーをカバレッジとして扱った空間情報処理を行う機能の実装も進められています。現在のところ、カバレッジとポイントとの間での演算が可能です。また、そのために便利なカラーピッカー等の付加的な機能の実装も進められています。

===オーサリングシステム===
Rev.14で拡張

SVGMapLevel0.1 Revision 14以降では、SVGMapコンテンツを編集するツール機能が実装された拡張フレームワークが提供されます。[[#svgMapAuthoringTool.で呼び出せるAPI|フレームワークが提供するAPI]]を使って、オーサリング機能を持ったレイヤーを作ることが可能です。コンテンツは、SVG DOMとして構築されます。なお編集したオブジェクトを保存したり登録するためには別のサービスやアプリケーションの開発が必要です。

===3D可視化システム===
Rev.15で拡張

[https://cesiumjs.org/ Cesium.js]を用いて、SVGMap.jsが表示できるすべてのコンテンツを3D可視化するシステムです。詳細解説はTBD ([[#svgMapCesiumWrapper.で呼び出せるAPI|フレームワークが提供するAPI]])

===プログレッシブウェブアプリケーション===
Rev.16で拡張

[https://developer.mozilla.org/docs/Web/Progressive_web_apps Progressive Web Apps]をサポートしたブラウザにおいて、SVGMap.jsをオフラインでも利用可能にする拡張機能です。詳細解説はTBD ([[#svgMapPWA.で呼び出せるAPI|フレームワークが提供するAPI]])

===SVGMapコンテンツのバックエンドソフトウェア (参考)===
本解説書は主にコンテンツ形式とユーザーエージェント側のソフトウェアについて解説していますが、サーバ・バックエンド側についてもここで少し言及します。

shapefileやcsvなどから、静的なSVGMapコンテンツを生成するためのソフトウェアが[https://github.com/svgmap/svgMapTools オープンソース]で準備されています。これらのソフトウェアでは、[[#タイリングに関するノート|高度なタイリング手法]]を用いた地図タイルを生成することができます。使用方法などは同リポジトリに用意されているチュートリアルを参照してください。

一方、もちろんSVGMapの仕様に準拠すれば、これらのソフトウェアに頼らず、自由にバックエンドを構築することができます。例えばよく知られた地図タイルサービスを用いたり、古典的な[https://wiki.openstreetmap.org/wiki/Web_feature_service WFS ]や[https://wiki.openstreetmap.org/wiki/WMS WMS]のような動的地図・地理空間情報サービスをベースにして比較的容易にそれらを構築することもできます。[https://github.com/svgmap/svgMapLv0.1/tree/master/appLayers SVGMap.jsのリポジトリのappLayersディレクトリ]にはそのようなシステムを構築する際のフロントエンド側の動的レイヤーのサンプルが掲載されています。

==第二章：SVGMap Revsion 0.1フレームワーク==
SVGMapは究極的には既存のすべてのウェブブラウザがネイティブの機能としてそれを備えることを目標とし、既存のHTML,CSS,SVGなどのウェブブラウザの標準規格との整合性を備え、且つ既存のWeb Mappingの規格との整合性をも備えた仕様として検討と標準化を進めています。しかし今のところまだその標準化は完遂されていないため、その完全な実装がなされたウェブブラウザは存在しません。一方、既存のウェブブザでSVGMapの機能が実行可能となるような拡張をJavascriptによるフレームワークとして構築することが可能です。SVGMap Revision 0.1フレームワークは、このようなJavascriptによるSVGMapの仕様に基づいた初歩的な制限と拡張がされた実装です。その実装はオープンソースとして[https://github.com/svgmap/svgMapLv0.1 こちらのgitubリポジトリ]で公開されています。

そのアーキテクチャの特徴は、ブラウザネイティブのSVGレンダラーを使用せず、HTML,CSS,HTMLCanvas2DAPIを用いてSVGMapが実装されている点です。この特徴は主にこのフレームワークの開発が開始された時期に起因しています。当時のウェブブラウザの多くはSVGが実装されていませんでした。また実装されていたとしても、大規模なベクトルデータのレンダリング、および伸縮スクロール・インタラクティブな操作に対する性能面での処理制御に問題がありました。これらの問題のいくつかは現在のブラウザで解消されているものがあるかもしれません。またこれらの問題の解決とともに、SVGMapフレームワークはLevel番号を上げつつよりネイティブの機能に基づいた実装に移行するかもしれません。<font size="-2">参考までに、[http://svg2.mbsrv.net/devinfo/devkddi/lvl0.5/ 実験的なネイティブのレンダラを用いた実装(2010年)]があります。</font>

SVGのベクトル描画機能は[https://github.com/canvg/canvg canvg]のpathパーサなどを引用することで実装されています。一方、地図としてあまり用いられないと想定された多くの要素やプロパティ、アトリビュートの実装が省略されています。

===追加・拡張された機能：===
====フレームワークの呼び出し====
本フレームワークを用いる場合、SVGMapコンテンツをブラウザに直接読み込ませることはできません。フレームワークを動作させるjavascriptライブラリをロードしたhtmlコンテンツ(WebApps)を準備し、そこでSVGMapコンテンツを読み込み表示させます。利用者には、このhtmlコンテンツのURLを告知します。このhtmlコンテンツを以降'''ルートhtml文書'''と呼ぶことにします。

SVGMapのフレームワークはgithubリポジトリ：https://github.com/svgmap/svgmapjs　で公開されています。

htmlコンテンツの<body>要素直下に以下の要素を配置します。
=====フレームワークを実装したjavascriptライブラリを読み込むscript要素=====
これがSVGMap.jsのコアのフレームワークを構成します。

<nowiki><script type="module">
import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

上のスクリプトで必要なモジュールが読み込まれます。[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]のwindowのメンバには、svgMapオブジェクトを設定しています。

[https://svgmap.org/devinfo/devkddi/tutorials/tutorial5_esm/tutorial5.html 実働サンプル(tutorial5_esm)]

もしくは https://github.com/svgmap/svgmapjs の内容を独自のウェブホストにコピーしそれを用いることもできます。(下の例は[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]のhtmlに対して、svgmapサブディレクトリにjsを置いた場合)
<nowiki><script type="module">
import { svgMap } from './svgmapjs/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

===== GISモジュールを利用する場合 =====
svgMap.jsの地理空間演算機能(GISモジュール)では、jsts.jsを使用しています。そのためGISモジュールを機能させるにはjsts.jsの読み込みが必要です。下記のようになります。もちろん独自のウェブホストにjstsをコピーしてそれを利用することも可能です。

<nowiki><script type="text/javascript" src="https://unpkg.com/jsts@1.6.1/dist/jsts.min.js"></script>
<script type="module">
import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

======本解説書でAPIを説明している、現在利用可能な拡張フレームワーク======
ECMA Script Module対応の内容に現在更新中

* [[#svgMapCesiumWrapper.で呼び出せるAPI|SVGMapLv0.1_CesiumWrapper_r*.js]] (実験的)
** https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/experimental/Cesium3D/SVGMapLv0.1_CesiumWrapper_r3.js
* [[#svgMapPWA.で呼び出せるAPI|SVGMapLv0.1_PWA_r*.js]] (実験的)
** https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/experimental/PWA/SVGMapLv0.1_PWA_r5.js

まだ実験的なsvgMapCesiumWrapperは、[http://www.svgmap.org/devinfo/devkddi/lvl0.1/cesiumSvgMap/top.html svgMap cesium visualizer]ページを参照ください。
SVGMapPWA(ProgressiveWebApp)については、[https://svgmap.org/devinfo/devkddi/lvl0.1/svgMapPWA/ SVGMap PWA Test]ページを参照ください。

=====SVGMapコンテンツを配置するためのdiv要素=====
id属性に"mapcanvas"を設定し、data-src属性(もしくはtitle属性(to be obsoluted))には、地図フレームワークが最初に読み込む、SVGMap.jsが表示する地図コンテンツの起点となるSVGコンテンツ（以降'''コンテナsvgコンテンツ'''と呼びます）のパスを指定したdiv要素を設置します。

コンテナsvgコンテンツはまた、'''[[#レイヤー|ここで記述するレイヤー]]'''を持つことができる特別のコンテンツです。

（要確認：地図のサイズ・配置はこのdiv要素のサイズとなります。無指定の場合は全ウィンドサイズ）
<nowiki><div id="mapcanvas" title="Container.svg"></div></nowiki>

<nowiki><div id="mapcanvas" data-src="Container.svg"></div></nowiki>

======差分データの指定======
data-custom-layers-root属性でContainer.svgに対するレイヤーの差分情報のパスを指定することができます。
もしくは、data-custom-layers-root属性に、レイヤーの差分情報が保管されているディレクトリを記述した場合、URLハッシュで差分ファイルを指定することもできます。
差分データは、[https://github.com/svgmap/svgmapjs/blob/main/SVGMapCustomLayersManager_r3module.html カスタムレイヤーマネージャ]で作成することが可能。（データ形式は後述）
<nowiki><div id="mapcanvas" data-src="Container.svg" data-custom-layers-root="./containerDif/dif0.json"></div></nowiki>

=====地図中心の照準イメージ。=====
参照する画像はあらかじめ用意されたもの以外も利用できます。
<nowiki><img id="centerSight" style="opacity:0.5" src="Xcursor.png" width="15" height="15"/></nowiki>

====任意で設置できる要素：====
=====[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]](後述)を設置するdiv要素=====
<nowiki><div id="layerList" style="left :30px; top: 10px; width:300px;height:90%; position: absolute; "></div></nowiki>
: idが上記の通りである必要があります。
　 styleは任意だが、heightは[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]が展開された状態におけるサイズとなります。格納された状態のサイズは、この要素における文字の縦幅となります。各種オプションについては[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|詳細を参照ください]]
　

=====[[#レイヤー固有のUI|レイヤー固有のUI]](後述)を設置するdiv要素=====
[[#レイヤー固有のUI|レイヤー固有のUI]]を使用するために設置するdiv要素です。

<nowiki><div id="layerSpecificUI" style="right :10px; top: 40px; width:400px;height:400px; position: absolute; background-color: white;opacity:0.8;display:none;"></nowiki>
<nowiki></div></nowiki>
: idが上記の通りである必要があります。styleは任意だが、heightはレイヤリストUIが展開され得る最大のサイズとなります。
　
=====伸縮ボタン=====
<nowiki><img id="zoomupButton" style="left: 5px; top: 5px; position: absolute;" src="zoomup.png" onclick="svgMap.zoomup()" width="20" height="20" /></nowiki>
<nowiki><img id="zoomdownButton" style="left: 5px; top: 25px; position: absolute;" src="zoomdown.png" onclick="svgMap.zoomdown()" width="20" height="20" /></nowiki>
: img要素かつidが上記の値である必要があります。
　伸縮ボタンを一回押すたびに伸縮する比率は、別途svgMap.setZoomRatio(ratio)で設定可能。
　デフォルトの比率はsqrt(3)
　
=====測位ボタン=====
<nowiki><img id="gpsButton" style="left: 5px; top: 45px; position: absolute;" src="gps.png" onclick="svgMap.gps()" width="20" height="20" /></nowiki>
: img要素かつidが上記の値である必要があります。ボタン押下で測位し、測位点を中心にして地図を表示する機能。表示の範囲は測位制度に応じて適当に設置されます。

=====グローバルメッセージ=====
レイヤー固有UIが任意のメッセージを出力可能にするために設置するエリア　[[#レイヤー固有のUI]]のAPI '''putGlobalMessage''' 参照
<nowiki><span id="globalMessage" style="font-size:10px;left:5px;bottom:16px;position:absolute;"></span></nowiki>
: idが上記の値である必要があります。
　styleは任意

=====地図中心の緯度経度値表示=====
<nowiki><font id="centerPos" size="-2" color="brown" style="left: 50px; bottom: 5px; position: absolute;" ></font></nowiki>
: idが上記の値である必要があります。
　styleは任意

=====地図スケールの表示=====
<nowiki><font id="vScale" size="-2" color="black" style="left: 5px; bottom: 28px; position: absolute;">-</font></nowiki>
: idが上記の値である必要があります。
: styleは任意
: 縦50pxに対応したスケール[Km]を表示します
: 近傍に縦50pxのスケールイメージを設置するとわかりやすいでしょう

=====レジューム機能のためのチェックボックス=====
<nowiki><form style="right:10px;top:20px;position:absolute;opacity:0.8" ></nowiki>
<nowiki><input type="checkBox" id="resumeBox" onChange="svgMap.resumeToggle(event)" autocomplete="off"/></nowiki>
<nowiki><label for="resumeBox"/>Keep and Resume view</label></nowiki>
<nowiki></form></nowiki>
: checkboxタイプのform要素であり、idが上記の通りである必要があります。レジューム機能とは、(rev16以前ではcookie、rev17以降ではlocalStorage)を用いて、前回最後に表示された状態（レイヤーの表示非表示状態、表示領域（view port）を再現する機能です。スタイルおよびlabel要素は任意

===== [[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]のためのスタイル=====
<style>
body {
font-family: Meiryo;
}
#layerTable{
background:#ffE0E0;
border: 2px solid #bbb;
}
.layerItem{
background-color: white;
}
.noGroup{
background-color: #fff0f0;
}
#layerList{
background-color: #ffff80;opacity:0.8;
}
</style>
====== [[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]を用いる場合、例えば上記のようなスタイルの定義が必要です。======
* layerList：レイヤーリストUI全体に対するスタイル
* layerTable：レイヤーリストUIの中のテーブルに対するスタイル。
* layerItem：同テーブルに表示される個々のレイヤー表示に対するスタイル
* noGroup：同レイヤー表示のうち、グループに属さないレイヤーに対するスタイル
　

====レイヤー====
SVGMapは古典的な地図情報システムのようなレイヤーの概念を備えていません。一方その上位概念ともみなせる、任意のドキュメントをツリー状に埋め込む機能を備えています。しかしそれでは古典的なユースケースを平易に表現しているとはいえないため、それをラップする古典的なレイヤーの概念と、それに基づくレイヤーユーザインターフェースのフレームワークを持ちます。

フレームワークが最初に読み込む地図コンテンツの起点となる'''[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]'''の中で、animationもしくはiframeを用いて（準拠規格に依る）埋め込まれるsvgコンテンツが、自動的にレイヤーとみなされます。いうまでもなくレイヤーの上下順はSVGコンテンツのスクリプト中での埋め込みの順番の逆順になります。

また、このコンテナsvgコンテンツが参照し埋め込んでいる、各レイヤーのSVGコンテンツのことを、'''[[#レイヤー|レイヤーsvgコンテンツ]]'''と呼ぶこととします。ここで、各[[#レイヤー|レイヤーsvgコンテンツ]]はさらに別のsvgコンテンツを埋め込むことがあります。これらのコンテンツはよくサブレイヤーSVGコンテンツもしくは単にサブレイヤーと呼ばれることもあります。

なお、Rev12以降のSVGMapLv0.1フレームワークではレイヤーフレームワークは本体と独立した実装となり、拡張や切り離しが可能となりました。以下は、標準で提供されるレイヤーフレームワークのVer2 (SVGMapLv0.1_LayerUI2_r*.js)に関して解説します。

レイヤーUIフレームワークが提供するUIは、先述のレイヤーリストUIを設置するdiv要素によって提供されます。このUIは以下の機能を持ちます。
* 折り畳み可能なレイヤーの一覧を表示する機能
* 各レイヤーの表示非表示を切り替える機能
* グルーピングされたレイヤー(後述)をグループとして表現、折り畳み、一括表示非表示する機能。
* そのレイヤーに紐づけられた[[#レイヤー固有のUI]]を出現させる機能。
* 表示されているレイヤーの個数などの情報を表示する機能

===== コンテナsvgコンテンツの記述内容とレイヤーフレームワークの振る舞い =====
* animation要素：　レイヤーとみなされる
** title属性: レイヤーの名称となる。(必須属性) title属性値は他のレイヤーと重複してはならない(ID(このコンテンツ内でのレイヤーの識別子)として振る舞う)
** xlink:href属性: レイヤーsvgコンテンツへの参照
** visibility属性 : レイヤーの初期の表示状態。UIにより変更できる (hidden or visible)
** opacity属性 : レイヤーの透明度
** x,y,width,height属性の振る舞いは共通(viewportがこの属性の値とintersectしていただロードされる)
** class属性: スペース区切りで規定値(複数)と任意値(一つ)を記述できる
*** 詳細は後述の[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供]]を参照
** data-controller属性: (Optional) [[#レイヤー固有のUI]]　の　[[#詳細]]参照
* globalCoordinateSystem要素：(1個つだけ必須要素)
** (コンテナsvgコンテンツにおける)本要素が、このフレームワークによってUser Agentに表示される地図の図法を規定する。
*** なお、それ以外のSVGコンテンツのglobalCoordinateSystem要素は、コンテナsvgコンテンツの図法への変換のために用いられる
*** より詳細は[[#地理座標系の処理]]を参照
* svg要素: (documentRoot要素)
** viewBox属性: 初期の表示範囲を指定。
*** ここに記述する座標値は、SVGの仕様に準ずるが、　拡張記述形式も使用可能　参照：[[#メルカトル図法のドキュメントルート要素のviewBox属性]]

===== レイヤーsvgコンテンツ =====
レイヤーsvgコンテンツは、[[#レイヤー固有のUI|レイヤー固有のUI]]を紐づけることができます。

====クリッカブルオブジェクト====
グラフィックスオブジェクトをクリック（タブレットの場合は、タップもしくは照準アイコンに合わせたうえでタップ）することでそれに紐づけられたインタラクティブ動作を実行する。インタラクティブ動作はフレームワークが独自に提供する、metadataフレームワークに基づく、メタデータの表示機能を対象とします。

なお、image要素(useによって間接的に設置されたimage要素を含む)は、a要素によるハイパーリンクが加えて実装されています。metadaとa要素の双方が設定されているimage要素では、どちらのインタラクティビティを発動させるかをモーダルダイアログによるユーザへの問い合わせが行われます。

====class属性によるレイヤーのグルーピング・クリッカブル機能の提供====
コンテナsvgコンテンツが参照するレイヤー（[[#レイヤー|レイヤーsvgコンテンツ]]）へのリンクを記述する要素(animationもしくはiframe要素)は、class属性によって、各レイヤーに特性を与えることができます。classはスペース区切りで複数指定することができますが、グループ名は一つしか認識されません。
;グルーピング
: 以下の属性値以外の値を記述すると、グループ名として認識され、同じグループ名を持ったレイヤーたちをグルーピングすることができます。グルーピングの効果はレイヤーＵＩにおけるグループ表現と、下記のbatch,switch特性です。グループはレイヤーリストUI上の表現に反映されます。最初に現れたグループ名がこのUIの下に表示されます。ただし地図画面上の描画の順番はこれとは別、SVGの基本的な描画順([https://www.w3.org/TR/SVG11/render.html#PaintersModel Painter Model])に準じます。
;batch
: グルーピングとともに使用します。そのグループに属するレイヤーを一括で表示非表示するための機能がレイヤーＵＩに付加されます。
;switch
: グルーピングとともに使用します。そのグループに属するレイヤーは、どれか一つしか表示されません。batchとの併存はできません。（無視されます（要確認））
;clickable
: Pathなどのベクトル図形要素はデフォルトではインタラクティビティが提供されません。クラス値にclickableを指定することでこのレイヤー（子供のsvgコンテンツを含む）の図形要素においてのみ、インタラクティビティが提供されます。提供されるインタラクティビティは、マウスによって図形をクリックしたとき、そのグラフィックス要素がクリッカブルな要因を備えているかどうかを検索し、備えている場合それに対応するアクションを起こします。
　なお、image要素(useによって間接的に設置されたimage要素を含む)は、このクラスの設定に依らず、a要素によるハイパーリンク、およびmetadataフレームワークを用いたクリッカブルオブジェクトとして機能します。
;editable
: 当該レイヤの[[#レイヤー固有のUI|レイヤー固有UI]]に[[#svgMapAuthoringTool.で呼び出せるAPI|svgMapAuthoringTool]]の図形編集オブジェクトを設置する場合、それを有効に機能させるためにはこの属性が必要です。(なお再編集機能を有効にするにはclickableも必要)

====data-nocache====
コンテナsvgコンテンツが参照するレイヤー（[[#レイヤー|レイヤーsvgコンテンツ]]）へのリンクを記述する要素(animationもしくはiframe要素)に、data-nocache属性をつけることによって、クライアントのコンテンツキャッシュを無効にすることができます。なお、無効化手段はunix-timeクエリパートをそのレイヤー下のすべてのリソースへのアクセスに付加させることによります。

====metadataフレームワーク====
データ格納効率に優れたメタデータのフレームワークが提供されます。このメタデータは先述のクリッカブルオブジェクトとしてインタラクティビティの実装に用いられます。 svgドキュメントルート要素のproperty属性にメタデータの属性名をカンマ区切りで列挙。同文書の図形要素のproperty属性に同じ順序でメタデータの値を記述します。(なお、xlink:title属性でマウスオーバーで機能する吹き出しを設置できます)

ひとつの文書に対して一つのスキーマ（メタデータの属性名とその順番）しか与えられないという制約を持ちます。（その代わり格納効率が高い）クリックやタッチ等によってデフォルトの状態ではブラウザが備えるモーダルダイアログに属性名と属性値がそれぞれ列挙された形で表示されます。metadata表示機能の拡張/カスタマイズについては、ウェブアプリケーションの開発の章で別途解説する'''setShowPoiProperty()'''関数を参照してください。

データ自体にカンマが含まれる場合はエスケープが必要です。

=====例：=====
<svg '''property="id,type,latitude,longitude,title,address,spec"''' ... >
...
<use transform="ref(svg,14118.37511,-4524.39994)" x="0" y="0" xlink:href="#syl8"
'''content="RIS/RJER,地方管理,45.2439994,141.1837511,利尻空港,北海道利尻郡利尻富
士町,1800×45(07/25)"''' xlink:title="利尻空港"/>
...
</svg>

====レイヤーリストUIの詳細====
[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.28.E5.BE.8C.E8.BF.B0.29.E3.82.92.E8.A8.AD.E7.BD.AE.E3.81.99.E3.82.8Bdiv.E8.A6.81.E7.B4.A0|レイヤーリストUIが設置されるdiv要素]]には、以下のプロパティを設定することで、UIの動作を調整するパラメータを与えることができます
* data-customizer [https://github.com/svgmap/svgmapjs/blob/main/SVGMapCustomLayersManager_r3module.html カスタムレイヤーマネージャ]の起動ボタンを設置し、プロパティ値で同ウェブアプリのパスを指定します。
* data-layerstylecontroller 各レイヤーの表示スタイルを調整するUIを設置します(値不要)
* data-hiddenfilter 表示されていないレイヤーをレイヤーリストUI上でも非表示にする機能を稼働させます(値不要)
* data-opened svgMapウェブアプリが起動した直後にレイヤーリストが開かれた状態にします
* data-fixed レイヤーリストが開かれた状態且つ閉じるボタンを表示させません(data-openedと排他)

===動作の制限・差異===
====再描画の制限====
* ブラウザネイティブのSVG描画機能に対して注意すべき点として、このSVGDOMの描画は、基本的に伸縮スクロールのタイミングでしか行われない点です。（ネイティブのSVG描画機能は60fpsで再描画する努力を行っている) そのため、再描画タイミングを意識・明示([[#refreshScreen|refreshScreen]]関数を使用)したアプリケーションの構築が必要になるケースがあります。
*関連情報
**[[内部機構解説#Zoom.2FPan_Controller:]]
**[[解説書#refreshScreen|refreshScreen]]
**[[解説書#setPreRenderController|setPreRenderController]]
**[[解説書#.E6.8B.A1.E5.BC.B5API|preRenderFunction ]]
**[[解説書#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|動的な地図レイヤー]]
**[[解説書#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|レイヤー固有のUI]]
**[[解説書#.E6.8B.A1.E5.BC.B5.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88|拡張イベント]]

===実装されている機能===
多くの機能が実装されていないため、実装されている機能、および拡張された機能をここでは列挙することとします。
====要素====
*path
*globalCoordinateSystem
*circle
*text
*defs
*animation
** 別のsvgコンテンツを取得して埋め込みます。
** コンテナsvgコンテンツで使用した場合は埋め込んだコンテンツは「レイヤー」と見做されます。
** それ以外で使用した場合はタイルやサブレイヤーとして使用できます。
** x,y,width,height属性は、SVGの仕様に基づき埋め込むコンテンツのtransformに影響を与えるとともに、下記の通り動的なコンテンツの読み込み機構が制御されます。
*** この属性で示された領域がtransform後のviewportと交差・包含した場合、その埋め込みコンテンツは動的に取得され表示されます。lazy loadの機構に相当し、タイリングメカニズムを構成します。
*** ただし、visible-min-zoom およびvisible-max-zoom属性で示された拡大率による表示条件を満たしていない場合は取得されません。level of detailの機構に相当します。（x.y,width,height属性と組み合わせることで、タイルピラミッド（ラスター、ベクターを含む）機構を実現します。詳しくは[http://kikakurui.com/x7/X7197-2012-01.html JISX.7197]、[https://www.w3.org/Submission/2011/04/ Tiling and Layering Moduleサブミッション]、もしくは[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html こちらの論文]を参照
** commonQuery属性：[[#レイヤーsvgコンテンツ]]のanimation要素でこの属性を設置すると、そのレイヤーのコンテンツを取得するすべてのGETリクエストのクエリパートにこの属性で設定した値が共通付加されます。(もしKey=Valueの形のクエリを追加したい場合は文字列として"Key="の部分も含めてこの属性値に設定します。)
*iframe
** animationと同等
*image
** 別のビットイメージコンテンツを取得して埋め込みます。
** animation属性のx,y,width,height属性と同様の追加のlazy loadの振る舞いを持ちます。
** visible-min-zoom およびvisible-max-zoom属性の振る舞いも同等です。
** xlink:href属性はspatial fragment をサポートし、(xywhによっ参照されるimageの部分を埋め込む機能をサポートします。)。もしもアスペクト比が異なった場合（ＴＢＤ）
** style:filterプロパティによる画像処理をサポートします。
** data-mercator-tile="true"　属性が設定されている場合、そのビットイメージはメルカトル図法で描画されていることを示します。
** htmlのimg要素のcrossoriginに対応する属性を持つことができます（この場合ビットイメージの埋め込みに際しoriginヘッダが送信）
*view

====属性====
*<code>ref(svg,x,y)</code> ：SVG1.2Tの[https://www.w3.org/TR/SVGTiny12/single-page.html#coords-transform-ref TransformRef]属性により、non-scaling objectが設置できます。Pointフィーチャの可視化に効果的です。　

'''TBD'''
*fill
*stroke
*arrow
*dasharray
*viewvox
*opacity
*style
**image-rendering : pixelated / image要素
**fill
**stroke
**opacity
*meta
**http-equiv="refresh" : [[#レイヤー|レイヤーsvgコンテンツ]]のみ。contentに秒数を設定することで、そのレイヤーを指定秒数ごとに(再読み込み)更新する。script要素はonloadが再実行される。　注：ブラウザのキャッシュが効く可能性を考慮して実装する必要がある。

==第三章：ウェブアプリケーションの開発==
本章はSVGMap Revsion 0.1フレームワークを用いたウェブアプリケーションの開発について解説します。
本フレームワークによる開発部分は以下に分類されます。
*[[#フレームワークの呼び出し|ルートhtml文書]]によるウェブアプリケーション(SVGMapフレームワーク)
* 動的な地図レイヤー(Layers as WebApps) : SVGコンテンツに以下のいずれかの情報を設定する
** [[#レイヤー|レイヤーsvgコンテンツ]]のドキュメントルート要素のdata-controller属性　[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|レイヤー固有のUI]]
** svgドキュメントに設置されたscript要素 [[#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|script要素による動的な地図レイヤー]]

===SVGMapフレームワーク===
[[#フレームワークの呼び出し|ルートhtml文書]]によるウェブアプリケーションはSVGMapLv0.1フレームワークを用いたウェブアプリケーションの基本であり、そのhtml文書と底傘参照されたjavascriptライブラリを読み込んだwindowが持つ''''svgMap''''という名前のインスタンスを用いてフレームワークのための拡張機能を利用することができます。

====SVGMapが持つ基幹オブジェクト====
SVGMapLv0.1フレームワークのインスタンス''''svgMap''''が持つ基幹のオブジェクトを解説します。これらの基幹オブジェクトはそれぞれゲッター(getSvgImages, getSvgImagesProps)によって取得できます。
=====svgImages[]=====
[[#getSvgImages|getSvgImages()]]により取得できる。svgImages[hashID]は、現在ローディングされているSVGドキュメント(“XML” DOMツリー(SVG DOMツリーというよりむしろ))が蓄積されているハッシュテーブル
*ハッシュID：フレームワークが任意に付番した文書ID。ただし、最初にロードされるルートのドキュメントのハッシュキーは、”root”
*なお、[[#レイヤー固有のUI]]のwebAppでは、そのレイヤーに該当するSVGドキュメントが[[#svgImage|svgImage]]で取得できる。

=====svgImagesProps[]=====
[[#getSvgImagesProps|getSvgImagesProps()]]によって取得できる。
同、個々のSVGドキュメントが持つ、各種プロパティが蓄積されているハッシュテーブル。
注記がない限り全てReadonly
*ハッシュID： svgImages同様
*なお、[[#レイヤー固有のUI]]のwebAppでは、そのレイヤーに該当するSVGドキュメントが持つ、各種プロパティが[[#svgImageProps|svgImageProps]]で取得できる。
======プロパティリスト======
*.Path コンテンツのパス（webAppsのdocument(html) rootに対する相対パス。Originが違う場合は絶対パス(クエリパートやフラグメント(ハッシュ)も含む)
*.CRS 地理座標からSVG座標に変換するための変換パラメータ
*.script SVG文書がscript要素を持つとき、そのscriptへのインターフェースが登録される。同script要素で生成されるオブジェクトに暗黙に登録されるメンバー変数については、[[#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|script要素による動的な地図レイヤー]]の章を参照
*.editable 編集可能レイヤーを示す　[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供|レイヤーのclass = editableに対応]]
*.editing 編集可能レイヤーを編集中
*.isClickable クリッカブルなレイヤーを示す
** true:設定　[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供|レイヤーのclass = clickableに対応]]
** 以下をメンバーに持つオブジェクト:ハイライト時のスタイルを設定可能(rev18以降)
*** .hilightFillStyle : ポリゴンオブジェクトのハイライト時スタイル（以下のメンバーが無い場合はハイライトしない）
**** .color : 塗りの色 (CSS の color値として解釈される文字列)
**** .lineWidth : 線幅
*** .hilightStrokeStyle : 線オブジェクトのハイライト時スタイル（以下のメンバーが無い場合はハイライトしない）
**** .color : 線の色 (CSS の color値として解釈される文字列)
**** .widthIncrement : 線幅の増加値
*.parentDocId このSVG文書を埋め込んでいる、親のSVG文書のハッシュID
*.childImages[hashID] このSVG文書が読み込んでいる、子のSVG文書(複数)
*.refresh
**.loadScript
**.timeout
**.start
*.controller レイヤー固有のUIへの(web appsのdoc rootに対する)相対パス
*.isSVG2 その文書がSVG2タイプの文書であるかどうか(CRSとembedの仕方がちがう）
*.rootLayer そのSVG文書が属する「レイヤー」を示す文書
*.scale そのSVG文書の現在のスケール。スケールはそのSVG文書の座標系と画面の座標系との間の値（地理座標系ではない）。拡大するとスケール値は大きくなる
*.preRenderControllerFunction そのSVG文書の再描画(画面更新)シーケンスの直前に実行される関数
*.hash そのレイヤーのURLのフラグメント部（この値は、レイヤ固有WebAppで変更が有効）

====利用可能API====
【TBD】 APIのリストは下記の通りです。
=====SVGMap.で呼び出せるAPI=====
======Geo2SVG======
*Geo2SVG( lat , lng , crs ) : 指定された緯度(lat)・経度(lng)・CRSより、SVG座標を計算する
======POIviewSelection======
*POIviewSelection( poi ) : 指定されたPOIの属性・リンクの表示選択画面を表示する。また、選択したイベントに従い、属性の表示または、リンク先のページを表示する。
======SVG2Geo ======
*SVG2Geo ( svgX , svgY , crs , inv ) : 指定されたSVG座標(svgX , svgY)をCRSにより、GEO座標に変換する。または、invにより逆変換する
======addEvent======
*addEvent(elm,listener,fn) : 指定された要素(elm)にイベント属性(listener)時の呼び出す関数(fn)を設定する (addEventListenerが実装されていなかったブラウザサポートの名残です)
======callFunction======
*callFunction( fname ,p1,p2,p3,p4,p5) : 指定した関数(fname)を引数(p1,p2,p3,p4,p5)を渡してフレームワーク内の任意の関数を実行する。(フレームワークの内部関数も呼び出すことができる)
======captureGISgeometries======
*captureGISgeometries( cbFunc , prop1 , prop2 , prop3 , prop4 , prop5 , prop6 , prop7 ): 現在画面上に表示中の地図コンテンツに対応した、GeoJsonのGeometryデータ構造に準拠のGISgeomerry情報をがレイヤ単位でまとまった連想配列の形で取り出す。非同期処理で、cbFuncの最初の引数に返却される。
** 連想配列のハッシュ値：レイヤID
** geomeryには、src(そのジオメトリのもととなっているSVGの図形要素), href(ビットイメージの場合のリンク)が付加される
** geoJsonのgeometryに相当する情報が含まれる（座標は[経度,緯度]）
** display="none"の図形要素は表示されていないとみなされる。また画面外にある図形要素も表示されていないとみなされる。画面に部分的に表示されている要素は表示されているものとみなされるとともにクリッピングも行われない。
** [[#captureGISgeometriesOption|captureGISgeometriesOption]](true)を設定してから実行すると、ビットイメージもジオメトリとして取得する。（ただし実データは含まれないので必要に応じて[[#getImagePixelData|getImagePixelData]]で取得する）
*** type : Coverage
*** src : 画像情報のURL
*** coordinates : transformのb,c==0の場合、当該画像の南西、北東端が設定される
*** transform : b,c!=0の場合の、画像の座標(左上隅を0,0、右下隅が画像のw,h)から地理座標([経度,緯度])への一次座標変換情報(a,b,c,d,e,f)が設定される

======captureGISgeometriesOption======
*captureGISgeometriesOption(BitImageGeometriesCaptureFlg, TreatRectAsPolygonFlg, SkipVectorRenderingFlg, captureAlsoAsBitImage): captureGISgeometriesでキャプチャするデータの取得条件を設定する。
** BitImageGeometriesCaptureFlg: ビットイメージタイルをカバレッジとして取得するか(Default:false)。captureGISgeometriesを呼び出す前に使用する。
*** 2019.5.17アップデートで、transform matrix(非対角要素あり)を持つビットイメージタイルについても必要な情報を得られるようになった。
** TreatRectAsPolygonFlg: rect要素をポリゴンとして扱う(デフォルトは円もrectもPointとして扱われる)
** SkipVectorRenderingFlg: ベクトル図形の描画をスキップする
** captureAlsoAsBitImage: polygon/polylineの図形を描画したビットイメージをレイヤー単位でカバレッジデータとして取得
*captureGISgeometriesOption(captureGISgeometriesOptionObject) : オブジェクトでも設定できる(rev18以降)（以下そのメンバー変数：全て値はboolean）
** .BitImageGeometriesCaptureFlag, .TreatRectAsPolygonFlag, .SkipVectorRendering, .captureAlsoAsBitImage　上と同様

======checkSmartphone======
*checkSmartphone() : タッチに対応したスマホブラウザなのかどうかを判別
======childDocOp======
*childDocOp(func , docHash , param1, param2 , param3 , param4 , param5) : 指定した文書をルートにして、DOM操作をその子文書に対して実行する。なおこれはlinkedDocOpの直系の子供のみ適用版(自身も適用しない)
======dynamicLoad======
*dynamicLoad( docId , parentElem ) : 指定した文書ID(docId)以下の表示に必要な文書を読み込み、指定したdiv要素(parentElem)に表示する
======escape======
*escape(str) : 以下の文字をHTMLエスケープする(&:&amp,":&quot;,':&#039;,<:&lt;,>:&gt;)
======geo2Screen======
*geo2Screen( lat ,lng ) : 地理座標を指定すると、その画面上のキャンバスの座標(px)を返す
======getBBox======
*getBBox( x , y , width , height ) : 指定された値でviewBoxを作成する

======getBasicPermanentLink======
* getBasicPermanentLink(copyLinkTextToClipboard) : 現在の表示状態(レイヤーの表示非表示および表示領域)を反映した基本的なパーマリンクを生成する
** URLオブジェクトが返却される
** copyLinkTextToClipboardがtrue場合、クリップボードにもURLがコピーされる。
** 生成されるURLは、[[#起動URLによるオプション指定]]の仕様に基づく
** 参考：[[#サブレイヤーパーマリンク]]

======getCentralGeoCoorinates======
*getCentralGeoCoorinates() : グローバル変数 rootViewBox,rootCrsから画面中心地理座標を得る
======getConversionMatrixViaGCS======
*getConversionMatrixViaGCS( fromCrs , toCrs ) : 元座標変換行列(fromCrs)から先座標変換行列(toCrs)への変換行列を作成する

======getCORSURL======
* getCORSURL(originalURL, alsoCrossoriginParam) : クロスオリジンアクセス用URLを生成する。([[#setProxyURLFactory|setProxyURLFactory]]の第4,5引数が設定されている場合)
** alsoCrossoriginParam クロスオリジンアクセスに際してoriginヘッダが必要かを取得する(この引数がある場合は.url, .crossorigin メンバを持つオブヘクトが返却される)
** レイヤー固有UIのウェブアプリなどで独自にクロスオリジンアクセスを行ってデータを取得するような場合にプロキシ経由のURLを生成するのに利用できます。
** 参考：[[#.E3.83.97.E3.83.AD.E3.82.AD.E3.82.B7.E3.81.AE.E8.A8.AD.E5.AE.9A|クロスオリジンアクセスのためのプロキシ設定]]

======getDevicePixelRatio======
*getDevicePixelRatio( docId ) : setDevicePixelRatioで設定した値を取得できる。 docIdが指定されなかった場合は全ての値が得られる

======getElementByImageId======
*getElementByImageId( XMLNode , searchId ) : 指定されたSVG文書群ノード(XMLNode)以下の属性iidが指定されたID(searchId)と等しいノードを返す

======getLoadErrorStatistics======
*getLoadErrorStatistics() : 伸縮スクロール、refreshScreenごとの、リソースの読み込み状況を取得する。
**メンバー変数: timeoutBitImagesCount,timeoutSvgDocCount,otherBitImagesCount,otherSvgDocCount

======getGeoViewBox======
*getGeoViewBox() : コンテナsvgのviewBoxをgeo変換したgeoのviewBoxを取得
======getHashByDocPath ======
*getHashByDocPath ( docPath ) : ターゲットのレイヤーのハッシュをPath名(docPath)から探し出す
======getHyperLink======
*getHyperLink( svgNode ) : 指定されたsvg文書(svgNode)から、親文書をたどり最初に取得できたハイパーリンクを取得
======getInverseMatrix======
*getInverseMatrix(matrix) : 逆行列を求める(matrix.a..f)
======getLayer======
*getLayer(layerID_Numb_Title) : [[#getLayerId|layerID]],title,番号,href(URI)のいずれかで、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]SVGDOMにおけるレイヤーの(svg:animation or svg:iframe)要素を取得する。getLayersと似ているが、getLayersのほうは任意のsvg文書(オプションなしではroot container)に対して、内包されるレイヤーのリストを返却。こちらは[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]に対して検索キーに基づいてレイヤーを返却する

======getLayerId======
*getLayerId( layerKey ) : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]における"レイヤ"概念のレイヤidを検索する。検索に用いることができるのは、getLayerと同じtitle,url,もしくはルートレイヤの要素
* layerIDはレイヤー名とは異なる、フレームワークによって任意に附番された、そのSVGMapドキュメントを識別するための文字列。このlayerIDを基に動作するAPIが多くあります。
* [[#レイヤー固有のUI]]　の　[[#layerID]] も参照

======getLayers======
*getLayers( id ) : オプションなしの場合、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーに該当する要素をリストアップし、返却する。オプションアリの場合、そのidを持つ要素を返却
======getLinearTransformMatrix======
*getLinearTransformMatrix(x1i,y1i,x2i,y2i,x3i,y3i,x1o,y1o,x2o,y2o,x3o,y3o) : ３つの基準点の変換前後の座標を与えると、それに適合する1次変換行列が得られる。(*i:変換前の座標, *o:変換後の座標)
======getMapCanvas======
*getMapCanvas() : 地図キャンバスとなる、おおもとのdiv要素の取得
======getMapCanvasSize======
*getMapCanvasSize() : 地図キャンバスのサイズ(画面サイズ)を取得
======getMouseXY======
*getMouseXY( evt ) : 指定されたイベント時のマウスの画面上の座標(px)を返す
======getNonScalingOffset======
*getNonScalingOffset(svgPoiNode) : 拡大縮小しても伸縮しない図形要素のオフセット値を取得する
======getObject======
*getObject( oname ) : 指定されたオブジェクト(oname)を取得
======getPoiPos======
*getPoiPos( svgPoiNode ) : =getNonScalingOffset
======getRoot2Geo======
*getRoot2Geo() : コンテナsvgのCRSの逆変換CRS( rootのsvg - > geo )を取得
======getRootCrs======
*getRootCrs() : コンテナsvgのCRS ( geo->rootのsvg )を取得
======getRootLayersProps======
*getRootLayersProps() : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の(animetion||iframeで構成される)レイヤー情報を取得する。Arrayが返却、並び順はsvgの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]と同じ（最初のレイヤーが一番下。selectメニュー創るときはひっくり返して使うこと）レイヤー情報：名称、表示非常時状態、レイヤーグループ、グループのフィーチャ(バッチ||スイッチ||ふつう)、編集可、編集中、対応SVGドキュメント、個別ユーザインターフェース、個別凡例
======getRootViewBox======
*getRootViewBox() : aspectを加味し実際に開いているコンテナsvgのviewBoxを取得
======getSvgImages======
*getSvgImages() : svg文書群(XML)の連想配列を取得(ハッシュキーは[[#getLayerId|layerID]]("root"以外は"i"+連番))
* (参考:[[#svgImages.5B.5D|svgImages]])

======getSvgImagesProps======
*getSvgImagesProps() : svg文書群のプロパティ( .Path,.CRS,.script,.editable,.editing,.isClickable,.parentDocId,.childImages,.controller)の連想配列を取得(ハッシュキーは[[#getLayerId|layerID]]("root"以外は"i"+連番))
* (参考:[[#svgImagesProps.5B.5D|svgImagesProps]])

======getSvgTarget======
*getSvgTarget( htmlImg ) : html文書中のimg要素(POI)を入力すると、対応するSVG文書の文書番号とその要素(use)が出力される。対応するuse要素を持つsvg文書自体を取得したい場合は.ownerDocumentする。idからhtml文書のimg要素を取得するには、Document.gelElementById(id)
======getSwLayers ======
*getSwLayers ( cat ) : swLayers[クラス名]に、クラス名ごとのレイヤー(のSVG要素)の全リストを構築する。catがある場合は、catの名称を持つもののリストのみを構築する
======getSymbols======
*getSymbols(svgDoc) : POI編集のsymbol選択を可能にするとともに、defsは、useより前に無いといけないという制約を払った
======getTickerMetadata======
*getTickerMetadata() : 現在Tickerが表示されているグラフィックスオブジェクトのメタデータを取得する
======getTransformedBox ======
*getTransformedBox ( inBox , matrix ) : 指定されたviewBox(inBox)を変換行列にてサイズ変更と移動のみでの座標変換する。b=0、c=0の場合のみ利用可能。たとえば、matrixには、svgImagePropsのCRSを設定することで、そのSVGMapコンテンツのSVG座標系でのviewPortが計算できる。このときmatrixは線形変換の係数が含まれたオブジェクトでも良いし、[[#.E5.A4.9A.E6.A7.98.E3.81.AA.E5.9B.B3.E6.B3.95.E3.81.AE.E5.AE.9A.E7.BE.A9.E3.81.A8.E5.88.A9.E7.94.A8|非線形変換のための関数が含まれたオブジェクト]]でも良い。　svgMap.getTransformedBox(svgMap.getGeoViewBox(),svgImageProps.CRS)

======getUaProp======
*getUaProp() : ブラウザの種類(isIE：IEかどうか、isSP：スマートフォンかどうか)を取得する
======getVerticalScreenScale======
*getVerticalScreenScale(screenLength) : 垂直(緯度)方向のscreenLengthに対する長さを取得する(input: px, return : Km)
======getViewBox======
*getViewBox( svgDoc ) : 指定したSVG文書のviewBoxを取得
======gps======
*gps() : ブラウザの測位APIによって測位しその点を中心に表示、表示縮尺は測位精度を元に適当に決定
======gpsCallback======
*gpsCallback(position) : GPS測位が成功した後に実行されるコールバック関数で、positionを中心とした場所を表示させる
======handleResult======
*handleResult( docId , docPath , parentElem , httpRes , parentSvgDocId ) : SVG文書を(docPathから)svg文書群とそのプロパティをHTTPXMLRequest(httpRes)から親文書(parentSvgDocId)の子文書(docId)として読込み、指定されたHTML要素(parentElem)に貼り付ける
======ignoreMapAspect======
*ignoreMapAspect() : 地図のアスペクト比を、rootSVGのviewBox( or hashのviewBox)そのものに設定する
======initLoad======
*initLoad() : load時に"一回だけ"呼ばれる初期化関数
======isIntersect======
*isIntersect( rect1, rect2 ): rect1(x,y,width,height)とrect2が交差(包含も含む)しているかどうかを返却
======linkedDocOp======
*linkedDocOp( func , docHash , param1, param2 , param3 , param4 , param5 ) : 再帰実行のルートになる文書のハッシュ(docHash)以下の子・孫・・・文書に対して、同じ処理(func( docHash , param1, param2 , param3 , param4 , param5 ))を再帰実行する関数
======loadSVG======
*loadSVG( path , id , parentElem , parentSvgDocId) : SVG文書を(pathから)svg文書群とそのプロパティを親文書(parentSvgDocId)の子文書(id)として読込み、指定されたHTML要素(parentElem)に貼り付ける
======matMul======
*matMul( m1 , m2 ) : 行列の積 x',y' = m2(m1(x,y)) = m(x,y) となる変換行列を構築
======numberFormat======
*numberFormat( number , digits ) : 指定された数値(number)を小数点以下第digit+1位を四捨五入した値を取得
======override======
*[OBSOLUTEWD] override( mname , mval ) : グローバルオブジェクトの関数プロパティでmnameという変数にmvalの値を代入する

======panMap======
* panMap( x, y, options ) : 地図をスムースにスクロールさせる
** x,y : パン量デフォルトはpx
** option.unit でパン量のコンテキストを変化できる
*** "%"||"percent"||"ratio" : 地図キャンバスに対する相対値で指定 (%,percentはパーセント, ratioは比率)
*** "canvas" : 地図キャンバス上の指定した座標を地図中心に
*** Note: 地理座標でパンする場所を変えたい場合は[[#geo2Screen]]を併用すると良い

======parseEscapedCsvLine======
*parseEscapedCsvLine(csv) : CSV 1行分文字列データ(csv)をエスケープを考慮して配列にパースする。
======refreshScreen======
*refreshScreen() : 画面の再描画を実行する（[[解説書#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90|参考情報]]）

======registLayerUiSetter======
*registLayerUiSetter( layerUIinitFunc, layerUIupdateFunc ) : レイヤー選択UI初期化関数と更新用関数を設定する
======reLoadLayer======
*reLoadLayer(layerID_Numb_Title) : 指定したレイヤー([[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーのみ。小孫レイヤーはNG)をリロードする
======resumeToggle======
*resumeToggle(evt) : 引数のイベント(evt)ターゲットのチェックボックスのチェック状態により、setResumeを実行する
======screen2Geo======
*screen2Geo( screenX , screenY ) : 画面上の座標(px)を指定すると、その地理座標を返す
======setCenterHitTest======
*setCenterHitTest(enable) : 自動中心ヒットテストの設定を変更するデフォルト:true

======setCursorCenterZooming======
*setCursorCenterZooming(enable) : (カーソル|ピンチ)位置中心ズーム機能を設定するデフォルト:false

======setCustomModal======
*setCustomModal( messageHTML , buttonMessages , callback,callbackParam) : モーダル画面を出現させ、指定されたメッセージ(messageHTML(String)もしくはdomオブジェクト(Object))、指定されたボタン(buttonMessages(Array))を表示する。ボタンが押された場合、コールバック関数(callback)を引数(クリックしたボタンのインデックス, callbackParam)を渡し呼び出す。
messageにHTML Stringだけではなく、DOM objectが使える点、ボタンに対するcallbackを設定できる点。ただしモーダルダイアログになる点が[[#showModal]]と異なる。

======setDefaultHilightStyle======
*setDefaultHilightStyle( style ) : ヒットテストなどによるオブジェクトのハイライト時のスタイルを設定する
* style : {stroke:{color,widthIncrement}, fill:{color,lineWidth,lineColor}}
** stroke : 線オブジェクトに対してハイライト時の色(color)と線幅増分(widthIncrement)
** fill : 塗りつぶしオブジェクトに対してハイライト時の色(color)、輪郭線幅(lineWidth)、輪郭線色(lineColor)

======setDevicePixelRatio======
*setDevicePixelRatio( dpr (, layerId) ) : zoom計算時に用いる(たとえば２にするとzoom値が本来の２分の１になる)変数を指定値(dpr)に設定する。ズームに応じた表示制御(visible*zoom属性等のLevel of Detail機能)に影響を与える。オプションの[[#getLayerId|layerId]]を指定すると、指定したlayerに対して別個の値を設定する。dprにnullを与えると初期値(1)にクリア。

======setGeoCenter======
*setGeoCenter( lat , lng , radius) : 中心地理座標を指定して地図を移動 (radiusは緯度方向の度1≒110Km) lat,lng:必須 radius:オプション(今の縮尺のまま移動)
======setGeoViewPort======
*setGeoViewPort( lat, lng, latSpan , lngSpan , norefresh) : 地理(グローバル)座標系で指定したエリアを包含する最小のviewportを設定する
======setLayerVisibility======
*setLayerVisibility([[#getLayerId|layerID]]_Numb_Title, visivility, [options]) : 指定した[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーの表示非表示を設定し、layerListUIのアップデートも行う
** layerID : String: [[#getLayerId|layerID]]のの文字列
** visivility : Boolean
** options : Object　以下のメンバー変数でオプションの指定が可能
*** .exec : String : 指定したレイヤーがレイヤー固有UIを持つ場合、その起動を指定できます。与えることができる文字列は[[#.E8.A9.B3.E7.B4.B0|data-controllerの起動オプション]]と同じ。
*** .hash : 指定したレイヤーを表示するときにハッシュ値を設定する

======setMapCanvas : ======
*setMapCanvas : ( mc ) : 地図キャンバスとなる、おおもとのdiv要素を指定した要素(mc)に設定
======setMapCanvasCSS======
*setMapCanvasCSS(mc) : マップキャンバスのCSS(postion、overflow、top、left、width、height)を設定
======setMapCanvasSize======
*setMapCanvasSize( mcs ) : 地図キャンバスのサイズを指定したサイズ(mcs)に設定
======setPreRenderController======
*setPreRenderController( layerID, cntFunc ) : 再描画(画面更新)シーケンスの直前に実行する関数(cntFunc)を設定する。　[[#getLayerId|layerID]]が指定されていると、そのIDをもつSVG文書に対して設定する。指定されていない場合は、全てのSVG文書に対して指定した関数が描画前に実行される。cnfFuncが無い場合は設定を解除する。また、cntFuncには再描画前制御の際に必要になるかもしれないいくつかの変数が第一引数にオブジェクトの形で渡される。(docId,scale,actualViewBox,geoViewBox,viewChanged(zoom|scroll|false) なお、SVGMapLayerUI.jsが有効化されている場合、[[#.E6.8B.A1.E5.BC.B5API|レイヤ固有UIのhtml文書中のscript内にpreRenderFunctionという関数]]がある場合、そのレイヤーを指定したsetPreRenderControllerでの関数設定と同じ振る舞いをする。なお、この処理内容は、動的レイヤー(<script>を持つSVGコンテンツ)のonload関数と同じタイミングで呼び出される関数をレイヤ固有UI等に設置できるものと考えると良い。

======setResume======
*setResume( stat ) : レジュームを実行するかどうかを引数(stat)によって設定し、cookieにレイヤー情報を保存する
======setRootLayersProps======
*setRootLayersProps(layerID_Numb_Title, visible , editing , hashOption , removeLayer , execOption ) : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の(animetion||iframeで構成される)レイヤー情報を設定する。[[#getLayerId|layerID]]_Numb_Titleは、レイヤー番号(root svg container内での順番)、[[#getLayerId|layerID]](svg文書のiid = htmlのid = selectのvalue)、タイトル名(不確実-同じ名前があるかもしれない。最初に当たったものを選択)。変化があるとtrueが返却される。
*visible , editingはtrue,false,nullのいずれか。nullの場合、その値を変化させないという意味。もしくは不合理の場合はfalseが返却される。この時classで設定されているレイヤーグループの特性(switch)に基づいた制御がかかる
*hashOption 指定したレイヤーを表示するとき、ハッシュを指定して表示する
*removeLayer 指定したレイヤーを消去する
*execOption レイヤ固有UIを持つレイヤーを表示する場合の起動方法を指定："hiddenOnLayerLoad", "onClick", "appearOnLayerLoad"のいずれか。[[#.E8.A9.B3.E7.B4.B0|詳細はこちらを参照]]

*setLayerVisibilityと異なり、アップデート(refreshScreen())は別途行う必要がある

======setRootViewBox ======
*setRootViewBox ( rvb ) : aspectを加味し実際に開いているコンテナsvgのviewBoxを指定したコンテナsvgのviewBox(rvg)に設定*setShowPoiProperty( func , docId ) : 特定のレイヤー・svg文書(docId)もしくは、全体に対して別のprop.表示関数(func)を指定する。funcが未指定の場合、設定された関数をクリアする。指定した関数は、帰り値がfalseだった場合、デフォルトprop.表示関数を再度呼び出す
======setShowPoiProperty======
*setShowPoiProperty(func , docId ): 特定のレイヤー・svg文書(いずれもdocIDで指定)もしくは、全体に対してPOIをクリックした時の表示関数をセットする
**セットされていないときは内蔵のデフォルト関数が使用される
**docId: セットされていないときはすべてのレイヤの docIdがルートレイヤに対応するものの場合はそのレイヤー下の子孫文書に対しても
**func: コールバック関数
*** funcがセットされいていないときはクリアする
*** funcの第一引数にはクリックされた要素が入る

======setSmoothZoomInterval======
*setSmoothZoomInterval(zoomInterval) : ズームアニメーションの設定(ズームイン／アウト後のタイル読み込み開始タイマー(ms))(Default:20ms)
======setSmoothZoomTransitionTime======
*setSmoothZoomTransitionTime(zoomTransitionTime) : ズームアップ[[#zoomup]]／ダウン[[#zoomdown]]／パン[[#panMap]]時の遷移時間(Default:300ms)

======setSummarizeCanvas======
*setSummarizeCanvas( val ) : 2Dベクトル図形描画用に統合キャンバス(レイヤー単位でのキャンバス統合)の使用有無を設定する。デフォルトは統合する
======setUpdateCenterPos======
*setUpdateCenterPos(func) : 中心座標書き換え関数を指定した関数に設定(デフォルト:id="centerPos"要素の文字列を適当に書き換える)
======setProxyURLFactory======
*setProxyURLFactory( documentURLviaProxyFunction, imageURLviaProxyFunction, imageCrossOriginAnonymous, imageURLviaProxyFunctionForNonlinearTransformation, imageCrossOriginAnonymousForNonlinearTransformation, LaWAfetchviaProxyFunction ): コンテンツの取得をプロキシ経由等にするために、URL(文字列)を書き換える関数を指定する。
** documentURLviaProxyFunction : svgドキュメント用のプロキシ経由のURLを生成する関数をここに設定する。<code>URLviaProxy = documentURLviaProxyFunction(URL)</code>
** imageURLviaProxyFunction : 同ビットイメージ用
** imageCrossOriginAnonymous : ビットイメージのコンテンツ取得に際しcrossorigin = "anonymous"を設定
** imageURLviaProxyFunctionForNonlinearTransformation: ビットイメージへの非線形図法変換専用のプロキシ経由URL生成関数を設定する。
** imageCrossOriginAnonymousForNonlinearTransformation : 同上のコンテンツ取得に際しcrossorigin = "anonymous"を設定
** LaWAfetchviaProxyFunction : [[#レイヤー固有ユーザインターフェース|LaWA]]内のFetch/XHRに対してプロキシ経由URL生成関数を設定する。
** 参考：[[#.E3.83.97.E3.83.AD.E3.82.AD.E3.82.B7.E3.81.AE.E8.A8.AD.E5.AE.9A|クロスオリジンアクセスのためのプロキシ設定]]

======setZoomRatio ======
*setZoomRatio ( ratio ) : zoomUp、zoomDownボタン押下時のズームレシオを指定した値(ratio)に設定する
======showModal======
*showModal( htm , maxW, maxH) : ダイアログ表示フレームワークを呼び出し、指定したhtm文字列を最大maxW,H値の中で表示する。closeボタンはフレームワークで設置される（参考[[#setCustomModal]]）（API名に反して、この関数はモーダルダイアログではない、ダイアログボックスの挙動を取る）
** htm：ダイアログ内に表示するhtmlのソース文字列、もしくはHTML DOM Elementオブジェクト
** maxW, maxH : Optional: ダイアログのサイズ（もしウィンドサイズに収まらない場合は、このサイズを下回ることがある。指定されていない場合はhtmの内容をベースにサイズが変化する


======showPage======
*showPage( hyperLink ) : 指定されたハイパーリンク先のページを表示する。ハッシュだけの場合は viewPort変化をさせる
======showUseProperty======
*showUseProperty( target ) : 指定されたPOI( target )の属性情報を表示する
======transform ======
*transform ( x , y , mat , calcSize , nonScaling) : 指定された座標を変換する。
======updateLayerListUI======
*updateLayerListUI() : レイヤーリストのUIの表示を更新したりレイヤー固有UIを設定したりする
** '''[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のsvgmap文書をDOMで直接編集したり、setRootLayersPropsで操作した場合、この関数を呼ばないとレイヤ固有UIが正しく設定されないなど多くの処理が破綻するので、必ず呼ぶ必要がある。(近い将来refreshScreenで自動的に反映されるようにする予定)'''

======zoomdown======
*zoomdown( ratio ) : 地図をスムースにズームダウン
** ratioはオプション(デフォルトは1.732)

======zoomup======
*zoomup( ratio ) : 地図をスムースにズームアップ
** ratioはオプション(デフォルトは1.732) (デフォルトは[[#setZoomRatio]]で変更可)

=====svgMapAuthoringTool.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_Authoring_r*.jsを用いた場合に使える
======cancelPointingPoiRegister======
* cancelPointingPoiRegister: initPOIregistToolで設置したUIの地図クリック・タッチでの座標入力イベント(click, touchend)をキャンセルする
======clearTools======
*clearTools: オーサリングツールを除去する。
======initGenericTool======
*initGenericTool(targetDiv,poiDocId,cbFunc,cbFuncParam,options): 点、線、多角形（オプションでそれらのバッファ付き）の総合オーサリングツールを初期化する。
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** options: {withBufferedTools,editingStyle,shapeStyle}　その他オプションをオブジェクトで指定(Optional)
*** withBufferedTools: boolean: trueでバッファ付きツールを追加
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルをブジェクトで指定
*** editingStyle: {opacity,strokeWidth,stroke,fill}：編集中の表示スタイルをブジェクトで指定
*** useXlinkTitle: trueでタイトル編集欄付きツール (Pointツールには影響しない)
*** styleEditor: trueでスタイル編集UI追加

======initPOItools======
*initPOItools(targetDiv,poiDocId,cbFunc,cbFuncParam,getPointOnly,returnSvgElement,options)　: 複数のPOIを編集するツールを初期化する (このツールは一個しか設置できない)
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** getPointOnly : ポイントを取得するのみで、その点にuse要素を設置することはしない(Optional)
** returnSvgElement : trueで編集したSVG要素などがコールバック関数に構造化され返却される(Optional)
** options : {bufferOption,editingStyle,shapeStyle}: その他のオプションをオブジェクトで指定(Optional)
*** bufferOption : trueでバッファ付きツール
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルを指定 (buffer指定時に有効)
*** styleEditor: trueでスタイル編集UI追加

======initPOIregistTool======
*initPOIregistTool(targetDiv,poiDocId,poiId,iconId,title,metaData,cbFunc,cbFuncParam,getPointOnly,returnSvgElement): 一個のPOINTオブジェクトの登録ツール・座標入力ツールを初期化する
** initPOItoolsと異なりこちらのツールは複数個設置できる
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** poiId : 登録するPOIのIDを指定
** iconId : 対象文書内のアイコンのIDを指定
** title : アイコンのタイトルを指定
** metaData : アイコンのメタデータ文字列を指定
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** getPointOnly : ポイントを取得するのみで、その点にuse要素を設置することはしない(Optional)
** returnSvgElement : trueで編集したSVG要素などがコールバック関数に構造化され返却される(Optional)
======initPolygonTools======
*initPolygonTools(targetDiv,poiDocId,cbFunc,cbFuncParam,isPolylineMode,options): POLYGONオブジェクトの"編集"ツール新規追加、削除、変更などが可能　ただし一個しか設置できない
** コンテナsvgコンテンツでclickable及びeditableを設定したレイヤーで再編集可能
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
*** 第一引数に成否、第二引数にcbFuncParam が入る。作成したPOIの情報は、SVGDOMから得るか、指定したdiv内に生成されているフォームから得る（少し使いづらいので、今後もう少し便利にするかもしれません）
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** isPolylineMode : ポリゴンではなくポリラインの編集ツールとする
** options : {bufferOption,editingStyle,shapeStyle}: その他のオプションをオブジェクトで指定(Optional)
*** bufferOption : trueでバッファ付きツール
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルを指定
*** editingStyle: {opacity,strokeWidth,stroke,fill}：編集中の表示スタイルを指定
*** useXlinkTitle: trueでタイトル編集欄付きツール
*** styleEditor: trueでスタイル編集UI追加

======setTargetObject======
*setTargetObject: TBD プログラムから編集対象オブジェクトを指示する（ただし編集中レイヤのオブジェクトに限る）
======isEditingGraphicsElement======
*isEditingGraphicsElement: 編集中のオブジェクトがあるかどうかを確認する

=====svgMapGIStool.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_GIS_r*.jsを用いた場合に使える。なお本機能拡張はJSTS([https://unpkg.com/jsts@1.6.1/dist/jsts.min.js jsts.min.js])の読み込みがさらに必要。

====== 参考：JSTS ======
[https://github.com/bjornharrtell/jsts/ JSTS](JavaScript Topology Suite)は、[https://github.com/locationtech/jts JTS](Java Topology Suite)をjavaScriptに移植した地理空間情報処理ライブラリです。地理空間情報の標準に準拠したAPIを備えています。
* [https://github.com/bjornharrtell/jsts JSTSのプロジェクトページ]
* [http://locationtech.github.io/jts/javadoc/ API](JTS用、JSTSもこれに準ずる)
* [https://www.tsusiatsoftware.net/jts/files/JTS_Library_for_Geometry_2011.pdf JTSの機能概要スライド]

====== buildDifference======
* buildDifference( sourceId1, sourceId2, targetId , strokeColor, strokeWidth, fillColor, progrssCallback, getResultAsGeoJsonCallback,getResultAsGeoJsonCallbackParam)
** JSTSのDifferenceを実行
** 引数はbuildIntersectionの該当引数に対応

======buildIntersection======
*buildIntersection( sourceId1, sourceId2, targetId , strokeColor, strokeWidth, fillColor, progrssCallback, addSourceMetadata, getResultAsGeoJsonCallback, getResultAsGeoJsonCallbackParam, options )
** sourceId1とsourceId2のレイヤーに対してJSTSのIntersectionを実行し、結果をtargetIdレイヤーにコンテンツとして出力する。性能はgetIncludedPointsより低いことが多い intersection処理の振る舞いは[https://bjornharrtell.github.io/jsts/ JSTSを参照]
** sourceId1: sourceId1レイヤーのレイヤーID
** sourceId2: sourceId2レイヤーのレイヤーID
** targetId : targetId レイヤーのレイヤーID
** strokeColor : 線の色 (なお、strokeColor, strokeWidth, fillColor のいずれも指定ない場合は描画しない(getResultAsGeoJsonCallbackがあればそこに結果を変換するのみ))
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** progrssCallback: 変換途中の状況が返されるコールバック関数。
** addSourceMetadata: sourceId1とsourceId2の各図形要素に付随しているメタデータ(contentアトリビュートの値)を演算結果の該当する図形要素に結合して付加する。
** getResultAsGeoJsonCallback: 演算結果をgeoJsonで返却を受けたい場合にコールバック関数を指定する。第一引数に結果が返る
** getResultAsGeoJsonCallbackParam : 上記コールバック関数に送りたい引数(第二引数に入力される)
** options: その他のオプションを指定するオブジェクト(下記、メンバ変数)
*** uniteSource1: trueでsourceId1のジオメトリ群をuniteしてから演算する
*** uniteSource2: trueでsourceId2のジオメトリ群をuniteしてから演算する
*** areaCompare: trueで演算結果と元のジオメトリとの面積比をメタデータに付与
*** resultGroupId: 演算結果を生成するグループを指定
*** opacity: 透明度

======captureGeometries======
*captureGeometries( cbFunc , opt ) : svgMap.captureGISgeometriesの引用
====== coverageImageXY2LatLng======
* coverageImageXY2LatLng(pixWidth , pixHeight, px,py,targetCoverage) : ビットイメージカバレッジのピクセル座標から地理座標を算出する関数
** pixWidth, pixHeight : ビットイメージカバレッジのサイズ
** px,py : ビットイメージカバレッジのピクセル座標
** targetCoverage : getInRangePolygonParts で得られた返り値を設定する
====== drawGeoJson======
* drawGeoJson( geojson , targetSvgDocId, strokeColor, strokeWidth, fillColor, POIiconId, poiTitle, metadata, parentElm, metaDictionary) : geojsonのgeomerty を指定したレイヤーに描画する
** geojson : geojson データのgeopmetry
*** メタデータ : メタデータはgeojsonの本来のメタデータ仕様(type:Featureのオブジェクトにpropertiesを設置する)で設定可能
**** また、連想配列もしくは配列の形で、関数の呼び出し時のmetadataパラメータでデフォルトのメタデータを指定できる。
**** また、geoJSONの任意のデータ階層にmetadataプロパティとしても埋め込める。
**** 加えて、propertiesを同様に任意のデータ階層に設定できる(この場合、上の階層の値は下の階層の値で上書きされる)
*** スタイリング : メタデータ仕様を拡張した、geojsonの[https://github.com/mapbox/simplestyle-spec mapbox拡張仕様]に基づいて、描画スタイルを各Featureに設定可能　上記の拡張properties拡張により、デフォルト描画スタイルを設定することも可能。
**** marker-sizeは未実装。marker-symbolではsvgコンテンツのdefsで登録済みのアイコンのIDを指定する。
**** 参考: properties.で設定できる、スタイル属性名: <code>title, description, marker-size, marker-symbol, marker-color, stroke, stroke-opacity, stroke-width, fill, fill-opacity</code>
** targetSvgDocId : 描画先のレイヤーID
** strokeColor : 線の色
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** POIiconId :　Pointの場合のアイコンID(あらかじめ指定した描画先のレイヤーのコンテンツに該当IDのアイコンが定義されている必要がある)
** poiTitle : POIのタイトル
** metadata : POIのメタデータ（連想配列）
** parentElm : (Optional) 指定した要素の子要素として描画
** metaDictionary: (Optional) メタデータとして要素に埋め込みたい属性名のリストを配列で指定する（これ以外の属性は無視するようになる）

====== drawKml======
* drawKml( kml , targetSvgDocId, strokeColor, strokeWidth, fillColor, POIiconId, poiTitle, metadata, parentElm,styleData) : KMLを指定したレイヤーに描画する
** KML : KML 描画するKMLデータのXML DOM
** targetSvgDocId : 描画先のレイヤーID
** strokeColor : 線の色
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** POIiconId :　Pointの場合のアイコンID(あらかじめ指定した描画先のレイヤーのコンテンツに該当IDのアイコンが定義されている必要がある)
** poiTitle : POIのタイトル
** metadata : POIのメタデータ文字列
** parentElm : (Optional) 指定した要素の子要素として描画
** styleData : TBD

====== getBufferedPolygon ======
* getBufferedPolygon(geom,bufferLength) : 任意のジオメトリ(geom)に対して、指定のバッファ長[m]のポリゴンジオメトリを生成する。
** Note: [[#captureGISgeometries]]で取得したデータ等も演算対象にすることができる。

====== getColorString ======
* getColorString(r,g,b) : r,g,b値から、webColor文字列を生成する

======getExcludedPoints======
*getExcludedPoints(poiID, polyID, cbFunc, param , progrssCallback , pointOnly ) : 指定したpoiID検索対象レイヤーのうち、指定したpolyIDポリゴンコンテンツレイヤーのポリゴンに内包されないものを抽出する。
** パラメータはinverseを除きgetIncludedPointsと同じ。
====== getImage======
* getImage(sourceData, renderingOptions ) : メッシュデータからビットイメージ(mage/pngのdataURL)を生成
** sourceData : 以下のデータ構造を持つオブジェクト
*** width, height メッシュのピクセル数
*** rasterData[py][px] 以下のデータ構造を持つオブジェクト
**** color 以下のデータ構造を持つオブジェクト
***** r,g,b,a
**** inRange : boolean
** renderingOptions : 以下のデータ構造を持つオブジェクト
*** drawOutOfRange : boolean レンジ内ではなくレンジ外を描画する
*** fillColor : boolean 上記条件のピクセルを指定した色で描画する
*** useCoverageColor 上記条件のピクセルをカバレッジの色で描画する

====== getImagePixelData======
* getImagePixelData(capturedSvgMapGeometry, callBackFunction, param) : ラスタ画像のビットマップデータを取得する。
** capturedSvgMapGeometry : [[#captureGISgeometries|captureGISgeometries]]で取得したビットイメージカバレッジのジオメトリ情報をもとに取得する
** callBackFunction : 取得したビットイメージデータが引数に渡される
*** data : RGBA intArray ( CanvasのContext.getImageData(...).dataで得られる情報と同様のデータ)
*** width
*** height
*** param : getImagePixelDataの第三引数がそのまま渡される

====== getIncludedPoints======
* getIncludedPoints(poiID, polyID, cbFunc, param , progrssCallback , inverse , pointOnly ) : 指定したpoiID検索対象レイヤーのうち、指定したpolyIDポリゴンコンテンツレイヤーのポリゴンに内包されるものを抽出する。
** poiID : 検索対象コンテンツレイヤーのレイヤID
** polyID : ポリゴンコンテンツレイヤーのレイヤID
** cbFunc : 検索完了後の結果を返却するコールバック関数　第一引数にポイントがGeoJasonのGeometry形式で返却され、第二引数にその個数、第三引数に(あれば)下記paramが返却される
** param : cbFuncに渡す任意パラメータ(第三引数に入る)
** progrssCallback : 変換途中の状況が返されるコールバック関数。　変換中　時々呼び出され、変換状態[%]が第一引数に渡される。
** inverse : trueで getExcludedPoints
** pointOnly : trueの場合検索対象コンテンツレイヤーのジオメトリがPoint以外の物は無視、false(もしくは未設定)の場合はPolygonやMultiLineStringのデータの場合中心点をPointと見立てて検索なお、ポリゴンやポリラインのしっかりした処理を期待する場合は下記のbuildIntersectionを使用すべき。
====== getInRangePoints======
* getInRangePoints(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : 検索対象のPointジオメトリが、検索条件としてのラスターデータ(カバレッジ)の特定色域に入っているものを検索する（ラスターGIS機能）
** poiID_or_points : 検索対象のPointジオメトリのあるレイヤIDもしくは、geoJsonのPointジオメトリ自体
** coverIDラスターデータ(カバレッジ)のレイヤーID
** rangeData : 色域 .hue, .satulation, .value, .alphaをそれぞれ指定する
*** hue: 0..360
*** satulation, value, alpha : 0..100
*** .hue, .satulation, .value, .alphaそれぞれのレンジは<nowiki>[[range1Min,Max],[range2Min,Max],...[rangenMin,Max]]</nowiki>の形で指定する。
*** データがない場合のデフォルトは<nowiki>{hue:[[0,360]],satulation: [[10,100]],value:[[10,100]],alpha:[[10,100]]}</nowiki> : アルファが10以上の全ての色
*** .outOfBoundsColor : TBD {r:255,g:0,b:0} の形で色を指定するとその色のピクセルは領域外(存在しないもの)として評価をスキップする
** cbFunc : 検索完了後の結果を返却するコールバック関数　第一引数にポイントがGeoJasonのGeometry形式で返却され、第二引数にその個数、第三引数に(あれば)下記paramが返却される
** param : cbFuncに渡す任意パラメータ(第三引数に入る)
** progrssCallback : 変換途中の状況が返されるコールバック関数。　変換中　時々呼び出され、変換状態[%]が第一引数に渡される。
** preCapturedGeometry : svgMap.captureGISgeometries()であらかじめ取得したgeometryがある場合、それを投入するとそれを用いて処理する
** computingOptions : getInRangeGeometriesOnCoverageを参照
====== getInRangeLineParts======
* getInRangeLineParts(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : ラインストリングジオメトリ用のラスターGIS機能パラメータはgetInRangePoints()と同じ
====== getInRangePolygonParts======
* getInRangePolygonParts(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : ポリゴンジオメトリ用のラスターGIS機能パラメータはgetInRangePoints()と同じ

====== getInRangeGeometriesOnCoverage======
* getInRangeGeometriesOnCoverage(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry, computingOptions ) : getInRange*を包含する関数
** computingOptions.targetVectorTypeで以下を設定することでそれぞれの機能を動かすことができる
*** 0:point,1:polyline(multiLineString),2:polygon
** computingOptions:
*** overlappingCoverage : "or"
*** splitByCoverage : boolean カバレッジが複数のビットイメージ(タイル)で構成されている場合、タイルごとに分割した答えを返す
***
====== haltComputing======
* haltComputing() : getIncludedPoints, getExcludedPoints, buildIntersectionを中断する
====== imageUrlEncoder ======
* imageUrlEncoder : オリジナルのURLから、setImageProxyの設定を加味したURLを生成する関数
====== latLng2coverageImageXY======
* latLng2coverageImageXY(pixWidth , pixHeight, lng,lat,targetCoverage) : 地理座標からビットイメージカバレッジのピクセル座標を算出する関数
** pixWidth, pixHeight : ビットイメージカバレッジのサイズ
** lng,lat : 地理座標
** targetCoverage : getInRangePolygonParts で得られた返り値を設定する
====== latLng2GeoJsonPoint======
* latLng2GeoJsonPoint(lat , lng ) : 緯度経度をGeoJsonのPointジオメトリに変換する
====== renderImages ======
* renderImages(sourceDataArray, parentElment, crs, renderingOptions) : ビットイメージカバレッジ×ポリゴンGIS(getInRangePolygonParts)の結果を直接可視化する
**sourceDataArray : [[#getInRangePolygonParts]]の結果を設定
**parentElment: SVGMapコンテンツ内で描画する親要素を設定
**crs: 描画するSVGMapコンテンツのCRS matrix(a,b,c,d,e,f)を設定
**renderingOptions : [[#getImage]]を参照

====== setImageProxy======
* setImageProxy( url , directURLls , useAnonProxy): getInRangePointsは、canvasを使った処理のため、CORSの制約にかかる場合、proxyを設定して回避できる。
** url : encodeURIComponent()でエンコードしたカバレッジのレイヤーのビットイメージのURLを付加すると、proxyとしてimageを返却してくれるURL文字列を指定
** directURLls : proxyを使わず直接アクセスするコンテンツを判定するための文字列の配列（この文字列のどれかが含まれていたら直接アクセス）
** useAnonProxy : Image.crossOrigin = "anonymous"を指定してアクセスする

====== hsv2rgb ======
* hsv2rgb(h, s, v) : hsv値からrgb値の色情報変換
** h (hue): 0..360
** s (saturation): 0..100
** v (value): 0..100
** 帰り値 : {r,g,b}: いずれも0..255

====== rgb2hsv ======
*rgb2hsv(r, g, b): RGB値からHSV値の色情報変換
** rgb: いずれも0..255
** 帰り値:{h,s,v}
*** h:0..360
*** s,v: いずれも0..100

=====svgMapLayerUI.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_LayerUI2_r*.jsを用いた場合に使える。
======assignLayerSpecificUiElement======
* >r4
* assignLayerSpecificUiElement( targetElement , isInline , autoSizing) : レイヤ固有UIを出力する先のDOM要素を指定する
** この関数は、レイヤーUIの初期化前～[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]読み込み前に呼ばれる必要がある（すなわち、load時のみ有効）
** targetElement : 出力先要素：出力先はsvgMapオブジェクトを持つwindowでなくても良い
** isInline : boolean 指定した要素をインライン要素として扱い、UIが存在しえない場合は消える。レイヤ固有UIを消すボタンも付与される
** autoSizing : boolean 自動リサイズを有効化

======customEvents======
*customEvents() : サポートしているイベントを返却

======launchController======
* >r4
* launchController(layerID, cbf) : レイヤ固有UIを出現させる。ただしそのレイヤーがレイヤー固有UIを持っており、且つ表示状態になっている必要がある。
** [[#getLayerId|layerID]] : レイヤーのID
** cbf (optional) : レイヤー固有UIが生成されたとき、第一引数にレイヤー固有UIのwindowオブジェクトが返却される。

======layerSpecificUIhide======
* layerSpecificUIhide() : レイヤ固有UIを隠す

======setLayerListmessage======
* setLayerListmessage( head , foot ) : head 及び footで指定した文字列を　レイヤリストUIのトップのメッセージに設定する。[head]numberOfVisibleLayers[foot] : デフォルトはhead :"Layer List: ", foot :" layers visible"

=====svgMapPWA.で呼び出せるAPI=====
'''実験的機能段階''' :
; 以下のAPIは、SVGMapLv0.1_PWA_r*.jsを用いた場合に使える。
:- SVGMap.jsをPrpgressiveWebApps(PWA)として動作させ、オフラインでも利用できるウェブアプリを構築することができる。
:- Progressive Web Appsが機能するブラウザで有効。Chrome,Edge(PC,Android), Safari(Apple製品)
:- iOS SafariのPWAネイティブキャッシュの50MB制限を回避するIndexedDBによる実装がなされており、そのクォータが許す限りの(iOSでも数百MB以上の)オフライン地図コンテンツを利用できる
:- 同じく、iOS Safariが持たないsyncの一部を代替する機能(オンラインになったらポストする機能)が利用できる
:- zip圧縮されたオフラインコンテンツパッケージ読み込み機構を使う場合はzip.jsおよびそれが利用するArrayBufferReader.js,deflate.js,inflate.jsの読み込みが必要。
:- <code>serviceWorkerPath</code>グローバル変数で、専用のサービスワーカープログラムsvgMapServiceWorker_r*.jsのパスを指定する必要がある。
::- サービスワーカー～svgMapServiceWorker_r*.jsは、同jsと同じディレクトリにあるbaseResources.jsonを読み込み初期設定を行う
::- baseResources.json：　srcにサービスワーカーネイティブのキャッシュに読み込むべきリソースのリストを記載、mapCacheTargetに、SVGMapのコンテンツキャッシュを稼働させるターゲットとなるパスを記載
::-baseResources.jsonの例
<pre>
{
"src": [
"index.html",
"Container_mercator_org.svg",
"SVGMapLv0.1_PWA_r5.js",
"js/SVGMapLv0.1_r16.js",
"js/SVGMapLv0.1_LayerUI2_r3.js",
"js/SVGMapLv0.1_GIS_r2.js",
"js/SVGMapLv0.1_Authoring_r7.js",
"js/jsts.min.js",
"imgs/gps.png",
"imgs/gps_s.png",
"imgs/Xcursor.png",
"imgs/zoomdown.png",
"imgs/zoomdown_s.png",
"imgs/zoomup.png",
"imgs/zoomup_s.png",
"imgs/mappin.png"
],
"mapCacheTarget":"localMaps/"
}
</pre>

* autoPilotDownloader
*:エリアと縮尺を指定し、オートパイロットで地図画面をスクロールさせることで、オフラインキャッシュに地図を保存する動作を自動的に行う機能のオブジェクト。レイヤー固有UIでの利用などを想定しており、以下のメンバー関数を持つ
** halt()
**:オートパイロット動作を中断させる
** searchAll(initialViewBox, minScale, maxScale)
**:- initialViewBoxで指定したエリアを、minScale、maxScaleの間でオートパイロットをかけキャッシュに保存させる
**:- minScale, maxScaleは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の座標系におけるscale値(getRootScale()で取れるもの)
** setProgressCallBack(cbf)
**:オートパイロット動作中の進行状況をcbfの第一引数に返却する
* async clearOfflineContents()
*:SVGMapのオフラインコンテンツを全消去する。SVGMapのオフラインコンテンツはserviceWorkerのネイティブキャッシュ機構とは別の独自キャッシュ機構(indexedDBを使用した機構)として構築される
* clearCache()
*:（未実装）serviceWorkerのネイティブキャッシュを全消去する
* cacheDB
*:SVGMapのオフラインコンテンツデータベースのオブジェクト。IndexedDBをpromise化した簡略的APIをメンバ関数として持つ。
** clear()
**:データベースをクリア
** async connect()
**:データベースに接続
** async delete(path)
**:pathで指定したコンテンツを削除
** async get(path)
**:pathで指定したコンテンツ(blob)を取得
** async getAll()
**:全コンテンツを取得
** async getAllKeys()
**:全Key(コンテンツのpath)を取得
** async put({idCol:path,contentBlob:blobdata})
**:コンテンツ(blobdata)をpathをキーにして格納(上書き)
* deleteCachedLayerMeta()
* async disableCache()
*:serviceWorkerのネイティブのキャッシュ機構とSVGMapの独自キャッシュ機構を全て無効化する
* async enableCache()
*:serviceWorkerのネイティブのキャッシュ機構とSVGMapの独自キャッシュ機構を全て有効化する
* getCachedLayerMeta
* async getPostQueue()
*:postMessageWhenConnectedでポストをリクエストし、未完了のリクエストを取得する
* getRootScale()
*:svgMapの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]座標系における現在の表示のscaleを取得
* getScales()
*:読み込み済み文書全てのscaleを連想配列で返す(hashKeyはdocID)
* getVisibleLayers
* getStorageUsage
* async loadOfflineContents(contentUrlList, overwrite, progressCallBack)
*:-contentUrlListで指定したコンテンツをオフラインキャッシュに読み込む(自ドメイン内のコンテンツ限定)
*:-overwriteをtrueにすると上書きする。progressCallBackは指定した関数の第一引数に進捗状況を返却
* async loadZippedOfflineContents(zip_url,progressCallBack)
*:保存してあるディレクトリに対して、そのzipファイルの中のディレクトリ構造で、コンテンツがあるものと見做したURLもつキャッシュを形成する
* async postMessageWhenConnected(URL, postData, postCompleteCBF)
*:-postDataデータをURLにポストする　オンライン時は即座にポスト、オフライン時はいったんindexedDBにポストデータを格納後オンラインになったらポストする。
*:-postDataは、文字列(この場合form-data決め打ちのリクエスト)、もしくは .bodyメンバー変数を持ったオブジェクト
*:-この場合は .bodyはFormDataタイプのインスタンスもしくは任意のデータ、そしてfetchAPIに準じた.headers, .methodをメンバー変数に持たせることができる。(methodでGETを指定すればGETリクエストも可能)またserviceWorkerが管理する
* async setCachedLayerMeta
* setScaleTrim
* async updateCacheIndex()

=====svgMapCustomLayersManager.で呼び出せるAPI=====

'''実験的機能段階''' :

基本的なフレームワークで提供されているレジューム機能を更に強化し、レイヤーの表示非表示状態、初期表示エリア(viewPort)等をユースケースなどに応じて複数登録、切り替えを可能とする機能を提供します。更に[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]をさらに積極的に編集し、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルに無いレイヤーを追加したり、削除したりした、カスタマイズされた[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]を差分情報の形でlocalStorageに保存・利用する機能を提供します。

:- 以下のAPIは、SVGMapLv0.1_CustomLayersManager_r*.jsを用いた場合に使用できます。
:- SVGMapLv0.1_CustomLayersManager_r*.jsは、svgMapオブジェクトもつwindowで使用するとともに、svgMapオブジェクト用のカスタムレイヤーセットを構築するための別ページのwebAppsにおいても使用することができます。
:- 上記svgMapオブジェクト用のカスタムレイヤーセットを構築するためのwebApps用としてSVGMapCustomLayersManagerApp_r*.js、SVGMapCustomLayersManager.htmlが用意されています。

*registCustomLayer(customLayerObject, applyImmediately, customLayerMetadata)
*applyCustomLayers(customLayersObject, baseLayersPropertySet)
*getDetailedLayersPropertySet(rootContainerDoc, ignoreIid)
*getDetailedLayersPropertySetFromPath(rootContainerUrl, ignoreIid)
*getDif( edit, orig )
*originalLayersProperty
*deepCopy(obj)
*deleteAllCustomLayerSettings()
*deleteCustomLayerSetting( key )
*setCustomLayerSettingIndex(key)
*buildCustomLayersSetting(difObj, editedLayersProperty, originalLayersProperty)
*loadCustomLayerSettings()
*storeCustomLayerSettings( settings )
*getElementByAttr( XMLNode , searchId , atName )

*applyCustomLayersSettingsToCurrentMapView(lpEdit, svgMapWin)
*loadCustomGeoViewboxes()
*storeCustomGeoViewboxes(customViewBoxes)
*buildCustomGeoViewboxSettingObject(key, title, geoViewBoxX, geoViewBoxY, geoViewBoxWidth, geoViewBoxHeight)

====起動URLによるオプション指定====
svgMapフレームワークを導入したhtmlコンテンツは、URLの"#"以降であるフラグメント識別子によってフレームワークにいくつかの起動時オプションを提示することができます。
通常、これらのオプションは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]における記述で示されています。フラグメント識別子による指示はそれをオーバーライドします。
一般的な"&"による区切りで複数の複数のパラメータを指定できます。
=====表示範囲の指定=====
global座標系によって表示範囲を指示することができます。　標準のフラグメント記述に対してそれぞれ"global"文字列の追加が必要です。
なおglobal座標系におけるxは一般的に経度、yは一般的に緯度に対応することに留意してください。
*メディアフラグメントによる指定 : xywh=global:<xmin>,<ymin>,<width>,<height>
*svgViewフラグメントによる指定 : svgView(viewbox(global,<xmin>,<ymin>,<width>,<height>))

=====表示・非表示レイヤーの指定=====
* 表示すべきレイヤー: visibleLayer=<layer title>,<layer title>...
* 非表示すべきレイヤー: hiddenLayer=<layer title>,<layer title>...
* 個々のレイヤーに対するフラグメントの提示 : それぞれのレイヤーに対しては、さらにフラグメントを追加することができます。ただし"="は"%3D",&は"%26"でURLエンコードしてください。<layer title>#fragment1=val1&fragment2=val2　⇒<layer title>#fragment1%3Dval1%26fragment2%3Dval2　

===レイヤー固有のUI===
"[https://satakagi.github.io/mapsForWebWS2020-docs/De-centralizedWebMapping.html#:~:text=To%20achieve%20this,everything%20in%20detail. Layers as WebApps]"(ウェブアプリケーションとしてのレイヤー: webApp Layer)を実現する機構　（LaWA、レイヤーwebApp、webAppレイヤー、アプリレイヤー、レイヤーアプリなどと呼ぶこともある）（[[#レイヤー固有ユーザインターフェース|こちらも参照]]）

====概要====
[[#レイヤー|レイヤーsvgコンテンツ]](フレームワークが最初に読み込むコンテナsvgコンテンツの中で埋め込まれるsvgコンテンツ)に対して、[[#動的な地図レイヤー|動的な地図レイヤー]]の一種として、そのレイヤーに固有の処理ロジックや、可視化・描画ロジック　そしてユーザインターフェースも含むことができる　htmlによるウェブアプリを定義できる機能です。

javascriptを使った独自のロジックによる動的な可視化データの生成が実装可能です。

また、この機能はそのレイヤーの設定やインタラクティブ操作のための表示やユーザインターフェースを地図表現とは別に表示したい場合にも用いることができます。従来のアーキテクチャでは、もしもこのようなレイヤーに固有のUIが必要だった場合でも、地図アプリケーション全体の処理や表示を司るグローバルな空間(ルートhtmlコンテンツのwindowオブジェクト直下)に、サイドエフェクトを考慮しながらコードを組み込む必要があり、結果としてコードのスパゲッティ化が懸念されました。SVGMapのレイヤー固有UIは、レイヤーごとにUIとそのロジックをカプセル化可能にし、これを排除することが可能です。(カプセル化はiframeによって行われます。)さらに、レイヤー固有UIによるウェブアプリは自律分散的な配置にも対応し、UIを備えた地図レイヤーにまでハイパーレイヤリングアーキテクチャを拡張します。

なお、[[#動的な地図レイヤー]]は、htmlによるユーザーインターフェースを持つことができませんが、同種のウェブアプリケーションのカプセル化の効果があります。

このＵＩには主に二つの用途が考えられます。
;凡例
: 各レイヤーはその地図表現の意味を示すための固有の凡例を持つことがあります。その凡例を表示するために利用できます。
;ウェブアプリケーションによる動的な地図レイヤー
: 先述のように、ウェブアプリケーションによる動的な地図レイヤーは独自のロジックによってそのレイヤーの地図表現を動的に変化させる機能を備えることができます。この場合、例えばエンドユーザがFORMで入力したフィルター条件ををもとに表現を変更するようなケースも考えられます。
これらケースでは、そのフォームや凡例は、[[#フレームワークの呼び出し|ルートhtml文書]]に設置することは可能ですが、もしも多くのレイヤーを表示するアプリケーションであり、それらのレイヤーがそれぞれ固有のフィルタ条件を持つような場合、[[#フレームワークの呼び出し|ルートhtml文書]]は、それぞれのレイヤーをフィルタリングするためのFORMとそのフィルタリングロジックをすべて埋め込む必要があり、画面のデザイン、およびロジックのコーディングの双方がスパゲッティ化する可能性があります。さらに、もしもこのアプリケーションに後日さらにレイヤーが追加される場合、スパゲッティ化の問題はより深刻になるかもしれません。凡例の表示についても同様の問題が考えられます。本レイヤー固有ＵＩはこのような問題に対するソリューションを提供しています。

この機能は、ベースのフレームワークrev12以上　且つLayerUI2フレームワークを読み込み、[[#レイヤー固有のUI(後述)を設置するdiv要素|id="layerSpecificUI"のdiv要素]]が[[#フレームワークの呼び出し|ルートhtml文書]]に設置されているときに使用できます。

;サンプル
:[[チュートリアル#WebApp_Layer.E7.B7.A8|開発者向けチュートリアル]]でいくつかのサンプルを見ることができます。

====[[#レイヤー|レイヤーsvgコンテンツ]]での指定====
レイヤー固有UIの設置には、[[#レイヤー|レイヤーsvgコンテンツ]](のルート要素(svg要素))に、data-controller属性を与え、そこにそのレイヤー固有のUIのためのhtml文書のリンク(ただしsame origin)を設置します。またサブセットとして、data-controller属性にビットイメージ(.pngもしくは.jpg, .jpeg, .gif拡張子を持つビットイメージ)へのリンクを与えることでレイヤーの凡例情報の提示をすることもできます。

[[#レイヤー固有のUI(後述)を設置するdiv要素|レイヤー固有ＵＩの表示部位]]には、このように指定されたリソース(ビットイメージもしくはhtml)がレイヤーの選択の状況に応じて、切り替わり表示されます。レイヤーがONになっている間、それに紐付けられたレイヤー固有UI(htmkのwindowオブジェクト)が存在し続け、そのレイヤーのsvgDOMの操作やUIの提供が可能です。

なお、標準のフレームワークでは、表示中のレイヤーの中の選択された一つのUIのみが地図のメインのwindowに配置されたiframeで表示されます。表示中ではあっても選択されていないレイヤーのUI(iframe)は非表示状態で動作しています。

'''サンプル'''
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="9000.0 -9000.0 9000.0 9000.0" go:dataArea="9000.0 -9000.0 9000.0 9000.0"
'''data-controller="../Self-GS-POI_controller.html"'''>
.....

====レイヤー固有のUIのためのhtml文書(webApp)の構造・作法====
レイヤー固有のUIとなるhtml文書は、下記の通り、その初期化等を行うライブラリ <code>svgMapLayerLib.js</code> を読み込む必要があります。（現在のところ通常のjavascriptライブラリのみ提供されます）
CDNからライブラリを読む場合は、<code>https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/svgMapLayerLib.js</code>です。

'''サンプル'''
<!doctype html>
<html>
...
<script src="https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/svgMapLayerLib.js"></script>
...
</html>

====LaWAとS-LaWA（サンドボックス化LaWA）のアーキテクチャ====
SVGMapにおけるレイヤー固有UI（LaWA: Layers as Web Apps）には、セキュリティと用途に応じた2つの動作モードが存在します。2026年のアップデートにより、Web標準のセキュリティモデル（クロスオリジン制約）に準拠した'''S-LaWA（サンドボックス化LaWA）'''が導入されました。 (2026/4/16現在 dev2リリース段階)

=====T-LaWA (Tight-coupled LaWA / 従来の密結合モード)=====
* 親のSVGMapフレームワークと同じオリジン（ドメイン）で動作する、従来型のレイヤーWebAppです。
* iframeのJavaScriptコンテキストに、親フレームワークから直接APIオブジェクトが注入されます。
* 全ての[[#拡張API]]にアクセスでき、複雑なDOM操作や関数渡しが可能ですが、サードパーティ製のレイヤーを読み込む際にはセキュリティ上のリスク（XSS等）を伴います。

=====S-LaWA (Strict/Sandbox LaWA / 分離モード)=====
* 親のSVGMapフレームワークとは異なるオリジンで動作することを前提とした、セキュアなレイヤーWebAppです。
* iframeは完全に隔離（サンドボックス化）され、親フレームワークとの通信は全て非同期メッセージング（postMessage）を介して行われます。
* 悪意のあるスクリプトから親フレームワークを保護できるため、外部のサードパーティ製レイヤーを安全に統合できます。
* 代わりに直接的なオブジェクト参照や関数の受け渡しが禁止されるため、[[#拡張API]]の利用に強い制限がかかります（前節の「S-LaWAでの制限」を参照）。

======【発展機能：S-LaWA Level 2 (CORS非依存モード)】======
* S-LaWAのサブモードとして、配信元の外部サーバーにCORS（Cross-Origin Resource Sharing）設定がされていないSVGレイヤーであっても、安全に読み込んで統合できる仕組みです。
* コンテナ側の <code>animation</code> 要素に <code>data-controller</code> 属性が指定されている場合、SVGMapフレームワークはCORSエラーを回避することが可能です。実際のSVG及びhtmlの取得と展開はサンドボックス内のS-LaWAが代理で行われ、サーバー側の設定に依存しないクロスオリジン連携を実現します。

===== 動作モードの指定 (data-lawa-mode) =====
レイヤーがどちらのモードで起動するかは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]内でそのレイヤーを参照している '''<code>animation</code> 要素の <code>xlink:href</code> の値（URLのオリジン）'''、もしくは同要素に付与する '''<code>data-lawa-mode</code>''' 属性で制御できます。

<code>data-lawa-mode="auto"</code> (未指定時のデフォルト): レイヤー（コントローラ）のURLが親フレームワークと同一オリジンであれば '''T-LaWA''' として、クロスオリジンであれば自動的に '''S-LaWA''' として起動します。

<code>data-lawa-mode="isolated"</code>: 同一オリジンであっても、強制的に '''S-LaWA''' として隔離して起動します（開発時のテスト等に有用です）。

<code>data-lawa-mode="tight"</code>: 強制的に '''T-LaWA''' として起動を試みます。（※クロスオリジン環境でこれを指定した場合は、適切なCORS設定やプロキシサーバーの利用が必須となります）

====詳細====

レイヤー固有UIは、SVGMapのグローバルなwindowに設置されたiframeの中で動作します。このiframeの性質と利用できるAPIは、前述の動作モード（T-LaWAかS-LaWAか）によって大きく異なります。

どのような環境・モードで起動された場合でも、レイヤー固有UI内でSVGMapの各種リソースへ安全にアクセスするためには、レイヤーのHTML内で提供される初期化ライブラリ（<code>svgMapLayerLib.js</code> 等）を読み込む必要があります。

'''【重要】''' 各種APIへのアクセスが可能になるのは、iframe自体の "load" イベントではなく、SVGMapフレームワークとの接続が完了した後に発行される '''<code>layerWebAppReady</code>''' イベント以降です。
* 初期化処理は以下のように記述することを強く推奨します。
* <code>window.addEventListener("layerWebAppReady", function(){ /* 初期化処理 */ });</code>

[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が設置されたSVGMapのグローバルなwindowと異なるドメインにレイヤーを設置し、そのレイヤーがレイヤー固有UIを持つこともできます。デフォルト（<code>data-lawa-mode="auto"</code>）では、これは自動的にセキュアなS-LaWAとして起動するため、特別なCORS設定は不要です。ただし前述の通りAPIには制限がかかります。

[[#レイヤー|レイヤーsvgコンテンツ]]のドキュメントルート要素へdata-controller属性を設定する代わりに、コンテナsvgコンテンツにおける[[#レイヤー|レイヤーsvgコンテンツ]]への参照要素にdata-controller属性を設定することもできます。

data-controller属性の代わりに、data-controller-src属性の値に、適切にエスケープすることで直接htmlを記述することもできます。（※この機能は主にT-LaWAでの利用を想定しています）

data-controller属性によって参照されるhtmlコンテンツでは、次節[[#拡張API]]で説明する値や関数が使用できます（※モードによる制限あり）。

data-controller属性のURLには以下のオプションをフラグメント識別子として指定することができます。
* #exec=appearOnLayerLoad||hiddenOnLayerLoad||onClick レイヤー固有UIの起動オプション
** appearOnLayerLoad : レイヤーを表示状態にすると即座にレイヤ固有UIが出現
** hiddenOnLayerLoad : レイヤーを表示状態にすると即座にレイヤ固有UIがhidden状態で起動(そのレイヤ固有UIに含まれるscriptが起動)
** onClick : レイヤー固有UI起動ボタン">"を押したときにレイヤ固有UIが出現(デフォルト)
* #requiredHeight=hhh&requiredWidth=www
** id="layerSpecificUI"のdiv要素のcss値に関わらず、requiredHeight、requiredWidthでiframeの表示を指示

====拡張API====
レイヤー固有UI(iframeのwindowオブジェクトのjavascriptコード)では以下のAPIが拡張されています。
'''【注意】S-LaWA（サンドボックス化LaWA）環境においては、セキュリティ上の理由から親フレームワークのオブジェクトに直接アクセスできません。代わりに <code>svgMapSandboxLayerLib.js</code> が提供する「モック（代替）オブジェクト」を介して非同期に操作が行われます。各項目の「S-LaWAでの仕様」を参照してください。'''

=====イベント=====
*layerWebAppReady : 初期化が完了しLaWAの実行が可能になった (LaWAでは、loadイベントではなくlayerWebAppReadyを使用することを強く推奨します)
*openFrame : そのiframeが、新たに生成された
*closeFrame : 同、消滅した
*hideFrame : 同、隠された
*appearFrame : 同、隠されていたのが再度現れた
*zoomPanMap : [[#.E6.8B.A1.E5.BC.B5.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88|SVGMapフレームワークと同じ]]
*zoomPanMapCompleted : 同上
*screenRefreshed : 同上

'''【S-LaWAでの仕様】''' すべてのイベントがサポートされています。親フレームワークで発生したイベントは、メッセージングを通じてS-LaWA内のwindowオブジェクトに中継・ディスパッチされます。

=====svgImageProps=====
このレイヤー固有UIに紐づいたレイヤーSVGの各種プロパティを参照できる（基本的に全て読み出しのみ） (参考:[[#svgImagesProps.5B.5D]])
*[[解説書#svgImagesProps.5B.5D|プロパティのリストはこちらを参照]]
*svgImageProps.scriptで、動的地図レイヤーのscript要素によって生成されたオブジェクトにもアクセスできます。
*svgMap.getSvgImagesProps(layerID) で得た値と同等。
*.hashは書き込みが有効(参考 [[#サブレイヤーパーマリンク]])

'''【S-LaWAでの仕様】''' 親フレームワークから非同期で同期された静的なコピーデータとして提供されます。<code>.hash</code> プロパティへの書き込みはS-LaWAでもサポートされており、裏側で自動的に親へ同期されます。ただし、<code>.script</code> による親の実行コンテキストへのアクセスはできません。

=====svgImage=====
このレイヤー固有UIに紐づいたレイヤーSVG文書(DOM Documentオブジェクト) (参考：[[#svgImages.5B.5D]])
*このドキュメントを操作することで、そのレイヤーの表示を動的に変化させることが可能です。
*特に、[[解説書#.E5.8B.95.E4.BD.9C.E3.81.AE.E5.88.B6.E9.99.90.E3.83.BB.E5.B7.AE.E7.95.B0|動作の制限に注意して実装してください]]
*svgMap.getSvgImages(layerID) で得た値と同等。

'''【S-LaWAでの仕様】''' S-LaWA環境内に展開された「ローカルXML DOM」が提供されます。このドキュメント（要素の追加・削除・属性変更・テキスト変更など）を操作して <code>svgMap.refreshScreen()</code> を呼び出すと、フレームワークの共通地図キャンバスに送信され更新します。

=====svgMap=====
svgMapフレームワークインスタンス

'''【S-LaWAでの仕様】''' 親のインスタンスの代わりに、S-LaWA用のモッククラス（<code>SandboxSvgMap</code>）が提供されます。以下のメソッドのみが利用可能です。
* <code>refreshScreen()</code>, <code>transform()</code>, <code>getGeoViewBox()</code>, <code>getSvgImageProps()</code>, <code>setShowPoiProperty()</code>, <code>showModal()</code>, <code>getCORSURL()</code>, <code>setCORSproxy()</code>, <code>parseEscapedCsvLine()</code>

=====layerID=====

svgMapフレームワークが管理しているSVG文書ハッシュリスト(svgMap.getSvgImages())における、このレイヤー固有UIに紐づいたレイヤーSVG文書のハッシュキー

[[#getLayerId]]参照

'''【S-LaWAでの仕様】''' 制限なく利用可能です。

=====svgMapGIStool=====
GIStoolsフレームワークを拡張した時、同インスタンス
*[[解説書#svgMapGIStool..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI|svgMapGIStoolが持つAPI]]

'''【S-LaWAでの仕様】''' '''現在のところ利用不可です。'''

=====svgMapAuthoringTool=====
svgMapAuthoringToolフレームワークを拡張した時、同インスタンス
*[[解説書#svgMapAuthoringTool..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI|svgMapAuthoringToolが持つAPI]]

'''【S-LaWAでの仕様】''' '''現在のところ利用不可です。'''

=====controllerSrc=====
レイヤー固有UIのiframeの起動に使われたsrc属性(レイヤー固有UIのパス・URL)が読み出せます。特にレイヤーが異なるドメインから配信されたものの場合、レイヤー固有UIのwindowのlocation属性(及びそれによるURL解決を行うAPI)からは適切な情報が得られません。これ代えてこの値が使用できるケースがあるでしょう。

'''【S-LaWAでの仕様】''' 参照できません。S-LaWAは自身のURLコンテキストで動作するため、自身の <code>location.href</code> などを参照してください。

=====putGlobalMessage(messageText)=====
messageTextを[[#グローバルメッセージ]]エリアに表示する　レイヤーが消滅したら自動でメッセージも消滅します。

'''【S-LaWAでの仕様】''' 現在のところ利用不可です。

=====preRenderFunction=====
この名前の関数を(レイヤー固有UIのwindowに)定義すると、そのレイヤーのSVG文書の再描画(画面更新)シーケンスの直前にこの関数の内容が実行される。詳細は[[解説書#setPreRenderController|setPreRenderControllerを参照]]

'''【S-LaWAでの仕様】''' '''利用可能です。''' S-LaWA内で <code>window.preRenderFunction</code> を定義しておくと、<code>svgMap.refreshScreen()</code> が呼ばれた際や、親からズーム・パンなどのイベントを受信した際に、S-LaWA内でローカルに実行されます。この関数内でローカルDOMを変更することで、描画前の状態更新をエミュレートできます。

=====customHitTester=====
この名前の関数を定義すると、そのレイヤーに固有のヒットテスト（マウスやタッチによって地図上をヒットしたときの振る舞い）機能を追加することができます。ヒットテストは通常のクリッカブルオブジェクト（ポイントやライン・ポリゴンなど）のそれと同等に扱われます。
* customHitTester( position )
** 第一引数に、ヒットされた座標(.screenX,Y:window上の座標、.lat,lng:地理座標、.isMapCenterHitTest:後述)が与えられます。（この値をもとに実際のヒットテスト処理を書く）　この関数の帰り値が'''null'''や'''undefined'''の場合はヒットしなかったこと、'''true'''もしくは文字列もしくはそのレイヤーの任意の図形要素、もしくはそれらの配列の場合はヒットしたことを示します。
*** isMapCenterHitTestが'''true'''の場合、そのヒットテストは伸縮スクロール時自動発生するケースで発生したものです。（もしこのケースでのテストを除外したいなど特別な処理をしたい場合に利用できます）
** ヒットテスト後の振る舞いも通常のクリッカブルオブジェクトと同等で、通常はデフォルトで備えるヒットされたグラフィックスオブジェクトの[[#metadata.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF|メタデータ]]表示パネルが呼び出されます。(帰り値が図形要素の場合）　もしこの振る舞いを変更したい場合は、[[#setShowPoiProperty|setShowPoiProperty]]を用いることが可能です。
** 帰り値がtrue、文字列、およびそれらの配列を返す場合は、[[#setShowPoiProperty|setShowPoiProperty]]を使用してカスタマイズされた処理を行う必要があります。この場合[[#setShowPoiProperty|setShowPoiProperty]]で設定された関数が受け取る引数は、そのSVG文書のドキュメントルート要素であり、その'''"data-hitTestIndex"'''属性に選択されたオブジェクトのインデックス(配列の場合。配列でない場合は常に0)が設定されます。

'''【S-LaWAでの仕様】''' <code>customHitTester</code> 自体は利用できません。（なお<code>svgMap.setShowPoiProperty(func)</code>は利用可能です。）

====サブレイヤーパーマリンク====
(2024/10のdev1ブランチから有効)
*[[#レイヤーsvgコンテンツ]]のURLが任意のフラグメント識別子を持つことができる。
*ただしフラグメント識別子はカンマ","、アンパサンド"&"を含めることはできない。
*[[#レイヤー固有のUI]]が以下を実装する場合、任意のレイヤーの設定をパーマリンク([[#getBasicPermanentLink]])に反映できる。
**[[#レイヤー固有のUI]]は起動時(onload)同フラグメント識別子の情報を解釈し適切な状態に変化させる機能
**[[#レイヤー固有のUI]]は、パーマリンクによる指定に対応した標示状態に表示が切り替わるタイミングで[[#レイヤーsvgコンテンツ]]のURLのフラグメント識別子の内容をそれに対応した値に変更する機能
*[[#レイヤーsvgコンテンツ]]のURLのフラグメント識別子は、[[#svgImageProps]].hashを設定することで変更できる ([[#svgImageProps|⇒仕様参照]])

===動的な地図レイヤー===
svgドキュメントにjavascriptを記述することでも、動的なデータ生成を実装可能としています。
本フレームワークでは、svgドキュメント中に<script>要素を一つだけ記述することができ、その要素の中にjavascriptコードを入れることができます。

DOMを操作し、動的に描画を変化させることが可能です。ただし、[[解説書#.E5.8B.95.E4.BD.9C.E3.81.AE.E5.88.B6.E9.99.90.E3.83.BB.E5.B7.AE.E7.95.B0|動作の制限に注意してください]]

====動的SVGMapコンテンツで利用可能な拡張API====
一般のjavascriptAPIに加えて、動的な地図レイヤーを実装するために以下のAPIが提供されます。（既存のものでも注記があるものも列挙）
*document: このsvgMapドキュメント自身
*READ ONLY変数
**CRS:このドキュメントのCRS : CRS.a....fに、地理座標からこのドキュメントのSVGユーザ座標への変換係数が提供される
**docId:このSVGドキュメントのdocId
**scale：倍率：このドキュメントの座標系と、画面の(px座標系)との間の倍率(この値は等倍が1.0だが、svgMapコンテンツのvisibleMin/MaxZoom値は%(等倍は100)なので注意)
**actualViewBox：このドキュメントの座標系でのviewBox
**geoViewBox：地理座標におけるviewBox
**geoViewport
**viewport
**this.location:相対パス
**(this.verIE)
*refreshScreen(): 描画の更新を明示: refreshScreenを用いていない場合、そのレイヤーのDOMを編集してもそれが即座に表示に反映(更新)するとは限りません。文書のロード、ズーム、スクロールのときが表示のDOMの内容を反映した画面の自動更新のタイミングです。それ以外、多くの場合反映されません（性能確保のための本フレームワークの現在の制限）。DOMO編集をそれ以外のタイミングで表示に反映したい場合、この関数の呼び出しを行うひつようがあります。一方不必要にこの関数を呼び出すとシステム全体の性能が低下するかもしれません。
*transform()
*getCanvasSize()
*linkedDocOp()
*isIntersect()
*drawGeoJson()
*childDocOp()
*onload:この関数を設定すると、ロードされると呼ばれる(ドキュメントロード後、描画前のタイミング。)
** この関数は、DOMトラバース前に同期処理される。
**したがってonloadで実行される処理はその中が非同期でない限り、refreshScreen()しなくてもonload時のDOM編集は直後の描画に反映される。
*onscroll:この関数を設定すると、スクロールされるとき呼ばれる（ほかにズーム以外で画面更新時も）(スクロール後の描画前のタイミング。)
**同上
*onzoom:この関数を設定すると、ズーミングが発生するとき呼ばれる(同上)

====拡張イベント====
*document -> zoomPanMap イベント addEventHandlerすると、ズームパンが起き(viewPortが変化したとき)地図システム全体の描画が完了(含タイムアウト)後に発行される。SVGMap*.jsが地図をウェブアプリ起動後、最初に描画完了した時にもこのイベントが発生する。（レイヤー追加時には発生しない）
**これをイベントリスナに設定した関数は、非同期に実行される。onscroll()と異なり、もしその関数でDOM編集を行った場合は、直後の描画にそれが反映される保証がない。refreshScren()による再描画が必要。
*document -> screenRefreshed イベント addEventHandlerすると、ズームパン以外で地図システム全体の描画が完了(含タイムアウト)後に発行される。主にrefreshScreen()など。このイベントをフックにして、SVGMapコンテンツのDOM操作・再描画（refreshScreen()）を行うと無限ループに陥るので使用方法に注意が必要。
*document -> zoomPanMapCompleted イベント SVGMaplayerUIが有効な時に発行される。　zoomPanMapイベントは伸縮スクロール完了時に発行されるが、その直後にレイヤー固有UIにおいて(XHRやfetchを用いた)非同期なデータ取得とレイヤー書き換えが生じるケースでは、その完了を検知しない。zoomPanMapCompleted イベントはこのような非同期通信の完了後に発行される。

===SVGMapの埋め込み(SVGMapFrame)===
'''実験的機能段階''' :

SVGMapフレームワークはwindow全体に地図コンテンツが占有される形で表示する設計です。ウェブページはwebAppsとしてカプセル化されたレイヤーをsvgMapオブジェクトに差し込む形でアプリケーションが構築されます。すなわち、基本的に[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]windowにはsvgMapオブジェクトだけが単独で存在し、その他のアプリケーションをwindow上に実装する場合は、その開発者がsvgMapオブジェクトとのグローバル空間でのスパゲッティ化に注意を払いながら開発していく必要があります。

それに対して、''SVGMapLv0.1_Frame*.js''が提供する機能は、window内の指定した領域にsvgMapによる地図を埋め込むことを可能にします。さらにこの埋め込まれたsvgMapオブジェクトを　外部からより簡単に操作できるようカプセル化されたインターフェースを提供します。

====ライブラリ====
SVGMapを埋め込むウェブページでは''SVGMapLv0.1_Frame*.js''を導入します。
<!doctype html>
<html>
<script type="text/javascript" src="SVGMapLv0.1_Frame_r4.js"></script>
</html>

====svg-map要素====

svg-mapカスタム要素を使用してsvgMapオブジェクトを任意の場所に埋め込むことができます。
<nowiki>
<!doctype html>
<html>
<script type="text/javascript" src="SVGMapLv0.1_Frame_r4.js"></script>
<body>
<table>
<tr>
<td>
説明用地図
</td>
<td>
<svg-map svgMapAppPage="SVGMapper_r16_layerUICustom.html" id="svgMapTag" latitude="37" longitude="135" zoom="4" layerui="#layerUIarea">
</svg-map>
</td>
</tr>
</table>
</body>
</html></nowiki>

=====属性=====
======svgMapAppPage======
必須属性: 起動するSVGMapLv0.1*.jsが組み込まれたhtmlを指定。
svg-map要素はshadow domとなっており、内部はひとつのiframeとして構成されます。このiframe内のwindowで通常のsvgMapオブジェクトが稼働する形となります。svgMapAppPage属性はこのiframe内で起動するsvgMapオブジェクトを持ったhtmlを指定するものです。

======latitude, longitude======
オプション: 表示領域を下記の属性と組み合わせて指定します。DOMを操作することによって動的に表示領域を変更することが可能です。
======zoom======
オプション: 表示位置の中心点を上の2属性で、ズームレベルをこの属性で指定します。ズームレベルの定義は[https://docs.microsoft.com/ja-jp/azure/azure-maps/zoom-levels-and-tile-grid webMercatorタイルピラミッドのレベル番号]（ただし小数点指定も可能）
======latitude2, longitude2======
オプション: latitude, longitudeと組み合わせて対角線を指定し表示領域を設定します。
======customjson======
オプション: 任意のJSON文字列を(エスケープしたうえで)与えることができます。 SVGMap.jsのあるiframeのwindow.rootMessage.customJsonに、JSON.parseされたうえでその値が反映されます。この値もDOM操作により動的に反映されます。window.rootMessage.customJsonの変化を監視できるようsetterを設けることで動的な変化に対応する実装が可能です。

var rootMessage={
set customJson(json){
...
}
}

======layerui======
オプション: レイヤーUIの出力要素をxlinkで指定します。　この値はmutationをobserveしていません（svg-mapオブジェクトが生成された、最初の一回のみ有効です）

<svg-map svgMapAppPage="SVGMapper_r16_layerUICustom.html" id="svgMapTag" latitude="37" longitude="135" zoom="4" layerui="#layerUIarea">

=====DOM API=====
======setCenter======
setCenter( longitude, latitude, zoom ) : 緯度経度ズームレベルで地図を表示させる
======addLayer======
addLayer(url,title,visibility) : URLで指定したリソースのレイヤーをtitleを付けて追加する

======svgMapObject======
getter svgMapObject : この要素に紐付いたsvgMapオブジェクトを得る

====layer要素====
svg-map要素の子要素として、任意の個数のlayer要素を設置できます。
=====属性=====
======title======
iframeで起動されるsvgMapオブジェクトの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルにある、レイヤー名(title)を指定し、そのレイヤーとlayer要素を紐付ける。該当するレイヤーが無く、且つ下記のsrcが指定されている場合は新しいレイヤーを追加する。なお、任意の属性や子ノードが与えられている場合は、下記の通りレイヤーの読み込み後にそれらの値が該当するレイヤーの[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|data-controller]]の window.rootMessageに設定される。

======src======
iframeで起動されるsvgMapオブジェクトの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルにある、レイヤーをURLを使って指定する
======visibility [TBD] ======
visible もしくは hiddenを設定すると、そのレイヤーの表示状態を制御できる。

======任意の属性======
任意の属性を設定できる。設定した属性名と属性値は、対応するレイヤーの[[#レイヤー固有ユーザインターフェース|data-controller]]で指定されたレイヤーのコントローラのwindowにおけるwindow.rootMessageの対応するメンバ変数に反映される。[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/set setter]を設定することで変化に応じて動作させることが可能になる。

======rootMessage.update()関数======
レイヤーのコントローラのwindow.rootMessage.update()関数(引数なし)が定義されている場合、上記の属性変更(最初の設定も含む)が検知される度にこの関数が呼び出される。

=====子ノード(TEXT CONTENTやXML要素)=====
任意のテキスト(textContent)や、XML要素(xmlContent)を子ノードに入れることができる。
入れられた情報は、同様に対応するレイヤーのdata-controllerの
window.rootMessage.textContent、もしくはwindow.rootMessage.xmlContentメンバ変数に反映される。
XMLに関しては任意の階層化がされていても良い。DOM操作による変化があれば更新されるので、同様にsetterを用いて変化を反映させることが可能。

=====DOMAPI=====
======layerId======
layerId : このレイヤーのレイヤーIDを得る
======svgImage======
svgImage : このレイヤーに紐付いたsvgMapコンテンツ(document)を得る
======svgImageProps======
svgImageProps : このレイヤーに紐づいたsvgMapコンテンツのsvgImagePropsオブジェクト(各種プロパティを格納したオブジェクト)を得る
======controllerWindow======
controllerWindow : (もしあれば)このレイヤーに紐づいたsvgMapコンテンツのレイヤー固有UIを得る

==第四章：内部機構解説==
[[内部機構解説|別ページを参照してください。]]

==第五章：付加機能==
===3D可視化機能===
:- SVGMap.jsはCesium.jsを利用してSVGMapで表示しているレイヤーを3D可視化することができます。
:- 3D可視化はSVGMap.jsの地図ウィンドと独立した別ウィンドで行われます。
:- すなわち、ここから呼び出されるCesiumベースの3D可視化ウェブアプリは、それ専用のwebApps([https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4_module.js cesiumWindow*.js]を読み込んだアプリ。：基本的な3D可視化ウェブアプリとして、[https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4.html cesiumWindow4.html]を用意)を持つ別のブラウジングコンテキストで起動されます。
:- この3D可視化ウェブアプリは、svgmapjsとメッセージングを行いsvgmapjsで表示されているレイヤーを3D可視化します。

====3Dビジュアライザ起動用ボタンの設置====
3D可視化機能を起動するためのUI(ボタン)は、[[#フレームワークの呼び出し|ルートhtml文書]]に設置した以下の要素によって構築されます。
<code><pre><img id="3DviewButton" data-app="cesiumWindow4.html" .../></pre></code>

* <code>id</code>が<code>3DviewButton</code>である必要があります。
* <code>data-app</code>属性で、3D可視化ウェブアプリのパスを指定することが可能です。
** もし指定されていない場合は、ルートhtml文書と同一ディレクトリの<code>cesiumWindow2.html</code>というファイルがデフォルトで指定されます。
** パスは同一オリジンである必要があります。
** 基本的な3D可視化ウェブアプリとして、[https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4.html cesiumWindow4.html]が[https://github.com/svgmap/svgmapjs/ svgmapjsリポジトリ]に用意されています。

解説書

2026-04-16T08:41:23Z

Admin: /* '【発展機能：S-LaWA Level 2 (CORS非依存モード)】 */

=SVGMap.js (Level0.1フレームワーク)解説書=

2018年現在のSVGMapのデータ形式、およびそれを実装した初歩的なフレームワーク(SVGMap Level0.1 Revision*)の解説を行います。

==第一章：SVGMapの基本機構と、更新部分==

この章は、JIS化されたSVGMap ([http://kikakurui.com/x7/X7197-2012-01.html JIS X.7197])や、[https://www.w3.org/Submission/2011/04/ W3C Member Submission]に対する、近年の開発成果に基づいたSVGMapのアップデートを解説しています。

[http://kikakurui.com/x7/X7197-2012-01.html JIS X.7197]もしくは、[https://www.w3.org/Submission/2011/04/ W3C Member Submission]に記載されているように、SVGMapの基本機構は主に以下の機能を　[https://ja.wikipedia.org/wiki/Scalable_Vector_Graphics 汎用的なグラフィイクスデータ記述形式SVG]に拡張することです。
* [[#地理座標系の処理|地理座標処理]]
** SVGの座標系と地理座標系との間の関係を記述する globalCoordinateSystems要素
* タイルピラミッド（タイリングとLevel of Detail）
** コンテンツを埋め込む[[#要素|image要素、animation要素]]のx,y,width,height属性への追加の振る舞いと、visible-min-zoom, visible-max-zoom属性の追加
** 詳細は [https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html こちらの論文]を参照
* 拡張された[[#レイヤー|レイヤー]]
** [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]におけるimage, animation要素の扱い
** [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が埋め込むsvgコンテンツ([[#レイヤー|レイヤーsvgコンテンツ]])の処理

===地理座標系の処理===
SVG2では地理空間座標を記述するスペック(metadata geospatial coordinate systems)が削除されました。これは、W3C SVG仕様の範囲では単なるメタデータであり、ユーザエージェントの振る舞いに何ら影響を及ぼさないことが理由です。　また、JIS SVGMapにおいては、coordinateReferenceSystem 要素が定義され、それに基づくユーザエージェントの振る舞いが規定されていますが、これは一方でW3Cのスペックではないという課題を持ちます。

これを受けて、現在提案されているSVGMapのデータ仕様では、SVG1.1の段階ですでに標準化と実装が行われたスペックを注意深く活用することにより、JIS SVGMapで規定された地理座標系に関する機能のいくつか（すべてではない）を実現する方法を用いることとしています。（[https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/globalView globalView spec]）

なお、JIS SVGMapのcoordinateReferenceSystem要素もサポートしています。

====メルカトル図法を含む任意の図法の定義とその合成機能(＞rev16)====
従来のSVGMapでは、グローバル座標系に緯度経度座標を用いた場合、使用できる図法は[https://ja.wikipedia.org/wiki/%E6%AD%A3%E8%B7%9D%E5%86%86%E7%AD%92%E5%9B%B3%E6%B3%95 PlateCarreeや正距円筒図法]でした。

一方、rev16では[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]を含む任意のSVGMapコンテンツ([[#レイヤー|レイヤーsvgコンテンツ]]やサブレイヤー、タイルなど)のglobalCoordinateSystem 要素のtransform属性に、下記のように"mercator"を指定することで、そのコンテンツの座標系がメルカトル図法([https://en.wikipedia.org/wiki/Web_Mercator_projection web mercator])であることを宣言できます。

<pre><globalCoordinateSystem srsName="http://purl.org/crs/84" transform="mercator" /></pre>

この記述がされたコンテンツのSVGの座標空間はメルカトル図法上のものとなり、この座標系上でのx,y=0,0(左上)は西経180.0度,北緯85.051129度、x,y=1,1(右下)は東経180.0度,南緯85.051129度に対応します。

=====メルカトル図法での地図表示=====
[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]で先述の宣言を行うことで、SVGMap0.1.jsはメルカトル図法で画面上に地図を表示します。このとき、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が参照する各レイヤーはメルカトル図法であっても、それ以外であっても構いません。フレームワーク内でオンザフライの図法変換が実行されます。（逆に[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]がPlateCarreeでレイヤーがメルカトルでも同様）

=====メルカトル図法のドキュメントルート要素のviewBox属性=====
* [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]において、地図の初期表示状態を記述するドキュメントルート要素(<svg>要素)のviewBoxに記述する座標も先述のメルカトル座標系で記述する必要があります。
* 一方、緯度経度で初期表示領域を記述したい場合に対応する仕様が拡張されており、その記述例は下記のとおり、'''global'''を追加します。
<pre><svg viewBox="global,138,35,2,2"></pre>

=====プロキシの設定=====
オンザフライでの図法変換では、多くのケースで非線形の座標変換が必要となります。ビットイメージ（タイルを含む）に対して子の座標変換を実行するためにSVGMap.jsではビット委イメージのピクセルにアクセスしています。これを実現するにはビットイメージがSVGMap.jsと同一オリジンにある必要があります。この条件を満たせないケースに対してフレームワークにはプロキシを設定する機能があります。([[#setProxyURLFactory|setProxyURLFactory API]]を参照)

'''[[クロスオリジンアクセス|詳細な情報をこちらに掲載しました]]'''

=====多様な図法の定義と利用=====
[[#動的な地図レイヤー|javascriptコード]]に記載されたscript要素内に定義した関数の関数名をglobalCoordinateSystem要素のtransform属性に記述することで、その関数を図法変換に用いた図法定義が可能となります。(先述のmercator属性は、フレームワークに特別に組み込まれた関数です）

たとえば、日本の平面直角座標系の地図(固有の基準点を持つ横メルカトル図法)をPlateCarreeやメルカトル図法の地図として合成・表示するケースなどに有効でしょう。

ユーザが定義できるこの関数は引数を持たない関数であり、返り値として以下の３つの関数を返す必要があります。
* {x,y} transform({x,y}) : グローバル座標(WGS84経度緯度)から、そのコンテンツの図法の座標への変換関数入出力値は.x,.yメンバを持つオブジェクト。
* {x,y} inverse({x,y}) : 同、逆変換関数
* number get scale : グローバル座標系に対するコンテンツの図法の座標系の座標値のスケール（グローバル座標系で1変化すると、コンテンツの座標系でいくつ変化するのかを表す）
* 記述例
<code><pre>
<svg ...>
<script>
function azimuthalEquidistant(){
...
return{
transform:function(inp){
var xy = transform_int(inp.y, inp.x, ...);
return{ x:xy.x, y:xy.y}
},
inverse:function(inp){
var latLng = inverse_int(inp.x, inp.y, ...);
return{ x:latLng.lng, y:latLng.lat }
},
scale: 1.0
}
}
</script>
<globalCoordinateSystem srsName="http://purl.org/crs/84" transform="azimuthalEquidistant" />
...map contents in projected coordinate system...
</svg>
</pre></code>

===ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング===
SVG2(SVG1.1 2nd Edition)では、SVG単独によるユーザエージェントという実装想定は撤廃され、よく知られているウェブブラウザの機能の一部としてのSVGデータの描画機能、HTMLやCSSと一体化されたデータ・コンテンツ　へと変化しました。一方、近代のウェブブラウザにおけるコンテンツでは古典的なhtmlに基づくコンテンツデータに対して、javascriptとDOM APIによるプログラムでコンテンツをブラウザ上で動的に生成する（ウェブアプリケーション）機構を備えます。すなわちSVGを実装する現代のユーザエージェントは例外なくウェブアプリケーションの実行が可能となりました。

そこで、SVGMapでは静的なSVGによる地図コンテンツに加え javascriptで動的に生成されるコンテンツ(ウェブアプリケーション)も地図コンテンツ（地図のレイヤー）として扱えることとしました。それにもかかわらず SVGMapは依然として複数のウェブ上で分散する地図データを一つの画面上にレイヤリングする機能（ハイパーレイヤリング）を維持しています。すなわち、ウェブアプリケーションとしての地図レイヤーをレイヤリング（マッシュアップ）する機能が拡張されます。これは、SVGMapのマッシュアップ・ハイパーレイヤリングの概念を、単に地図画像データのレイヤリングから、地図上に表現された動的なオブジェクトのマッシュアップ・レイヤリングに広げています。SVGMapではこのコンセプトを[[リンク集#.E8.A7.A3.E8.AA.AC.E9.9F.B3.E5.A3.B0|"Layers as WebApps"(LaWA : ウェブアプリケーションとしてのレイヤー)]]と呼んでいます。

このようなウェブアプリケーションは、レイヤーごとにカプセル化されることになります。これにより、'''グローバル空間'''(コンテナsvgコンテンツとそれを起動する、svgMap.jsフレームワークを読み込んだウェブページ)のスパゲッティ化なしに、多様な機能を実装していくことが可能になります。

[https://satakagi.github.io/mapsForWebWS2020-docs/De-centralizedWebMapping.html こちらの論文]も参考にしてください。

ウェブアプリケーションによる地図レイヤーを構築するには二つの方法があります。
* svg要素の'''data-controller'''属性で参照されたhtml文書
** [[#レイヤー固有ユーザインターフェース]]と呼ばれる機構です。この方法を用いること推奨します。
* svg要素内の'''script'''子要素 (将来廃止予定)
** htmlによるUIを伴わない実装の場合はscript要素を用いることができます。ただしsrcは属性には非対応、直接コードを埋め込む必要があります。

この機能を用いるにはSVGMapLevel0.1フレームワークを使用する場合は、拡張フレームワーク(SVGMapLv0.1_LayerUI2_r*.js)を更にロードする必要があります。SVGMapLevel0.2フレームワークの場合はデフォルトで機能します。

====レイヤー固有ユーザインターフェース====
SVGMap.jsではさらに、個々の地図レイヤー(レイヤーSVGコンテンツ)がそれぞれのレイヤーに特化した固有の演算ロジックだけでなく、ユーザーインターフェースも備えた[[#レイヤーsvgコンテンツの設定|HTMLを紐づける]]ことができる機能が拡張されています。UIも備えたより完全なwebAppをレイヤーとして実装できるため、カプセル化がより効果的に実現されます。（Layers as Web Apps, LaWA)

たとえば気象情報のレイヤーに対して気象情報の時間変化を表示するアニメーションのコントローラ(スライダーバー)や、気象情報の種類を選択するプルダウンメニュー　などのUIやロジックを任意に構築できます。

レイヤー固有ユーザーインターフェースは、[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]](SVGMap.jsをロードしたhtml)のレイヤー選択UIを通してwindowに設置されたiframe中に呼び出されます。

詳細は[[#レイヤー固有のUI]] を参照してください。



　

====例====
以下に、いくつかのこのような動的な地図コンテンツの例を示しましょう。
;検索によって表示スタイルを変更する機能を持ったレイヤー
: 例えばコンビニエンスストアのＰＯＩレイヤーを表示したとして、そのメタデータを読み取り、検索条件に基づいて（例えば深夜営業している店舗）の表示スタイルを変更するような検索機能を実装したレイヤー　メタデータは書くレイヤーごとに独特の値を持つため、その検索ロジックはレイヤーに固有のものとなることがあります。このケースではそのような機能をレイヤーに組み込むことを可能にします。
;CSVデータなどのレガシーな非SVGデータをHXRで取得し、ブラウザ上でSVG DOMツリーを生成するようなSVG地図コンテンツ。
: このケースでは、サーバからクライアントに送信されるデータの実体はSVG形式の地図データではなく、CSVなどのレガシーなデータです。SVG地図コンテンツには、CSVデータをSVGとして描画するためのデータ読み込み・解読・SVG DOMツリー生成機構を備えたjavascriptコードが含まれます。また、これよりはモダンなgeoJsonやKML等のデータをSVG DOMに変換することも容易に可能でしょう。これをより簡単に実現するためのライブラリも[[#svgMapGIStool.で呼び出せるAPI|svgMapGIStool]]に準備されています。
;タイリングされた地図コンテンツ
: それは、たとえば[https://wiki.openstreetmap.org/wiki/Tiles OpenStreepMapのTile Server]や、[https://en.wikipedia.org/wiki/Tile_Map_ServiceTileMap Tile Map Service]のような、特定のロジックによる数列のような法則性を持ったピラミッド状の地図タイルリソースをタイリングする地図コンテンツのことです。
: 更新されたSVGMapでは、地図コンテンツに内蔵されたjavascriptによるアプリケーションロジックとしてそれらを取り扱うことができます。タイリング規則をそのままウェブアプリケーションとしてで書き下し、スケールやビューポートに応じて適切なタイリング(配置)を行うSVG DOMツリーを生成するSVG地図コンテンツが構築できます。

=====タイリングに関するノート=====
[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html svgMapにおけるタイリング]は従来の地図フレームワークより柔軟で汎用的な概念に基づいています。
openLayersやleafletなどの従来の地図フレームワークでは、このようなタイリング機能は特定の固定的なタイリングロジックとパラメータを伴った機能として地図フレームワーク本体にハードコードされて提供されてきました。さらには地図フレームワークがこれらのタイリングロジックに強く依存したアーキテクチャを持っていました。一方、これらのロジックにはさまざまなバリエーションや最適化のための調整パラメータが存在し、これまで長らくその互換性や相互運用、更には効率の問題を抱えてきました。次のリンクでその多くの議論や多様な提案を参照できるでしょう。[https://wiki.osgeo.org/wiki/Tile_Map_Service_Specification TMSspecs@osgeowiki], [https://wiki.osgeo.org/wiki/Category:Tiling tiling@osgeowiki]
ベクターデータのタイリングにおいては、これらの課題はさらに増幅され、いまだ手法は確立していないといっても良いでしょう。たとえば、我々の研究では、Quad Tree Composite Tiling([https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-in-english スライド]、、[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html ペーパー])のような用途によってはもっと優れたタイリングの手法も見いだされています。

一方、これらのロジックはその多様なバリエーションを含め、javascriptによるプログラムコードとしては容易に記述可能です。多くの場合わずか数十行のロジックで記述できるでしょう。この程度のコードで多くのタイリングの手法が包含できるのであれば、特定のタイリング手法をフレームワークのコアに内包する・さらにはこれら特定のタイリングの手法にコアが依存する必要はなく、先述のウェブアプリケーションによる動的な地図レイヤーとして実装すれば良いであろうというのがSVGMapにおけるタイリング扱いです。3DマップのフレームワークであるCesiumはこれに似たタイリングポリシーを持っているようです。

=====SVG以外のデータサポートに関するノート=====
前章に記載した方針と同様、他の地図表示フレームワークと異なりSVGMapではSVGとして規定されたコンテンツ(もちろんビットイメージの埋め込みは可能)以外のネイティブサポートは行いません。例えばgeoJsonやKML, WKTなど地図業界でしばしば用いられるデータをSVGMapで表示したい場合は、変換ルーチンを埋め込んだ動的な地図コンテンツ（webAppレイヤー）としてそれらを扱います。SVGMap.jsの拡張モジュールである[[#svgMapGIStool.で呼び出せるAPI|SVGMapGIS.js]]には、これらのデータをwebAppsで読み込みSVGに変換するためのAPIがあります。

===トポロジースイート(地理空間情報処理)===
Rev.13で拡張

SVGMapLevel0.1 Revision 13以降では、SVGMapコンテンツに対してトポロジー演算機能(地理空間情報処理機能)を適用する拡張フレームワークが提供されます。この機能を用いるにはSVGMapLevel0.1フレームワークに加えて、拡張フレームワーク(SVGMapLv0.1_GIS_r*.js)をロードする必要があります。このフレームワークでは、[[#svgMapGIStool.で呼び出せるAPI|拡張されたAPI]]が利用可能です。フレームワークに内蔵された基本的な演算機能に加え、geoJSONと整合するインターフェースを備え、[https://github.com/bjornharrtell/jsts jsts]を組み込み、より高度な機能を実装するための機構も持ちます。

この機能を用いると、特定のレイヤーに登録されているポリゴンの範囲に入っている、特定のレイヤーのポイントをフィルタリングして表示の色を変更する。といったことが可能です。ただし、これらはすべてすでにブラウザ上にロードされている限られた量のコンテンツの中での演算に限定されます。もしもサーバ上にしかないデータに対してこれらの演算を試みたい場合、従来通りサーバサイド技術によってそれは実現すべきです。

また、主題情報を含むウェブマップコンテンツの多くのレイヤーがラスタータイルによって提供されているという現状を考慮し、このスイートはラスターレイヤーをカバレッジとして扱った空間情報処理を行う機能の実装も進められています。現在のところ、カバレッジとポイントとの間での演算が可能です。また、そのために便利なカラーピッカー等の付加的な機能の実装も進められています。

===オーサリングシステム===
Rev.14で拡張

SVGMapLevel0.1 Revision 14以降では、SVGMapコンテンツを編集するツール機能が実装された拡張フレームワークが提供されます。[[#svgMapAuthoringTool.で呼び出せるAPI|フレームワークが提供するAPI]]を使って、オーサリング機能を持ったレイヤーを作ることが可能です。コンテンツは、SVG DOMとして構築されます。なお編集したオブジェクトを保存したり登録するためには別のサービスやアプリケーションの開発が必要です。

===3D可視化システム===
Rev.15で拡張

[https://cesiumjs.org/ Cesium.js]を用いて、SVGMap.jsが表示できるすべてのコンテンツを3D可視化するシステムです。詳細解説はTBD ([[#svgMapCesiumWrapper.で呼び出せるAPI|フレームワークが提供するAPI]])

===プログレッシブウェブアプリケーション===
Rev.16で拡張

[https://developer.mozilla.org/docs/Web/Progressive_web_apps Progressive Web Apps]をサポートしたブラウザにおいて、SVGMap.jsをオフラインでも利用可能にする拡張機能です。詳細解説はTBD ([[#svgMapPWA.で呼び出せるAPI|フレームワークが提供するAPI]])

===SVGMapコンテンツのバックエンドソフトウェア (参考)===
本解説書は主にコンテンツ形式とユーザーエージェント側のソフトウェアについて解説していますが、サーバ・バックエンド側についてもここで少し言及します。

shapefileやcsvなどから、静的なSVGMapコンテンツを生成するためのソフトウェアが[https://github.com/svgmap/svgMapTools オープンソース]で準備されています。これらのソフトウェアでは、[[#タイリングに関するノート|高度なタイリング手法]]を用いた地図タイルを生成することができます。使用方法などは同リポジトリに用意されているチュートリアルを参照してください。

一方、もちろんSVGMapの仕様に準拠すれば、これらのソフトウェアに頼らず、自由にバックエンドを構築することができます。例えばよく知られた地図タイルサービスを用いたり、古典的な[https://wiki.openstreetmap.org/wiki/Web_feature_service WFS ]や[https://wiki.openstreetmap.org/wiki/WMS WMS]のような動的地図・地理空間情報サービスをベースにして比較的容易にそれらを構築することもできます。[https://github.com/svgmap/svgMapLv0.1/tree/master/appLayers SVGMap.jsのリポジトリのappLayersディレクトリ]にはそのようなシステムを構築する際のフロントエンド側の動的レイヤーのサンプルが掲載されています。

==第二章：SVGMap Revsion 0.1フレームワーク==
SVGMapは究極的には既存のすべてのウェブブラウザがネイティブの機能としてそれを備えることを目標とし、既存のHTML,CSS,SVGなどのウェブブラウザの標準規格との整合性を備え、且つ既存のWeb Mappingの規格との整合性をも備えた仕様として検討と標準化を進めています。しかし今のところまだその標準化は完遂されていないため、その完全な実装がなされたウェブブラウザは存在しません。一方、既存のウェブブザでSVGMapの機能が実行可能となるような拡張をJavascriptによるフレームワークとして構築することが可能です。SVGMap Revision 0.1フレームワークは、このようなJavascriptによるSVGMapの仕様に基づいた初歩的な制限と拡張がされた実装です。その実装はオープンソースとして[https://github.com/svgmap/svgMapLv0.1 こちらのgitubリポジトリ]で公開されています。

そのアーキテクチャの特徴は、ブラウザネイティブのSVGレンダラーを使用せず、HTML,CSS,HTMLCanvas2DAPIを用いてSVGMapが実装されている点です。この特徴は主にこのフレームワークの開発が開始された時期に起因しています。当時のウェブブラウザの多くはSVGが実装されていませんでした。また実装されていたとしても、大規模なベクトルデータのレンダリング、および伸縮スクロール・インタラクティブな操作に対する性能面での処理制御に問題がありました。これらの問題のいくつかは現在のブラウザで解消されているものがあるかもしれません。またこれらの問題の解決とともに、SVGMapフレームワークはLevel番号を上げつつよりネイティブの機能に基づいた実装に移行するかもしれません。<font size="-2">参考までに、[http://svg2.mbsrv.net/devinfo/devkddi/lvl0.5/ 実験的なネイティブのレンダラを用いた実装(2010年)]があります。</font>

SVGのベクトル描画機能は[https://github.com/canvg/canvg canvg]のpathパーサなどを引用することで実装されています。一方、地図としてあまり用いられないと想定された多くの要素やプロパティ、アトリビュートの実装が省略されています。

===追加・拡張された機能：===
====フレームワークの呼び出し====
本フレームワークを用いる場合、SVGMapコンテンツをブラウザに直接読み込ませることはできません。フレームワークを動作させるjavascriptライブラリをロードしたhtmlコンテンツ(WebApps)を準備し、そこでSVGMapコンテンツを読み込み表示させます。利用者には、このhtmlコンテンツのURLを告知します。このhtmlコンテンツを以降'''ルートhtml文書'''と呼ぶことにします。

SVGMapのフレームワークはgithubリポジトリ：https://github.com/svgmap/svgmapjs　で公開されています。

htmlコンテンツの<body>要素直下に以下の要素を配置します。
=====フレームワークを実装したjavascriptライブラリを読み込むscript要素=====
これがSVGMap.jsのコアのフレームワークを構成します。

<nowiki><script type="module">
import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

上のスクリプトで必要なモジュールが読み込まれます。[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]のwindowのメンバには、svgMapオブジェクトを設定しています。

[https://svgmap.org/devinfo/devkddi/tutorials/tutorial5_esm/tutorial5.html 実働サンプル(tutorial5_esm)]

もしくは https://github.com/svgmap/svgmapjs の内容を独自のウェブホストにコピーしそれを用いることもできます。(下の例は[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]のhtmlに対して、svgmapサブディレクトリにjsを置いた場合)
<nowiki><script type="module">
import { svgMap } from './svgmapjs/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

===== GISモジュールを利用する場合 =====
svgMap.jsの地理空間演算機能(GISモジュール)では、jsts.jsを使用しています。そのためGISモジュールを機能させるにはjsts.jsの読み込みが必要です。下記のようになります。もちろん独自のウェブホストにjstsをコピーしてそれを利用することも可能です。

<nowiki><script type="text/javascript" src="https://unpkg.com/jsts@1.6.1/dist/jsts.min.js"></script>
<script type="module">
import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

======本解説書でAPIを説明している、現在利用可能な拡張フレームワーク======
ECMA Script Module対応の内容に現在更新中

* [[#svgMapCesiumWrapper.で呼び出せるAPI|SVGMapLv0.1_CesiumWrapper_r*.js]] (実験的)
** https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/experimental/Cesium3D/SVGMapLv0.1_CesiumWrapper_r3.js
* [[#svgMapPWA.で呼び出せるAPI|SVGMapLv0.1_PWA_r*.js]] (実験的)
** https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/experimental/PWA/SVGMapLv0.1_PWA_r5.js

まだ実験的なsvgMapCesiumWrapperは、[http://www.svgmap.org/devinfo/devkddi/lvl0.1/cesiumSvgMap/top.html svgMap cesium visualizer]ページを参照ください。
SVGMapPWA(ProgressiveWebApp)については、[https://svgmap.org/devinfo/devkddi/lvl0.1/svgMapPWA/ SVGMap PWA Test]ページを参照ください。

=====SVGMapコンテンツを配置するためのdiv要素=====
id属性に"mapcanvas"を設定し、data-src属性(もしくはtitle属性(to be obsoluted))には、地図フレームワークが最初に読み込む、SVGMap.jsが表示する地図コンテンツの起点となるSVGコンテンツ（以降'''コンテナsvgコンテンツ'''と呼びます）のパスを指定したdiv要素を設置します。

コンテナsvgコンテンツはまた、'''[[#レイヤー|ここで記述するレイヤー]]'''を持つことができる特別のコンテンツです。

（要確認：地図のサイズ・配置はこのdiv要素のサイズとなります。無指定の場合は全ウィンドサイズ）
<nowiki><div id="mapcanvas" title="Container.svg"></div></nowiki>

<nowiki><div id="mapcanvas" data-src="Container.svg"></div></nowiki>

======差分データの指定======
data-custom-layers-root属性でContainer.svgに対するレイヤーの差分情報のパスを指定することができます。
もしくは、data-custom-layers-root属性に、レイヤーの差分情報が保管されているディレクトリを記述した場合、URLハッシュで差分ファイルを指定することもできます。
差分データは、[https://github.com/svgmap/svgmapjs/blob/main/SVGMapCustomLayersManager_r3module.html カスタムレイヤーマネージャ]で作成することが可能。（データ形式は後述）
<nowiki><div id="mapcanvas" data-src="Container.svg" data-custom-layers-root="./containerDif/dif0.json"></div></nowiki>

=====地図中心の照準イメージ。=====
参照する画像はあらかじめ用意されたもの以外も利用できます。
<nowiki><img id="centerSight" style="opacity:0.5" src="Xcursor.png" width="15" height="15"/></nowiki>

====任意で設置できる要素：====
=====[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]](後述)を設置するdiv要素=====
<nowiki><div id="layerList" style="left :30px; top: 10px; width:300px;height:90%; position: absolute; "></div></nowiki>
: idが上記の通りである必要があります。
　 styleは任意だが、heightは[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]が展開された状態におけるサイズとなります。格納された状態のサイズは、この要素における文字の縦幅となります。各種オプションについては[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|詳細を参照ください]]
　

=====[[#レイヤー固有のUI|レイヤー固有のUI]](後述)を設置するdiv要素=====
[[#レイヤー固有のUI|レイヤー固有のUI]]を使用するために設置するdiv要素です。

<nowiki><div id="layerSpecificUI" style="right :10px; top: 40px; width:400px;height:400px; position: absolute; background-color: white;opacity:0.8;display:none;"></nowiki>
<nowiki></div></nowiki>
: idが上記の通りである必要があります。styleは任意だが、heightはレイヤリストUIが展開され得る最大のサイズとなります。
　
=====伸縮ボタン=====
<nowiki><img id="zoomupButton" style="left: 5px; top: 5px; position: absolute;" src="zoomup.png" onclick="svgMap.zoomup()" width="20" height="20" /></nowiki>
<nowiki><img id="zoomdownButton" style="left: 5px; top: 25px; position: absolute;" src="zoomdown.png" onclick="svgMap.zoomdown()" width="20" height="20" /></nowiki>
: img要素かつidが上記の値である必要があります。
　伸縮ボタンを一回押すたびに伸縮する比率は、別途svgMap.setZoomRatio(ratio)で設定可能。
　デフォルトの比率はsqrt(3)
　
=====測位ボタン=====
<nowiki><img id="gpsButton" style="left: 5px; top: 45px; position: absolute;" src="gps.png" onclick="svgMap.gps()" width="20" height="20" /></nowiki>
: img要素かつidが上記の値である必要があります。ボタン押下で測位し、測位点を中心にして地図を表示する機能。表示の範囲は測位制度に応じて適当に設置されます。

=====グローバルメッセージ=====
レイヤー固有UIが任意のメッセージを出力可能にするために設置するエリア　[[#レイヤー固有のUI]]のAPI '''putGlobalMessage''' 参照
<nowiki><span id="globalMessage" style="font-size:10px;left:5px;bottom:16px;position:absolute;"></span></nowiki>
: idが上記の値である必要があります。
　styleは任意

=====地図中心の緯度経度値表示=====
<nowiki><font id="centerPos" size="-2" color="brown" style="left: 50px; bottom: 5px; position: absolute;" ></font></nowiki>
: idが上記の値である必要があります。
　styleは任意

=====地図スケールの表示=====
<nowiki><font id="vScale" size="-2" color="black" style="left: 5px; bottom: 28px; position: absolute;">-</font></nowiki>
: idが上記の値である必要があります。
: styleは任意
: 縦50pxに対応したスケール[Km]を表示します
: 近傍に縦50pxのスケールイメージを設置するとわかりやすいでしょう

=====レジューム機能のためのチェックボックス=====
<nowiki><form style="right:10px;top:20px;position:absolute;opacity:0.8" ></nowiki>
<nowiki><input type="checkBox" id="resumeBox" onChange="svgMap.resumeToggle(event)" autocomplete="off"/></nowiki>
<nowiki><label for="resumeBox"/>Keep and Resume view</label></nowiki>
<nowiki></form></nowiki>
: checkboxタイプのform要素であり、idが上記の通りである必要があります。レジューム機能とは、(rev16以前ではcookie、rev17以降ではlocalStorage)を用いて、前回最後に表示された状態（レイヤーの表示非表示状態、表示領域（view port）を再現する機能です。スタイルおよびlabel要素は任意

===== [[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]のためのスタイル=====
<style>
body {
font-family: Meiryo;
}
#layerTable{
background:#ffE0E0;
border: 2px solid #bbb;
}
.layerItem{
background-color: white;
}
.noGroup{
background-color: #fff0f0;
}
#layerList{
background-color: #ffff80;opacity:0.8;
}
</style>
====== [[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]を用いる場合、例えば上記のようなスタイルの定義が必要です。======
* layerList：レイヤーリストUI全体に対するスタイル
* layerTable：レイヤーリストUIの中のテーブルに対するスタイル。
* layerItem：同テーブルに表示される個々のレイヤー表示に対するスタイル
* noGroup：同レイヤー表示のうち、グループに属さないレイヤーに対するスタイル
　

====レイヤー====
SVGMapは古典的な地図情報システムのようなレイヤーの概念を備えていません。一方その上位概念ともみなせる、任意のドキュメントをツリー状に埋め込む機能を備えています。しかしそれでは古典的なユースケースを平易に表現しているとはいえないため、それをラップする古典的なレイヤーの概念と、それに基づくレイヤーユーザインターフェースのフレームワークを持ちます。

フレームワークが最初に読み込む地図コンテンツの起点となる'''[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]'''の中で、animationもしくはiframeを用いて（準拠規格に依る）埋め込まれるsvgコンテンツが、自動的にレイヤーとみなされます。いうまでもなくレイヤーの上下順はSVGコンテンツのスクリプト中での埋め込みの順番の逆順になります。

また、このコンテナsvgコンテンツが参照し埋め込んでいる、各レイヤーのSVGコンテンツのことを、'''[[#レイヤー|レイヤーsvgコンテンツ]]'''と呼ぶこととします。ここで、各[[#レイヤー|レイヤーsvgコンテンツ]]はさらに別のsvgコンテンツを埋め込むことがあります。これらのコンテンツはよくサブレイヤーSVGコンテンツもしくは単にサブレイヤーと呼ばれることもあります。

なお、Rev12以降のSVGMapLv0.1フレームワークではレイヤーフレームワークは本体と独立した実装となり、拡張や切り離しが可能となりました。以下は、標準で提供されるレイヤーフレームワークのVer2 (SVGMapLv0.1_LayerUI2_r*.js)に関して解説します。

レイヤーUIフレームワークが提供するUIは、先述のレイヤーリストUIを設置するdiv要素によって提供されます。このUIは以下の機能を持ちます。
* 折り畳み可能なレイヤーの一覧を表示する機能
* 各レイヤーの表示非表示を切り替える機能
* グルーピングされたレイヤー(後述)をグループとして表現、折り畳み、一括表示非表示する機能。
* そのレイヤーに紐づけられた[[#レイヤー固有のUI]]を出現させる機能。
* 表示されているレイヤーの個数などの情報を表示する機能

===== コンテナsvgコンテンツの記述内容とレイヤーフレームワークの振る舞い =====
* animation要素：　レイヤーとみなされる
** title属性: レイヤーの名称となる。(必須属性) title属性値は他のレイヤーと重複してはならない(ID(このコンテンツ内でのレイヤーの識別子)として振る舞う)
** xlink:href属性: レイヤーsvgコンテンツへの参照
** visibility属性 : レイヤーの初期の表示状態。UIにより変更できる (hidden or visible)
** opacity属性 : レイヤーの透明度
** x,y,width,height属性の振る舞いは共通(viewportがこの属性の値とintersectしていただロードされる)
** class属性: スペース区切りで規定値(複数)と任意値(一つ)を記述できる
*** 詳細は後述の[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供]]を参照
** data-controller属性: (Optional) [[#レイヤー固有のUI]]　の　[[#詳細]]参照
* globalCoordinateSystem要素：(1個つだけ必須要素)
** (コンテナsvgコンテンツにおける)本要素が、このフレームワークによってUser Agentに表示される地図の図法を規定する。
*** なお、それ以外のSVGコンテンツのglobalCoordinateSystem要素は、コンテナsvgコンテンツの図法への変換のために用いられる
*** より詳細は[[#地理座標系の処理]]を参照
* svg要素: (documentRoot要素)
** viewBox属性: 初期の表示範囲を指定。
*** ここに記述する座標値は、SVGの仕様に準ずるが、　拡張記述形式も使用可能　参照：[[#メルカトル図法のドキュメントルート要素のviewBox属性]]

===== レイヤーsvgコンテンツ =====
レイヤーsvgコンテンツは、[[#レイヤー固有のUI|レイヤー固有のUI]]を紐づけることができます。

====クリッカブルオブジェクト====
グラフィックスオブジェクトをクリック（タブレットの場合は、タップもしくは照準アイコンに合わせたうえでタップ）することでそれに紐づけられたインタラクティブ動作を実行する。インタラクティブ動作はフレームワークが独自に提供する、metadataフレームワークに基づく、メタデータの表示機能を対象とします。

なお、image要素(useによって間接的に設置されたimage要素を含む)は、a要素によるハイパーリンクが加えて実装されています。metadaとa要素の双方が設定されているimage要素では、どちらのインタラクティビティを発動させるかをモーダルダイアログによるユーザへの問い合わせが行われます。

====class属性によるレイヤーのグルーピング・クリッカブル機能の提供====
コンテナsvgコンテンツが参照するレイヤー（[[#レイヤー|レイヤーsvgコンテンツ]]）へのリンクを記述する要素(animationもしくはiframe要素)は、class属性によって、各レイヤーに特性を与えることができます。classはスペース区切りで複数指定することができますが、グループ名は一つしか認識されません。
;グルーピング
: 以下の属性値以外の値を記述すると、グループ名として認識され、同じグループ名を持ったレイヤーたちをグルーピングすることができます。グルーピングの効果はレイヤーＵＩにおけるグループ表現と、下記のbatch,switch特性です。グループはレイヤーリストUI上の表現に反映されます。最初に現れたグループ名がこのUIの下に表示されます。ただし地図画面上の描画の順番はこれとは別、SVGの基本的な描画順([https://www.w3.org/TR/SVG11/render.html#PaintersModel Painter Model])に準じます。
;batch
: グルーピングとともに使用します。そのグループに属するレイヤーを一括で表示非表示するための機能がレイヤーＵＩに付加されます。
;switch
: グルーピングとともに使用します。そのグループに属するレイヤーは、どれか一つしか表示されません。batchとの併存はできません。（無視されます（要確認））
;clickable
: Pathなどのベクトル図形要素はデフォルトではインタラクティビティが提供されません。クラス値にclickableを指定することでこのレイヤー（子供のsvgコンテンツを含む）の図形要素においてのみ、インタラクティビティが提供されます。提供されるインタラクティビティは、マウスによって図形をクリックしたとき、そのグラフィックス要素がクリッカブルな要因を備えているかどうかを検索し、備えている場合それに対応するアクションを起こします。
　なお、image要素(useによって間接的に設置されたimage要素を含む)は、このクラスの設定に依らず、a要素によるハイパーリンク、およびmetadataフレームワークを用いたクリッカブルオブジェクトとして機能します。
;editable
: 当該レイヤの[[#レイヤー固有のUI|レイヤー固有UI]]に[[#svgMapAuthoringTool.で呼び出せるAPI|svgMapAuthoringTool]]の図形編集オブジェクトを設置する場合、それを有効に機能させるためにはこの属性が必要です。(なお再編集機能を有効にするにはclickableも必要)

====data-nocache====
コンテナsvgコンテンツが参照するレイヤー（[[#レイヤー|レイヤーsvgコンテンツ]]）へのリンクを記述する要素(animationもしくはiframe要素)に、data-nocache属性をつけることによって、クライアントのコンテンツキャッシュを無効にすることができます。なお、無効化手段はunix-timeクエリパートをそのレイヤー下のすべてのリソースへのアクセスに付加させることによります。

====metadataフレームワーク====
データ格納効率に優れたメタデータのフレームワークが提供されます。このメタデータは先述のクリッカブルオブジェクトとしてインタラクティビティの実装に用いられます。 svgドキュメントルート要素のproperty属性にメタデータの属性名をカンマ区切りで列挙。同文書の図形要素のproperty属性に同じ順序でメタデータの値を記述します。(なお、xlink:title属性でマウスオーバーで機能する吹き出しを設置できます)

ひとつの文書に対して一つのスキーマ（メタデータの属性名とその順番）しか与えられないという制約を持ちます。（その代わり格納効率が高い）クリックやタッチ等によってデフォルトの状態ではブラウザが備えるモーダルダイアログに属性名と属性値がそれぞれ列挙された形で表示されます。metadata表示機能の拡張/カスタマイズについては、ウェブアプリケーションの開発の章で別途解説する'''setShowPoiProperty()'''関数を参照してください。

データ自体にカンマが含まれる場合はエスケープが必要です。

=====例：=====
<svg '''property="id,type,latitude,longitude,title,address,spec"''' ... >
...
<use transform="ref(svg,14118.37511,-4524.39994)" x="0" y="0" xlink:href="#syl8"
'''content="RIS/RJER,地方管理,45.2439994,141.1837511,利尻空港,北海道利尻郡利尻富
士町,1800×45(07/25)"''' xlink:title="利尻空港"/>
...
</svg>

====レイヤーリストUIの詳細====
[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.28.E5.BE.8C.E8.BF.B0.29.E3.82.92.E8.A8.AD.E7.BD.AE.E3.81.99.E3.82.8Bdiv.E8.A6.81.E7.B4.A0|レイヤーリストUIが設置されるdiv要素]]には、以下のプロパティを設定することで、UIの動作を調整するパラメータを与えることができます
* data-customizer [https://github.com/svgmap/svgmapjs/blob/main/SVGMapCustomLayersManager_r3module.html カスタムレイヤーマネージャ]の起動ボタンを設置し、プロパティ値で同ウェブアプリのパスを指定します。
* data-layerstylecontroller 各レイヤーの表示スタイルを調整するUIを設置します(値不要)
* data-hiddenfilter 表示されていないレイヤーをレイヤーリストUI上でも非表示にする機能を稼働させます(値不要)
* data-opened svgMapウェブアプリが起動した直後にレイヤーリストが開かれた状態にします
* data-fixed レイヤーリストが開かれた状態且つ閉じるボタンを表示させません(data-openedと排他)

===動作の制限・差異===
====再描画の制限====
* ブラウザネイティブのSVG描画機能に対して注意すべき点として、このSVGDOMの描画は、基本的に伸縮スクロールのタイミングでしか行われない点です。（ネイティブのSVG描画機能は60fpsで再描画する努力を行っている) そのため、再描画タイミングを意識・明示([[#refreshScreen|refreshScreen]]関数を使用)したアプリケーションの構築が必要になるケースがあります。
*関連情報
**[[内部機構解説#Zoom.2FPan_Controller:]]
**[[解説書#refreshScreen|refreshScreen]]
**[[解説書#setPreRenderController|setPreRenderController]]
**[[解説書#.E6.8B.A1.E5.BC.B5API|preRenderFunction ]]
**[[解説書#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|動的な地図レイヤー]]
**[[解説書#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|レイヤー固有のUI]]
**[[解説書#.E6.8B.A1.E5.BC.B5.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88|拡張イベント]]

===実装されている機能===
多くの機能が実装されていないため、実装されている機能、および拡張された機能をここでは列挙することとします。
====要素====
*path
*globalCoordinateSystem
*circle
*text
*defs
*animation
** 別のsvgコンテンツを取得して埋め込みます。
** コンテナsvgコンテンツで使用した場合は埋め込んだコンテンツは「レイヤー」と見做されます。
** それ以外で使用した場合はタイルやサブレイヤーとして使用できます。
** x,y,width,height属性は、SVGの仕様に基づき埋め込むコンテンツのtransformに影響を与えるとともに、下記の通り動的なコンテンツの読み込み機構が制御されます。
*** この属性で示された領域がtransform後のviewportと交差・包含した場合、その埋め込みコンテンツは動的に取得され表示されます。lazy loadの機構に相当し、タイリングメカニズムを構成します。
*** ただし、visible-min-zoom およびvisible-max-zoom属性で示された拡大率による表示条件を満たしていない場合は取得されません。level of detailの機構に相当します。（x.y,width,height属性と組み合わせることで、タイルピラミッド（ラスター、ベクターを含む）機構を実現します。詳しくは[http://kikakurui.com/x7/X7197-2012-01.html JISX.7197]、[https://www.w3.org/Submission/2011/04/ Tiling and Layering Moduleサブミッション]、もしくは[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html こちらの論文]を参照
** commonQuery属性：[[#レイヤーsvgコンテンツ]]のanimation要素でこの属性を設置すると、そのレイヤーのコンテンツを取得するすべてのGETリクエストのクエリパートにこの属性で設定した値が共通付加されます。(もしKey=Valueの形のクエリを追加したい場合は文字列として"Key="の部分も含めてこの属性値に設定します。)
*iframe
** animationと同等
*image
** 別のビットイメージコンテンツを取得して埋め込みます。
** animation属性のx,y,width,height属性と同様の追加のlazy loadの振る舞いを持ちます。
** visible-min-zoom およびvisible-max-zoom属性の振る舞いも同等です。
** xlink:href属性はspatial fragment をサポートし、(xywhによっ参照されるimageの部分を埋め込む機能をサポートします。)。もしもアスペクト比が異なった場合（ＴＢＤ）
** style:filterプロパティによる画像処理をサポートします。
** data-mercator-tile="true"　属性が設定されている場合、そのビットイメージはメルカトル図法で描画されていることを示します。
** htmlのimg要素のcrossoriginに対応する属性を持つことができます（この場合ビットイメージの埋め込みに際しoriginヘッダが送信）
*view

====属性====
*<code>ref(svg,x,y)</code> ：SVG1.2Tの[https://www.w3.org/TR/SVGTiny12/single-page.html#coords-transform-ref TransformRef]属性により、non-scaling objectが設置できます。Pointフィーチャの可視化に効果的です。　

'''TBD'''
*fill
*stroke
*arrow
*dasharray
*viewvox
*opacity
*style
**image-rendering : pixelated / image要素
**fill
**stroke
**opacity
*meta
**http-equiv="refresh" : [[#レイヤー|レイヤーsvgコンテンツ]]のみ。contentに秒数を設定することで、そのレイヤーを指定秒数ごとに(再読み込み)更新する。script要素はonloadが再実行される。　注：ブラウザのキャッシュが効く可能性を考慮して実装する必要がある。

==第三章：ウェブアプリケーションの開発==
本章はSVGMap Revsion 0.1フレームワークを用いたウェブアプリケーションの開発について解説します。
本フレームワークによる開発部分は以下に分類されます。
*[[#フレームワークの呼び出し|ルートhtml文書]]によるウェブアプリケーション(SVGMapフレームワーク)
* 動的な地図レイヤー(Layers as WebApps) : SVGコンテンツに以下のいずれかの情報を設定する
** [[#レイヤー|レイヤーsvgコンテンツ]]のドキュメントルート要素のdata-controller属性　[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|レイヤー固有のUI]]
** svgドキュメントに設置されたscript要素 [[#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|script要素による動的な地図レイヤー]]

===SVGMapフレームワーク===
[[#フレームワークの呼び出し|ルートhtml文書]]によるウェブアプリケーションはSVGMapLv0.1フレームワークを用いたウェブアプリケーションの基本であり、そのhtml文書と底傘参照されたjavascriptライブラリを読み込んだwindowが持つ''''svgMap''''という名前のインスタンスを用いてフレームワークのための拡張機能を利用することができます。

====SVGMapが持つ基幹オブジェクト====
SVGMapLv0.1フレームワークのインスタンス''''svgMap''''が持つ基幹のオブジェクトを解説します。これらの基幹オブジェクトはそれぞれゲッター(getSvgImages, getSvgImagesProps)によって取得できます。
=====svgImages[]=====
[[#getSvgImages|getSvgImages()]]により取得できる。svgImages[hashID]は、現在ローディングされているSVGドキュメント(“XML” DOMツリー(SVG DOMツリーというよりむしろ))が蓄積されているハッシュテーブル
*ハッシュID：フレームワークが任意に付番した文書ID。ただし、最初にロードされるルートのドキュメントのハッシュキーは、”root”
*なお、[[#レイヤー固有のUI]]のwebAppでは、そのレイヤーに該当するSVGドキュメントが[[#svgImage|svgImage]]で取得できる。

=====svgImagesProps[]=====
[[#getSvgImagesProps|getSvgImagesProps()]]によって取得できる。
同、個々のSVGドキュメントが持つ、各種プロパティが蓄積されているハッシュテーブル。
注記がない限り全てReadonly
*ハッシュID： svgImages同様
*なお、[[#レイヤー固有のUI]]のwebAppでは、そのレイヤーに該当するSVGドキュメントが持つ、各種プロパティが[[#svgImageProps|svgImageProps]]で取得できる。
======プロパティリスト======
*.Path コンテンツのパス（webAppsのdocument(html) rootに対する相対パス。Originが違う場合は絶対パス(クエリパートやフラグメント(ハッシュ)も含む)
*.CRS 地理座標からSVG座標に変換するための変換パラメータ
*.script SVG文書がscript要素を持つとき、そのscriptへのインターフェースが登録される。同script要素で生成されるオブジェクトに暗黙に登録されるメンバー変数については、[[#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|script要素による動的な地図レイヤー]]の章を参照
*.editable 編集可能レイヤーを示す　[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供|レイヤーのclass = editableに対応]]
*.editing 編集可能レイヤーを編集中
*.isClickable クリッカブルなレイヤーを示す
** true:設定　[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供|レイヤーのclass = clickableに対応]]
** 以下をメンバーに持つオブジェクト:ハイライト時のスタイルを設定可能(rev18以降)
*** .hilightFillStyle : ポリゴンオブジェクトのハイライト時スタイル（以下のメンバーが無い場合はハイライトしない）
**** .color : 塗りの色 (CSS の color値として解釈される文字列)
**** .lineWidth : 線幅
*** .hilightStrokeStyle : 線オブジェクトのハイライト時スタイル（以下のメンバーが無い場合はハイライトしない）
**** .color : 線の色 (CSS の color値として解釈される文字列)
**** .widthIncrement : 線幅の増加値
*.parentDocId このSVG文書を埋め込んでいる、親のSVG文書のハッシュID
*.childImages[hashID] このSVG文書が読み込んでいる、子のSVG文書(複数)
*.refresh
**.loadScript
**.timeout
**.start
*.controller レイヤー固有のUIへの(web appsのdoc rootに対する)相対パス
*.isSVG2 その文書がSVG2タイプの文書であるかどうか(CRSとembedの仕方がちがう）
*.rootLayer そのSVG文書が属する「レイヤー」を示す文書
*.scale そのSVG文書の現在のスケール。スケールはそのSVG文書の座標系と画面の座標系との間の値（地理座標系ではない）。拡大するとスケール値は大きくなる
*.preRenderControllerFunction そのSVG文書の再描画(画面更新)シーケンスの直前に実行される関数
*.hash そのレイヤーのURLのフラグメント部（この値は、レイヤ固有WebAppで変更が有効）

====利用可能API====
【TBD】 APIのリストは下記の通りです。
=====SVGMap.で呼び出せるAPI=====
======Geo2SVG======
*Geo2SVG( lat , lng , crs ) : 指定された緯度(lat)・経度(lng)・CRSより、SVG座標を計算する
======POIviewSelection======
*POIviewSelection( poi ) : 指定されたPOIの属性・リンクの表示選択画面を表示する。また、選択したイベントに従い、属性の表示または、リンク先のページを表示する。
======SVG2Geo ======
*SVG2Geo ( svgX , svgY , crs , inv ) : 指定されたSVG座標(svgX , svgY)をCRSにより、GEO座標に変換する。または、invにより逆変換する
======addEvent======
*addEvent(elm,listener,fn) : 指定された要素(elm)にイベント属性(listener)時の呼び出す関数(fn)を設定する (addEventListenerが実装されていなかったブラウザサポートの名残です)
======callFunction======
*callFunction( fname ,p1,p2,p3,p4,p5) : 指定した関数(fname)を引数(p1,p2,p3,p4,p5)を渡してフレームワーク内の任意の関数を実行する。(フレームワークの内部関数も呼び出すことができる)
======captureGISgeometries======
*captureGISgeometries( cbFunc , prop1 , prop2 , prop3 , prop4 , prop5 , prop6 , prop7 ): 現在画面上に表示中の地図コンテンツに対応した、GeoJsonのGeometryデータ構造に準拠のGISgeomerry情報をがレイヤ単位でまとまった連想配列の形で取り出す。非同期処理で、cbFuncの最初の引数に返却される。
** 連想配列のハッシュ値：レイヤID
** geomeryには、src(そのジオメトリのもととなっているSVGの図形要素), href(ビットイメージの場合のリンク)が付加される
** geoJsonのgeometryに相当する情報が含まれる（座標は[経度,緯度]）
** display="none"の図形要素は表示されていないとみなされる。また画面外にある図形要素も表示されていないとみなされる。画面に部分的に表示されている要素は表示されているものとみなされるとともにクリッピングも行われない。
** [[#captureGISgeometriesOption|captureGISgeometriesOption]](true)を設定してから実行すると、ビットイメージもジオメトリとして取得する。（ただし実データは含まれないので必要に応じて[[#getImagePixelData|getImagePixelData]]で取得する）
*** type : Coverage
*** src : 画像情報のURL
*** coordinates : transformのb,c==0の場合、当該画像の南西、北東端が設定される
*** transform : b,c!=0の場合の、画像の座標(左上隅を0,0、右下隅が画像のw,h)から地理座標([経度,緯度])への一次座標変換情報(a,b,c,d,e,f)が設定される

======captureGISgeometriesOption======
*captureGISgeometriesOption(BitImageGeometriesCaptureFlg, TreatRectAsPolygonFlg, SkipVectorRenderingFlg, captureAlsoAsBitImage): captureGISgeometriesでキャプチャするデータの取得条件を設定する。
** BitImageGeometriesCaptureFlg: ビットイメージタイルをカバレッジとして取得するか(Default:false)。captureGISgeometriesを呼び出す前に使用する。
*** 2019.5.17アップデートで、transform matrix(非対角要素あり)を持つビットイメージタイルについても必要な情報を得られるようになった。
** TreatRectAsPolygonFlg: rect要素をポリゴンとして扱う(デフォルトは円もrectもPointとして扱われる)
** SkipVectorRenderingFlg: ベクトル図形の描画をスキップする
** captureAlsoAsBitImage: polygon/polylineの図形を描画したビットイメージをレイヤー単位でカバレッジデータとして取得
*captureGISgeometriesOption(captureGISgeometriesOptionObject) : オブジェクトでも設定できる(rev18以降)（以下そのメンバー変数：全て値はboolean）
** .BitImageGeometriesCaptureFlag, .TreatRectAsPolygonFlag, .SkipVectorRendering, .captureAlsoAsBitImage　上と同様

======checkSmartphone======
*checkSmartphone() : タッチに対応したスマホブラウザなのかどうかを判別
======childDocOp======
*childDocOp(func , docHash , param1, param2 , param3 , param4 , param5) : 指定した文書をルートにして、DOM操作をその子文書に対して実行する。なおこれはlinkedDocOpの直系の子供のみ適用版(自身も適用しない)
======dynamicLoad======
*dynamicLoad( docId , parentElem ) : 指定した文書ID(docId)以下の表示に必要な文書を読み込み、指定したdiv要素(parentElem)に表示する
======escape======
*escape(str) : 以下の文字をHTMLエスケープする(&:&amp,":&quot;,':&#039;,<:&lt;,>:&gt;)
======geo2Screen======
*geo2Screen( lat ,lng ) : 地理座標を指定すると、その画面上のキャンバスの座標(px)を返す
======getBBox======
*getBBox( x , y , width , height ) : 指定された値でviewBoxを作成する

======getBasicPermanentLink======
* getBasicPermanentLink(copyLinkTextToClipboard) : 現在の表示状態(レイヤーの表示非表示および表示領域)を反映した基本的なパーマリンクを生成する
** URLオブジェクトが返却される
** copyLinkTextToClipboardがtrue場合、クリップボードにもURLがコピーされる。
** 生成されるURLは、[[#起動URLによるオプション指定]]の仕様に基づく
** 参考：[[#サブレイヤーパーマリンク]]

======getCentralGeoCoorinates======
*getCentralGeoCoorinates() : グローバル変数 rootViewBox,rootCrsから画面中心地理座標を得る
======getConversionMatrixViaGCS======
*getConversionMatrixViaGCS( fromCrs , toCrs ) : 元座標変換行列(fromCrs)から先座標変換行列(toCrs)への変換行列を作成する

======getCORSURL======
* getCORSURL(originalURL, alsoCrossoriginParam) : クロスオリジンアクセス用URLを生成する。([[#setProxyURLFactory|setProxyURLFactory]]の第4,5引数が設定されている場合)
** alsoCrossoriginParam クロスオリジンアクセスに際してoriginヘッダが必要かを取得する(この引数がある場合は.url, .crossorigin メンバを持つオブヘクトが返却される)
** レイヤー固有UIのウェブアプリなどで独自にクロスオリジンアクセスを行ってデータを取得するような場合にプロキシ経由のURLを生成するのに利用できます。
** 参考：[[#.E3.83.97.E3.83.AD.E3.82.AD.E3.82.B7.E3.81.AE.E8.A8.AD.E5.AE.9A|クロスオリジンアクセスのためのプロキシ設定]]

======getDevicePixelRatio======
*getDevicePixelRatio( docId ) : setDevicePixelRatioで設定した値を取得できる。 docIdが指定されなかった場合は全ての値が得られる

======getElementByImageId======
*getElementByImageId( XMLNode , searchId ) : 指定されたSVG文書群ノード(XMLNode)以下の属性iidが指定されたID(searchId)と等しいノードを返す

======getLoadErrorStatistics======
*getLoadErrorStatistics() : 伸縮スクロール、refreshScreenごとの、リソースの読み込み状況を取得する。
**メンバー変数: timeoutBitImagesCount,timeoutSvgDocCount,otherBitImagesCount,otherSvgDocCount

======getGeoViewBox======
*getGeoViewBox() : コンテナsvgのviewBoxをgeo変換したgeoのviewBoxを取得
======getHashByDocPath ======
*getHashByDocPath ( docPath ) : ターゲットのレイヤーのハッシュをPath名(docPath)から探し出す
======getHyperLink======
*getHyperLink( svgNode ) : 指定されたsvg文書(svgNode)から、親文書をたどり最初に取得できたハイパーリンクを取得
======getInverseMatrix======
*getInverseMatrix(matrix) : 逆行列を求める(matrix.a..f)
======getLayer======
*getLayer(layerID_Numb_Title) : [[#getLayerId|layerID]],title,番号,href(URI)のいずれかで、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]SVGDOMにおけるレイヤーの(svg:animation or svg:iframe)要素を取得する。getLayersと似ているが、getLayersのほうは任意のsvg文書(オプションなしではroot container)に対して、内包されるレイヤーのリストを返却。こちらは[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]に対して検索キーに基づいてレイヤーを返却する

======getLayerId======
*getLayerId( layerKey ) : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]における"レイヤ"概念のレイヤidを検索する。検索に用いることができるのは、getLayerと同じtitle,url,もしくはルートレイヤの要素
* layerIDはレイヤー名とは異なる、フレームワークによって任意に附番された、そのSVGMapドキュメントを識別するための文字列。このlayerIDを基に動作するAPIが多くあります。
* [[#レイヤー固有のUI]]　の　[[#layerID]] も参照

======getLayers======
*getLayers( id ) : オプションなしの場合、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーに該当する要素をリストアップし、返却する。オプションアリの場合、そのidを持つ要素を返却
======getLinearTransformMatrix======
*getLinearTransformMatrix(x1i,y1i,x2i,y2i,x3i,y3i,x1o,y1o,x2o,y2o,x3o,y3o) : ３つの基準点の変換前後の座標を与えると、それに適合する1次変換行列が得られる。(*i:変換前の座標, *o:変換後の座標)
======getMapCanvas======
*getMapCanvas() : 地図キャンバスとなる、おおもとのdiv要素の取得
======getMapCanvasSize======
*getMapCanvasSize() : 地図キャンバスのサイズ(画面サイズ)を取得
======getMouseXY======
*getMouseXY( evt ) : 指定されたイベント時のマウスの画面上の座標(px)を返す
======getNonScalingOffset======
*getNonScalingOffset(svgPoiNode) : 拡大縮小しても伸縮しない図形要素のオフセット値を取得する
======getObject======
*getObject( oname ) : 指定されたオブジェクト(oname)を取得
======getPoiPos======
*getPoiPos( svgPoiNode ) : =getNonScalingOffset
======getRoot2Geo======
*getRoot2Geo() : コンテナsvgのCRSの逆変換CRS( rootのsvg - > geo )を取得
======getRootCrs======
*getRootCrs() : コンテナsvgのCRS ( geo->rootのsvg )を取得
======getRootLayersProps======
*getRootLayersProps() : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の(animetion||iframeで構成される)レイヤー情報を取得する。Arrayが返却、並び順はsvgの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]と同じ（最初のレイヤーが一番下。selectメニュー創るときはひっくり返して使うこと）レイヤー情報：名称、表示非常時状態、レイヤーグループ、グループのフィーチャ(バッチ||スイッチ||ふつう)、編集可、編集中、対応SVGドキュメント、個別ユーザインターフェース、個別凡例
======getRootViewBox======
*getRootViewBox() : aspectを加味し実際に開いているコンテナsvgのviewBoxを取得
======getSvgImages======
*getSvgImages() : svg文書群(XML)の連想配列を取得(ハッシュキーは[[#getLayerId|layerID]]("root"以外は"i"+連番))
* (参考:[[#svgImages.5B.5D|svgImages]])

======getSvgImagesProps======
*getSvgImagesProps() : svg文書群のプロパティ( .Path,.CRS,.script,.editable,.editing,.isClickable,.parentDocId,.childImages,.controller)の連想配列を取得(ハッシュキーは[[#getLayerId|layerID]]("root"以外は"i"+連番))
* (参考:[[#svgImagesProps.5B.5D|svgImagesProps]])

======getSvgTarget======
*getSvgTarget( htmlImg ) : html文書中のimg要素(POI)を入力すると、対応するSVG文書の文書番号とその要素(use)が出力される。対応するuse要素を持つsvg文書自体を取得したい場合は.ownerDocumentする。idからhtml文書のimg要素を取得するには、Document.gelElementById(id)
======getSwLayers ======
*getSwLayers ( cat ) : swLayers[クラス名]に、クラス名ごとのレイヤー(のSVG要素)の全リストを構築する。catがある場合は、catの名称を持つもののリストのみを構築する
======getSymbols======
*getSymbols(svgDoc) : POI編集のsymbol選択を可能にするとともに、defsは、useより前に無いといけないという制約を払った
======getTickerMetadata======
*getTickerMetadata() : 現在Tickerが表示されているグラフィックスオブジェクトのメタデータを取得する
======getTransformedBox ======
*getTransformedBox ( inBox , matrix ) : 指定されたviewBox(inBox)を変換行列にてサイズ変更と移動のみでの座標変換する。b=0、c=0の場合のみ利用可能。たとえば、matrixには、svgImagePropsのCRSを設定することで、そのSVGMapコンテンツのSVG座標系でのviewPortが計算できる。このときmatrixは線形変換の係数が含まれたオブジェクトでも良いし、[[#.E5.A4.9A.E6.A7.98.E3.81.AA.E5.9B.B3.E6.B3.95.E3.81.AE.E5.AE.9A.E7.BE.A9.E3.81.A8.E5.88.A9.E7.94.A8|非線形変換のための関数が含まれたオブジェクト]]でも良い。　svgMap.getTransformedBox(svgMap.getGeoViewBox(),svgImageProps.CRS)

======getUaProp======
*getUaProp() : ブラウザの種類(isIE：IEかどうか、isSP：スマートフォンかどうか)を取得する
======getVerticalScreenScale======
*getVerticalScreenScale(screenLength) : 垂直(緯度)方向のscreenLengthに対する長さを取得する(input: px, return : Km)
======getViewBox======
*getViewBox( svgDoc ) : 指定したSVG文書のviewBoxを取得
======gps======
*gps() : ブラウザの測位APIによって測位しその点を中心に表示、表示縮尺は測位精度を元に適当に決定
======gpsCallback======
*gpsCallback(position) : GPS測位が成功した後に実行されるコールバック関数で、positionを中心とした場所を表示させる
======handleResult======
*handleResult( docId , docPath , parentElem , httpRes , parentSvgDocId ) : SVG文書を(docPathから)svg文書群とそのプロパティをHTTPXMLRequest(httpRes)から親文書(parentSvgDocId)の子文書(docId)として読込み、指定されたHTML要素(parentElem)に貼り付ける
======ignoreMapAspect======
*ignoreMapAspect() : 地図のアスペクト比を、rootSVGのviewBox( or hashのviewBox)そのものに設定する
======initLoad======
*initLoad() : load時に"一回だけ"呼ばれる初期化関数
======isIntersect======
*isIntersect( rect1, rect2 ): rect1(x,y,width,height)とrect2が交差(包含も含む)しているかどうかを返却
======linkedDocOp======
*linkedDocOp( func , docHash , param1, param2 , param3 , param4 , param5 ) : 再帰実行のルートになる文書のハッシュ(docHash)以下の子・孫・・・文書に対して、同じ処理(func( docHash , param1, param2 , param3 , param4 , param5 ))を再帰実行する関数
======loadSVG======
*loadSVG( path , id , parentElem , parentSvgDocId) : SVG文書を(pathから)svg文書群とそのプロパティを親文書(parentSvgDocId)の子文書(id)として読込み、指定されたHTML要素(parentElem)に貼り付ける
======matMul======
*matMul( m1 , m2 ) : 行列の積 x',y' = m2(m1(x,y)) = m(x,y) となる変換行列を構築
======numberFormat======
*numberFormat( number , digits ) : 指定された数値(number)を小数点以下第digit+1位を四捨五入した値を取得
======override======
*[OBSOLUTEWD] override( mname , mval ) : グローバルオブジェクトの関数プロパティでmnameという変数にmvalの値を代入する

======panMap======
* panMap( x, y, options ) : 地図をスムースにスクロールさせる
** x,y : パン量デフォルトはpx
** option.unit でパン量のコンテキストを変化できる
*** "%"||"percent"||"ratio" : 地図キャンバスに対する相対値で指定 (%,percentはパーセント, ratioは比率)
*** "canvas" : 地図キャンバス上の指定した座標を地図中心に
*** Note: 地理座標でパンする場所を変えたい場合は[[#geo2Screen]]を併用すると良い

======parseEscapedCsvLine======
*parseEscapedCsvLine(csv) : CSV 1行分文字列データ(csv)をエスケープを考慮して配列にパースする。
======refreshScreen======
*refreshScreen() : 画面の再描画を実行する（[[解説書#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90|参考情報]]）

======registLayerUiSetter======
*registLayerUiSetter( layerUIinitFunc, layerUIupdateFunc ) : レイヤー選択UI初期化関数と更新用関数を設定する
======reLoadLayer======
*reLoadLayer(layerID_Numb_Title) : 指定したレイヤー([[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーのみ。小孫レイヤーはNG)をリロードする
======resumeToggle======
*resumeToggle(evt) : 引数のイベント(evt)ターゲットのチェックボックスのチェック状態により、setResumeを実行する
======screen2Geo======
*screen2Geo( screenX , screenY ) : 画面上の座標(px)を指定すると、その地理座標を返す
======setCenterHitTest======
*setCenterHitTest(enable) : 自動中心ヒットテストの設定を変更するデフォルト:true

======setCursorCenterZooming======
*setCursorCenterZooming(enable) : (カーソル|ピンチ)位置中心ズーム機能を設定するデフォルト:false

======setCustomModal======
*setCustomModal( messageHTML , buttonMessages , callback,callbackParam) : モーダル画面を出現させ、指定されたメッセージ(messageHTML(String)もしくはdomオブジェクト(Object))、指定されたボタン(buttonMessages(Array))を表示する。ボタンが押された場合、コールバック関数(callback)を引数(クリックしたボタンのインデックス, callbackParam)を渡し呼び出す。
messageにHTML Stringだけではなく、DOM objectが使える点、ボタンに対するcallbackを設定できる点。ただしモーダルダイアログになる点が[[#showModal]]と異なる。

======setDefaultHilightStyle======
*setDefaultHilightStyle( style ) : ヒットテストなどによるオブジェクトのハイライト時のスタイルを設定する
* style : {stroke:{color,widthIncrement}, fill:{color,lineWidth,lineColor}}
** stroke : 線オブジェクトに対してハイライト時の色(color)と線幅増分(widthIncrement)
** fill : 塗りつぶしオブジェクトに対してハイライト時の色(color)、輪郭線幅(lineWidth)、輪郭線色(lineColor)

======setDevicePixelRatio======
*setDevicePixelRatio( dpr (, layerId) ) : zoom計算時に用いる(たとえば２にするとzoom値が本来の２分の１になる)変数を指定値(dpr)に設定する。ズームに応じた表示制御(visible*zoom属性等のLevel of Detail機能)に影響を与える。オプションの[[#getLayerId|layerId]]を指定すると、指定したlayerに対して別個の値を設定する。dprにnullを与えると初期値(1)にクリア。

======setGeoCenter======
*setGeoCenter( lat , lng , radius) : 中心地理座標を指定して地図を移動 (radiusは緯度方向の度1≒110Km) lat,lng:必須 radius:オプション(今の縮尺のまま移動)
======setGeoViewPort======
*setGeoViewPort( lat, lng, latSpan , lngSpan , norefresh) : 地理(グローバル)座標系で指定したエリアを包含する最小のviewportを設定する
======setLayerVisibility======
*setLayerVisibility([[#getLayerId|layerID]]_Numb_Title, visivility, [options]) : 指定した[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーの表示非表示を設定し、layerListUIのアップデートも行う
** layerID : String: [[#getLayerId|layerID]]のの文字列
** visivility : Boolean
** options : Object　以下のメンバー変数でオプションの指定が可能
*** .exec : String : 指定したレイヤーがレイヤー固有UIを持つ場合、その起動を指定できます。与えることができる文字列は[[#.E8.A9.B3.E7.B4.B0|data-controllerの起動オプション]]と同じ。
*** .hash : 指定したレイヤーを表示するときにハッシュ値を設定する

======setMapCanvas : ======
*setMapCanvas : ( mc ) : 地図キャンバスとなる、おおもとのdiv要素を指定した要素(mc)に設定
======setMapCanvasCSS======
*setMapCanvasCSS(mc) : マップキャンバスのCSS(postion、overflow、top、left、width、height)を設定
======setMapCanvasSize======
*setMapCanvasSize( mcs ) : 地図キャンバスのサイズを指定したサイズ(mcs)に設定
======setPreRenderController======
*setPreRenderController( layerID, cntFunc ) : 再描画(画面更新)シーケンスの直前に実行する関数(cntFunc)を設定する。　[[#getLayerId|layerID]]が指定されていると、そのIDをもつSVG文書に対して設定する。指定されていない場合は、全てのSVG文書に対して指定した関数が描画前に実行される。cnfFuncが無い場合は設定を解除する。また、cntFuncには再描画前制御の際に必要になるかもしれないいくつかの変数が第一引数にオブジェクトの形で渡される。(docId,scale,actualViewBox,geoViewBox,viewChanged(zoom|scroll|false) なお、SVGMapLayerUI.jsが有効化されている場合、[[#.E6.8B.A1.E5.BC.B5API|レイヤ固有UIのhtml文書中のscript内にpreRenderFunctionという関数]]がある場合、そのレイヤーを指定したsetPreRenderControllerでの関数設定と同じ振る舞いをする。なお、この処理内容は、動的レイヤー(<script>を持つSVGコンテンツ)のonload関数と同じタイミングで呼び出される関数をレイヤ固有UI等に設置できるものと考えると良い。

======setResume======
*setResume( stat ) : レジュームを実行するかどうかを引数(stat)によって設定し、cookieにレイヤー情報を保存する
======setRootLayersProps======
*setRootLayersProps(layerID_Numb_Title, visible , editing , hashOption , removeLayer , execOption ) : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の(animetion||iframeで構成される)レイヤー情報を設定する。[[#getLayerId|layerID]]_Numb_Titleは、レイヤー番号(root svg container内での順番)、[[#getLayerId|layerID]](svg文書のiid = htmlのid = selectのvalue)、タイトル名(不確実-同じ名前があるかもしれない。最初に当たったものを選択)。変化があるとtrueが返却される。
*visible , editingはtrue,false,nullのいずれか。nullの場合、その値を変化させないという意味。もしくは不合理の場合はfalseが返却される。この時classで設定されているレイヤーグループの特性(switch)に基づいた制御がかかる
*hashOption 指定したレイヤーを表示するとき、ハッシュを指定して表示する
*removeLayer 指定したレイヤーを消去する
*execOption レイヤ固有UIを持つレイヤーを表示する場合の起動方法を指定："hiddenOnLayerLoad", "onClick", "appearOnLayerLoad"のいずれか。[[#.E8.A9.B3.E7.B4.B0|詳細はこちらを参照]]

*setLayerVisibilityと異なり、アップデート(refreshScreen())は別途行う必要がある

======setRootViewBox ======
*setRootViewBox ( rvb ) : aspectを加味し実際に開いているコンテナsvgのviewBoxを指定したコンテナsvgのviewBox(rvg)に設定*setShowPoiProperty( func , docId ) : 特定のレイヤー・svg文書(docId)もしくは、全体に対して別のprop.表示関数(func)を指定する。funcが未指定の場合、設定された関数をクリアする。指定した関数は、帰り値がfalseだった場合、デフォルトprop.表示関数を再度呼び出す
======setShowPoiProperty======
*setShowPoiProperty(func , docId ): 特定のレイヤー・svg文書(いずれもdocIDで指定)もしくは、全体に対してPOIをクリックした時の表示関数をセットする
**セットされていないときは内蔵のデフォルト関数が使用される
**docId: セットされていないときはすべてのレイヤの docIdがルートレイヤに対応するものの場合はそのレイヤー下の子孫文書に対しても
**func: コールバック関数
*** funcがセットされいていないときはクリアする
*** funcの第一引数にはクリックされた要素が入る

======setSmoothZoomInterval======
*setSmoothZoomInterval(zoomInterval) : ズームアニメーションの設定(ズームイン／アウト後のタイル読み込み開始タイマー(ms))(Default:20ms)
======setSmoothZoomTransitionTime======
*setSmoothZoomTransitionTime(zoomTransitionTime) : ズームアップ[[#zoomup]]／ダウン[[#zoomdown]]／パン[[#panMap]]時の遷移時間(Default:300ms)

======setSummarizeCanvas======
*setSummarizeCanvas( val ) : 2Dベクトル図形描画用に統合キャンバス(レイヤー単位でのキャンバス統合)の使用有無を設定する。デフォルトは統合する
======setUpdateCenterPos======
*setUpdateCenterPos(func) : 中心座標書き換え関数を指定した関数に設定(デフォルト:id="centerPos"要素の文字列を適当に書き換える)
======setProxyURLFactory======
*setProxyURLFactory( documentURLviaProxyFunction, imageURLviaProxyFunction, imageCrossOriginAnonymous, imageURLviaProxyFunctionForNonlinearTransformation, imageCrossOriginAnonymousForNonlinearTransformation, LaWAfetchviaProxyFunction ): コンテンツの取得をプロキシ経由等にするために、URL(文字列)を書き換える関数を指定する。
** documentURLviaProxyFunction : svgドキュメント用のプロキシ経由のURLを生成する関数をここに設定する。<code>URLviaProxy = documentURLviaProxyFunction(URL)</code>
** imageURLviaProxyFunction : 同ビットイメージ用
** imageCrossOriginAnonymous : ビットイメージのコンテンツ取得に際しcrossorigin = "anonymous"を設定
** imageURLviaProxyFunctionForNonlinearTransformation: ビットイメージへの非線形図法変換専用のプロキシ経由URL生成関数を設定する。
** imageCrossOriginAnonymousForNonlinearTransformation : 同上のコンテンツ取得に際しcrossorigin = "anonymous"を設定
** LaWAfetchviaProxyFunction : [[#レイヤー固有ユーザインターフェース|LaWA]]内のFetch/XHRに対してプロキシ経由URL生成関数を設定する。
** 参考：[[#.E3.83.97.E3.83.AD.E3.82.AD.E3.82.B7.E3.81.AE.E8.A8.AD.E5.AE.9A|クロスオリジンアクセスのためのプロキシ設定]]

======setZoomRatio ======
*setZoomRatio ( ratio ) : zoomUp、zoomDownボタン押下時のズームレシオを指定した値(ratio)に設定する
======showModal======
*showModal( htm , maxW, maxH) : ダイアログ表示フレームワークを呼び出し、指定したhtm文字列を最大maxW,H値の中で表示する。closeボタンはフレームワークで設置される（参考[[#setCustomModal]]）（API名に反して、この関数はモーダルダイアログではない、ダイアログボックスの挙動を取る）
** htm：ダイアログ内に表示するhtmlのソース文字列、もしくはHTML DOM Elementオブジェクト
** maxW, maxH : Optional: ダイアログのサイズ（もしウィンドサイズに収まらない場合は、このサイズを下回ることがある。指定されていない場合はhtmの内容をベースにサイズが変化する


======showPage======
*showPage( hyperLink ) : 指定されたハイパーリンク先のページを表示する。ハッシュだけの場合は viewPort変化をさせる
======showUseProperty======
*showUseProperty( target ) : 指定されたPOI( target )の属性情報を表示する
======transform ======
*transform ( x , y , mat , calcSize , nonScaling) : 指定された座標を変換する。
======updateLayerListUI======
*updateLayerListUI() : レイヤーリストのUIの表示を更新したりレイヤー固有UIを設定したりする
** '''[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のsvgmap文書をDOMで直接編集したり、setRootLayersPropsで操作した場合、この関数を呼ばないとレイヤ固有UIが正しく設定されないなど多くの処理が破綻するので、必ず呼ぶ必要がある。(近い将来refreshScreenで自動的に反映されるようにする予定)'''

======zoomdown======
*zoomdown( ratio ) : 地図をスムースにズームダウン
** ratioはオプション(デフォルトは1.732)

======zoomup======
*zoomup( ratio ) : 地図をスムースにズームアップ
** ratioはオプション(デフォルトは1.732) (デフォルトは[[#setZoomRatio]]で変更可)

=====svgMapAuthoringTool.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_Authoring_r*.jsを用いた場合に使える
======cancelPointingPoiRegister======
* cancelPointingPoiRegister: initPOIregistToolで設置したUIの地図クリック・タッチでの座標入力イベント(click, touchend)をキャンセルする
======clearTools======
*clearTools: オーサリングツールを除去する。
======initGenericTool======
*initGenericTool(targetDiv,poiDocId,cbFunc,cbFuncParam,options): 点、線、多角形（オプションでそれらのバッファ付き）の総合オーサリングツールを初期化する。
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** options: {withBufferedTools,editingStyle,shapeStyle}　その他オプションをオブジェクトで指定(Optional)
*** withBufferedTools: boolean: trueでバッファ付きツールを追加
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルをブジェクトで指定
*** editingStyle: {opacity,strokeWidth,stroke,fill}：編集中の表示スタイルをブジェクトで指定
*** useXlinkTitle: trueでタイトル編集欄付きツール (Pointツールには影響しない)
*** styleEditor: trueでスタイル編集UI追加

======initPOItools======
*initPOItools(targetDiv,poiDocId,cbFunc,cbFuncParam,getPointOnly,returnSvgElement,options)　: 複数のPOIを編集するツールを初期化する (このツールは一個しか設置できない)
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** getPointOnly : ポイントを取得するのみで、その点にuse要素を設置することはしない(Optional)
** returnSvgElement : trueで編集したSVG要素などがコールバック関数に構造化され返却される(Optional)
** options : {bufferOption,editingStyle,shapeStyle}: その他のオプションをオブジェクトで指定(Optional)
*** bufferOption : trueでバッファ付きツール
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルを指定 (buffer指定時に有効)
*** styleEditor: trueでスタイル編集UI追加

======initPOIregistTool======
*initPOIregistTool(targetDiv,poiDocId,poiId,iconId,title,metaData,cbFunc,cbFuncParam,getPointOnly,returnSvgElement): 一個のPOINTオブジェクトの登録ツール・座標入力ツールを初期化する
** initPOItoolsと異なりこちらのツールは複数個設置できる
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** poiId : 登録するPOIのIDを指定
** iconId : 対象文書内のアイコンのIDを指定
** title : アイコンのタイトルを指定
** metaData : アイコンのメタデータ文字列を指定
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** getPointOnly : ポイントを取得するのみで、その点にuse要素を設置することはしない(Optional)
** returnSvgElement : trueで編集したSVG要素などがコールバック関数に構造化され返却される(Optional)
======initPolygonTools======
*initPolygonTools(targetDiv,poiDocId,cbFunc,cbFuncParam,isPolylineMode,options): POLYGONオブジェクトの"編集"ツール新規追加、削除、変更などが可能　ただし一個しか設置できない
** コンテナsvgコンテンツでclickable及びeditableを設定したレイヤーで再編集可能
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
*** 第一引数に成否、第二引数にcbFuncParam が入る。作成したPOIの情報は、SVGDOMから得るか、指定したdiv内に生成されているフォームから得る（少し使いづらいので、今後もう少し便利にするかもしれません）
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** isPolylineMode : ポリゴンではなくポリラインの編集ツールとする
** options : {bufferOption,editingStyle,shapeStyle}: その他のオプションをオブジェクトで指定(Optional)
*** bufferOption : trueでバッファ付きツール
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルを指定
*** editingStyle: {opacity,strokeWidth,stroke,fill}：編集中の表示スタイルを指定
*** useXlinkTitle: trueでタイトル編集欄付きツール
*** styleEditor: trueでスタイル編集UI追加

======setTargetObject======
*setTargetObject: TBD プログラムから編集対象オブジェクトを指示する（ただし編集中レイヤのオブジェクトに限る）
======isEditingGraphicsElement======
*isEditingGraphicsElement: 編集中のオブジェクトがあるかどうかを確認する

=====svgMapGIStool.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_GIS_r*.jsを用いた場合に使える。なお本機能拡張はJSTS([https://unpkg.com/jsts@1.6.1/dist/jsts.min.js jsts.min.js])の読み込みがさらに必要。

====== 参考：JSTS ======
[https://github.com/bjornharrtell/jsts/ JSTS](JavaScript Topology Suite)は、[https://github.com/locationtech/jts JTS](Java Topology Suite)をjavaScriptに移植した地理空間情報処理ライブラリです。地理空間情報の標準に準拠したAPIを備えています。
* [https://github.com/bjornharrtell/jsts JSTSのプロジェクトページ]
* [http://locationtech.github.io/jts/javadoc/ API](JTS用、JSTSもこれに準ずる)
* [https://www.tsusiatsoftware.net/jts/files/JTS_Library_for_Geometry_2011.pdf JTSの機能概要スライド]

====== buildDifference======
* buildDifference( sourceId1, sourceId2, targetId , strokeColor, strokeWidth, fillColor, progrssCallback, getResultAsGeoJsonCallback,getResultAsGeoJsonCallbackParam)
** JSTSのDifferenceを実行
** 引数はbuildIntersectionの該当引数に対応

======buildIntersection======
*buildIntersection( sourceId1, sourceId2, targetId , strokeColor, strokeWidth, fillColor, progrssCallback, addSourceMetadata, getResultAsGeoJsonCallback, getResultAsGeoJsonCallbackParam, options )
** sourceId1とsourceId2のレイヤーに対してJSTSのIntersectionを実行し、結果をtargetIdレイヤーにコンテンツとして出力する。性能はgetIncludedPointsより低いことが多い intersection処理の振る舞いは[https://bjornharrtell.github.io/jsts/ JSTSを参照]
** sourceId1: sourceId1レイヤーのレイヤーID
** sourceId2: sourceId2レイヤーのレイヤーID
** targetId : targetId レイヤーのレイヤーID
** strokeColor : 線の色 (なお、strokeColor, strokeWidth, fillColor のいずれも指定ない場合は描画しない(getResultAsGeoJsonCallbackがあればそこに結果を変換するのみ))
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** progrssCallback: 変換途中の状況が返されるコールバック関数。
** addSourceMetadata: sourceId1とsourceId2の各図形要素に付随しているメタデータ(contentアトリビュートの値)を演算結果の該当する図形要素に結合して付加する。
** getResultAsGeoJsonCallback: 演算結果をgeoJsonで返却を受けたい場合にコールバック関数を指定する。第一引数に結果が返る
** getResultAsGeoJsonCallbackParam : 上記コールバック関数に送りたい引数(第二引数に入力される)
** options: その他のオプションを指定するオブジェクト(下記、メンバ変数)
*** uniteSource1: trueでsourceId1のジオメトリ群をuniteしてから演算する
*** uniteSource2: trueでsourceId2のジオメトリ群をuniteしてから演算する
*** areaCompare: trueで演算結果と元のジオメトリとの面積比をメタデータに付与
*** resultGroupId: 演算結果を生成するグループを指定
*** opacity: 透明度

======captureGeometries======
*captureGeometries( cbFunc , opt ) : svgMap.captureGISgeometriesの引用
====== coverageImageXY2LatLng======
* coverageImageXY2LatLng(pixWidth , pixHeight, px,py,targetCoverage) : ビットイメージカバレッジのピクセル座標から地理座標を算出する関数
** pixWidth, pixHeight : ビットイメージカバレッジのサイズ
** px,py : ビットイメージカバレッジのピクセル座標
** targetCoverage : getInRangePolygonParts で得られた返り値を設定する
====== drawGeoJson======
* drawGeoJson( geojson , targetSvgDocId, strokeColor, strokeWidth, fillColor, POIiconId, poiTitle, metadata, parentElm, metaDictionary) : geojsonのgeomerty を指定したレイヤーに描画する
** geojson : geojson データのgeopmetry
*** メタデータ : メタデータはgeojsonの本来のメタデータ仕様(type:Featureのオブジェクトにpropertiesを設置する)で設定可能
**** また、連想配列もしくは配列の形で、関数の呼び出し時のmetadataパラメータでデフォルトのメタデータを指定できる。
**** また、geoJSONの任意のデータ階層にmetadataプロパティとしても埋め込める。
**** 加えて、propertiesを同様に任意のデータ階層に設定できる(この場合、上の階層の値は下の階層の値で上書きされる)
*** スタイリング : メタデータ仕様を拡張した、geojsonの[https://github.com/mapbox/simplestyle-spec mapbox拡張仕様]に基づいて、描画スタイルを各Featureに設定可能　上記の拡張properties拡張により、デフォルト描画スタイルを設定することも可能。
**** marker-sizeは未実装。marker-symbolではsvgコンテンツのdefsで登録済みのアイコンのIDを指定する。
**** 参考: properties.で設定できる、スタイル属性名: <code>title, description, marker-size, marker-symbol, marker-color, stroke, stroke-opacity, stroke-width, fill, fill-opacity</code>
** targetSvgDocId : 描画先のレイヤーID
** strokeColor : 線の色
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** POIiconId :　Pointの場合のアイコンID(あらかじめ指定した描画先のレイヤーのコンテンツに該当IDのアイコンが定義されている必要がある)
** poiTitle : POIのタイトル
** metadata : POIのメタデータ（連想配列）
** parentElm : (Optional) 指定した要素の子要素として描画
** metaDictionary: (Optional) メタデータとして要素に埋め込みたい属性名のリストを配列で指定する（これ以外の属性は無視するようになる）

====== drawKml======
* drawKml( kml , targetSvgDocId, strokeColor, strokeWidth, fillColor, POIiconId, poiTitle, metadata, parentElm,styleData) : KMLを指定したレイヤーに描画する
** KML : KML 描画するKMLデータのXML DOM
** targetSvgDocId : 描画先のレイヤーID
** strokeColor : 線の色
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** POIiconId :　Pointの場合のアイコンID(あらかじめ指定した描画先のレイヤーのコンテンツに該当IDのアイコンが定義されている必要がある)
** poiTitle : POIのタイトル
** metadata : POIのメタデータ文字列
** parentElm : (Optional) 指定した要素の子要素として描画
** styleData : TBD

====== getBufferedPolygon ======
* getBufferedPolygon(geom,bufferLength) : 任意のジオメトリ(geom)に対して、指定のバッファ長[m]のポリゴンジオメトリを生成する。
** Note: [[#captureGISgeometries]]で取得したデータ等も演算対象にすることができる。

====== getColorString ======
* getColorString(r,g,b) : r,g,b値から、webColor文字列を生成する

======getExcludedPoints======
*getExcludedPoints(poiID, polyID, cbFunc, param , progrssCallback , pointOnly ) : 指定したpoiID検索対象レイヤーのうち、指定したpolyIDポリゴンコンテンツレイヤーのポリゴンに内包されないものを抽出する。
** パラメータはinverseを除きgetIncludedPointsと同じ。
====== getImage======
* getImage(sourceData, renderingOptions ) : メッシュデータからビットイメージ(mage/pngのdataURL)を生成
** sourceData : 以下のデータ構造を持つオブジェクト
*** width, height メッシュのピクセル数
*** rasterData[py][px] 以下のデータ構造を持つオブジェクト
**** color 以下のデータ構造を持つオブジェクト
***** r,g,b,a
**** inRange : boolean
** renderingOptions : 以下のデータ構造を持つオブジェクト
*** drawOutOfRange : boolean レンジ内ではなくレンジ外を描画する
*** fillColor : boolean 上記条件のピクセルを指定した色で描画する
*** useCoverageColor 上記条件のピクセルをカバレッジの色で描画する

====== getImagePixelData======
* getImagePixelData(capturedSvgMapGeometry, callBackFunction, param) : ラスタ画像のビットマップデータを取得する。
** capturedSvgMapGeometry : [[#captureGISgeometries|captureGISgeometries]]で取得したビットイメージカバレッジのジオメトリ情報をもとに取得する
** callBackFunction : 取得したビットイメージデータが引数に渡される
*** data : RGBA intArray ( CanvasのContext.getImageData(...).dataで得られる情報と同様のデータ)
*** width
*** height
*** param : getImagePixelDataの第三引数がそのまま渡される

====== getIncludedPoints======
* getIncludedPoints(poiID, polyID, cbFunc, param , progrssCallback , inverse , pointOnly ) : 指定したpoiID検索対象レイヤーのうち、指定したpolyIDポリゴンコンテンツレイヤーのポリゴンに内包されるものを抽出する。
** poiID : 検索対象コンテンツレイヤーのレイヤID
** polyID : ポリゴンコンテンツレイヤーのレイヤID
** cbFunc : 検索完了後の結果を返却するコールバック関数　第一引数にポイントがGeoJasonのGeometry形式で返却され、第二引数にその個数、第三引数に(あれば)下記paramが返却される
** param : cbFuncに渡す任意パラメータ(第三引数に入る)
** progrssCallback : 変換途中の状況が返されるコールバック関数。　変換中　時々呼び出され、変換状態[%]が第一引数に渡される。
** inverse : trueで getExcludedPoints
** pointOnly : trueの場合検索対象コンテンツレイヤーのジオメトリがPoint以外の物は無視、false(もしくは未設定)の場合はPolygonやMultiLineStringのデータの場合中心点をPointと見立てて検索なお、ポリゴンやポリラインのしっかりした処理を期待する場合は下記のbuildIntersectionを使用すべき。
====== getInRangePoints======
* getInRangePoints(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : 検索対象のPointジオメトリが、検索条件としてのラスターデータ(カバレッジ)の特定色域に入っているものを検索する（ラスターGIS機能）
** poiID_or_points : 検索対象のPointジオメトリのあるレイヤIDもしくは、geoJsonのPointジオメトリ自体
** coverIDラスターデータ(カバレッジ)のレイヤーID
** rangeData : 色域 .hue, .satulation, .value, .alphaをそれぞれ指定する
*** hue: 0..360
*** satulation, value, alpha : 0..100
*** .hue, .satulation, .value, .alphaそれぞれのレンジは<nowiki>[[range1Min,Max],[range2Min,Max],...[rangenMin,Max]]</nowiki>の形で指定する。
*** データがない場合のデフォルトは<nowiki>{hue:[[0,360]],satulation: [[10,100]],value:[[10,100]],alpha:[[10,100]]}</nowiki> : アルファが10以上の全ての色
*** .outOfBoundsColor : TBD {r:255,g:0,b:0} の形で色を指定するとその色のピクセルは領域外(存在しないもの)として評価をスキップする
** cbFunc : 検索完了後の結果を返却するコールバック関数　第一引数にポイントがGeoJasonのGeometry形式で返却され、第二引数にその個数、第三引数に(あれば)下記paramが返却される
** param : cbFuncに渡す任意パラメータ(第三引数に入る)
** progrssCallback : 変換途中の状況が返されるコールバック関数。　変換中　時々呼び出され、変換状態[%]が第一引数に渡される。
** preCapturedGeometry : svgMap.captureGISgeometries()であらかじめ取得したgeometryがある場合、それを投入するとそれを用いて処理する
** computingOptions : getInRangeGeometriesOnCoverageを参照
====== getInRangeLineParts======
* getInRangeLineParts(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : ラインストリングジオメトリ用のラスターGIS機能パラメータはgetInRangePoints()と同じ
====== getInRangePolygonParts======
* getInRangePolygonParts(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : ポリゴンジオメトリ用のラスターGIS機能パラメータはgetInRangePoints()と同じ

====== getInRangeGeometriesOnCoverage======
* getInRangeGeometriesOnCoverage(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry, computingOptions ) : getInRange*を包含する関数
** computingOptions.targetVectorTypeで以下を設定することでそれぞれの機能を動かすことができる
*** 0:point,1:polyline(multiLineString),2:polygon
** computingOptions:
*** overlappingCoverage : "or"
*** splitByCoverage : boolean カバレッジが複数のビットイメージ(タイル)で構成されている場合、タイルごとに分割した答えを返す
***
====== haltComputing======
* haltComputing() : getIncludedPoints, getExcludedPoints, buildIntersectionを中断する
====== imageUrlEncoder ======
* imageUrlEncoder : オリジナルのURLから、setImageProxyの設定を加味したURLを生成する関数
====== latLng2coverageImageXY======
* latLng2coverageImageXY(pixWidth , pixHeight, lng,lat,targetCoverage) : 地理座標からビットイメージカバレッジのピクセル座標を算出する関数
** pixWidth, pixHeight : ビットイメージカバレッジのサイズ
** lng,lat : 地理座標
** targetCoverage : getInRangePolygonParts で得られた返り値を設定する
====== latLng2GeoJsonPoint======
* latLng2GeoJsonPoint(lat , lng ) : 緯度経度をGeoJsonのPointジオメトリに変換する
====== renderImages ======
* renderImages(sourceDataArray, parentElment, crs, renderingOptions) : ビットイメージカバレッジ×ポリゴンGIS(getInRangePolygonParts)の結果を直接可視化する
**sourceDataArray : [[#getInRangePolygonParts]]の結果を設定
**parentElment: SVGMapコンテンツ内で描画する親要素を設定
**crs: 描画するSVGMapコンテンツのCRS matrix(a,b,c,d,e,f)を設定
**renderingOptions : [[#getImage]]を参照

====== setImageProxy======
* setImageProxy( url , directURLls , useAnonProxy): getInRangePointsは、canvasを使った処理のため、CORSの制約にかかる場合、proxyを設定して回避できる。
** url : encodeURIComponent()でエンコードしたカバレッジのレイヤーのビットイメージのURLを付加すると、proxyとしてimageを返却してくれるURL文字列を指定
** directURLls : proxyを使わず直接アクセスするコンテンツを判定するための文字列の配列（この文字列のどれかが含まれていたら直接アクセス）
** useAnonProxy : Image.crossOrigin = "anonymous"を指定してアクセスする

====== hsv2rgb ======
* hsv2rgb(h, s, v) : hsv値からrgb値の色情報変換
** h (hue): 0..360
** s (saturation): 0..100
** v (value): 0..100
** 帰り値 : {r,g,b}: いずれも0..255

====== rgb2hsv ======
*rgb2hsv(r, g, b): RGB値からHSV値の色情報変換
** rgb: いずれも0..255
** 帰り値:{h,s,v}
*** h:0..360
*** s,v: いずれも0..100

=====svgMapLayerUI.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_LayerUI2_r*.jsを用いた場合に使える。
======assignLayerSpecificUiElement======
* >r4
* assignLayerSpecificUiElement( targetElement , isInline , autoSizing) : レイヤ固有UIを出力する先のDOM要素を指定する
** この関数は、レイヤーUIの初期化前～[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]読み込み前に呼ばれる必要がある（すなわち、load時のみ有効）
** targetElement : 出力先要素：出力先はsvgMapオブジェクトを持つwindowでなくても良い
** isInline : boolean 指定した要素をインライン要素として扱い、UIが存在しえない場合は消える。レイヤ固有UIを消すボタンも付与される
** autoSizing : boolean 自動リサイズを有効化

======customEvents======
*customEvents() : サポートしているイベントを返却

======launchController======
* >r4
* launchController(layerID, cbf) : レイヤ固有UIを出現させる。ただしそのレイヤーがレイヤー固有UIを持っており、且つ表示状態になっている必要がある。
** [[#getLayerId|layerID]] : レイヤーのID
** cbf (optional) : レイヤー固有UIが生成されたとき、第一引数にレイヤー固有UIのwindowオブジェクトが返却される。

======layerSpecificUIhide======
* layerSpecificUIhide() : レイヤ固有UIを隠す

======setLayerListmessage======
* setLayerListmessage( head , foot ) : head 及び footで指定した文字列を　レイヤリストUIのトップのメッセージに設定する。[head]numberOfVisibleLayers[foot] : デフォルトはhead :"Layer List: ", foot :" layers visible"

=====svgMapPWA.で呼び出せるAPI=====
'''実験的機能段階''' :
; 以下のAPIは、SVGMapLv0.1_PWA_r*.jsを用いた場合に使える。
:- SVGMap.jsをPrpgressiveWebApps(PWA)として動作させ、オフラインでも利用できるウェブアプリを構築することができる。
:- Progressive Web Appsが機能するブラウザで有効。Chrome,Edge(PC,Android), Safari(Apple製品)
:- iOS SafariのPWAネイティブキャッシュの50MB制限を回避するIndexedDBによる実装がなされており、そのクォータが許す限りの(iOSでも数百MB以上の)オフライン地図コンテンツを利用できる
:- 同じく、iOS Safariが持たないsyncの一部を代替する機能(オンラインになったらポストする機能)が利用できる
:- zip圧縮されたオフラインコンテンツパッケージ読み込み機構を使う場合はzip.jsおよびそれが利用するArrayBufferReader.js,deflate.js,inflate.jsの読み込みが必要。
:- <code>serviceWorkerPath</code>グローバル変数で、専用のサービスワーカープログラムsvgMapServiceWorker_r*.jsのパスを指定する必要がある。
::- サービスワーカー～svgMapServiceWorker_r*.jsは、同jsと同じディレクトリにあるbaseResources.jsonを読み込み初期設定を行う
::- baseResources.json：　srcにサービスワーカーネイティブのキャッシュに読み込むべきリソースのリストを記載、mapCacheTargetに、SVGMapのコンテンツキャッシュを稼働させるターゲットとなるパスを記載
::-baseResources.jsonの例
<pre>
{
"src": [
"index.html",
"Container_mercator_org.svg",
"SVGMapLv0.1_PWA_r5.js",
"js/SVGMapLv0.1_r16.js",
"js/SVGMapLv0.1_LayerUI2_r3.js",
"js/SVGMapLv0.1_GIS_r2.js",
"js/SVGMapLv0.1_Authoring_r7.js",
"js/jsts.min.js",
"imgs/gps.png",
"imgs/gps_s.png",
"imgs/Xcursor.png",
"imgs/zoomdown.png",
"imgs/zoomdown_s.png",
"imgs/zoomup.png",
"imgs/zoomup_s.png",
"imgs/mappin.png"
],
"mapCacheTarget":"localMaps/"
}
</pre>

* autoPilotDownloader
*:エリアと縮尺を指定し、オートパイロットで地図画面をスクロールさせることで、オフラインキャッシュに地図を保存する動作を自動的に行う機能のオブジェクト。レイヤー固有UIでの利用などを想定しており、以下のメンバー関数を持つ
** halt()
**:オートパイロット動作を中断させる
** searchAll(initialViewBox, minScale, maxScale)
**:- initialViewBoxで指定したエリアを、minScale、maxScaleの間でオートパイロットをかけキャッシュに保存させる
**:- minScale, maxScaleは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の座標系におけるscale値(getRootScale()で取れるもの)
** setProgressCallBack(cbf)
**:オートパイロット動作中の進行状況をcbfの第一引数に返却する
* async clearOfflineContents()
*:SVGMapのオフラインコンテンツを全消去する。SVGMapのオフラインコンテンツはserviceWorkerのネイティブキャッシュ機構とは別の独自キャッシュ機構(indexedDBを使用した機構)として構築される
* clearCache()
*:（未実装）serviceWorkerのネイティブキャッシュを全消去する
* cacheDB
*:SVGMapのオフラインコンテンツデータベースのオブジェクト。IndexedDBをpromise化した簡略的APIをメンバ関数として持つ。
** clear()
**:データベースをクリア
** async connect()
**:データベースに接続
** async delete(path)
**:pathで指定したコンテンツを削除
** async get(path)
**:pathで指定したコンテンツ(blob)を取得
** async getAll()
**:全コンテンツを取得
** async getAllKeys()
**:全Key(コンテンツのpath)を取得
** async put({idCol:path,contentBlob:blobdata})
**:コンテンツ(blobdata)をpathをキーにして格納(上書き)
* deleteCachedLayerMeta()
* async disableCache()
*:serviceWorkerのネイティブのキャッシュ機構とSVGMapの独自キャッシュ機構を全て無効化する
* async enableCache()
*:serviceWorkerのネイティブのキャッシュ機構とSVGMapの独自キャッシュ機構を全て有効化する
* getCachedLayerMeta
* async getPostQueue()
*:postMessageWhenConnectedでポストをリクエストし、未完了のリクエストを取得する
* getRootScale()
*:svgMapの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]座標系における現在の表示のscaleを取得
* getScales()
*:読み込み済み文書全てのscaleを連想配列で返す(hashKeyはdocID)
* getVisibleLayers
* getStorageUsage
* async loadOfflineContents(contentUrlList, overwrite, progressCallBack)
*:-contentUrlListで指定したコンテンツをオフラインキャッシュに読み込む(自ドメイン内のコンテンツ限定)
*:-overwriteをtrueにすると上書きする。progressCallBackは指定した関数の第一引数に進捗状況を返却
* async loadZippedOfflineContents(zip_url,progressCallBack)
*:保存してあるディレクトリに対して、そのzipファイルの中のディレクトリ構造で、コンテンツがあるものと見做したURLもつキャッシュを形成する
* async postMessageWhenConnected(URL, postData, postCompleteCBF)
*:-postDataデータをURLにポストする　オンライン時は即座にポスト、オフライン時はいったんindexedDBにポストデータを格納後オンラインになったらポストする。
*:-postDataは、文字列(この場合form-data決め打ちのリクエスト)、もしくは .bodyメンバー変数を持ったオブジェクト
*:-この場合は .bodyはFormDataタイプのインスタンスもしくは任意のデータ、そしてfetchAPIに準じた.headers, .methodをメンバー変数に持たせることができる。(methodでGETを指定すればGETリクエストも可能)またserviceWorkerが管理する
* async setCachedLayerMeta
* setScaleTrim
* async updateCacheIndex()

=====svgMapCustomLayersManager.で呼び出せるAPI=====

'''実験的機能段階''' :

基本的なフレームワークで提供されているレジューム機能を更に強化し、レイヤーの表示非表示状態、初期表示エリア(viewPort)等をユースケースなどに応じて複数登録、切り替えを可能とする機能を提供します。更に[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]をさらに積極的に編集し、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルに無いレイヤーを追加したり、削除したりした、カスタマイズされた[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]を差分情報の形でlocalStorageに保存・利用する機能を提供します。

:- 以下のAPIは、SVGMapLv0.1_CustomLayersManager_r*.jsを用いた場合に使用できます。
:- SVGMapLv0.1_CustomLayersManager_r*.jsは、svgMapオブジェクトもつwindowで使用するとともに、svgMapオブジェクト用のカスタムレイヤーセットを構築するための別ページのwebAppsにおいても使用することができます。
:- 上記svgMapオブジェクト用のカスタムレイヤーセットを構築するためのwebApps用としてSVGMapCustomLayersManagerApp_r*.js、SVGMapCustomLayersManager.htmlが用意されています。

*registCustomLayer(customLayerObject, applyImmediately, customLayerMetadata)
*applyCustomLayers(customLayersObject, baseLayersPropertySet)
*getDetailedLayersPropertySet(rootContainerDoc, ignoreIid)
*getDetailedLayersPropertySetFromPath(rootContainerUrl, ignoreIid)
*getDif( edit, orig )
*originalLayersProperty
*deepCopy(obj)
*deleteAllCustomLayerSettings()
*deleteCustomLayerSetting( key )
*setCustomLayerSettingIndex(key)
*buildCustomLayersSetting(difObj, editedLayersProperty, originalLayersProperty)
*loadCustomLayerSettings()
*storeCustomLayerSettings( settings )
*getElementByAttr( XMLNode , searchId , atName )

*applyCustomLayersSettingsToCurrentMapView(lpEdit, svgMapWin)
*loadCustomGeoViewboxes()
*storeCustomGeoViewboxes(customViewBoxes)
*buildCustomGeoViewboxSettingObject(key, title, geoViewBoxX, geoViewBoxY, geoViewBoxWidth, geoViewBoxHeight)

====起動URLによるオプション指定====
svgMapフレームワークを導入したhtmlコンテンツは、URLの"#"以降であるフラグメント識別子によってフレームワークにいくつかの起動時オプションを提示することができます。
通常、これらのオプションは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]における記述で示されています。フラグメント識別子による指示はそれをオーバーライドします。
一般的な"&"による区切りで複数の複数のパラメータを指定できます。
=====表示範囲の指定=====
global座標系によって表示範囲を指示することができます。　標準のフラグメント記述に対してそれぞれ"global"文字列の追加が必要です。
なおglobal座標系におけるxは一般的に経度、yは一般的に緯度に対応することに留意してください。
*メディアフラグメントによる指定 : xywh=global:<xmin>,<ymin>,<width>,<height>
*svgViewフラグメントによる指定 : svgView(viewbox(global,<xmin>,<ymin>,<width>,<height>))

=====表示・非表示レイヤーの指定=====
* 表示すべきレイヤー: visibleLayer=<layer title>,<layer title>...
* 非表示すべきレイヤー: hiddenLayer=<layer title>,<layer title>...
* 個々のレイヤーに対するフラグメントの提示 : それぞれのレイヤーに対しては、さらにフラグメントを追加することができます。ただし"="は"%3D",&は"%26"でURLエンコードしてください。<layer title>#fragment1=val1&fragment2=val2　⇒<layer title>#fragment1%3Dval1%26fragment2%3Dval2　

===レイヤー固有のUI===
"[https://satakagi.github.io/mapsForWebWS2020-docs/De-centralizedWebMapping.html#:~:text=To%20achieve%20this,everything%20in%20detail. Layers as WebApps]"(ウェブアプリケーションとしてのレイヤー: webApp Layer)を実現する機構　（LaWA、レイヤーwebApp、webAppレイヤー、アプリレイヤー、レイヤーアプリなどと呼ぶこともある）（[[#レイヤー固有ユーザインターフェース|こちらも参照]]）

====概要====
[[#レイヤー|レイヤーsvgコンテンツ]](フレームワークが最初に読み込むコンテナsvgコンテンツの中で埋め込まれるsvgコンテンツ)に対して、[[#動的な地図レイヤー|動的な地図レイヤー]]の一種として、そのレイヤーに固有の処理ロジックや、可視化・描画ロジック　そしてユーザインターフェースも含むことができる　htmlによるウェブアプリを定義できる機能です。

javascriptを使った独自のロジックによる動的な可視化データの生成が実装可能です。

また、この機能はそのレイヤーの設定やインタラクティブ操作のための表示やユーザインターフェースを地図表現とは別に表示したい場合にも用いることができます。従来のアーキテクチャでは、もしもこのようなレイヤーに固有のUIが必要だった場合でも、地図アプリケーション全体の処理や表示を司るグローバルな空間(ルートhtmlコンテンツのwindowオブジェクト直下)に、サイドエフェクトを考慮しながらコードを組み込む必要があり、結果としてコードのスパゲッティ化が懸念されました。SVGMapのレイヤー固有UIは、レイヤーごとにUIとそのロジックをカプセル化可能にし、これを排除することが可能です。(カプセル化はiframeによって行われます。)さらに、レイヤー固有UIによるウェブアプリは自律分散的な配置にも対応し、UIを備えた地図レイヤーにまでハイパーレイヤリングアーキテクチャを拡張します。

なお、[[#動的な地図レイヤー]]は、htmlによるユーザーインターフェースを持つことができませんが、同種のウェブアプリケーションのカプセル化の効果があります。

このＵＩには主に二つの用途が考えられます。
;凡例
: 各レイヤーはその地図表現の意味を示すための固有の凡例を持つことがあります。その凡例を表示するために利用できます。
;ウェブアプリケーションによる動的な地図レイヤー
: 先述のように、ウェブアプリケーションによる動的な地図レイヤーは独自のロジックによってそのレイヤーの地図表現を動的に変化させる機能を備えることができます。この場合、例えばエンドユーザがFORMで入力したフィルター条件ををもとに表現を変更するようなケースも考えられます。
これらケースでは、そのフォームや凡例は、[[#フレームワークの呼び出し|ルートhtml文書]]に設置することは可能ですが、もしも多くのレイヤーを表示するアプリケーションであり、それらのレイヤーがそれぞれ固有のフィルタ条件を持つような場合、[[#フレームワークの呼び出し|ルートhtml文書]]は、それぞれのレイヤーをフィルタリングするためのFORMとそのフィルタリングロジックをすべて埋め込む必要があり、画面のデザイン、およびロジックのコーディングの双方がスパゲッティ化する可能性があります。さらに、もしもこのアプリケーションに後日さらにレイヤーが追加される場合、スパゲッティ化の問題はより深刻になるかもしれません。凡例の表示についても同様の問題が考えられます。本レイヤー固有ＵＩはこのような問題に対するソリューションを提供しています。

この機能は、ベースのフレームワークrev12以上　且つLayerUI2フレームワークを読み込み、[[#レイヤー固有のUI(後述)を設置するdiv要素|id="layerSpecificUI"のdiv要素]]が[[#フレームワークの呼び出し|ルートhtml文書]]に設置されているときに使用できます。

;サンプル
:[[チュートリアル#WebApp_Layer.E7.B7.A8|開発者向けチュートリアル]]でいくつかのサンプルを見ることができます。

====[[#レイヤー|レイヤーsvgコンテンツ]]での指定====
レイヤー固有UIの設置には、[[#レイヤー|レイヤーsvgコンテンツ]](のルート要素(svg要素))に、data-controller属性を与え、そこにそのレイヤー固有のUIのためのhtml文書のリンク(ただしsame origin)を設置します。またサブセットとして、data-controller属性にビットイメージ(.pngもしくは.jpg, .jpeg, .gif拡張子を持つビットイメージ)へのリンクを与えることでレイヤーの凡例情報の提示をすることもできます。

[[#レイヤー固有のUI(後述)を設置するdiv要素|レイヤー固有ＵＩの表示部位]]には、このように指定されたリソース(ビットイメージもしくはhtml)がレイヤーの選択の状況に応じて、切り替わり表示されます。レイヤーがONになっている間、それに紐付けられたレイヤー固有UI(htmkのwindowオブジェクト)が存在し続け、そのレイヤーのsvgDOMの操作やUIの提供が可能です。

なお、標準のフレームワークでは、表示中のレイヤーの中の選択された一つのUIのみが地図のメインのwindowに配置されたiframeで表示されます。表示中ではあっても選択されていないレイヤーのUI(iframe)は非表示状態で動作しています。

'''サンプル'''
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="9000.0 -9000.0 9000.0 9000.0" go:dataArea="9000.0 -9000.0 9000.0 9000.0"
'''data-controller="../Self-GS-POI_controller.html"'''>
.....

====レイヤー固有のUIのためのhtml文書(webApp)の構造・作法====
レイヤー固有のUIとなるhtml文書は、下記の通り、その初期化等を行うライブラリ <code>svgMapLayerLib.js</code> を読み込む必要があります。（現在のところ通常のjavascriptライブラリのみ提供されます）
CDNからライブラリを読む場合は、<code>https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/svgMapLayerLib.js</code>です。

'''サンプル'''
<!doctype html>
<html>
...
<script src="https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/svgMapLayerLib.js"></script>
...
</html>

====LaWAとS-LaWA（サンドボックス化LaWA）のアーキテクチャ====
SVGMapにおけるレイヤー固有UI（LaWA: Layers as Web Apps）には、セキュリティと用途に応じた2つの動作モードが存在します。2026年のアップデートにより、Web標準のセキュリティモデル（クロスオリジン制約）に準拠した'''S-LaWA（サンドボックス化LaWA）'''が導入されました。 (2026/4/16現在 dev2リリース段階)

=====T-LaWA (Tight-coupled LaWA / 従来の密結合モード)=====
* 親のSVGMapフレームワークと同じオリジン（ドメイン）で動作する、従来型のレイヤーWebAppです。
* iframeのJavaScriptコンテキストに、親フレームワークから直接APIオブジェクトが注入されます。
* 全ての[[#拡張API]]にアクセスでき、複雑なDOM操作や関数渡しが可能ですが、サードパーティ製のレイヤーを読み込む際にはセキュリティ上のリスク（XSS等）を伴います。

=====S-LaWA (Strict/Sandbox LaWA / 分離モード)=====
* 親のSVGMapフレームワークとは異なるオリジンで動作することを前提とした、セキュアなレイヤーWebAppです。
* iframeは完全に隔離（サンドボックス化）され、親フレームワークとの通信は全て非同期メッセージング（postMessage）を介して行われます。
* 悪意のあるスクリプトから親フレームワークを保護できるため、外部のサードパーティ製レイヤーを安全に統合できます。
* 代わりに直接的なオブジェクト参照や関数の受け渡しが禁止されるため、[[#拡張API]]の利用に強い制限がかかります（前節の「S-LaWAでの制限」を参照）。

======【発展機能：S-LaWA Level 2 (CORS非依存モード)】======
* S-LaWAのサブモードとして、配信元の外部サーバーにCORS（Cross-Origin Resource Sharing）設定がされていないSVGレイヤーであっても、安全に読み込んで統合できる仕組みです。
* コンテナ側の <code>animation</code> 要素に <code>data-controller</code> 属性が指定されている場合、SVGMapフレームワークはCORSエラーを回避することが可能です。実際のSVGの取得と展開はサンドボックス内のS-LaWAが代理で行われ、サーバー側の設定に依存しないクロスオリジン連携を実現します。

===== 動作モードの指定 (data-lawa-mode) =====
レイヤーがどちらのモードで起動するかは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]内でそのレイヤーを参照している '''<code>animation</code> 要素の <code>xlink:href</code> の値（URLのオリジン）'''、もしくは同要素に付与する '''<code>data-lawa-mode</code>''' 属性で制御できます。

<code>data-lawa-mode="auto"</code> (未指定時のデフォルト): レイヤー（コントローラ）のURLが親フレームワークと同一オリジンであれば '''T-LaWA''' として、クロスオリジンであれば自動的に '''S-LaWA''' として起動します。

<code>data-lawa-mode="isolated"</code>: 同一オリジンであっても、強制的に '''S-LaWA''' として隔離して起動します（開発時のテスト等に有用です）。

<code>data-lawa-mode="tight"</code>: 強制的に '''T-LaWA''' として起動を試みます。（※クロスオリジン環境でこれを指定した場合は、適切なCORS設定やプロキシサーバーの利用が必須となります）

====詳細====

レイヤー固有UIは、SVGMapのグローバルなwindowに設置されたiframeの中で動作します。このiframeの性質と利用できるAPIは、前述の動作モード（T-LaWAかS-LaWAか）によって大きく異なります。

どのような環境・モードで起動された場合でも、レイヤー固有UI内でSVGMapの各種リソースへ安全にアクセスするためには、レイヤーのHTML内で提供される初期化ライブラリ（<code>svgMapLayerLib.js</code> 等）を読み込む必要があります。

'''【重要】''' 各種APIへのアクセスが可能になるのは、iframe自体の "load" イベントではなく、SVGMapフレームワークとの接続が完了した後に発行される '''<code>layerWebAppReady</code>''' イベント以降です。
* 初期化処理は以下のように記述することを強く推奨します。
* <code>window.addEventListener("layerWebAppReady", function(){ /* 初期化処理 */ });</code>

[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が設置されたSVGMapのグローバルなwindowと異なるドメインにレイヤーを設置し、そのレイヤーがレイヤー固有UIを持つこともできます。デフォルト（<code>data-lawa-mode="auto"</code>）では、これは自動的にセキュアなS-LaWAとして起動するため、特別なCORS設定は不要です。ただし前述の通りAPIには制限がかかります。

[[#レイヤー|レイヤーsvgコンテンツ]]のドキュメントルート要素へdata-controller属性を設定する代わりに、コンテナsvgコンテンツにおける[[#レイヤー|レイヤーsvgコンテンツ]]への参照要素にdata-controller属性を設定することもできます。

data-controller属性の代わりに、data-controller-src属性の値に、適切にエスケープすることで直接htmlを記述することもできます。（※この機能は主にT-LaWAでの利用を想定しています）

data-controller属性によって参照されるhtmlコンテンツでは、次節[[#拡張API]]で説明する値や関数が使用できます（※モードによる制限あり）。

data-controller属性のURLには以下のオプションをフラグメント識別子として指定することができます。
* #exec=appearOnLayerLoad||hiddenOnLayerLoad||onClick レイヤー固有UIの起動オプション
** appearOnLayerLoad : レイヤーを表示状態にすると即座にレイヤ固有UIが出現
** hiddenOnLayerLoad : レイヤーを表示状態にすると即座にレイヤ固有UIがhidden状態で起動(そのレイヤ固有UIに含まれるscriptが起動)
** onClick : レイヤー固有UI起動ボタン">"を押したときにレイヤ固有UIが出現(デフォルト)
* #requiredHeight=hhh&requiredWidth=www
** id="layerSpecificUI"のdiv要素のcss値に関わらず、requiredHeight、requiredWidthでiframeの表示を指示

====拡張API====
レイヤー固有UI(iframeのwindowオブジェクトのjavascriptコード)では以下のAPIが拡張されています。
'''【注意】S-LaWA（サンドボックス化LaWA）環境においては、セキュリティ上の理由から親フレームワークのオブジェクトに直接アクセスできません。代わりに <code>svgMapSandboxLayerLib.js</code> が提供する「モック（代替）オブジェクト」を介して非同期に操作が行われます。各項目の「S-LaWAでの仕様」を参照してください。'''

=====イベント=====
*layerWebAppReady : 初期化が完了しLaWAの実行が可能になった (LaWAでは、loadイベントではなくlayerWebAppReadyを使用することを強く推奨します)
*openFrame : そのiframeが、新たに生成された
*closeFrame : 同、消滅した
*hideFrame : 同、隠された
*appearFrame : 同、隠されていたのが再度現れた
*zoomPanMap : [[#.E6.8B.A1.E5.BC.B5.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88|SVGMapフレームワークと同じ]]
*zoomPanMapCompleted : 同上
*screenRefreshed : 同上

'''【S-LaWAでの仕様】''' すべてのイベントがサポートされています。親フレームワークで発生したイベントは、メッセージングを通じてS-LaWA内のwindowオブジェクトに中継・ディスパッチされます。

=====svgImageProps=====
このレイヤー固有UIに紐づいたレイヤーSVGの各種プロパティを参照できる（基本的に全て読み出しのみ） (参考:[[#svgImagesProps.5B.5D]])
*[[解説書#svgImagesProps.5B.5D|プロパティのリストはこちらを参照]]
*svgImageProps.scriptで、動的地図レイヤーのscript要素によって生成されたオブジェクトにもアクセスできます。
*svgMap.getSvgImagesProps(layerID) で得た値と同等。
*.hashは書き込みが有効(参考 [[#サブレイヤーパーマリンク]])

'''【S-LaWAでの仕様】''' 親フレームワークから非同期で同期された静的なコピーデータとして提供されます。<code>.hash</code> プロパティへの書き込みはS-LaWAでもサポートされており、裏側で自動的に親へ同期されます。ただし、<code>.script</code> による親の実行コンテキストへのアクセスはできません。

=====svgImage=====
このレイヤー固有UIに紐づいたレイヤーSVG文書(DOM Documentオブジェクト) (参考：[[#svgImages.5B.5D]])
*このドキュメントを操作することで、そのレイヤーの表示を動的に変化させることが可能です。
*特に、[[解説書#.E5.8B.95.E4.BD.9C.E3.81.AE.E5.88.B6.E9.99.90.E3.83.BB.E5.B7.AE.E7.95.B0|動作の制限に注意して実装してください]]
*svgMap.getSvgImages(layerID) で得た値と同等。

'''【S-LaWAでの仕様】''' S-LaWA環境内に展開された「ローカルXML DOM」が提供されます。このドキュメント（要素の追加・削除・属性変更・テキスト変更など）を操作して <code>svgMap.refreshScreen()</code> を呼び出すと、フレームワークの共通地図キャンバスに送信され更新します。

=====svgMap=====
svgMapフレームワークインスタンス

'''【S-LaWAでの仕様】''' 親のインスタンスの代わりに、S-LaWA用のモッククラス（<code>SandboxSvgMap</code>）が提供されます。以下のメソッドのみが利用可能です。
* <code>refreshScreen()</code>, <code>transform()</code>, <code>getGeoViewBox()</code>, <code>getSvgImageProps()</code>, <code>setShowPoiProperty()</code>, <code>showModal()</code>, <code>getCORSURL()</code>, <code>setCORSproxy()</code>, <code>parseEscapedCsvLine()</code>

=====layerID=====

svgMapフレームワークが管理しているSVG文書ハッシュリスト(svgMap.getSvgImages())における、このレイヤー固有UIに紐づいたレイヤーSVG文書のハッシュキー

[[#getLayerId]]参照

'''【S-LaWAでの仕様】''' 制限なく利用可能です。

=====svgMapGIStool=====
GIStoolsフレームワークを拡張した時、同インスタンス
*[[解説書#svgMapGIStool..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI|svgMapGIStoolが持つAPI]]

'''【S-LaWAでの仕様】''' '''現在のところ利用不可です。'''

=====svgMapAuthoringTool=====
svgMapAuthoringToolフレームワークを拡張した時、同インスタンス
*[[解説書#svgMapAuthoringTool..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI|svgMapAuthoringToolが持つAPI]]

'''【S-LaWAでの仕様】''' '''現在のところ利用不可です。'''

=====controllerSrc=====
レイヤー固有UIのiframeの起動に使われたsrc属性(レイヤー固有UIのパス・URL)が読み出せます。特にレイヤーが異なるドメインから配信されたものの場合、レイヤー固有UIのwindowのlocation属性(及びそれによるURL解決を行うAPI)からは適切な情報が得られません。これ代えてこの値が使用できるケースがあるでしょう。

'''【S-LaWAでの仕様】''' 参照できません。S-LaWAは自身のURLコンテキストで動作するため、自身の <code>location.href</code> などを参照してください。

=====putGlobalMessage(messageText)=====
messageTextを[[#グローバルメッセージ]]エリアに表示する　レイヤーが消滅したら自動でメッセージも消滅します。

'''【S-LaWAでの仕様】''' 現在のところ利用不可です。

=====preRenderFunction=====
この名前の関数を(レイヤー固有UIのwindowに)定義すると、そのレイヤーのSVG文書の再描画(画面更新)シーケンスの直前にこの関数の内容が実行される。詳細は[[解説書#setPreRenderController|setPreRenderControllerを参照]]

'''【S-LaWAでの仕様】''' '''利用可能です。''' S-LaWA内で <code>window.preRenderFunction</code> を定義しておくと、<code>svgMap.refreshScreen()</code> が呼ばれた際や、親からズーム・パンなどのイベントを受信した際に、S-LaWA内でローカルに実行されます。この関数内でローカルDOMを変更することで、描画前の状態更新をエミュレートできます。

=====customHitTester=====
この名前の関数を定義すると、そのレイヤーに固有のヒットテスト（マウスやタッチによって地図上をヒットしたときの振る舞い）機能を追加することができます。ヒットテストは通常のクリッカブルオブジェクト（ポイントやライン・ポリゴンなど）のそれと同等に扱われます。
* customHitTester( position )
** 第一引数に、ヒットされた座標(.screenX,Y:window上の座標、.lat,lng:地理座標、.isMapCenterHitTest:後述)が与えられます。（この値をもとに実際のヒットテスト処理を書く）　この関数の帰り値が'''null'''や'''undefined'''の場合はヒットしなかったこと、'''true'''もしくは文字列もしくはそのレイヤーの任意の図形要素、もしくはそれらの配列の場合はヒットしたことを示します。
*** isMapCenterHitTestが'''true'''の場合、そのヒットテストは伸縮スクロール時自動発生するケースで発生したものです。（もしこのケースでのテストを除外したいなど特別な処理をしたい場合に利用できます）
** ヒットテスト後の振る舞いも通常のクリッカブルオブジェクトと同等で、通常はデフォルトで備えるヒットされたグラフィックスオブジェクトの[[#metadata.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF|メタデータ]]表示パネルが呼び出されます。(帰り値が図形要素の場合）　もしこの振る舞いを変更したい場合は、[[#setShowPoiProperty|setShowPoiProperty]]を用いることが可能です。
** 帰り値がtrue、文字列、およびそれらの配列を返す場合は、[[#setShowPoiProperty|setShowPoiProperty]]を使用してカスタマイズされた処理を行う必要があります。この場合[[#setShowPoiProperty|setShowPoiProperty]]で設定された関数が受け取る引数は、そのSVG文書のドキュメントルート要素であり、その'''"data-hitTestIndex"'''属性に選択されたオブジェクトのインデックス(配列の場合。配列でない場合は常に0)が設定されます。

'''【S-LaWAでの仕様】''' <code>customHitTester</code> 自体は利用できません。（なお<code>svgMap.setShowPoiProperty(func)</code>は利用可能です。）

====サブレイヤーパーマリンク====
(2024/10のdev1ブランチから有効)
*[[#レイヤーsvgコンテンツ]]のURLが任意のフラグメント識別子を持つことができる。
*ただしフラグメント識別子はカンマ","、アンパサンド"&"を含めることはできない。
*[[#レイヤー固有のUI]]が以下を実装する場合、任意のレイヤーの設定をパーマリンク([[#getBasicPermanentLink]])に反映できる。
**[[#レイヤー固有のUI]]は起動時(onload)同フラグメント識別子の情報を解釈し適切な状態に変化させる機能
**[[#レイヤー固有のUI]]は、パーマリンクによる指定に対応した標示状態に表示が切り替わるタイミングで[[#レイヤーsvgコンテンツ]]のURLのフラグメント識別子の内容をそれに対応した値に変更する機能
*[[#レイヤーsvgコンテンツ]]のURLのフラグメント識別子は、[[#svgImageProps]].hashを設定することで変更できる ([[#svgImageProps|⇒仕様参照]])

===動的な地図レイヤー===
svgドキュメントにjavascriptを記述することでも、動的なデータ生成を実装可能としています。
本フレームワークでは、svgドキュメント中に<script>要素を一つだけ記述することができ、その要素の中にjavascriptコードを入れることができます。

DOMを操作し、動的に描画を変化させることが可能です。ただし、[[解説書#.E5.8B.95.E4.BD.9C.E3.81.AE.E5.88.B6.E9.99.90.E3.83.BB.E5.B7.AE.E7.95.B0|動作の制限に注意してください]]

====動的SVGMapコンテンツで利用可能な拡張API====
一般のjavascriptAPIに加えて、動的な地図レイヤーを実装するために以下のAPIが提供されます。（既存のものでも注記があるものも列挙）
*document: このsvgMapドキュメント自身
*READ ONLY変数
**CRS:このドキュメントのCRS : CRS.a....fに、地理座標からこのドキュメントのSVGユーザ座標への変換係数が提供される
**docId:このSVGドキュメントのdocId
**scale：倍率：このドキュメントの座標系と、画面の(px座標系)との間の倍率(この値は等倍が1.0だが、svgMapコンテンツのvisibleMin/MaxZoom値は%(等倍は100)なので注意)
**actualViewBox：このドキュメントの座標系でのviewBox
**geoViewBox：地理座標におけるviewBox
**geoViewport
**viewport
**this.location:相対パス
**(this.verIE)
*refreshScreen(): 描画の更新を明示: refreshScreenを用いていない場合、そのレイヤーのDOMを編集してもそれが即座に表示に反映(更新)するとは限りません。文書のロード、ズーム、スクロールのときが表示のDOMの内容を反映した画面の自動更新のタイミングです。それ以外、多くの場合反映されません（性能確保のための本フレームワークの現在の制限）。DOMO編集をそれ以外のタイミングで表示に反映したい場合、この関数の呼び出しを行うひつようがあります。一方不必要にこの関数を呼び出すとシステム全体の性能が低下するかもしれません。
*transform()
*getCanvasSize()
*linkedDocOp()
*isIntersect()
*drawGeoJson()
*childDocOp()
*onload:この関数を設定すると、ロードされると呼ばれる(ドキュメントロード後、描画前のタイミング。)
** この関数は、DOMトラバース前に同期処理される。
**したがってonloadで実行される処理はその中が非同期でない限り、refreshScreen()しなくてもonload時のDOM編集は直後の描画に反映される。
*onscroll:この関数を設定すると、スクロールされるとき呼ばれる（ほかにズーム以外で画面更新時も）(スクロール後の描画前のタイミング。)
**同上
*onzoom:この関数を設定すると、ズーミングが発生するとき呼ばれる(同上)

====拡張イベント====
*document -> zoomPanMap イベント addEventHandlerすると、ズームパンが起き(viewPortが変化したとき)地図システム全体の描画が完了(含タイムアウト)後に発行される。SVGMap*.jsが地図をウェブアプリ起動後、最初に描画完了した時にもこのイベントが発生する。（レイヤー追加時には発生しない）
**これをイベントリスナに設定した関数は、非同期に実行される。onscroll()と異なり、もしその関数でDOM編集を行った場合は、直後の描画にそれが反映される保証がない。refreshScren()による再描画が必要。
*document -> screenRefreshed イベント addEventHandlerすると、ズームパン以外で地図システム全体の描画が完了(含タイムアウト)後に発行される。主にrefreshScreen()など。このイベントをフックにして、SVGMapコンテンツのDOM操作・再描画（refreshScreen()）を行うと無限ループに陥るので使用方法に注意が必要。
*document -> zoomPanMapCompleted イベント SVGMaplayerUIが有効な時に発行される。　zoomPanMapイベントは伸縮スクロール完了時に発行されるが、その直後にレイヤー固有UIにおいて(XHRやfetchを用いた)非同期なデータ取得とレイヤー書き換えが生じるケースでは、その完了を検知しない。zoomPanMapCompleted イベントはこのような非同期通信の完了後に発行される。

===SVGMapの埋め込み(SVGMapFrame)===
'''実験的機能段階''' :

SVGMapフレームワークはwindow全体に地図コンテンツが占有される形で表示する設計です。ウェブページはwebAppsとしてカプセル化されたレイヤーをsvgMapオブジェクトに差し込む形でアプリケーションが構築されます。すなわち、基本的に[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]windowにはsvgMapオブジェクトだけが単独で存在し、その他のアプリケーションをwindow上に実装する場合は、その開発者がsvgMapオブジェクトとのグローバル空間でのスパゲッティ化に注意を払いながら開発していく必要があります。

それに対して、''SVGMapLv0.1_Frame*.js''が提供する機能は、window内の指定した領域にsvgMapによる地図を埋め込むことを可能にします。さらにこの埋め込まれたsvgMapオブジェクトを　外部からより簡単に操作できるようカプセル化されたインターフェースを提供します。

====ライブラリ====
SVGMapを埋め込むウェブページでは''SVGMapLv0.1_Frame*.js''を導入します。
<!doctype html>
<html>
<script type="text/javascript" src="SVGMapLv0.1_Frame_r4.js"></script>
</html>

====svg-map要素====

svg-mapカスタム要素を使用してsvgMapオブジェクトを任意の場所に埋め込むことができます。
<nowiki>
<!doctype html>
<html>
<script type="text/javascript" src="SVGMapLv0.1_Frame_r4.js"></script>
<body>
<table>
<tr>
<td>
説明用地図
</td>
<td>
<svg-map svgMapAppPage="SVGMapper_r16_layerUICustom.html" id="svgMapTag" latitude="37" longitude="135" zoom="4" layerui="#layerUIarea">
</svg-map>
</td>
</tr>
</table>
</body>
</html></nowiki>

=====属性=====
======svgMapAppPage======
必須属性: 起動するSVGMapLv0.1*.jsが組み込まれたhtmlを指定。
svg-map要素はshadow domとなっており、内部はひとつのiframeとして構成されます。このiframe内のwindowで通常のsvgMapオブジェクトが稼働する形となります。svgMapAppPage属性はこのiframe内で起動するsvgMapオブジェクトを持ったhtmlを指定するものです。

======latitude, longitude======
オプション: 表示領域を下記の属性と組み合わせて指定します。DOMを操作することによって動的に表示領域を変更することが可能です。
======zoom======
オプション: 表示位置の中心点を上の2属性で、ズームレベルをこの属性で指定します。ズームレベルの定義は[https://docs.microsoft.com/ja-jp/azure/azure-maps/zoom-levels-and-tile-grid webMercatorタイルピラミッドのレベル番号]（ただし小数点指定も可能）
======latitude2, longitude2======
オプション: latitude, longitudeと組み合わせて対角線を指定し表示領域を設定します。
======customjson======
オプション: 任意のJSON文字列を(エスケープしたうえで)与えることができます。 SVGMap.jsのあるiframeのwindow.rootMessage.customJsonに、JSON.parseされたうえでその値が反映されます。この値もDOM操作により動的に反映されます。window.rootMessage.customJsonの変化を監視できるようsetterを設けることで動的な変化に対応する実装が可能です。

var rootMessage={
set customJson(json){
...
}
}

======layerui======
オプション: レイヤーUIの出力要素をxlinkで指定します。　この値はmutationをobserveしていません（svg-mapオブジェクトが生成された、最初の一回のみ有効です）

<svg-map svgMapAppPage="SVGMapper_r16_layerUICustom.html" id="svgMapTag" latitude="37" longitude="135" zoom="4" layerui="#layerUIarea">

=====DOM API=====
======setCenter======
setCenter( longitude, latitude, zoom ) : 緯度経度ズームレベルで地図を表示させる
======addLayer======
addLayer(url,title,visibility) : URLで指定したリソースのレイヤーをtitleを付けて追加する

======svgMapObject======
getter svgMapObject : この要素に紐付いたsvgMapオブジェクトを得る

====layer要素====
svg-map要素の子要素として、任意の個数のlayer要素を設置できます。
=====属性=====
======title======
iframeで起動されるsvgMapオブジェクトの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルにある、レイヤー名(title)を指定し、そのレイヤーとlayer要素を紐付ける。該当するレイヤーが無く、且つ下記のsrcが指定されている場合は新しいレイヤーを追加する。なお、任意の属性や子ノードが与えられている場合は、下記の通りレイヤーの読み込み後にそれらの値が該当するレイヤーの[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|data-controller]]の window.rootMessageに設定される。

======src======
iframeで起動されるsvgMapオブジェクトの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルにある、レイヤーをURLを使って指定する
======visibility [TBD] ======
visible もしくは hiddenを設定すると、そのレイヤーの表示状態を制御できる。

======任意の属性======
任意の属性を設定できる。設定した属性名と属性値は、対応するレイヤーの[[#レイヤー固有ユーザインターフェース|data-controller]]で指定されたレイヤーのコントローラのwindowにおけるwindow.rootMessageの対応するメンバ変数に反映される。[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/set setter]を設定することで変化に応じて動作させることが可能になる。

======rootMessage.update()関数======
レイヤーのコントローラのwindow.rootMessage.update()関数(引数なし)が定義されている場合、上記の属性変更(最初の設定も含む)が検知される度にこの関数が呼び出される。

=====子ノード(TEXT CONTENTやXML要素)=====
任意のテキスト(textContent)や、XML要素(xmlContent)を子ノードに入れることができる。
入れられた情報は、同様に対応するレイヤーのdata-controllerの
window.rootMessage.textContent、もしくはwindow.rootMessage.xmlContentメンバ変数に反映される。
XMLに関しては任意の階層化がされていても良い。DOM操作による変化があれば更新されるので、同様にsetterを用いて変化を反映させることが可能。

=====DOMAPI=====
======layerId======
layerId : このレイヤーのレイヤーIDを得る
======svgImage======
svgImage : このレイヤーに紐付いたsvgMapコンテンツ(document)を得る
======svgImageProps======
svgImageProps : このレイヤーに紐づいたsvgMapコンテンツのsvgImagePropsオブジェクト(各種プロパティを格納したオブジェクト)を得る
======controllerWindow======
controllerWindow : (もしあれば)このレイヤーに紐づいたsvgMapコンテンツのレイヤー固有UIを得る

==第四章：内部機構解説==
[[内部機構解説|別ページを参照してください。]]

==第五章：付加機能==
===3D可視化機能===
:- SVGMap.jsはCesium.jsを利用してSVGMapで表示しているレイヤーを3D可視化することができます。
:- 3D可視化はSVGMap.jsの地図ウィンドと独立した別ウィンドで行われます。
:- すなわち、ここから呼び出されるCesiumベースの3D可視化ウェブアプリは、それ専用のwebApps([https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4_module.js cesiumWindow*.js]を読み込んだアプリ。：基本的な3D可視化ウェブアプリとして、[https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4.html cesiumWindow4.html]を用意)を持つ別のブラウジングコンテキストで起動されます。
:- この3D可視化ウェブアプリは、svgmapjsとメッセージングを行いsvgmapjsで表示されているレイヤーを3D可視化します。

====3Dビジュアライザ起動用ボタンの設置====
3D可視化機能を起動するためのUI(ボタン)は、[[#フレームワークの呼び出し|ルートhtml文書]]に設置した以下の要素によって構築されます。
<code><pre><img id="3DviewButton" data-app="cesiumWindow4.html" .../></pre></code>

* <code>id</code>が<code>3DviewButton</code>である必要があります。
* <code>data-app</code>属性で、3D可視化ウェブアプリのパスを指定することが可能です。
** もし指定されていない場合は、ルートhtml文書と同一ディレクトリの<code>cesiumWindow2.html</code>というファイルがデフォルトで指定されます。
** パスは同一オリジンである必要があります。
** 基本的な3D可視化ウェブアプリとして、[https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4.html cesiumWindow4.html]が[https://github.com/svgmap/svgmapjs/ svgmapjsリポジトリ]に用意されています。

解説書

2026-04-16T08:40:57Z

Admin: /* LaWAとS-LaWA（サンドボックス化LaWA）のアーキテクチャ */

=SVGMap.js (Level0.1フレームワーク)解説書=

2018年現在のSVGMapのデータ形式、およびそれを実装した初歩的なフレームワーク(SVGMap Level0.1 Revision*)の解説を行います。

==第一章：SVGMapの基本機構と、更新部分==

この章は、JIS化されたSVGMap ([http://kikakurui.com/x7/X7197-2012-01.html JIS X.7197])や、[https://www.w3.org/Submission/2011/04/ W3C Member Submission]に対する、近年の開発成果に基づいたSVGMapのアップデートを解説しています。

[http://kikakurui.com/x7/X7197-2012-01.html JIS X.7197]もしくは、[https://www.w3.org/Submission/2011/04/ W3C Member Submission]に記載されているように、SVGMapの基本機構は主に以下の機能を　[https://ja.wikipedia.org/wiki/Scalable_Vector_Graphics 汎用的なグラフィイクスデータ記述形式SVG]に拡張することです。
* [[#地理座標系の処理|地理座標処理]]
** SVGの座標系と地理座標系との間の関係を記述する globalCoordinateSystems要素
* タイルピラミッド（タイリングとLevel of Detail）
** コンテンツを埋め込む[[#要素|image要素、animation要素]]のx,y,width,height属性への追加の振る舞いと、visible-min-zoom, visible-max-zoom属性の追加
** 詳細は [https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html こちらの論文]を参照
* 拡張された[[#レイヤー|レイヤー]]
** [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]におけるimage, animation要素の扱い
** [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が埋め込むsvgコンテンツ([[#レイヤー|レイヤーsvgコンテンツ]])の処理

===地理座標系の処理===
SVG2では地理空間座標を記述するスペック(metadata geospatial coordinate systems)が削除されました。これは、W3C SVG仕様の範囲では単なるメタデータであり、ユーザエージェントの振る舞いに何ら影響を及ぼさないことが理由です。　また、JIS SVGMapにおいては、coordinateReferenceSystem 要素が定義され、それに基づくユーザエージェントの振る舞いが規定されていますが、これは一方でW3Cのスペックではないという課題を持ちます。

これを受けて、現在提案されているSVGMapのデータ仕様では、SVG1.1の段階ですでに標準化と実装が行われたスペックを注意深く活用することにより、JIS SVGMapで規定された地理座標系に関する機能のいくつか（すべてではない）を実現する方法を用いることとしています。（[https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/globalView globalView spec]）

なお、JIS SVGMapのcoordinateReferenceSystem要素もサポートしています。

====メルカトル図法を含む任意の図法の定義とその合成機能(＞rev16)====
従来のSVGMapでは、グローバル座標系に緯度経度座標を用いた場合、使用できる図法は[https://ja.wikipedia.org/wiki/%E6%AD%A3%E8%B7%9D%E5%86%86%E7%AD%92%E5%9B%B3%E6%B3%95 PlateCarreeや正距円筒図法]でした。

一方、rev16では[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]を含む任意のSVGMapコンテンツ([[#レイヤー|レイヤーsvgコンテンツ]]やサブレイヤー、タイルなど)のglobalCoordinateSystem 要素のtransform属性に、下記のように"mercator"を指定することで、そのコンテンツの座標系がメルカトル図法([https://en.wikipedia.org/wiki/Web_Mercator_projection web mercator])であることを宣言できます。

<pre><globalCoordinateSystem srsName="http://purl.org/crs/84" transform="mercator" /></pre>

この記述がされたコンテンツのSVGの座標空間はメルカトル図法上のものとなり、この座標系上でのx,y=0,0(左上)は西経180.0度,北緯85.051129度、x,y=1,1(右下)は東経180.0度,南緯85.051129度に対応します。

=====メルカトル図法での地図表示=====
[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]で先述の宣言を行うことで、SVGMap0.1.jsはメルカトル図法で画面上に地図を表示します。このとき、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が参照する各レイヤーはメルカトル図法であっても、それ以外であっても構いません。フレームワーク内でオンザフライの図法変換が実行されます。（逆に[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]がPlateCarreeでレイヤーがメルカトルでも同様）

=====メルカトル図法のドキュメントルート要素のviewBox属性=====
* [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]において、地図の初期表示状態を記述するドキュメントルート要素(<svg>要素)のviewBoxに記述する座標も先述のメルカトル座標系で記述する必要があります。
* 一方、緯度経度で初期表示領域を記述したい場合に対応する仕様が拡張されており、その記述例は下記のとおり、'''global'''を追加します。
<pre><svg viewBox="global,138,35,2,2"></pre>

=====プロキシの設定=====
オンザフライでの図法変換では、多くのケースで非線形の座標変換が必要となります。ビットイメージ（タイルを含む）に対して子の座標変換を実行するためにSVGMap.jsではビット委イメージのピクセルにアクセスしています。これを実現するにはビットイメージがSVGMap.jsと同一オリジンにある必要があります。この条件を満たせないケースに対してフレームワークにはプロキシを設定する機能があります。([[#setProxyURLFactory|setProxyURLFactory API]]を参照)

'''[[クロスオリジンアクセス|詳細な情報をこちらに掲載しました]]'''

=====多様な図法の定義と利用=====
[[#動的な地図レイヤー|javascriptコード]]に記載されたscript要素内に定義した関数の関数名をglobalCoordinateSystem要素のtransform属性に記述することで、その関数を図法変換に用いた図法定義が可能となります。(先述のmercator属性は、フレームワークに特別に組み込まれた関数です）

たとえば、日本の平面直角座標系の地図(固有の基準点を持つ横メルカトル図法)をPlateCarreeやメルカトル図法の地図として合成・表示するケースなどに有効でしょう。

ユーザが定義できるこの関数は引数を持たない関数であり、返り値として以下の３つの関数を返す必要があります。
* {x,y} transform({x,y}) : グローバル座標(WGS84経度緯度)から、そのコンテンツの図法の座標への変換関数入出力値は.x,.yメンバを持つオブジェクト。
* {x,y} inverse({x,y}) : 同、逆変換関数
* number get scale : グローバル座標系に対するコンテンツの図法の座標系の座標値のスケール（グローバル座標系で1変化すると、コンテンツの座標系でいくつ変化するのかを表す）
* 記述例
<code><pre>
<svg ...>
<script>
function azimuthalEquidistant(){
...
return{
transform:function(inp){
var xy = transform_int(inp.y, inp.x, ...);
return{ x:xy.x, y:xy.y}
},
inverse:function(inp){
var latLng = inverse_int(inp.x, inp.y, ...);
return{ x:latLng.lng, y:latLng.lat }
},
scale: 1.0
}
}
</script>
<globalCoordinateSystem srsName="http://purl.org/crs/84" transform="azimuthalEquidistant" />
...map contents in projected coordinate system...
</svg>
</pre></code>

===ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング===
SVG2(SVG1.1 2nd Edition)では、SVG単独によるユーザエージェントという実装想定は撤廃され、よく知られているウェブブラウザの機能の一部としてのSVGデータの描画機能、HTMLやCSSと一体化されたデータ・コンテンツ　へと変化しました。一方、近代のウェブブラウザにおけるコンテンツでは古典的なhtmlに基づくコンテンツデータに対して、javascriptとDOM APIによるプログラムでコンテンツをブラウザ上で動的に生成する（ウェブアプリケーション）機構を備えます。すなわちSVGを実装する現代のユーザエージェントは例外なくウェブアプリケーションの実行が可能となりました。

そこで、SVGMapでは静的なSVGによる地図コンテンツに加え javascriptで動的に生成されるコンテンツ(ウェブアプリケーション)も地図コンテンツ（地図のレイヤー）として扱えることとしました。それにもかかわらず SVGMapは依然として複数のウェブ上で分散する地図データを一つの画面上にレイヤリングする機能（ハイパーレイヤリング）を維持しています。すなわち、ウェブアプリケーションとしての地図レイヤーをレイヤリング（マッシュアップ）する機能が拡張されます。これは、SVGMapのマッシュアップ・ハイパーレイヤリングの概念を、単に地図画像データのレイヤリングから、地図上に表現された動的なオブジェクトのマッシュアップ・レイヤリングに広げています。SVGMapではこのコンセプトを[[リンク集#.E8.A7.A3.E8.AA.AC.E9.9F.B3.E5.A3.B0|"Layers as WebApps"(LaWA : ウェブアプリケーションとしてのレイヤー)]]と呼んでいます。

このようなウェブアプリケーションは、レイヤーごとにカプセル化されることになります。これにより、'''グローバル空間'''(コンテナsvgコンテンツとそれを起動する、svgMap.jsフレームワークを読み込んだウェブページ)のスパゲッティ化なしに、多様な機能を実装していくことが可能になります。

[https://satakagi.github.io/mapsForWebWS2020-docs/De-centralizedWebMapping.html こちらの論文]も参考にしてください。

ウェブアプリケーションによる地図レイヤーを構築するには二つの方法があります。
* svg要素の'''data-controller'''属性で参照されたhtml文書
** [[#レイヤー固有ユーザインターフェース]]と呼ばれる機構です。この方法を用いること推奨します。
* svg要素内の'''script'''子要素 (将来廃止予定)
** htmlによるUIを伴わない実装の場合はscript要素を用いることができます。ただしsrcは属性には非対応、直接コードを埋め込む必要があります。

この機能を用いるにはSVGMapLevel0.1フレームワークを使用する場合は、拡張フレームワーク(SVGMapLv0.1_LayerUI2_r*.js)を更にロードする必要があります。SVGMapLevel0.2フレームワークの場合はデフォルトで機能します。

====レイヤー固有ユーザインターフェース====
SVGMap.jsではさらに、個々の地図レイヤー(レイヤーSVGコンテンツ)がそれぞれのレイヤーに特化した固有の演算ロジックだけでなく、ユーザーインターフェースも備えた[[#レイヤーsvgコンテンツの設定|HTMLを紐づける]]ことができる機能が拡張されています。UIも備えたより完全なwebAppをレイヤーとして実装できるため、カプセル化がより効果的に実現されます。（Layers as Web Apps, LaWA)

たとえば気象情報のレイヤーに対して気象情報の時間変化を表示するアニメーションのコントローラ(スライダーバー)や、気象情報の種類を選択するプルダウンメニュー　などのUIやロジックを任意に構築できます。

レイヤー固有ユーザーインターフェースは、[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]](SVGMap.jsをロードしたhtml)のレイヤー選択UIを通してwindowに設置されたiframe中に呼び出されます。

詳細は[[#レイヤー固有のUI]] を参照してください。



　

====例====
以下に、いくつかのこのような動的な地図コンテンツの例を示しましょう。
;検索によって表示スタイルを変更する機能を持ったレイヤー
: 例えばコンビニエンスストアのＰＯＩレイヤーを表示したとして、そのメタデータを読み取り、検索条件に基づいて（例えば深夜営業している店舗）の表示スタイルを変更するような検索機能を実装したレイヤー　メタデータは書くレイヤーごとに独特の値を持つため、その検索ロジックはレイヤーに固有のものとなることがあります。このケースではそのような機能をレイヤーに組み込むことを可能にします。
;CSVデータなどのレガシーな非SVGデータをHXRで取得し、ブラウザ上でSVG DOMツリーを生成するようなSVG地図コンテンツ。
: このケースでは、サーバからクライアントに送信されるデータの実体はSVG形式の地図データではなく、CSVなどのレガシーなデータです。SVG地図コンテンツには、CSVデータをSVGとして描画するためのデータ読み込み・解読・SVG DOMツリー生成機構を備えたjavascriptコードが含まれます。また、これよりはモダンなgeoJsonやKML等のデータをSVG DOMに変換することも容易に可能でしょう。これをより簡単に実現するためのライブラリも[[#svgMapGIStool.で呼び出せるAPI|svgMapGIStool]]に準備されています。
;タイリングされた地図コンテンツ
: それは、たとえば[https://wiki.openstreetmap.org/wiki/Tiles OpenStreepMapのTile Server]や、[https://en.wikipedia.org/wiki/Tile_Map_ServiceTileMap Tile Map Service]のような、特定のロジックによる数列のような法則性を持ったピラミッド状の地図タイルリソースをタイリングする地図コンテンツのことです。
: 更新されたSVGMapでは、地図コンテンツに内蔵されたjavascriptによるアプリケーションロジックとしてそれらを取り扱うことができます。タイリング規則をそのままウェブアプリケーションとしてで書き下し、スケールやビューポートに応じて適切なタイリング(配置)を行うSVG DOMツリーを生成するSVG地図コンテンツが構築できます。

=====タイリングに関するノート=====
[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html svgMapにおけるタイリング]は従来の地図フレームワークより柔軟で汎用的な概念に基づいています。
openLayersやleafletなどの従来の地図フレームワークでは、このようなタイリング機能は特定の固定的なタイリングロジックとパラメータを伴った機能として地図フレームワーク本体にハードコードされて提供されてきました。さらには地図フレームワークがこれらのタイリングロジックに強く依存したアーキテクチャを持っていました。一方、これらのロジックにはさまざまなバリエーションや最適化のための調整パラメータが存在し、これまで長らくその互換性や相互運用、更には効率の問題を抱えてきました。次のリンクでその多くの議論や多様な提案を参照できるでしょう。[https://wiki.osgeo.org/wiki/Tile_Map_Service_Specification TMSspecs@osgeowiki], [https://wiki.osgeo.org/wiki/Category:Tiling tiling@osgeowiki]
ベクターデータのタイリングにおいては、これらの課題はさらに増幅され、いまだ手法は確立していないといっても良いでしょう。たとえば、我々の研究では、Quad Tree Composite Tiling([https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-in-english スライド]、、[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html ペーパー])のような用途によってはもっと優れたタイリングの手法も見いだされています。

一方、これらのロジックはその多様なバリエーションを含め、javascriptによるプログラムコードとしては容易に記述可能です。多くの場合わずか数十行のロジックで記述できるでしょう。この程度のコードで多くのタイリングの手法が包含できるのであれば、特定のタイリング手法をフレームワークのコアに内包する・さらにはこれら特定のタイリングの手法にコアが依存する必要はなく、先述のウェブアプリケーションによる動的な地図レイヤーとして実装すれば良いであろうというのがSVGMapにおけるタイリング扱いです。3DマップのフレームワークであるCesiumはこれに似たタイリングポリシーを持っているようです。

=====SVG以外のデータサポートに関するノート=====
前章に記載した方針と同様、他の地図表示フレームワークと異なりSVGMapではSVGとして規定されたコンテンツ(もちろんビットイメージの埋め込みは可能)以外のネイティブサポートは行いません。例えばgeoJsonやKML, WKTなど地図業界でしばしば用いられるデータをSVGMapで表示したい場合は、変換ルーチンを埋め込んだ動的な地図コンテンツ（webAppレイヤー）としてそれらを扱います。SVGMap.jsの拡張モジュールである[[#svgMapGIStool.で呼び出せるAPI|SVGMapGIS.js]]には、これらのデータをwebAppsで読み込みSVGに変換するためのAPIがあります。

===トポロジースイート(地理空間情報処理)===
Rev.13で拡張

SVGMapLevel0.1 Revision 13以降では、SVGMapコンテンツに対してトポロジー演算機能(地理空間情報処理機能)を適用する拡張フレームワークが提供されます。この機能を用いるにはSVGMapLevel0.1フレームワークに加えて、拡張フレームワーク(SVGMapLv0.1_GIS_r*.js)をロードする必要があります。このフレームワークでは、[[#svgMapGIStool.で呼び出せるAPI|拡張されたAPI]]が利用可能です。フレームワークに内蔵された基本的な演算機能に加え、geoJSONと整合するインターフェースを備え、[https://github.com/bjornharrtell/jsts jsts]を組み込み、より高度な機能を実装するための機構も持ちます。

この機能を用いると、特定のレイヤーに登録されているポリゴンの範囲に入っている、特定のレイヤーのポイントをフィルタリングして表示の色を変更する。といったことが可能です。ただし、これらはすべてすでにブラウザ上にロードされている限られた量のコンテンツの中での演算に限定されます。もしもサーバ上にしかないデータに対してこれらの演算を試みたい場合、従来通りサーバサイド技術によってそれは実現すべきです。

また、主題情報を含むウェブマップコンテンツの多くのレイヤーがラスタータイルによって提供されているという現状を考慮し、このスイートはラスターレイヤーをカバレッジとして扱った空間情報処理を行う機能の実装も進められています。現在のところ、カバレッジとポイントとの間での演算が可能です。また、そのために便利なカラーピッカー等の付加的な機能の実装も進められています。

===オーサリングシステム===
Rev.14で拡張

SVGMapLevel0.1 Revision 14以降では、SVGMapコンテンツを編集するツール機能が実装された拡張フレームワークが提供されます。[[#svgMapAuthoringTool.で呼び出せるAPI|フレームワークが提供するAPI]]を使って、オーサリング機能を持ったレイヤーを作ることが可能です。コンテンツは、SVG DOMとして構築されます。なお編集したオブジェクトを保存したり登録するためには別のサービスやアプリケーションの開発が必要です。

===3D可視化システム===
Rev.15で拡張

[https://cesiumjs.org/ Cesium.js]を用いて、SVGMap.jsが表示できるすべてのコンテンツを3D可視化するシステムです。詳細解説はTBD ([[#svgMapCesiumWrapper.で呼び出せるAPI|フレームワークが提供するAPI]])

===プログレッシブウェブアプリケーション===
Rev.16で拡張

[https://developer.mozilla.org/docs/Web/Progressive_web_apps Progressive Web Apps]をサポートしたブラウザにおいて、SVGMap.jsをオフラインでも利用可能にする拡張機能です。詳細解説はTBD ([[#svgMapPWA.で呼び出せるAPI|フレームワークが提供するAPI]])

===SVGMapコンテンツのバックエンドソフトウェア (参考)===
本解説書は主にコンテンツ形式とユーザーエージェント側のソフトウェアについて解説していますが、サーバ・バックエンド側についてもここで少し言及します。

shapefileやcsvなどから、静的なSVGMapコンテンツを生成するためのソフトウェアが[https://github.com/svgmap/svgMapTools オープンソース]で準備されています。これらのソフトウェアでは、[[#タイリングに関するノート|高度なタイリング手法]]を用いた地図タイルを生成することができます。使用方法などは同リポジトリに用意されているチュートリアルを参照してください。

一方、もちろんSVGMapの仕様に準拠すれば、これらのソフトウェアに頼らず、自由にバックエンドを構築することができます。例えばよく知られた地図タイルサービスを用いたり、古典的な[https://wiki.openstreetmap.org/wiki/Web_feature_service WFS ]や[https://wiki.openstreetmap.org/wiki/WMS WMS]のような動的地図・地理空間情報サービスをベースにして比較的容易にそれらを構築することもできます。[https://github.com/svgmap/svgMapLv0.1/tree/master/appLayers SVGMap.jsのリポジトリのappLayersディレクトリ]にはそのようなシステムを構築する際のフロントエンド側の動的レイヤーのサンプルが掲載されています。

==第二章：SVGMap Revsion 0.1フレームワーク==
SVGMapは究極的には既存のすべてのウェブブラウザがネイティブの機能としてそれを備えることを目標とし、既存のHTML,CSS,SVGなどのウェブブラウザの標準規格との整合性を備え、且つ既存のWeb Mappingの規格との整合性をも備えた仕様として検討と標準化を進めています。しかし今のところまだその標準化は完遂されていないため、その完全な実装がなされたウェブブラウザは存在しません。一方、既存のウェブブザでSVGMapの機能が実行可能となるような拡張をJavascriptによるフレームワークとして構築することが可能です。SVGMap Revision 0.1フレームワークは、このようなJavascriptによるSVGMapの仕様に基づいた初歩的な制限と拡張がされた実装です。その実装はオープンソースとして[https://github.com/svgmap/svgMapLv0.1 こちらのgitubリポジトリ]で公開されています。

そのアーキテクチャの特徴は、ブラウザネイティブのSVGレンダラーを使用せず、HTML,CSS,HTMLCanvas2DAPIを用いてSVGMapが実装されている点です。この特徴は主にこのフレームワークの開発が開始された時期に起因しています。当時のウェブブラウザの多くはSVGが実装されていませんでした。また実装されていたとしても、大規模なベクトルデータのレンダリング、および伸縮スクロール・インタラクティブな操作に対する性能面での処理制御に問題がありました。これらの問題のいくつかは現在のブラウザで解消されているものがあるかもしれません。またこれらの問題の解決とともに、SVGMapフレームワークはLevel番号を上げつつよりネイティブの機能に基づいた実装に移行するかもしれません。<font size="-2">参考までに、[http://svg2.mbsrv.net/devinfo/devkddi/lvl0.5/ 実験的なネイティブのレンダラを用いた実装(2010年)]があります。</font>

SVGのベクトル描画機能は[https://github.com/canvg/canvg canvg]のpathパーサなどを引用することで実装されています。一方、地図としてあまり用いられないと想定された多くの要素やプロパティ、アトリビュートの実装が省略されています。

===追加・拡張された機能：===
====フレームワークの呼び出し====
本フレームワークを用いる場合、SVGMapコンテンツをブラウザに直接読み込ませることはできません。フレームワークを動作させるjavascriptライブラリをロードしたhtmlコンテンツ(WebApps)を準備し、そこでSVGMapコンテンツを読み込み表示させます。利用者には、このhtmlコンテンツのURLを告知します。このhtmlコンテンツを以降'''ルートhtml文書'''と呼ぶことにします。

SVGMapのフレームワークはgithubリポジトリ：https://github.com/svgmap/svgmapjs　で公開されています。

htmlコンテンツの<body>要素直下に以下の要素を配置します。
=====フレームワークを実装したjavascriptライブラリを読み込むscript要素=====
これがSVGMap.jsのコアのフレームワークを構成します。

<nowiki><script type="module">
import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

上のスクリプトで必要なモジュールが読み込まれます。[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]のwindowのメンバには、svgMapオブジェクトを設定しています。

[https://svgmap.org/devinfo/devkddi/tutorials/tutorial5_esm/tutorial5.html 実働サンプル(tutorial5_esm)]

もしくは https://github.com/svgmap/svgmapjs の内容を独自のウェブホストにコピーしそれを用いることもできます。(下の例は[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]のhtmlに対して、svgmapサブディレクトリにjsを置いた場合)
<nowiki><script type="module">
import { svgMap } from './svgmapjs/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

===== GISモジュールを利用する場合 =====
svgMap.jsの地理空間演算機能(GISモジュール)では、jsts.jsを使用しています。そのためGISモジュールを機能させるにはjsts.jsの読み込みが必要です。下記のようになります。もちろん独自のウェブホストにjstsをコピーしてそれを利用することも可能です。

<nowiki><script type="text/javascript" src="https://unpkg.com/jsts@1.6.1/dist/jsts.min.js"></script>
<script type="module">
import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

======本解説書でAPIを説明している、現在利用可能な拡張フレームワーク======
ECMA Script Module対応の内容に現在更新中

* [[#svgMapCesiumWrapper.で呼び出せるAPI|SVGMapLv0.1_CesiumWrapper_r*.js]] (実験的)
** https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/experimental/Cesium3D/SVGMapLv0.1_CesiumWrapper_r3.js
* [[#svgMapPWA.で呼び出せるAPI|SVGMapLv0.1_PWA_r*.js]] (実験的)
** https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/experimental/PWA/SVGMapLv0.1_PWA_r5.js

まだ実験的なsvgMapCesiumWrapperは、[http://www.svgmap.org/devinfo/devkddi/lvl0.1/cesiumSvgMap/top.html svgMap cesium visualizer]ページを参照ください。
SVGMapPWA(ProgressiveWebApp)については、[https://svgmap.org/devinfo/devkddi/lvl0.1/svgMapPWA/ SVGMap PWA Test]ページを参照ください。

=====SVGMapコンテンツを配置するためのdiv要素=====
id属性に"mapcanvas"を設定し、data-src属性(もしくはtitle属性(to be obsoluted))には、地図フレームワークが最初に読み込む、SVGMap.jsが表示する地図コンテンツの起点となるSVGコンテンツ（以降'''コンテナsvgコンテンツ'''と呼びます）のパスを指定したdiv要素を設置します。

コンテナsvgコンテンツはまた、'''[[#レイヤー|ここで記述するレイヤー]]'''を持つことができる特別のコンテンツです。

（要確認：地図のサイズ・配置はこのdiv要素のサイズとなります。無指定の場合は全ウィンドサイズ）
<nowiki><div id="mapcanvas" title="Container.svg"></div></nowiki>

<nowiki><div id="mapcanvas" data-src="Container.svg"></div></nowiki>

======差分データの指定======
data-custom-layers-root属性でContainer.svgに対するレイヤーの差分情報のパスを指定することができます。
もしくは、data-custom-layers-root属性に、レイヤーの差分情報が保管されているディレクトリを記述した場合、URLハッシュで差分ファイルを指定することもできます。
差分データは、[https://github.com/svgmap/svgmapjs/blob/main/SVGMapCustomLayersManager_r3module.html カスタムレイヤーマネージャ]で作成することが可能。（データ形式は後述）
<nowiki><div id="mapcanvas" data-src="Container.svg" data-custom-layers-root="./containerDif/dif0.json"></div></nowiki>

=====地図中心の照準イメージ。=====
参照する画像はあらかじめ用意されたもの以外も利用できます。
<nowiki><img id="centerSight" style="opacity:0.5" src="Xcursor.png" width="15" height="15"/></nowiki>

====任意で設置できる要素：====
=====[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]](後述)を設置するdiv要素=====
<nowiki><div id="layerList" style="left :30px; top: 10px; width:300px;height:90%; position: absolute; "></div></nowiki>
: idが上記の通りである必要があります。
　 styleは任意だが、heightは[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]が展開された状態におけるサイズとなります。格納された状態のサイズは、この要素における文字の縦幅となります。各種オプションについては[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|詳細を参照ください]]
　

=====[[#レイヤー固有のUI|レイヤー固有のUI]](後述)を設置するdiv要素=====
[[#レイヤー固有のUI|レイヤー固有のUI]]を使用するために設置するdiv要素です。

<nowiki><div id="layerSpecificUI" style="right :10px; top: 40px; width:400px;height:400px; position: absolute; background-color: white;opacity:0.8;display:none;"></nowiki>
<nowiki></div></nowiki>
: idが上記の通りである必要があります。styleは任意だが、heightはレイヤリストUIが展開され得る最大のサイズとなります。
　
=====伸縮ボタン=====
<nowiki><img id="zoomupButton" style="left: 5px; top: 5px; position: absolute;" src="zoomup.png" onclick="svgMap.zoomup()" width="20" height="20" /></nowiki>
<nowiki><img id="zoomdownButton" style="left: 5px; top: 25px; position: absolute;" src="zoomdown.png" onclick="svgMap.zoomdown()" width="20" height="20" /></nowiki>
: img要素かつidが上記の値である必要があります。
　伸縮ボタンを一回押すたびに伸縮する比率は、別途svgMap.setZoomRatio(ratio)で設定可能。
　デフォルトの比率はsqrt(3)
　
=====測位ボタン=====
<nowiki><img id="gpsButton" style="left: 5px; top: 45px; position: absolute;" src="gps.png" onclick="svgMap.gps()" width="20" height="20" /></nowiki>
: img要素かつidが上記の値である必要があります。ボタン押下で測位し、測位点を中心にして地図を表示する機能。表示の範囲は測位制度に応じて適当に設置されます。

=====グローバルメッセージ=====
レイヤー固有UIが任意のメッセージを出力可能にするために設置するエリア　[[#レイヤー固有のUI]]のAPI '''putGlobalMessage''' 参照
<nowiki><span id="globalMessage" style="font-size:10px;left:5px;bottom:16px;position:absolute;"></span></nowiki>
: idが上記の値である必要があります。
　styleは任意

=====地図中心の緯度経度値表示=====
<nowiki><font id="centerPos" size="-2" color="brown" style="left: 50px; bottom: 5px; position: absolute;" ></font></nowiki>
: idが上記の値である必要があります。
　styleは任意

=====地図スケールの表示=====
<nowiki><font id="vScale" size="-2" color="black" style="left: 5px; bottom: 28px; position: absolute;">-</font></nowiki>
: idが上記の値である必要があります。
: styleは任意
: 縦50pxに対応したスケール[Km]を表示します
: 近傍に縦50pxのスケールイメージを設置するとわかりやすいでしょう

=====レジューム機能のためのチェックボックス=====
<nowiki><form style="right:10px;top:20px;position:absolute;opacity:0.8" ></nowiki>
<nowiki><input type="checkBox" id="resumeBox" onChange="svgMap.resumeToggle(event)" autocomplete="off"/></nowiki>
<nowiki><label for="resumeBox"/>Keep and Resume view</label></nowiki>
<nowiki></form></nowiki>
: checkboxタイプのform要素であり、idが上記の通りである必要があります。レジューム機能とは、(rev16以前ではcookie、rev17以降ではlocalStorage)を用いて、前回最後に表示された状態（レイヤーの表示非表示状態、表示領域（view port）を再現する機能です。スタイルおよびlabel要素は任意

===== [[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]のためのスタイル=====
<style>
body {
font-family: Meiryo;
}
#layerTable{
background:#ffE0E0;
border: 2px solid #bbb;
}
.layerItem{
background-color: white;
}
.noGroup{
background-color: #fff0f0;
}
#layerList{
background-color: #ffff80;opacity:0.8;
}
</style>
====== [[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]を用いる場合、例えば上記のようなスタイルの定義が必要です。======
* layerList：レイヤーリストUI全体に対するスタイル
* layerTable：レイヤーリストUIの中のテーブルに対するスタイル。
* layerItem：同テーブルに表示される個々のレイヤー表示に対するスタイル
* noGroup：同レイヤー表示のうち、グループに属さないレイヤーに対するスタイル
　

====レイヤー====
SVGMapは古典的な地図情報システムのようなレイヤーの概念を備えていません。一方その上位概念ともみなせる、任意のドキュメントをツリー状に埋め込む機能を備えています。しかしそれでは古典的なユースケースを平易に表現しているとはいえないため、それをラップする古典的なレイヤーの概念と、それに基づくレイヤーユーザインターフェースのフレームワークを持ちます。

フレームワークが最初に読み込む地図コンテンツの起点となる'''[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]'''の中で、animationもしくはiframeを用いて（準拠規格に依る）埋め込まれるsvgコンテンツが、自動的にレイヤーとみなされます。いうまでもなくレイヤーの上下順はSVGコンテンツのスクリプト中での埋め込みの順番の逆順になります。

また、このコンテナsvgコンテンツが参照し埋め込んでいる、各レイヤーのSVGコンテンツのことを、'''[[#レイヤー|レイヤーsvgコンテンツ]]'''と呼ぶこととします。ここで、各[[#レイヤー|レイヤーsvgコンテンツ]]はさらに別のsvgコンテンツを埋め込むことがあります。これらのコンテンツはよくサブレイヤーSVGコンテンツもしくは単にサブレイヤーと呼ばれることもあります。

なお、Rev12以降のSVGMapLv0.1フレームワークではレイヤーフレームワークは本体と独立した実装となり、拡張や切り離しが可能となりました。以下は、標準で提供されるレイヤーフレームワークのVer2 (SVGMapLv0.1_LayerUI2_r*.js)に関して解説します。

レイヤーUIフレームワークが提供するUIは、先述のレイヤーリストUIを設置するdiv要素によって提供されます。このUIは以下の機能を持ちます。
* 折り畳み可能なレイヤーの一覧を表示する機能
* 各レイヤーの表示非表示を切り替える機能
* グルーピングされたレイヤー(後述)をグループとして表現、折り畳み、一括表示非表示する機能。
* そのレイヤーに紐づけられた[[#レイヤー固有のUI]]を出現させる機能。
* 表示されているレイヤーの個数などの情報を表示する機能

===== コンテナsvgコンテンツの記述内容とレイヤーフレームワークの振る舞い =====
* animation要素：　レイヤーとみなされる
** title属性: レイヤーの名称となる。(必須属性) title属性値は他のレイヤーと重複してはならない(ID(このコンテンツ内でのレイヤーの識別子)として振る舞う)
** xlink:href属性: レイヤーsvgコンテンツへの参照
** visibility属性 : レイヤーの初期の表示状態。UIにより変更できる (hidden or visible)
** opacity属性 : レイヤーの透明度
** x,y,width,height属性の振る舞いは共通(viewportがこの属性の値とintersectしていただロードされる)
** class属性: スペース区切りで規定値(複数)と任意値(一つ)を記述できる
*** 詳細は後述の[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供]]を参照
** data-controller属性: (Optional) [[#レイヤー固有のUI]]　の　[[#詳細]]参照
* globalCoordinateSystem要素：(1個つだけ必須要素)
** (コンテナsvgコンテンツにおける)本要素が、このフレームワークによってUser Agentに表示される地図の図法を規定する。
*** なお、それ以外のSVGコンテンツのglobalCoordinateSystem要素は、コンテナsvgコンテンツの図法への変換のために用いられる
*** より詳細は[[#地理座標系の処理]]を参照
* svg要素: (documentRoot要素)
** viewBox属性: 初期の表示範囲を指定。
*** ここに記述する座標値は、SVGの仕様に準ずるが、　拡張記述形式も使用可能　参照：[[#メルカトル図法のドキュメントルート要素のviewBox属性]]

===== レイヤーsvgコンテンツ =====
レイヤーsvgコンテンツは、[[#レイヤー固有のUI|レイヤー固有のUI]]を紐づけることができます。

====クリッカブルオブジェクト====
グラフィックスオブジェクトをクリック（タブレットの場合は、タップもしくは照準アイコンに合わせたうえでタップ）することでそれに紐づけられたインタラクティブ動作を実行する。インタラクティブ動作はフレームワークが独自に提供する、metadataフレームワークに基づく、メタデータの表示機能を対象とします。

なお、image要素(useによって間接的に設置されたimage要素を含む)は、a要素によるハイパーリンクが加えて実装されています。metadaとa要素の双方が設定されているimage要素では、どちらのインタラクティビティを発動させるかをモーダルダイアログによるユーザへの問い合わせが行われます。

====class属性によるレイヤーのグルーピング・クリッカブル機能の提供====
コンテナsvgコンテンツが参照するレイヤー（[[#レイヤー|レイヤーsvgコンテンツ]]）へのリンクを記述する要素(animationもしくはiframe要素)は、class属性によって、各レイヤーに特性を与えることができます。classはスペース区切りで複数指定することができますが、グループ名は一つしか認識されません。
;グルーピング
: 以下の属性値以外の値を記述すると、グループ名として認識され、同じグループ名を持ったレイヤーたちをグルーピングすることができます。グルーピングの効果はレイヤーＵＩにおけるグループ表現と、下記のbatch,switch特性です。グループはレイヤーリストUI上の表現に反映されます。最初に現れたグループ名がこのUIの下に表示されます。ただし地図画面上の描画の順番はこれとは別、SVGの基本的な描画順([https://www.w3.org/TR/SVG11/render.html#PaintersModel Painter Model])に準じます。
;batch
: グルーピングとともに使用します。そのグループに属するレイヤーを一括で表示非表示するための機能がレイヤーＵＩに付加されます。
;switch
: グルーピングとともに使用します。そのグループに属するレイヤーは、どれか一つしか表示されません。batchとの併存はできません。（無視されます（要確認））
;clickable
: Pathなどのベクトル図形要素はデフォルトではインタラクティビティが提供されません。クラス値にclickableを指定することでこのレイヤー（子供のsvgコンテンツを含む）の図形要素においてのみ、インタラクティビティが提供されます。提供されるインタラクティビティは、マウスによって図形をクリックしたとき、そのグラフィックス要素がクリッカブルな要因を備えているかどうかを検索し、備えている場合それに対応するアクションを起こします。
　なお、image要素(useによって間接的に設置されたimage要素を含む)は、このクラスの設定に依らず、a要素によるハイパーリンク、およびmetadataフレームワークを用いたクリッカブルオブジェクトとして機能します。
;editable
: 当該レイヤの[[#レイヤー固有のUI|レイヤー固有UI]]に[[#svgMapAuthoringTool.で呼び出せるAPI|svgMapAuthoringTool]]の図形編集オブジェクトを設置する場合、それを有効に機能させるためにはこの属性が必要です。(なお再編集機能を有効にするにはclickableも必要)

====data-nocache====
コンテナsvgコンテンツが参照するレイヤー（[[#レイヤー|レイヤーsvgコンテンツ]]）へのリンクを記述する要素(animationもしくはiframe要素)に、data-nocache属性をつけることによって、クライアントのコンテンツキャッシュを無効にすることができます。なお、無効化手段はunix-timeクエリパートをそのレイヤー下のすべてのリソースへのアクセスに付加させることによります。

====metadataフレームワーク====
データ格納効率に優れたメタデータのフレームワークが提供されます。このメタデータは先述のクリッカブルオブジェクトとしてインタラクティビティの実装に用いられます。 svgドキュメントルート要素のproperty属性にメタデータの属性名をカンマ区切りで列挙。同文書の図形要素のproperty属性に同じ順序でメタデータの値を記述します。(なお、xlink:title属性でマウスオーバーで機能する吹き出しを設置できます)

ひとつの文書に対して一つのスキーマ（メタデータの属性名とその順番）しか与えられないという制約を持ちます。（その代わり格納効率が高い）クリックやタッチ等によってデフォルトの状態ではブラウザが備えるモーダルダイアログに属性名と属性値がそれぞれ列挙された形で表示されます。metadata表示機能の拡張/カスタマイズについては、ウェブアプリケーションの開発の章で別途解説する'''setShowPoiProperty()'''関数を参照してください。

データ自体にカンマが含まれる場合はエスケープが必要です。

=====例：=====
<svg '''property="id,type,latitude,longitude,title,address,spec"''' ... >
...
<use transform="ref(svg,14118.37511,-4524.39994)" x="0" y="0" xlink:href="#syl8"
'''content="RIS/RJER,地方管理,45.2439994,141.1837511,利尻空港,北海道利尻郡利尻富
士町,1800×45(07/25)"''' xlink:title="利尻空港"/>
...
</svg>

====レイヤーリストUIの詳細====
[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.28.E5.BE.8C.E8.BF.B0.29.E3.82.92.E8.A8.AD.E7.BD.AE.E3.81.99.E3.82.8Bdiv.E8.A6.81.E7.B4.A0|レイヤーリストUIが設置されるdiv要素]]には、以下のプロパティを設定することで、UIの動作を調整するパラメータを与えることができます
* data-customizer [https://github.com/svgmap/svgmapjs/blob/main/SVGMapCustomLayersManager_r3module.html カスタムレイヤーマネージャ]の起動ボタンを設置し、プロパティ値で同ウェブアプリのパスを指定します。
* data-layerstylecontroller 各レイヤーの表示スタイルを調整するUIを設置します(値不要)
* data-hiddenfilter 表示されていないレイヤーをレイヤーリストUI上でも非表示にする機能を稼働させます(値不要)
* data-opened svgMapウェブアプリが起動した直後にレイヤーリストが開かれた状態にします
* data-fixed レイヤーリストが開かれた状態且つ閉じるボタンを表示させません(data-openedと排他)

===動作の制限・差異===
====再描画の制限====
* ブラウザネイティブのSVG描画機能に対して注意すべき点として、このSVGDOMの描画は、基本的に伸縮スクロールのタイミングでしか行われない点です。（ネイティブのSVG描画機能は60fpsで再描画する努力を行っている) そのため、再描画タイミングを意識・明示([[#refreshScreen|refreshScreen]]関数を使用)したアプリケーションの構築が必要になるケースがあります。
*関連情報
**[[内部機構解説#Zoom.2FPan_Controller:]]
**[[解説書#refreshScreen|refreshScreen]]
**[[解説書#setPreRenderController|setPreRenderController]]
**[[解説書#.E6.8B.A1.E5.BC.B5API|preRenderFunction ]]
**[[解説書#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|動的な地図レイヤー]]
**[[解説書#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|レイヤー固有のUI]]
**[[解説書#.E6.8B.A1.E5.BC.B5.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88|拡張イベント]]

===実装されている機能===
多くの機能が実装されていないため、実装されている機能、および拡張された機能をここでは列挙することとします。
====要素====
*path
*globalCoordinateSystem
*circle
*text
*defs
*animation
** 別のsvgコンテンツを取得して埋め込みます。
** コンテナsvgコンテンツで使用した場合は埋め込んだコンテンツは「レイヤー」と見做されます。
** それ以外で使用した場合はタイルやサブレイヤーとして使用できます。
** x,y,width,height属性は、SVGの仕様に基づき埋め込むコンテンツのtransformに影響を与えるとともに、下記の通り動的なコンテンツの読み込み機構が制御されます。
*** この属性で示された領域がtransform後のviewportと交差・包含した場合、その埋め込みコンテンツは動的に取得され表示されます。lazy loadの機構に相当し、タイリングメカニズムを構成します。
*** ただし、visible-min-zoom およびvisible-max-zoom属性で示された拡大率による表示条件を満たしていない場合は取得されません。level of detailの機構に相当します。（x.y,width,height属性と組み合わせることで、タイルピラミッド（ラスター、ベクターを含む）機構を実現します。詳しくは[http://kikakurui.com/x7/X7197-2012-01.html JISX.7197]、[https://www.w3.org/Submission/2011/04/ Tiling and Layering Moduleサブミッション]、もしくは[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html こちらの論文]を参照
** commonQuery属性：[[#レイヤーsvgコンテンツ]]のanimation要素でこの属性を設置すると、そのレイヤーのコンテンツを取得するすべてのGETリクエストのクエリパートにこの属性で設定した値が共通付加されます。(もしKey=Valueの形のクエリを追加したい場合は文字列として"Key="の部分も含めてこの属性値に設定します。)
*iframe
** animationと同等
*image
** 別のビットイメージコンテンツを取得して埋め込みます。
** animation属性のx,y,width,height属性と同様の追加のlazy loadの振る舞いを持ちます。
** visible-min-zoom およびvisible-max-zoom属性の振る舞いも同等です。
** xlink:href属性はspatial fragment をサポートし、(xywhによっ参照されるimageの部分を埋め込む機能をサポートします。)。もしもアスペクト比が異なった場合（ＴＢＤ）
** style:filterプロパティによる画像処理をサポートします。
** data-mercator-tile="true"　属性が設定されている場合、そのビットイメージはメルカトル図法で描画されていることを示します。
** htmlのimg要素のcrossoriginに対応する属性を持つことができます（この場合ビットイメージの埋め込みに際しoriginヘッダが送信）
*view

====属性====
*<code>ref(svg,x,y)</code> ：SVG1.2Tの[https://www.w3.org/TR/SVGTiny12/single-page.html#coords-transform-ref TransformRef]属性により、non-scaling objectが設置できます。Pointフィーチャの可視化に効果的です。　

'''TBD'''
*fill
*stroke
*arrow
*dasharray
*viewvox
*opacity
*style
**image-rendering : pixelated / image要素
**fill
**stroke
**opacity
*meta
**http-equiv="refresh" : [[#レイヤー|レイヤーsvgコンテンツ]]のみ。contentに秒数を設定することで、そのレイヤーを指定秒数ごとに(再読み込み)更新する。script要素はonloadが再実行される。　注：ブラウザのキャッシュが効く可能性を考慮して実装する必要がある。

==第三章：ウェブアプリケーションの開発==
本章はSVGMap Revsion 0.1フレームワークを用いたウェブアプリケーションの開発について解説します。
本フレームワークによる開発部分は以下に分類されます。
*[[#フレームワークの呼び出し|ルートhtml文書]]によるウェブアプリケーション(SVGMapフレームワーク)
* 動的な地図レイヤー(Layers as WebApps) : SVGコンテンツに以下のいずれかの情報を設定する
** [[#レイヤー|レイヤーsvgコンテンツ]]のドキュメントルート要素のdata-controller属性　[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|レイヤー固有のUI]]
** svgドキュメントに設置されたscript要素 [[#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|script要素による動的な地図レイヤー]]

===SVGMapフレームワーク===
[[#フレームワークの呼び出し|ルートhtml文書]]によるウェブアプリケーションはSVGMapLv0.1フレームワークを用いたウェブアプリケーションの基本であり、そのhtml文書と底傘参照されたjavascriptライブラリを読み込んだwindowが持つ''''svgMap''''という名前のインスタンスを用いてフレームワークのための拡張機能を利用することができます。

====SVGMapが持つ基幹オブジェクト====
SVGMapLv0.1フレームワークのインスタンス''''svgMap''''が持つ基幹のオブジェクトを解説します。これらの基幹オブジェクトはそれぞれゲッター(getSvgImages, getSvgImagesProps)によって取得できます。
=====svgImages[]=====
[[#getSvgImages|getSvgImages()]]により取得できる。svgImages[hashID]は、現在ローディングされているSVGドキュメント(“XML” DOMツリー(SVG DOMツリーというよりむしろ))が蓄積されているハッシュテーブル
*ハッシュID：フレームワークが任意に付番した文書ID。ただし、最初にロードされるルートのドキュメントのハッシュキーは、”root”
*なお、[[#レイヤー固有のUI]]のwebAppでは、そのレイヤーに該当するSVGドキュメントが[[#svgImage|svgImage]]で取得できる。

=====svgImagesProps[]=====
[[#getSvgImagesProps|getSvgImagesProps()]]によって取得できる。
同、個々のSVGドキュメントが持つ、各種プロパティが蓄積されているハッシュテーブル。
注記がない限り全てReadonly
*ハッシュID： svgImages同様
*なお、[[#レイヤー固有のUI]]のwebAppでは、そのレイヤーに該当するSVGドキュメントが持つ、各種プロパティが[[#svgImageProps|svgImageProps]]で取得できる。
======プロパティリスト======
*.Path コンテンツのパス（webAppsのdocument(html) rootに対する相対パス。Originが違う場合は絶対パス(クエリパートやフラグメント(ハッシュ)も含む)
*.CRS 地理座標からSVG座標に変換するための変換パラメータ
*.script SVG文書がscript要素を持つとき、そのscriptへのインターフェースが登録される。同script要素で生成されるオブジェクトに暗黙に登録されるメンバー変数については、[[#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|script要素による動的な地図レイヤー]]の章を参照
*.editable 編集可能レイヤーを示す　[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供|レイヤーのclass = editableに対応]]
*.editing 編集可能レイヤーを編集中
*.isClickable クリッカブルなレイヤーを示す
** true:設定　[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供|レイヤーのclass = clickableに対応]]
** 以下をメンバーに持つオブジェクト:ハイライト時のスタイルを設定可能(rev18以降)
*** .hilightFillStyle : ポリゴンオブジェクトのハイライト時スタイル（以下のメンバーが無い場合はハイライトしない）
**** .color : 塗りの色 (CSS の color値として解釈される文字列)
**** .lineWidth : 線幅
*** .hilightStrokeStyle : 線オブジェクトのハイライト時スタイル（以下のメンバーが無い場合はハイライトしない）
**** .color : 線の色 (CSS の color値として解釈される文字列)
**** .widthIncrement : 線幅の増加値
*.parentDocId このSVG文書を埋め込んでいる、親のSVG文書のハッシュID
*.childImages[hashID] このSVG文書が読み込んでいる、子のSVG文書(複数)
*.refresh
**.loadScript
**.timeout
**.start
*.controller レイヤー固有のUIへの(web appsのdoc rootに対する)相対パス
*.isSVG2 その文書がSVG2タイプの文書であるかどうか(CRSとembedの仕方がちがう）
*.rootLayer そのSVG文書が属する「レイヤー」を示す文書
*.scale そのSVG文書の現在のスケール。スケールはそのSVG文書の座標系と画面の座標系との間の値（地理座標系ではない）。拡大するとスケール値は大きくなる
*.preRenderControllerFunction そのSVG文書の再描画(画面更新)シーケンスの直前に実行される関数
*.hash そのレイヤーのURLのフラグメント部（この値は、レイヤ固有WebAppで変更が有効）

====利用可能API====
【TBD】 APIのリストは下記の通りです。
=====SVGMap.で呼び出せるAPI=====
======Geo2SVG======
*Geo2SVG( lat , lng , crs ) : 指定された緯度(lat)・経度(lng)・CRSより、SVG座標を計算する
======POIviewSelection======
*POIviewSelection( poi ) : 指定されたPOIの属性・リンクの表示選択画面を表示する。また、選択したイベントに従い、属性の表示または、リンク先のページを表示する。
======SVG2Geo ======
*SVG2Geo ( svgX , svgY , crs , inv ) : 指定されたSVG座標(svgX , svgY)をCRSにより、GEO座標に変換する。または、invにより逆変換する
======addEvent======
*addEvent(elm,listener,fn) : 指定された要素(elm)にイベント属性(listener)時の呼び出す関数(fn)を設定する (addEventListenerが実装されていなかったブラウザサポートの名残です)
======callFunction======
*callFunction( fname ,p1,p2,p3,p4,p5) : 指定した関数(fname)を引数(p1,p2,p3,p4,p5)を渡してフレームワーク内の任意の関数を実行する。(フレームワークの内部関数も呼び出すことができる)
======captureGISgeometries======
*captureGISgeometries( cbFunc , prop1 , prop2 , prop3 , prop4 , prop5 , prop6 , prop7 ): 現在画面上に表示中の地図コンテンツに対応した、GeoJsonのGeometryデータ構造に準拠のGISgeomerry情報をがレイヤ単位でまとまった連想配列の形で取り出す。非同期処理で、cbFuncの最初の引数に返却される。
** 連想配列のハッシュ値：レイヤID
** geomeryには、src(そのジオメトリのもととなっているSVGの図形要素), href(ビットイメージの場合のリンク)が付加される
** geoJsonのgeometryに相当する情報が含まれる（座標は[経度,緯度]）
** display="none"の図形要素は表示されていないとみなされる。また画面外にある図形要素も表示されていないとみなされる。画面に部分的に表示されている要素は表示されているものとみなされるとともにクリッピングも行われない。
** [[#captureGISgeometriesOption|captureGISgeometriesOption]](true)を設定してから実行すると、ビットイメージもジオメトリとして取得する。（ただし実データは含まれないので必要に応じて[[#getImagePixelData|getImagePixelData]]で取得する）
*** type : Coverage
*** src : 画像情報のURL
*** coordinates : transformのb,c==0の場合、当該画像の南西、北東端が設定される
*** transform : b,c!=0の場合の、画像の座標(左上隅を0,0、右下隅が画像のw,h)から地理座標([経度,緯度])への一次座標変換情報(a,b,c,d,e,f)が設定される

======captureGISgeometriesOption======
*captureGISgeometriesOption(BitImageGeometriesCaptureFlg, TreatRectAsPolygonFlg, SkipVectorRenderingFlg, captureAlsoAsBitImage): captureGISgeometriesでキャプチャするデータの取得条件を設定する。
** BitImageGeometriesCaptureFlg: ビットイメージタイルをカバレッジとして取得するか(Default:false)。captureGISgeometriesを呼び出す前に使用する。
*** 2019.5.17アップデートで、transform matrix(非対角要素あり)を持つビットイメージタイルについても必要な情報を得られるようになった。
** TreatRectAsPolygonFlg: rect要素をポリゴンとして扱う(デフォルトは円もrectもPointとして扱われる)
** SkipVectorRenderingFlg: ベクトル図形の描画をスキップする
** captureAlsoAsBitImage: polygon/polylineの図形を描画したビットイメージをレイヤー単位でカバレッジデータとして取得
*captureGISgeometriesOption(captureGISgeometriesOptionObject) : オブジェクトでも設定できる(rev18以降)（以下そのメンバー変数：全て値はboolean）
** .BitImageGeometriesCaptureFlag, .TreatRectAsPolygonFlag, .SkipVectorRendering, .captureAlsoAsBitImage　上と同様

======checkSmartphone======
*checkSmartphone() : タッチに対応したスマホブラウザなのかどうかを判別
======childDocOp======
*childDocOp(func , docHash , param1, param2 , param3 , param4 , param5) : 指定した文書をルートにして、DOM操作をその子文書に対して実行する。なおこれはlinkedDocOpの直系の子供のみ適用版(自身も適用しない)
======dynamicLoad======
*dynamicLoad( docId , parentElem ) : 指定した文書ID(docId)以下の表示に必要な文書を読み込み、指定したdiv要素(parentElem)に表示する
======escape======
*escape(str) : 以下の文字をHTMLエスケープする(&:&amp,":&quot;,':&#039;,<:&lt;,>:&gt;)
======geo2Screen======
*geo2Screen( lat ,lng ) : 地理座標を指定すると、その画面上のキャンバスの座標(px)を返す
======getBBox======
*getBBox( x , y , width , height ) : 指定された値でviewBoxを作成する

======getBasicPermanentLink======
* getBasicPermanentLink(copyLinkTextToClipboard) : 現在の表示状態(レイヤーの表示非表示および表示領域)を反映した基本的なパーマリンクを生成する
** URLオブジェクトが返却される
** copyLinkTextToClipboardがtrue場合、クリップボードにもURLがコピーされる。
** 生成されるURLは、[[#起動URLによるオプション指定]]の仕様に基づく
** 参考：[[#サブレイヤーパーマリンク]]

======getCentralGeoCoorinates======
*getCentralGeoCoorinates() : グローバル変数 rootViewBox,rootCrsから画面中心地理座標を得る
======getConversionMatrixViaGCS======
*getConversionMatrixViaGCS( fromCrs , toCrs ) : 元座標変換行列(fromCrs)から先座標変換行列(toCrs)への変換行列を作成する

======getCORSURL======
* getCORSURL(originalURL, alsoCrossoriginParam) : クロスオリジンアクセス用URLを生成する。([[#setProxyURLFactory|setProxyURLFactory]]の第4,5引数が設定されている場合)
** alsoCrossoriginParam クロスオリジンアクセスに際してoriginヘッダが必要かを取得する(この引数がある場合は.url, .crossorigin メンバを持つオブヘクトが返却される)
** レイヤー固有UIのウェブアプリなどで独自にクロスオリジンアクセスを行ってデータを取得するような場合にプロキシ経由のURLを生成するのに利用できます。
** 参考：[[#.E3.83.97.E3.83.AD.E3.82.AD.E3.82.B7.E3.81.AE.E8.A8.AD.E5.AE.9A|クロスオリジンアクセスのためのプロキシ設定]]

======getDevicePixelRatio======
*getDevicePixelRatio( docId ) : setDevicePixelRatioで設定した値を取得できる。 docIdが指定されなかった場合は全ての値が得られる

======getElementByImageId======
*getElementByImageId( XMLNode , searchId ) : 指定されたSVG文書群ノード(XMLNode)以下の属性iidが指定されたID(searchId)と等しいノードを返す

======getLoadErrorStatistics======
*getLoadErrorStatistics() : 伸縮スクロール、refreshScreenごとの、リソースの読み込み状況を取得する。
**メンバー変数: timeoutBitImagesCount,timeoutSvgDocCount,otherBitImagesCount,otherSvgDocCount

======getGeoViewBox======
*getGeoViewBox() : コンテナsvgのviewBoxをgeo変換したgeoのviewBoxを取得
======getHashByDocPath ======
*getHashByDocPath ( docPath ) : ターゲットのレイヤーのハッシュをPath名(docPath)から探し出す
======getHyperLink======
*getHyperLink( svgNode ) : 指定されたsvg文書(svgNode)から、親文書をたどり最初に取得できたハイパーリンクを取得
======getInverseMatrix======
*getInverseMatrix(matrix) : 逆行列を求める(matrix.a..f)
======getLayer======
*getLayer(layerID_Numb_Title) : [[#getLayerId|layerID]],title,番号,href(URI)のいずれかで、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]SVGDOMにおけるレイヤーの(svg:animation or svg:iframe)要素を取得する。getLayersと似ているが、getLayersのほうは任意のsvg文書(オプションなしではroot container)に対して、内包されるレイヤーのリストを返却。こちらは[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]に対して検索キーに基づいてレイヤーを返却する

======getLayerId======
*getLayerId( layerKey ) : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]における"レイヤ"概念のレイヤidを検索する。検索に用いることができるのは、getLayerと同じtitle,url,もしくはルートレイヤの要素
* layerIDはレイヤー名とは異なる、フレームワークによって任意に附番された、そのSVGMapドキュメントを識別するための文字列。このlayerIDを基に動作するAPIが多くあります。
* [[#レイヤー固有のUI]]　の　[[#layerID]] も参照

======getLayers======
*getLayers( id ) : オプションなしの場合、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーに該当する要素をリストアップし、返却する。オプションアリの場合、そのidを持つ要素を返却
======getLinearTransformMatrix======
*getLinearTransformMatrix(x1i,y1i,x2i,y2i,x3i,y3i,x1o,y1o,x2o,y2o,x3o,y3o) : ３つの基準点の変換前後の座標を与えると、それに適合する1次変換行列が得られる。(*i:変換前の座標, *o:変換後の座標)
======getMapCanvas======
*getMapCanvas() : 地図キャンバスとなる、おおもとのdiv要素の取得
======getMapCanvasSize======
*getMapCanvasSize() : 地図キャンバスのサイズ(画面サイズ)を取得
======getMouseXY======
*getMouseXY( evt ) : 指定されたイベント時のマウスの画面上の座標(px)を返す
======getNonScalingOffset======
*getNonScalingOffset(svgPoiNode) : 拡大縮小しても伸縮しない図形要素のオフセット値を取得する
======getObject======
*getObject( oname ) : 指定されたオブジェクト(oname)を取得
======getPoiPos======
*getPoiPos( svgPoiNode ) : =getNonScalingOffset
======getRoot2Geo======
*getRoot2Geo() : コンテナsvgのCRSの逆変換CRS( rootのsvg - > geo )を取得
======getRootCrs======
*getRootCrs() : コンテナsvgのCRS ( geo->rootのsvg )を取得
======getRootLayersProps======
*getRootLayersProps() : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の(animetion||iframeで構成される)レイヤー情報を取得する。Arrayが返却、並び順はsvgの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]と同じ（最初のレイヤーが一番下。selectメニュー創るときはひっくり返して使うこと）レイヤー情報：名称、表示非常時状態、レイヤーグループ、グループのフィーチャ(バッチ||スイッチ||ふつう)、編集可、編集中、対応SVGドキュメント、個別ユーザインターフェース、個別凡例
======getRootViewBox======
*getRootViewBox() : aspectを加味し実際に開いているコンテナsvgのviewBoxを取得
======getSvgImages======
*getSvgImages() : svg文書群(XML)の連想配列を取得(ハッシュキーは[[#getLayerId|layerID]]("root"以外は"i"+連番))
* (参考:[[#svgImages.5B.5D|svgImages]])

======getSvgImagesProps======
*getSvgImagesProps() : svg文書群のプロパティ( .Path,.CRS,.script,.editable,.editing,.isClickable,.parentDocId,.childImages,.controller)の連想配列を取得(ハッシュキーは[[#getLayerId|layerID]]("root"以外は"i"+連番))
* (参考:[[#svgImagesProps.5B.5D|svgImagesProps]])

======getSvgTarget======
*getSvgTarget( htmlImg ) : html文書中のimg要素(POI)を入力すると、対応するSVG文書の文書番号とその要素(use)が出力される。対応するuse要素を持つsvg文書自体を取得したい場合は.ownerDocumentする。idからhtml文書のimg要素を取得するには、Document.gelElementById(id)
======getSwLayers ======
*getSwLayers ( cat ) : swLayers[クラス名]に、クラス名ごとのレイヤー(のSVG要素)の全リストを構築する。catがある場合は、catの名称を持つもののリストのみを構築する
======getSymbols======
*getSymbols(svgDoc) : POI編集のsymbol選択を可能にするとともに、defsは、useより前に無いといけないという制約を払った
======getTickerMetadata======
*getTickerMetadata() : 現在Tickerが表示されているグラフィックスオブジェクトのメタデータを取得する
======getTransformedBox ======
*getTransformedBox ( inBox , matrix ) : 指定されたviewBox(inBox)を変換行列にてサイズ変更と移動のみでの座標変換する。b=0、c=0の場合のみ利用可能。たとえば、matrixには、svgImagePropsのCRSを設定することで、そのSVGMapコンテンツのSVG座標系でのviewPortが計算できる。このときmatrixは線形変換の係数が含まれたオブジェクトでも良いし、[[#.E5.A4.9A.E6.A7.98.E3.81.AA.E5.9B.B3.E6.B3.95.E3.81.AE.E5.AE.9A.E7.BE.A9.E3.81.A8.E5.88.A9.E7.94.A8|非線形変換のための関数が含まれたオブジェクト]]でも良い。　svgMap.getTransformedBox(svgMap.getGeoViewBox(),svgImageProps.CRS)

======getUaProp======
*getUaProp() : ブラウザの種類(isIE：IEかどうか、isSP：スマートフォンかどうか)を取得する
======getVerticalScreenScale======
*getVerticalScreenScale(screenLength) : 垂直(緯度)方向のscreenLengthに対する長さを取得する(input: px, return : Km)
======getViewBox======
*getViewBox( svgDoc ) : 指定したSVG文書のviewBoxを取得
======gps======
*gps() : ブラウザの測位APIによって測位しその点を中心に表示、表示縮尺は測位精度を元に適当に決定
======gpsCallback======
*gpsCallback(position) : GPS測位が成功した後に実行されるコールバック関数で、positionを中心とした場所を表示させる
======handleResult======
*handleResult( docId , docPath , parentElem , httpRes , parentSvgDocId ) : SVG文書を(docPathから)svg文書群とそのプロパティをHTTPXMLRequest(httpRes)から親文書(parentSvgDocId)の子文書(docId)として読込み、指定されたHTML要素(parentElem)に貼り付ける
======ignoreMapAspect======
*ignoreMapAspect() : 地図のアスペクト比を、rootSVGのviewBox( or hashのviewBox)そのものに設定する
======initLoad======
*initLoad() : load時に"一回だけ"呼ばれる初期化関数
======isIntersect======
*isIntersect( rect1, rect2 ): rect1(x,y,width,height)とrect2が交差(包含も含む)しているかどうかを返却
======linkedDocOp======
*linkedDocOp( func , docHash , param1, param2 , param3 , param4 , param5 ) : 再帰実行のルートになる文書のハッシュ(docHash)以下の子・孫・・・文書に対して、同じ処理(func( docHash , param1, param2 , param3 , param4 , param5 ))を再帰実行する関数
======loadSVG======
*loadSVG( path , id , parentElem , parentSvgDocId) : SVG文書を(pathから)svg文書群とそのプロパティを親文書(parentSvgDocId)の子文書(id)として読込み、指定されたHTML要素(parentElem)に貼り付ける
======matMul======
*matMul( m1 , m2 ) : 行列の積 x',y' = m2(m1(x,y)) = m(x,y) となる変換行列を構築
======numberFormat======
*numberFormat( number , digits ) : 指定された数値(number)を小数点以下第digit+1位を四捨五入した値を取得
======override======
*[OBSOLUTEWD] override( mname , mval ) : グローバルオブジェクトの関数プロパティでmnameという変数にmvalの値を代入する

======panMap======
* panMap( x, y, options ) : 地図をスムースにスクロールさせる
** x,y : パン量デフォルトはpx
** option.unit でパン量のコンテキストを変化できる
*** "%"||"percent"||"ratio" : 地図キャンバスに対する相対値で指定 (%,percentはパーセント, ratioは比率)
*** "canvas" : 地図キャンバス上の指定した座標を地図中心に
*** Note: 地理座標でパンする場所を変えたい場合は[[#geo2Screen]]を併用すると良い

======parseEscapedCsvLine======
*parseEscapedCsvLine(csv) : CSV 1行分文字列データ(csv)をエスケープを考慮して配列にパースする。
======refreshScreen======
*refreshScreen() : 画面の再描画を実行する（[[解説書#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90|参考情報]]）

======registLayerUiSetter======
*registLayerUiSetter( layerUIinitFunc, layerUIupdateFunc ) : レイヤー選択UI初期化関数と更新用関数を設定する
======reLoadLayer======
*reLoadLayer(layerID_Numb_Title) : 指定したレイヤー([[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーのみ。小孫レイヤーはNG)をリロードする
======resumeToggle======
*resumeToggle(evt) : 引数のイベント(evt)ターゲットのチェックボックスのチェック状態により、setResumeを実行する
======screen2Geo======
*screen2Geo( screenX , screenY ) : 画面上の座標(px)を指定すると、その地理座標を返す
======setCenterHitTest======
*setCenterHitTest(enable) : 自動中心ヒットテストの設定を変更するデフォルト:true

======setCursorCenterZooming======
*setCursorCenterZooming(enable) : (カーソル|ピンチ)位置中心ズーム機能を設定するデフォルト:false

======setCustomModal======
*setCustomModal( messageHTML , buttonMessages , callback,callbackParam) : モーダル画面を出現させ、指定されたメッセージ(messageHTML(String)もしくはdomオブジェクト(Object))、指定されたボタン(buttonMessages(Array))を表示する。ボタンが押された場合、コールバック関数(callback)を引数(クリックしたボタンのインデックス, callbackParam)を渡し呼び出す。
messageにHTML Stringだけではなく、DOM objectが使える点、ボタンに対するcallbackを設定できる点。ただしモーダルダイアログになる点が[[#showModal]]と異なる。

======setDefaultHilightStyle======
*setDefaultHilightStyle( style ) : ヒットテストなどによるオブジェクトのハイライト時のスタイルを設定する
* style : {stroke:{color,widthIncrement}, fill:{color,lineWidth,lineColor}}
** stroke : 線オブジェクトに対してハイライト時の色(color)と線幅増分(widthIncrement)
** fill : 塗りつぶしオブジェクトに対してハイライト時の色(color)、輪郭線幅(lineWidth)、輪郭線色(lineColor)

======setDevicePixelRatio======
*setDevicePixelRatio( dpr (, layerId) ) : zoom計算時に用いる(たとえば２にするとzoom値が本来の２分の１になる)変数を指定値(dpr)に設定する。ズームに応じた表示制御(visible*zoom属性等のLevel of Detail機能)に影響を与える。オプションの[[#getLayerId|layerId]]を指定すると、指定したlayerに対して別個の値を設定する。dprにnullを与えると初期値(1)にクリア。

======setGeoCenter======
*setGeoCenter( lat , lng , radius) : 中心地理座標を指定して地図を移動 (radiusは緯度方向の度1≒110Km) lat,lng:必須 radius:オプション(今の縮尺のまま移動)
======setGeoViewPort======
*setGeoViewPort( lat, lng, latSpan , lngSpan , norefresh) : 地理(グローバル)座標系で指定したエリアを包含する最小のviewportを設定する
======setLayerVisibility======
*setLayerVisibility([[#getLayerId|layerID]]_Numb_Title, visivility, [options]) : 指定した[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーの表示非表示を設定し、layerListUIのアップデートも行う
** layerID : String: [[#getLayerId|layerID]]のの文字列
** visivility : Boolean
** options : Object　以下のメンバー変数でオプションの指定が可能
*** .exec : String : 指定したレイヤーがレイヤー固有UIを持つ場合、その起動を指定できます。与えることができる文字列は[[#.E8.A9.B3.E7.B4.B0|data-controllerの起動オプション]]と同じ。
*** .hash : 指定したレイヤーを表示するときにハッシュ値を設定する

======setMapCanvas : ======
*setMapCanvas : ( mc ) : 地図キャンバスとなる、おおもとのdiv要素を指定した要素(mc)に設定
======setMapCanvasCSS======
*setMapCanvasCSS(mc) : マップキャンバスのCSS(postion、overflow、top、left、width、height)を設定
======setMapCanvasSize======
*setMapCanvasSize( mcs ) : 地図キャンバスのサイズを指定したサイズ(mcs)に設定
======setPreRenderController======
*setPreRenderController( layerID, cntFunc ) : 再描画(画面更新)シーケンスの直前に実行する関数(cntFunc)を設定する。　[[#getLayerId|layerID]]が指定されていると、そのIDをもつSVG文書に対して設定する。指定されていない場合は、全てのSVG文書に対して指定した関数が描画前に実行される。cnfFuncが無い場合は設定を解除する。また、cntFuncには再描画前制御の際に必要になるかもしれないいくつかの変数が第一引数にオブジェクトの形で渡される。(docId,scale,actualViewBox,geoViewBox,viewChanged(zoom|scroll|false) なお、SVGMapLayerUI.jsが有効化されている場合、[[#.E6.8B.A1.E5.BC.B5API|レイヤ固有UIのhtml文書中のscript内にpreRenderFunctionという関数]]がある場合、そのレイヤーを指定したsetPreRenderControllerでの関数設定と同じ振る舞いをする。なお、この処理内容は、動的レイヤー(<script>を持つSVGコンテンツ)のonload関数と同じタイミングで呼び出される関数をレイヤ固有UI等に設置できるものと考えると良い。

======setResume======
*setResume( stat ) : レジュームを実行するかどうかを引数(stat)によって設定し、cookieにレイヤー情報を保存する
======setRootLayersProps======
*setRootLayersProps(layerID_Numb_Title, visible , editing , hashOption , removeLayer , execOption ) : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の(animetion||iframeで構成される)レイヤー情報を設定する。[[#getLayerId|layerID]]_Numb_Titleは、レイヤー番号(root svg container内での順番)、[[#getLayerId|layerID]](svg文書のiid = htmlのid = selectのvalue)、タイトル名(不確実-同じ名前があるかもしれない。最初に当たったものを選択)。変化があるとtrueが返却される。
*visible , editingはtrue,false,nullのいずれか。nullの場合、その値を変化させないという意味。もしくは不合理の場合はfalseが返却される。この時classで設定されているレイヤーグループの特性(switch)に基づいた制御がかかる
*hashOption 指定したレイヤーを表示するとき、ハッシュを指定して表示する
*removeLayer 指定したレイヤーを消去する
*execOption レイヤ固有UIを持つレイヤーを表示する場合の起動方法を指定："hiddenOnLayerLoad", "onClick", "appearOnLayerLoad"のいずれか。[[#.E8.A9.B3.E7.B4.B0|詳細はこちらを参照]]

*setLayerVisibilityと異なり、アップデート(refreshScreen())は別途行う必要がある

======setRootViewBox ======
*setRootViewBox ( rvb ) : aspectを加味し実際に開いているコンテナsvgのviewBoxを指定したコンテナsvgのviewBox(rvg)に設定*setShowPoiProperty( func , docId ) : 特定のレイヤー・svg文書(docId)もしくは、全体に対して別のprop.表示関数(func)を指定する。funcが未指定の場合、設定された関数をクリアする。指定した関数は、帰り値がfalseだった場合、デフォルトprop.表示関数を再度呼び出す
======setShowPoiProperty======
*setShowPoiProperty(func , docId ): 特定のレイヤー・svg文書(いずれもdocIDで指定)もしくは、全体に対してPOIをクリックした時の表示関数をセットする
**セットされていないときは内蔵のデフォルト関数が使用される
**docId: セットされていないときはすべてのレイヤの docIdがルートレイヤに対応するものの場合はそのレイヤー下の子孫文書に対しても
**func: コールバック関数
*** funcがセットされいていないときはクリアする
*** funcの第一引数にはクリックされた要素が入る

======setSmoothZoomInterval======
*setSmoothZoomInterval(zoomInterval) : ズームアニメーションの設定(ズームイン／アウト後のタイル読み込み開始タイマー(ms))(Default:20ms)
======setSmoothZoomTransitionTime======
*setSmoothZoomTransitionTime(zoomTransitionTime) : ズームアップ[[#zoomup]]／ダウン[[#zoomdown]]／パン[[#panMap]]時の遷移時間(Default:300ms)

======setSummarizeCanvas======
*setSummarizeCanvas( val ) : 2Dベクトル図形描画用に統合キャンバス(レイヤー単位でのキャンバス統合)の使用有無を設定する。デフォルトは統合する
======setUpdateCenterPos======
*setUpdateCenterPos(func) : 中心座標書き換え関数を指定した関数に設定(デフォルト:id="centerPos"要素の文字列を適当に書き換える)
======setProxyURLFactory======
*setProxyURLFactory( documentURLviaProxyFunction, imageURLviaProxyFunction, imageCrossOriginAnonymous, imageURLviaProxyFunctionForNonlinearTransformation, imageCrossOriginAnonymousForNonlinearTransformation, LaWAfetchviaProxyFunction ): コンテンツの取得をプロキシ経由等にするために、URL(文字列)を書き換える関数を指定する。
** documentURLviaProxyFunction : svgドキュメント用のプロキシ経由のURLを生成する関数をここに設定する。<code>URLviaProxy = documentURLviaProxyFunction(URL)</code>
** imageURLviaProxyFunction : 同ビットイメージ用
** imageCrossOriginAnonymous : ビットイメージのコンテンツ取得に際しcrossorigin = "anonymous"を設定
** imageURLviaProxyFunctionForNonlinearTransformation: ビットイメージへの非線形図法変換専用のプロキシ経由URL生成関数を設定する。
** imageCrossOriginAnonymousForNonlinearTransformation : 同上のコンテンツ取得に際しcrossorigin = "anonymous"を設定
** LaWAfetchviaProxyFunction : [[#レイヤー固有ユーザインターフェース|LaWA]]内のFetch/XHRに対してプロキシ経由URL生成関数を設定する。
** 参考：[[#.E3.83.97.E3.83.AD.E3.82.AD.E3.82.B7.E3.81.AE.E8.A8.AD.E5.AE.9A|クロスオリジンアクセスのためのプロキシ設定]]

======setZoomRatio ======
*setZoomRatio ( ratio ) : zoomUp、zoomDownボタン押下時のズームレシオを指定した値(ratio)に設定する
======showModal======
*showModal( htm , maxW, maxH) : ダイアログ表示フレームワークを呼び出し、指定したhtm文字列を最大maxW,H値の中で表示する。closeボタンはフレームワークで設置される（参考[[#setCustomModal]]）（API名に反して、この関数はモーダルダイアログではない、ダイアログボックスの挙動を取る）
** htm：ダイアログ内に表示するhtmlのソース文字列、もしくはHTML DOM Elementオブジェクト
** maxW, maxH : Optional: ダイアログのサイズ（もしウィンドサイズに収まらない場合は、このサイズを下回ることがある。指定されていない場合はhtmの内容をベースにサイズが変化する


======showPage======
*showPage( hyperLink ) : 指定されたハイパーリンク先のページを表示する。ハッシュだけの場合は viewPort変化をさせる
======showUseProperty======
*showUseProperty( target ) : 指定されたPOI( target )の属性情報を表示する
======transform ======
*transform ( x , y , mat , calcSize , nonScaling) : 指定された座標を変換する。
======updateLayerListUI======
*updateLayerListUI() : レイヤーリストのUIの表示を更新したりレイヤー固有UIを設定したりする
** '''[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のsvgmap文書をDOMで直接編集したり、setRootLayersPropsで操作した場合、この関数を呼ばないとレイヤ固有UIが正しく設定されないなど多くの処理が破綻するので、必ず呼ぶ必要がある。(近い将来refreshScreenで自動的に反映されるようにする予定)'''

======zoomdown======
*zoomdown( ratio ) : 地図をスムースにズームダウン
** ratioはオプション(デフォルトは1.732)

======zoomup======
*zoomup( ratio ) : 地図をスムースにズームアップ
** ratioはオプション(デフォルトは1.732) (デフォルトは[[#setZoomRatio]]で変更可)

=====svgMapAuthoringTool.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_Authoring_r*.jsを用いた場合に使える
======cancelPointingPoiRegister======
* cancelPointingPoiRegister: initPOIregistToolで設置したUIの地図クリック・タッチでの座標入力イベント(click, touchend)をキャンセルする
======clearTools======
*clearTools: オーサリングツールを除去する。
======initGenericTool======
*initGenericTool(targetDiv,poiDocId,cbFunc,cbFuncParam,options): 点、線、多角形（オプションでそれらのバッファ付き）の総合オーサリングツールを初期化する。
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** options: {withBufferedTools,editingStyle,shapeStyle}　その他オプションをオブジェクトで指定(Optional)
*** withBufferedTools: boolean: trueでバッファ付きツールを追加
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルをブジェクトで指定
*** editingStyle: {opacity,strokeWidth,stroke,fill}：編集中の表示スタイルをブジェクトで指定
*** useXlinkTitle: trueでタイトル編集欄付きツール (Pointツールには影響しない)
*** styleEditor: trueでスタイル編集UI追加

======initPOItools======
*initPOItools(targetDiv,poiDocId,cbFunc,cbFuncParam,getPointOnly,returnSvgElement,options)　: 複数のPOIを編集するツールを初期化する (このツールは一個しか設置できない)
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** getPointOnly : ポイントを取得するのみで、その点にuse要素を設置することはしない(Optional)
** returnSvgElement : trueで編集したSVG要素などがコールバック関数に構造化され返却される(Optional)
** options : {bufferOption,editingStyle,shapeStyle}: その他のオプションをオブジェクトで指定(Optional)
*** bufferOption : trueでバッファ付きツール
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルを指定 (buffer指定時に有効)
*** styleEditor: trueでスタイル編集UI追加

======initPOIregistTool======
*initPOIregistTool(targetDiv,poiDocId,poiId,iconId,title,metaData,cbFunc,cbFuncParam,getPointOnly,returnSvgElement): 一個のPOINTオブジェクトの登録ツール・座標入力ツールを初期化する
** initPOItoolsと異なりこちらのツールは複数個設置できる
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** poiId : 登録するPOIのIDを指定
** iconId : 対象文書内のアイコンのIDを指定
** title : アイコンのタイトルを指定
** metaData : アイコンのメタデータ文字列を指定
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** getPointOnly : ポイントを取得するのみで、その点にuse要素を設置することはしない(Optional)
** returnSvgElement : trueで編集したSVG要素などがコールバック関数に構造化され返却される(Optional)
======initPolygonTools======
*initPolygonTools(targetDiv,poiDocId,cbFunc,cbFuncParam,isPolylineMode,options): POLYGONオブジェクトの"編集"ツール新規追加、削除、変更などが可能　ただし一個しか設置できない
** コンテナsvgコンテンツでclickable及びeditableを設定したレイヤーで再編集可能
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
*** 第一引数に成否、第二引数にcbFuncParam が入る。作成したPOIの情報は、SVGDOMから得るか、指定したdiv内に生成されているフォームから得る（少し使いづらいので、今後もう少し便利にするかもしれません）
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** isPolylineMode : ポリゴンではなくポリラインの編集ツールとする
** options : {bufferOption,editingStyle,shapeStyle}: その他のオプションをオブジェクトで指定(Optional)
*** bufferOption : trueでバッファ付きツール
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルを指定
*** editingStyle: {opacity,strokeWidth,stroke,fill}：編集中の表示スタイルを指定
*** useXlinkTitle: trueでタイトル編集欄付きツール
*** styleEditor: trueでスタイル編集UI追加

======setTargetObject======
*setTargetObject: TBD プログラムから編集対象オブジェクトを指示する（ただし編集中レイヤのオブジェクトに限る）
======isEditingGraphicsElement======
*isEditingGraphicsElement: 編集中のオブジェクトがあるかどうかを確認する

=====svgMapGIStool.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_GIS_r*.jsを用いた場合に使える。なお本機能拡張はJSTS([https://unpkg.com/jsts@1.6.1/dist/jsts.min.js jsts.min.js])の読み込みがさらに必要。

====== 参考：JSTS ======
[https://github.com/bjornharrtell/jsts/ JSTS](JavaScript Topology Suite)は、[https://github.com/locationtech/jts JTS](Java Topology Suite)をjavaScriptに移植した地理空間情報処理ライブラリです。地理空間情報の標準に準拠したAPIを備えています。
* [https://github.com/bjornharrtell/jsts JSTSのプロジェクトページ]
* [http://locationtech.github.io/jts/javadoc/ API](JTS用、JSTSもこれに準ずる)
* [https://www.tsusiatsoftware.net/jts/files/JTS_Library_for_Geometry_2011.pdf JTSの機能概要スライド]

====== buildDifference======
* buildDifference( sourceId1, sourceId2, targetId , strokeColor, strokeWidth, fillColor, progrssCallback, getResultAsGeoJsonCallback,getResultAsGeoJsonCallbackParam)
** JSTSのDifferenceを実行
** 引数はbuildIntersectionの該当引数に対応

======buildIntersection======
*buildIntersection( sourceId1, sourceId2, targetId , strokeColor, strokeWidth, fillColor, progrssCallback, addSourceMetadata, getResultAsGeoJsonCallback, getResultAsGeoJsonCallbackParam, options )
** sourceId1とsourceId2のレイヤーに対してJSTSのIntersectionを実行し、結果をtargetIdレイヤーにコンテンツとして出力する。性能はgetIncludedPointsより低いことが多い intersection処理の振る舞いは[https://bjornharrtell.github.io/jsts/ JSTSを参照]
** sourceId1: sourceId1レイヤーのレイヤーID
** sourceId2: sourceId2レイヤーのレイヤーID
** targetId : targetId レイヤーのレイヤーID
** strokeColor : 線の色 (なお、strokeColor, strokeWidth, fillColor のいずれも指定ない場合は描画しない(getResultAsGeoJsonCallbackがあればそこに結果を変換するのみ))
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** progrssCallback: 変換途中の状況が返されるコールバック関数。
** addSourceMetadata: sourceId1とsourceId2の各図形要素に付随しているメタデータ(contentアトリビュートの値)を演算結果の該当する図形要素に結合して付加する。
** getResultAsGeoJsonCallback: 演算結果をgeoJsonで返却を受けたい場合にコールバック関数を指定する。第一引数に結果が返る
** getResultAsGeoJsonCallbackParam : 上記コールバック関数に送りたい引数(第二引数に入力される)
** options: その他のオプションを指定するオブジェクト(下記、メンバ変数)
*** uniteSource1: trueでsourceId1のジオメトリ群をuniteしてから演算する
*** uniteSource2: trueでsourceId2のジオメトリ群をuniteしてから演算する
*** areaCompare: trueで演算結果と元のジオメトリとの面積比をメタデータに付与
*** resultGroupId: 演算結果を生成するグループを指定
*** opacity: 透明度

======captureGeometries======
*captureGeometries( cbFunc , opt ) : svgMap.captureGISgeometriesの引用
====== coverageImageXY2LatLng======
* coverageImageXY2LatLng(pixWidth , pixHeight, px,py,targetCoverage) : ビットイメージカバレッジのピクセル座標から地理座標を算出する関数
** pixWidth, pixHeight : ビットイメージカバレッジのサイズ
** px,py : ビットイメージカバレッジのピクセル座標
** targetCoverage : getInRangePolygonParts で得られた返り値を設定する
====== drawGeoJson======
* drawGeoJson( geojson , targetSvgDocId, strokeColor, strokeWidth, fillColor, POIiconId, poiTitle, metadata, parentElm, metaDictionary) : geojsonのgeomerty を指定したレイヤーに描画する
** geojson : geojson データのgeopmetry
*** メタデータ : メタデータはgeojsonの本来のメタデータ仕様(type:Featureのオブジェクトにpropertiesを設置する)で設定可能
**** また、連想配列もしくは配列の形で、関数の呼び出し時のmetadataパラメータでデフォルトのメタデータを指定できる。
**** また、geoJSONの任意のデータ階層にmetadataプロパティとしても埋め込める。
**** 加えて、propertiesを同様に任意のデータ階層に設定できる(この場合、上の階層の値は下の階層の値で上書きされる)
*** スタイリング : メタデータ仕様を拡張した、geojsonの[https://github.com/mapbox/simplestyle-spec mapbox拡張仕様]に基づいて、描画スタイルを各Featureに設定可能　上記の拡張properties拡張により、デフォルト描画スタイルを設定することも可能。
**** marker-sizeは未実装。marker-symbolではsvgコンテンツのdefsで登録済みのアイコンのIDを指定する。
**** 参考: properties.で設定できる、スタイル属性名: <code>title, description, marker-size, marker-symbol, marker-color, stroke, stroke-opacity, stroke-width, fill, fill-opacity</code>
** targetSvgDocId : 描画先のレイヤーID
** strokeColor : 線の色
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** POIiconId :　Pointの場合のアイコンID(あらかじめ指定した描画先のレイヤーのコンテンツに該当IDのアイコンが定義されている必要がある)
** poiTitle : POIのタイトル
** metadata : POIのメタデータ（連想配列）
** parentElm : (Optional) 指定した要素の子要素として描画
** metaDictionary: (Optional) メタデータとして要素に埋め込みたい属性名のリストを配列で指定する（これ以外の属性は無視するようになる）

====== drawKml======
* drawKml( kml , targetSvgDocId, strokeColor, strokeWidth, fillColor, POIiconId, poiTitle, metadata, parentElm,styleData) : KMLを指定したレイヤーに描画する
** KML : KML 描画するKMLデータのXML DOM
** targetSvgDocId : 描画先のレイヤーID
** strokeColor : 線の色
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** POIiconId :　Pointの場合のアイコンID(あらかじめ指定した描画先のレイヤーのコンテンツに該当IDのアイコンが定義されている必要がある)
** poiTitle : POIのタイトル
** metadata : POIのメタデータ文字列
** parentElm : (Optional) 指定した要素の子要素として描画
** styleData : TBD

====== getBufferedPolygon ======
* getBufferedPolygon(geom,bufferLength) : 任意のジオメトリ(geom)に対して、指定のバッファ長[m]のポリゴンジオメトリを生成する。
** Note: [[#captureGISgeometries]]で取得したデータ等も演算対象にすることができる。

====== getColorString ======
* getColorString(r,g,b) : r,g,b値から、webColor文字列を生成する

======getExcludedPoints======
*getExcludedPoints(poiID, polyID, cbFunc, param , progrssCallback , pointOnly ) : 指定したpoiID検索対象レイヤーのうち、指定したpolyIDポリゴンコンテンツレイヤーのポリゴンに内包されないものを抽出する。
** パラメータはinverseを除きgetIncludedPointsと同じ。
====== getImage======
* getImage(sourceData, renderingOptions ) : メッシュデータからビットイメージ(mage/pngのdataURL)を生成
** sourceData : 以下のデータ構造を持つオブジェクト
*** width, height メッシュのピクセル数
*** rasterData[py][px] 以下のデータ構造を持つオブジェクト
**** color 以下のデータ構造を持つオブジェクト
***** r,g,b,a
**** inRange : boolean
** renderingOptions : 以下のデータ構造を持つオブジェクト
*** drawOutOfRange : boolean レンジ内ではなくレンジ外を描画する
*** fillColor : boolean 上記条件のピクセルを指定した色で描画する
*** useCoverageColor 上記条件のピクセルをカバレッジの色で描画する

====== getImagePixelData======
* getImagePixelData(capturedSvgMapGeometry, callBackFunction, param) : ラスタ画像のビットマップデータを取得する。
** capturedSvgMapGeometry : [[#captureGISgeometries|captureGISgeometries]]で取得したビットイメージカバレッジのジオメトリ情報をもとに取得する
** callBackFunction : 取得したビットイメージデータが引数に渡される
*** data : RGBA intArray ( CanvasのContext.getImageData(...).dataで得られる情報と同様のデータ)
*** width
*** height
*** param : getImagePixelDataの第三引数がそのまま渡される

====== getIncludedPoints======
* getIncludedPoints(poiID, polyID, cbFunc, param , progrssCallback , inverse , pointOnly ) : 指定したpoiID検索対象レイヤーのうち、指定したpolyIDポリゴンコンテンツレイヤーのポリゴンに内包されるものを抽出する。
** poiID : 検索対象コンテンツレイヤーのレイヤID
** polyID : ポリゴンコンテンツレイヤーのレイヤID
** cbFunc : 検索完了後の結果を返却するコールバック関数　第一引数にポイントがGeoJasonのGeometry形式で返却され、第二引数にその個数、第三引数に(あれば)下記paramが返却される
** param : cbFuncに渡す任意パラメータ(第三引数に入る)
** progrssCallback : 変換途中の状況が返されるコールバック関数。　変換中　時々呼び出され、変換状態[%]が第一引数に渡される。
** inverse : trueで getExcludedPoints
** pointOnly : trueの場合検索対象コンテンツレイヤーのジオメトリがPoint以外の物は無視、false(もしくは未設定)の場合はPolygonやMultiLineStringのデータの場合中心点をPointと見立てて検索なお、ポリゴンやポリラインのしっかりした処理を期待する場合は下記のbuildIntersectionを使用すべき。
====== getInRangePoints======
* getInRangePoints(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : 検索対象のPointジオメトリが、検索条件としてのラスターデータ(カバレッジ)の特定色域に入っているものを検索する（ラスターGIS機能）
** poiID_or_points : 検索対象のPointジオメトリのあるレイヤIDもしくは、geoJsonのPointジオメトリ自体
** coverIDラスターデータ(カバレッジ)のレイヤーID
** rangeData : 色域 .hue, .satulation, .value, .alphaをそれぞれ指定する
*** hue: 0..360
*** satulation, value, alpha : 0..100
*** .hue, .satulation, .value, .alphaそれぞれのレンジは<nowiki>[[range1Min,Max],[range2Min,Max],...[rangenMin,Max]]</nowiki>の形で指定する。
*** データがない場合のデフォルトは<nowiki>{hue:[[0,360]],satulation: [[10,100]],value:[[10,100]],alpha:[[10,100]]}</nowiki> : アルファが10以上の全ての色
*** .outOfBoundsColor : TBD {r:255,g:0,b:0} の形で色を指定するとその色のピクセルは領域外(存在しないもの)として評価をスキップする
** cbFunc : 検索完了後の結果を返却するコールバック関数　第一引数にポイントがGeoJasonのGeometry形式で返却され、第二引数にその個数、第三引数に(あれば)下記paramが返却される
** param : cbFuncに渡す任意パラメータ(第三引数に入る)
** progrssCallback : 変換途中の状況が返されるコールバック関数。　変換中　時々呼び出され、変換状態[%]が第一引数に渡される。
** preCapturedGeometry : svgMap.captureGISgeometries()であらかじめ取得したgeometryがある場合、それを投入するとそれを用いて処理する
** computingOptions : getInRangeGeometriesOnCoverageを参照
====== getInRangeLineParts======
* getInRangeLineParts(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : ラインストリングジオメトリ用のラスターGIS機能パラメータはgetInRangePoints()と同じ
====== getInRangePolygonParts======
* getInRangePolygonParts(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : ポリゴンジオメトリ用のラスターGIS機能パラメータはgetInRangePoints()と同じ

====== getInRangeGeometriesOnCoverage======
* getInRangeGeometriesOnCoverage(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry, computingOptions ) : getInRange*を包含する関数
** computingOptions.targetVectorTypeで以下を設定することでそれぞれの機能を動かすことができる
*** 0:point,1:polyline(multiLineString),2:polygon
** computingOptions:
*** overlappingCoverage : "or"
*** splitByCoverage : boolean カバレッジが複数のビットイメージ(タイル)で構成されている場合、タイルごとに分割した答えを返す
***
====== haltComputing======
* haltComputing() : getIncludedPoints, getExcludedPoints, buildIntersectionを中断する
====== imageUrlEncoder ======
* imageUrlEncoder : オリジナルのURLから、setImageProxyの設定を加味したURLを生成する関数
====== latLng2coverageImageXY======
* latLng2coverageImageXY(pixWidth , pixHeight, lng,lat,targetCoverage) : 地理座標からビットイメージカバレッジのピクセル座標を算出する関数
** pixWidth, pixHeight : ビットイメージカバレッジのサイズ
** lng,lat : 地理座標
** targetCoverage : getInRangePolygonParts で得られた返り値を設定する
====== latLng2GeoJsonPoint======
* latLng2GeoJsonPoint(lat , lng ) : 緯度経度をGeoJsonのPointジオメトリに変換する
====== renderImages ======
* renderImages(sourceDataArray, parentElment, crs, renderingOptions) : ビットイメージカバレッジ×ポリゴンGIS(getInRangePolygonParts)の結果を直接可視化する
**sourceDataArray : [[#getInRangePolygonParts]]の結果を設定
**parentElment: SVGMapコンテンツ内で描画する親要素を設定
**crs: 描画するSVGMapコンテンツのCRS matrix(a,b,c,d,e,f)を設定
**renderingOptions : [[#getImage]]を参照

====== setImageProxy======
* setImageProxy( url , directURLls , useAnonProxy): getInRangePointsは、canvasを使った処理のため、CORSの制約にかかる場合、proxyを設定して回避できる。
** url : encodeURIComponent()でエンコードしたカバレッジのレイヤーのビットイメージのURLを付加すると、proxyとしてimageを返却してくれるURL文字列を指定
** directURLls : proxyを使わず直接アクセスするコンテンツを判定するための文字列の配列（この文字列のどれかが含まれていたら直接アクセス）
** useAnonProxy : Image.crossOrigin = "anonymous"を指定してアクセスする

====== hsv2rgb ======
* hsv2rgb(h, s, v) : hsv値からrgb値の色情報変換
** h (hue): 0..360
** s (saturation): 0..100
** v (value): 0..100
** 帰り値 : {r,g,b}: いずれも0..255

====== rgb2hsv ======
*rgb2hsv(r, g, b): RGB値からHSV値の色情報変換
** rgb: いずれも0..255
** 帰り値:{h,s,v}
*** h:0..360
*** s,v: いずれも0..100

=====svgMapLayerUI.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_LayerUI2_r*.jsを用いた場合に使える。
======assignLayerSpecificUiElement======
* >r4
* assignLayerSpecificUiElement( targetElement , isInline , autoSizing) : レイヤ固有UIを出力する先のDOM要素を指定する
** この関数は、レイヤーUIの初期化前～[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]読み込み前に呼ばれる必要がある（すなわち、load時のみ有効）
** targetElement : 出力先要素：出力先はsvgMapオブジェクトを持つwindowでなくても良い
** isInline : boolean 指定した要素をインライン要素として扱い、UIが存在しえない場合は消える。レイヤ固有UIを消すボタンも付与される
** autoSizing : boolean 自動リサイズを有効化

======customEvents======
*customEvents() : サポートしているイベントを返却

======launchController======
* >r4
* launchController(layerID, cbf) : レイヤ固有UIを出現させる。ただしそのレイヤーがレイヤー固有UIを持っており、且つ表示状態になっている必要がある。
** [[#getLayerId|layerID]] : レイヤーのID
** cbf (optional) : レイヤー固有UIが生成されたとき、第一引数にレイヤー固有UIのwindowオブジェクトが返却される。

======layerSpecificUIhide======
* layerSpecificUIhide() : レイヤ固有UIを隠す

======setLayerListmessage======
* setLayerListmessage( head , foot ) : head 及び footで指定した文字列を　レイヤリストUIのトップのメッセージに設定する。[head]numberOfVisibleLayers[foot] : デフォルトはhead :"Layer List: ", foot :" layers visible"

=====svgMapPWA.で呼び出せるAPI=====
'''実験的機能段階''' :
; 以下のAPIは、SVGMapLv0.1_PWA_r*.jsを用いた場合に使える。
:- SVGMap.jsをPrpgressiveWebApps(PWA)として動作させ、オフラインでも利用できるウェブアプリを構築することができる。
:- Progressive Web Appsが機能するブラウザで有効。Chrome,Edge(PC,Android), Safari(Apple製品)
:- iOS SafariのPWAネイティブキャッシュの50MB制限を回避するIndexedDBによる実装がなされており、そのクォータが許す限りの(iOSでも数百MB以上の)オフライン地図コンテンツを利用できる
:- 同じく、iOS Safariが持たないsyncの一部を代替する機能(オンラインになったらポストする機能)が利用できる
:- zip圧縮されたオフラインコンテンツパッケージ読み込み機構を使う場合はzip.jsおよびそれが利用するArrayBufferReader.js,deflate.js,inflate.jsの読み込みが必要。
:- <code>serviceWorkerPath</code>グローバル変数で、専用のサービスワーカープログラムsvgMapServiceWorker_r*.jsのパスを指定する必要がある。
::- サービスワーカー～svgMapServiceWorker_r*.jsは、同jsと同じディレクトリにあるbaseResources.jsonを読み込み初期設定を行う
::- baseResources.json：　srcにサービスワーカーネイティブのキャッシュに読み込むべきリソースのリストを記載、mapCacheTargetに、SVGMapのコンテンツキャッシュを稼働させるターゲットとなるパスを記載
::-baseResources.jsonの例
<pre>
{
"src": [
"index.html",
"Container_mercator_org.svg",
"SVGMapLv0.1_PWA_r5.js",
"js/SVGMapLv0.1_r16.js",
"js/SVGMapLv0.1_LayerUI2_r3.js",
"js/SVGMapLv0.1_GIS_r2.js",
"js/SVGMapLv0.1_Authoring_r7.js",
"js/jsts.min.js",
"imgs/gps.png",
"imgs/gps_s.png",
"imgs/Xcursor.png",
"imgs/zoomdown.png",
"imgs/zoomdown_s.png",
"imgs/zoomup.png",
"imgs/zoomup_s.png",
"imgs/mappin.png"
],
"mapCacheTarget":"localMaps/"
}
</pre>

* autoPilotDownloader
*:エリアと縮尺を指定し、オートパイロットで地図画面をスクロールさせることで、オフラインキャッシュに地図を保存する動作を自動的に行う機能のオブジェクト。レイヤー固有UIでの利用などを想定しており、以下のメンバー関数を持つ
** halt()
**:オートパイロット動作を中断させる
** searchAll(initialViewBox, minScale, maxScale)
**:- initialViewBoxで指定したエリアを、minScale、maxScaleの間でオートパイロットをかけキャッシュに保存させる
**:- minScale, maxScaleは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の座標系におけるscale値(getRootScale()で取れるもの)
** setProgressCallBack(cbf)
**:オートパイロット動作中の進行状況をcbfの第一引数に返却する
* async clearOfflineContents()
*:SVGMapのオフラインコンテンツを全消去する。SVGMapのオフラインコンテンツはserviceWorkerのネイティブキャッシュ機構とは別の独自キャッシュ機構(indexedDBを使用した機構)として構築される
* clearCache()
*:（未実装）serviceWorkerのネイティブキャッシュを全消去する
* cacheDB
*:SVGMapのオフラインコンテンツデータベースのオブジェクト。IndexedDBをpromise化した簡略的APIをメンバ関数として持つ。
** clear()
**:データベースをクリア
** async connect()
**:データベースに接続
** async delete(path)
**:pathで指定したコンテンツを削除
** async get(path)
**:pathで指定したコンテンツ(blob)を取得
** async getAll()
**:全コンテンツを取得
** async getAllKeys()
**:全Key(コンテンツのpath)を取得
** async put({idCol:path,contentBlob:blobdata})
**:コンテンツ(blobdata)をpathをキーにして格納(上書き)
* deleteCachedLayerMeta()
* async disableCache()
*:serviceWorkerのネイティブのキャッシュ機構とSVGMapの独自キャッシュ機構を全て無効化する
* async enableCache()
*:serviceWorkerのネイティブのキャッシュ機構とSVGMapの独自キャッシュ機構を全て有効化する
* getCachedLayerMeta
* async getPostQueue()
*:postMessageWhenConnectedでポストをリクエストし、未完了のリクエストを取得する
* getRootScale()
*:svgMapの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]座標系における現在の表示のscaleを取得
* getScales()
*:読み込み済み文書全てのscaleを連想配列で返す(hashKeyはdocID)
* getVisibleLayers
* getStorageUsage
* async loadOfflineContents(contentUrlList, overwrite, progressCallBack)
*:-contentUrlListで指定したコンテンツをオフラインキャッシュに読み込む(自ドメイン内のコンテンツ限定)
*:-overwriteをtrueにすると上書きする。progressCallBackは指定した関数の第一引数に進捗状況を返却
* async loadZippedOfflineContents(zip_url,progressCallBack)
*:保存してあるディレクトリに対して、そのzipファイルの中のディレクトリ構造で、コンテンツがあるものと見做したURLもつキャッシュを形成する
* async postMessageWhenConnected(URL, postData, postCompleteCBF)
*:-postDataデータをURLにポストする　オンライン時は即座にポスト、オフライン時はいったんindexedDBにポストデータを格納後オンラインになったらポストする。
*:-postDataは、文字列(この場合form-data決め打ちのリクエスト)、もしくは .bodyメンバー変数を持ったオブジェクト
*:-この場合は .bodyはFormDataタイプのインスタンスもしくは任意のデータ、そしてfetchAPIに準じた.headers, .methodをメンバー変数に持たせることができる。(methodでGETを指定すればGETリクエストも可能)またserviceWorkerが管理する
* async setCachedLayerMeta
* setScaleTrim
* async updateCacheIndex()

=====svgMapCustomLayersManager.で呼び出せるAPI=====

'''実験的機能段階''' :

基本的なフレームワークで提供されているレジューム機能を更に強化し、レイヤーの表示非表示状態、初期表示エリア(viewPort)等をユースケースなどに応じて複数登録、切り替えを可能とする機能を提供します。更に[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]をさらに積極的に編集し、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルに無いレイヤーを追加したり、削除したりした、カスタマイズされた[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]を差分情報の形でlocalStorageに保存・利用する機能を提供します。

:- 以下のAPIは、SVGMapLv0.1_CustomLayersManager_r*.jsを用いた場合に使用できます。
:- SVGMapLv0.1_CustomLayersManager_r*.jsは、svgMapオブジェクトもつwindowで使用するとともに、svgMapオブジェクト用のカスタムレイヤーセットを構築するための別ページのwebAppsにおいても使用することができます。
:- 上記svgMapオブジェクト用のカスタムレイヤーセットを構築するためのwebApps用としてSVGMapCustomLayersManagerApp_r*.js、SVGMapCustomLayersManager.htmlが用意されています。

*registCustomLayer(customLayerObject, applyImmediately, customLayerMetadata)
*applyCustomLayers(customLayersObject, baseLayersPropertySet)
*getDetailedLayersPropertySet(rootContainerDoc, ignoreIid)
*getDetailedLayersPropertySetFromPath(rootContainerUrl, ignoreIid)
*getDif( edit, orig )
*originalLayersProperty
*deepCopy(obj)
*deleteAllCustomLayerSettings()
*deleteCustomLayerSetting( key )
*setCustomLayerSettingIndex(key)
*buildCustomLayersSetting(difObj, editedLayersProperty, originalLayersProperty)
*loadCustomLayerSettings()
*storeCustomLayerSettings( settings )
*getElementByAttr( XMLNode , searchId , atName )

*applyCustomLayersSettingsToCurrentMapView(lpEdit, svgMapWin)
*loadCustomGeoViewboxes()
*storeCustomGeoViewboxes(customViewBoxes)
*buildCustomGeoViewboxSettingObject(key, title, geoViewBoxX, geoViewBoxY, geoViewBoxWidth, geoViewBoxHeight)

====起動URLによるオプション指定====
svgMapフレームワークを導入したhtmlコンテンツは、URLの"#"以降であるフラグメント識別子によってフレームワークにいくつかの起動時オプションを提示することができます。
通常、これらのオプションは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]における記述で示されています。フラグメント識別子による指示はそれをオーバーライドします。
一般的な"&"による区切りで複数の複数のパラメータを指定できます。
=====表示範囲の指定=====
global座標系によって表示範囲を指示することができます。　標準のフラグメント記述に対してそれぞれ"global"文字列の追加が必要です。
なおglobal座標系におけるxは一般的に経度、yは一般的に緯度に対応することに留意してください。
*メディアフラグメントによる指定 : xywh=global:<xmin>,<ymin>,<width>,<height>
*svgViewフラグメントによる指定 : svgView(viewbox(global,<xmin>,<ymin>,<width>,<height>))

=====表示・非表示レイヤーの指定=====
* 表示すべきレイヤー: visibleLayer=<layer title>,<layer title>...
* 非表示すべきレイヤー: hiddenLayer=<layer title>,<layer title>...
* 個々のレイヤーに対するフラグメントの提示 : それぞれのレイヤーに対しては、さらにフラグメントを追加することができます。ただし"="は"%3D",&は"%26"でURLエンコードしてください。<layer title>#fragment1=val1&fragment2=val2　⇒<layer title>#fragment1%3Dval1%26fragment2%3Dval2　

===レイヤー固有のUI===
"[https://satakagi.github.io/mapsForWebWS2020-docs/De-centralizedWebMapping.html#:~:text=To%20achieve%20this,everything%20in%20detail. Layers as WebApps]"(ウェブアプリケーションとしてのレイヤー: webApp Layer)を実現する機構　（LaWA、レイヤーwebApp、webAppレイヤー、アプリレイヤー、レイヤーアプリなどと呼ぶこともある）（[[#レイヤー固有ユーザインターフェース|こちらも参照]]）

====概要====
[[#レイヤー|レイヤーsvgコンテンツ]](フレームワークが最初に読み込むコンテナsvgコンテンツの中で埋め込まれるsvgコンテンツ)に対して、[[#動的な地図レイヤー|動的な地図レイヤー]]の一種として、そのレイヤーに固有の処理ロジックや、可視化・描画ロジック　そしてユーザインターフェースも含むことができる　htmlによるウェブアプリを定義できる機能です。

javascriptを使った独自のロジックによる動的な可視化データの生成が実装可能です。

また、この機能はそのレイヤーの設定やインタラクティブ操作のための表示やユーザインターフェースを地図表現とは別に表示したい場合にも用いることができます。従来のアーキテクチャでは、もしもこのようなレイヤーに固有のUIが必要だった場合でも、地図アプリケーション全体の処理や表示を司るグローバルな空間(ルートhtmlコンテンツのwindowオブジェクト直下)に、サイドエフェクトを考慮しながらコードを組み込む必要があり、結果としてコードのスパゲッティ化が懸念されました。SVGMapのレイヤー固有UIは、レイヤーごとにUIとそのロジックをカプセル化可能にし、これを排除することが可能です。(カプセル化はiframeによって行われます。)さらに、レイヤー固有UIによるウェブアプリは自律分散的な配置にも対応し、UIを備えた地図レイヤーにまでハイパーレイヤリングアーキテクチャを拡張します。

なお、[[#動的な地図レイヤー]]は、htmlによるユーザーインターフェースを持つことができませんが、同種のウェブアプリケーションのカプセル化の効果があります。

このＵＩには主に二つの用途が考えられます。
;凡例
: 各レイヤーはその地図表現の意味を示すための固有の凡例を持つことがあります。その凡例を表示するために利用できます。
;ウェブアプリケーションによる動的な地図レイヤー
: 先述のように、ウェブアプリケーションによる動的な地図レイヤーは独自のロジックによってそのレイヤーの地図表現を動的に変化させる機能を備えることができます。この場合、例えばエンドユーザがFORMで入力したフィルター条件ををもとに表現を変更するようなケースも考えられます。
これらケースでは、そのフォームや凡例は、[[#フレームワークの呼び出し|ルートhtml文書]]に設置することは可能ですが、もしも多くのレイヤーを表示するアプリケーションであり、それらのレイヤーがそれぞれ固有のフィルタ条件を持つような場合、[[#フレームワークの呼び出し|ルートhtml文書]]は、それぞれのレイヤーをフィルタリングするためのFORMとそのフィルタリングロジックをすべて埋め込む必要があり、画面のデザイン、およびロジックのコーディングの双方がスパゲッティ化する可能性があります。さらに、もしもこのアプリケーションに後日さらにレイヤーが追加される場合、スパゲッティ化の問題はより深刻になるかもしれません。凡例の表示についても同様の問題が考えられます。本レイヤー固有ＵＩはこのような問題に対するソリューションを提供しています。

この機能は、ベースのフレームワークrev12以上　且つLayerUI2フレームワークを読み込み、[[#レイヤー固有のUI(後述)を設置するdiv要素|id="layerSpecificUI"のdiv要素]]が[[#フレームワークの呼び出し|ルートhtml文書]]に設置されているときに使用できます。

;サンプル
:[[チュートリアル#WebApp_Layer.E7.B7.A8|開発者向けチュートリアル]]でいくつかのサンプルを見ることができます。

====[[#レイヤー|レイヤーsvgコンテンツ]]での指定====
レイヤー固有UIの設置には、[[#レイヤー|レイヤーsvgコンテンツ]](のルート要素(svg要素))に、data-controller属性を与え、そこにそのレイヤー固有のUIのためのhtml文書のリンク(ただしsame origin)を設置します。またサブセットとして、data-controller属性にビットイメージ(.pngもしくは.jpg, .jpeg, .gif拡張子を持つビットイメージ)へのリンクを与えることでレイヤーの凡例情報の提示をすることもできます。

[[#レイヤー固有のUI(後述)を設置するdiv要素|レイヤー固有ＵＩの表示部位]]には、このように指定されたリソース(ビットイメージもしくはhtml)がレイヤーの選択の状況に応じて、切り替わり表示されます。レイヤーがONになっている間、それに紐付けられたレイヤー固有UI(htmkのwindowオブジェクト)が存在し続け、そのレイヤーのsvgDOMの操作やUIの提供が可能です。

なお、標準のフレームワークでは、表示中のレイヤーの中の選択された一つのUIのみが地図のメインのwindowに配置されたiframeで表示されます。表示中ではあっても選択されていないレイヤーのUI(iframe)は非表示状態で動作しています。

'''サンプル'''
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="9000.0 -9000.0 9000.0 9000.0" go:dataArea="9000.0 -9000.0 9000.0 9000.0"
'''data-controller="../Self-GS-POI_controller.html"'''>
.....

====レイヤー固有のUIのためのhtml文書(webApp)の構造・作法====
レイヤー固有のUIとなるhtml文書は、下記の通り、その初期化等を行うライブラリ <code>svgMapLayerLib.js</code> を読み込む必要があります。（現在のところ通常のjavascriptライブラリのみ提供されます）
CDNからライブラリを読む場合は、<code>https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/svgMapLayerLib.js</code>です。

'''サンプル'''
<!doctype html>
<html>
...
<script src="https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/svgMapLayerLib.js"></script>
...
</html>

====LaWAとS-LaWA（サンドボックス化LaWA）のアーキテクチャ====
SVGMapにおけるレイヤー固有UI（LaWA: Layers as Web Apps）には、セキュリティと用途に応じた2つの動作モードが存在します。2026年のアップデートにより、Web標準のセキュリティモデル（クロスオリジン制約）に準拠した'''S-LaWA（サンドボックス化LaWA）'''が導入されました。 (2026/4/16現在 dev2リリース段階)

=====T-LaWA (Tight-coupled LaWA / 従来の密結合モード)=====
* 親のSVGMapフレームワークと同じオリジン（ドメイン）で動作する、従来型のレイヤーWebAppです。
* iframeのJavaScriptコンテキストに、親フレームワークから直接APIオブジェクトが注入されます。
* 全ての[[#拡張API]]にアクセスでき、複雑なDOM操作や関数渡しが可能ですが、サードパーティ製のレイヤーを読み込む際にはセキュリティ上のリスク（XSS等）を伴います。

=====S-LaWA (Strict/Sandbox LaWA / 分離モード)=====
* 親のSVGMapフレームワークとは異なるオリジンで動作することを前提とした、セキュアなレイヤーWebAppです。
* iframeは完全に隔離（サンドボックス化）され、親フレームワークとの通信は全て非同期メッセージング（postMessage）を介して行われます。
* 悪意のあるスクリプトから親フレームワークを保護できるため、外部のサードパーティ製レイヤーを安全に統合できます。
* 代わりに直接的なオブジェクト参照や関数の受け渡しが禁止されるため、[[#拡張API]]の利用に強い制限がかかります（前節の「S-LaWAでの制限」を参照）。

======'【発展機能：S-LaWA Level 2 (CORS非依存モード)】======
* S-LaWAのサブモードとして、配信元の外部サーバーにCORS（Cross-Origin Resource Sharing）設定がされていないSVGレイヤーであっても、安全に読み込んで統合できる仕組みです。
* コンテナ側の <code>animation</code> 要素に <code>data-controller</code> 属性が指定されている場合、SVGMapフレームワークはCORSエラーを回避することが可能です。実際のSVGの取得と展開はサンドボックス内のS-LaWAが代理で行われ、サーバー側の設定に依存しないクロスオリジン連携を実現します。

===== 動作モードの指定 (data-lawa-mode) =====
レイヤーがどちらのモードで起動するかは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]内でそのレイヤーを参照している '''<code>animation</code> 要素の <code>xlink:href</code> の値（URLのオリジン）'''、もしくは同要素に付与する '''<code>data-lawa-mode</code>''' 属性で制御できます。

<code>data-lawa-mode="auto"</code> (未指定時のデフォルト): レイヤー（コントローラ）のURLが親フレームワークと同一オリジンであれば '''T-LaWA''' として、クロスオリジンであれば自動的に '''S-LaWA''' として起動します。

<code>data-lawa-mode="isolated"</code>: 同一オリジンであっても、強制的に '''S-LaWA''' として隔離して起動します（開発時のテスト等に有用です）。

<code>data-lawa-mode="tight"</code>: 強制的に '''T-LaWA''' として起動を試みます。（※クロスオリジン環境でこれを指定した場合は、適切なCORS設定やプロキシサーバーの利用が必須となります）

====詳細====

レイヤー固有UIは、SVGMapのグローバルなwindowに設置されたiframeの中で動作します。このiframeの性質と利用できるAPIは、前述の動作モード（T-LaWAかS-LaWAか）によって大きく異なります。

どのような環境・モードで起動された場合でも、レイヤー固有UI内でSVGMapの各種リソースへ安全にアクセスするためには、レイヤーのHTML内で提供される初期化ライブラリ（<code>svgMapLayerLib.js</code> 等）を読み込む必要があります。

'''【重要】''' 各種APIへのアクセスが可能になるのは、iframe自体の "load" イベントではなく、SVGMapフレームワークとの接続が完了した後に発行される '''<code>layerWebAppReady</code>''' イベント以降です。
* 初期化処理は以下のように記述することを強く推奨します。
* <code>window.addEventListener("layerWebAppReady", function(){ /* 初期化処理 */ });</code>

[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が設置されたSVGMapのグローバルなwindowと異なるドメインにレイヤーを設置し、そのレイヤーがレイヤー固有UIを持つこともできます。デフォルト（<code>data-lawa-mode="auto"</code>）では、これは自動的にセキュアなS-LaWAとして起動するため、特別なCORS設定は不要です。ただし前述の通りAPIには制限がかかります。

[[#レイヤー|レイヤーsvgコンテンツ]]のドキュメントルート要素へdata-controller属性を設定する代わりに、コンテナsvgコンテンツにおける[[#レイヤー|レイヤーsvgコンテンツ]]への参照要素にdata-controller属性を設定することもできます。

data-controller属性の代わりに、data-controller-src属性の値に、適切にエスケープすることで直接htmlを記述することもできます。（※この機能は主にT-LaWAでの利用を想定しています）

data-controller属性によって参照されるhtmlコンテンツでは、次節[[#拡張API]]で説明する値や関数が使用できます（※モードによる制限あり）。

data-controller属性のURLには以下のオプションをフラグメント識別子として指定することができます。
* #exec=appearOnLayerLoad||hiddenOnLayerLoad||onClick レイヤー固有UIの起動オプション
** appearOnLayerLoad : レイヤーを表示状態にすると即座にレイヤ固有UIが出現
** hiddenOnLayerLoad : レイヤーを表示状態にすると即座にレイヤ固有UIがhidden状態で起動(そのレイヤ固有UIに含まれるscriptが起動)
** onClick : レイヤー固有UI起動ボタン">"を押したときにレイヤ固有UIが出現(デフォルト)
* #requiredHeight=hhh&requiredWidth=www
** id="layerSpecificUI"のdiv要素のcss値に関わらず、requiredHeight、requiredWidthでiframeの表示を指示

====拡張API====
レイヤー固有UI(iframeのwindowオブジェクトのjavascriptコード)では以下のAPIが拡張されています。
'''【注意】S-LaWA（サンドボックス化LaWA）環境においては、セキュリティ上の理由から親フレームワークのオブジェクトに直接アクセスできません。代わりに <code>svgMapSandboxLayerLib.js</code> が提供する「モック（代替）オブジェクト」を介して非同期に操作が行われます。各項目の「S-LaWAでの仕様」を参照してください。'''

=====イベント=====
*layerWebAppReady : 初期化が完了しLaWAの実行が可能になった (LaWAでは、loadイベントではなくlayerWebAppReadyを使用することを強く推奨します)
*openFrame : そのiframeが、新たに生成された
*closeFrame : 同、消滅した
*hideFrame : 同、隠された
*appearFrame : 同、隠されていたのが再度現れた
*zoomPanMap : [[#.E6.8B.A1.E5.BC.B5.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88|SVGMapフレームワークと同じ]]
*zoomPanMapCompleted : 同上
*screenRefreshed : 同上

'''【S-LaWAでの仕様】''' すべてのイベントがサポートされています。親フレームワークで発生したイベントは、メッセージングを通じてS-LaWA内のwindowオブジェクトに中継・ディスパッチされます。

=====svgImageProps=====
このレイヤー固有UIに紐づいたレイヤーSVGの各種プロパティを参照できる（基本的に全て読み出しのみ） (参考:[[#svgImagesProps.5B.5D]])
*[[解説書#svgImagesProps.5B.5D|プロパティのリストはこちらを参照]]
*svgImageProps.scriptで、動的地図レイヤーのscript要素によって生成されたオブジェクトにもアクセスできます。
*svgMap.getSvgImagesProps(layerID) で得た値と同等。
*.hashは書き込みが有効(参考 [[#サブレイヤーパーマリンク]])

'''【S-LaWAでの仕様】''' 親フレームワークから非同期で同期された静的なコピーデータとして提供されます。<code>.hash</code> プロパティへの書き込みはS-LaWAでもサポートされており、裏側で自動的に親へ同期されます。ただし、<code>.script</code> による親の実行コンテキストへのアクセスはできません。

=====svgImage=====
このレイヤー固有UIに紐づいたレイヤーSVG文書(DOM Documentオブジェクト) (参考：[[#svgImages.5B.5D]])
*このドキュメントを操作することで、そのレイヤーの表示を動的に変化させることが可能です。
*特に、[[解説書#.E5.8B.95.E4.BD.9C.E3.81.AE.E5.88.B6.E9.99.90.E3.83.BB.E5.B7.AE.E7.95.B0|動作の制限に注意して実装してください]]
*svgMap.getSvgImages(layerID) で得た値と同等。

'''【S-LaWAでの仕様】''' S-LaWA環境内に展開された「ローカルXML DOM」が提供されます。このドキュメント（要素の追加・削除・属性変更・テキスト変更など）を操作して <code>svgMap.refreshScreen()</code> を呼び出すと、フレームワークの共通地図キャンバスに送信され更新します。

=====svgMap=====
svgMapフレームワークインスタンス

'''【S-LaWAでの仕様】''' 親のインスタンスの代わりに、S-LaWA用のモッククラス（<code>SandboxSvgMap</code>）が提供されます。以下のメソッドのみが利用可能です。
* <code>refreshScreen()</code>, <code>transform()</code>, <code>getGeoViewBox()</code>, <code>getSvgImageProps()</code>, <code>setShowPoiProperty()</code>, <code>showModal()</code>, <code>getCORSURL()</code>, <code>setCORSproxy()</code>, <code>parseEscapedCsvLine()</code>

=====layerID=====

svgMapフレームワークが管理しているSVG文書ハッシュリスト(svgMap.getSvgImages())における、このレイヤー固有UIに紐づいたレイヤーSVG文書のハッシュキー

[[#getLayerId]]参照

'''【S-LaWAでの仕様】''' 制限なく利用可能です。

=====svgMapGIStool=====
GIStoolsフレームワークを拡張した時、同インスタンス
*[[解説書#svgMapGIStool..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI|svgMapGIStoolが持つAPI]]

'''【S-LaWAでの仕様】''' '''現在のところ利用不可です。'''

=====svgMapAuthoringTool=====
svgMapAuthoringToolフレームワークを拡張した時、同インスタンス
*[[解説書#svgMapAuthoringTool..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI|svgMapAuthoringToolが持つAPI]]

'''【S-LaWAでの仕様】''' '''現在のところ利用不可です。'''

=====controllerSrc=====
レイヤー固有UIのiframeの起動に使われたsrc属性(レイヤー固有UIのパス・URL)が読み出せます。特にレイヤーが異なるドメインから配信されたものの場合、レイヤー固有UIのwindowのlocation属性(及びそれによるURL解決を行うAPI)からは適切な情報が得られません。これ代えてこの値が使用できるケースがあるでしょう。

'''【S-LaWAでの仕様】''' 参照できません。S-LaWAは自身のURLコンテキストで動作するため、自身の <code>location.href</code> などを参照してください。

=====putGlobalMessage(messageText)=====
messageTextを[[#グローバルメッセージ]]エリアに表示する　レイヤーが消滅したら自動でメッセージも消滅します。

'''【S-LaWAでの仕様】''' 現在のところ利用不可です。

=====preRenderFunction=====
この名前の関数を(レイヤー固有UIのwindowに)定義すると、そのレイヤーのSVG文書の再描画(画面更新)シーケンスの直前にこの関数の内容が実行される。詳細は[[解説書#setPreRenderController|setPreRenderControllerを参照]]

'''【S-LaWAでの仕様】''' '''利用可能です。''' S-LaWA内で <code>window.preRenderFunction</code> を定義しておくと、<code>svgMap.refreshScreen()</code> が呼ばれた際や、親からズーム・パンなどのイベントを受信した際に、S-LaWA内でローカルに実行されます。この関数内でローカルDOMを変更することで、描画前の状態更新をエミュレートできます。

=====customHitTester=====
この名前の関数を定義すると、そのレイヤーに固有のヒットテスト（マウスやタッチによって地図上をヒットしたときの振る舞い）機能を追加することができます。ヒットテストは通常のクリッカブルオブジェクト（ポイントやライン・ポリゴンなど）のそれと同等に扱われます。
* customHitTester( position )
** 第一引数に、ヒットされた座標(.screenX,Y:window上の座標、.lat,lng:地理座標、.isMapCenterHitTest:後述)が与えられます。（この値をもとに実際のヒットテスト処理を書く）　この関数の帰り値が'''null'''や'''undefined'''の場合はヒットしなかったこと、'''true'''もしくは文字列もしくはそのレイヤーの任意の図形要素、もしくはそれらの配列の場合はヒットしたことを示します。
*** isMapCenterHitTestが'''true'''の場合、そのヒットテストは伸縮スクロール時自動発生するケースで発生したものです。（もしこのケースでのテストを除外したいなど特別な処理をしたい場合に利用できます）
** ヒットテスト後の振る舞いも通常のクリッカブルオブジェクトと同等で、通常はデフォルトで備えるヒットされたグラフィックスオブジェクトの[[#metadata.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF|メタデータ]]表示パネルが呼び出されます。(帰り値が図形要素の場合）　もしこの振る舞いを変更したい場合は、[[#setShowPoiProperty|setShowPoiProperty]]を用いることが可能です。
** 帰り値がtrue、文字列、およびそれらの配列を返す場合は、[[#setShowPoiProperty|setShowPoiProperty]]を使用してカスタマイズされた処理を行う必要があります。この場合[[#setShowPoiProperty|setShowPoiProperty]]で設定された関数が受け取る引数は、そのSVG文書のドキュメントルート要素であり、その'''"data-hitTestIndex"'''属性に選択されたオブジェクトのインデックス(配列の場合。配列でない場合は常に0)が設定されます。

'''【S-LaWAでの仕様】''' <code>customHitTester</code> 自体は利用できません。（なお<code>svgMap.setShowPoiProperty(func)</code>は利用可能です。）

====サブレイヤーパーマリンク====
(2024/10のdev1ブランチから有効)
*[[#レイヤーsvgコンテンツ]]のURLが任意のフラグメント識別子を持つことができる。
*ただしフラグメント識別子はカンマ","、アンパサンド"&"を含めることはできない。
*[[#レイヤー固有のUI]]が以下を実装する場合、任意のレイヤーの設定をパーマリンク([[#getBasicPermanentLink]])に反映できる。
**[[#レイヤー固有のUI]]は起動時(onload)同フラグメント識別子の情報を解釈し適切な状態に変化させる機能
**[[#レイヤー固有のUI]]は、パーマリンクによる指定に対応した標示状態に表示が切り替わるタイミングで[[#レイヤーsvgコンテンツ]]のURLのフラグメント識別子の内容をそれに対応した値に変更する機能
*[[#レイヤーsvgコンテンツ]]のURLのフラグメント識別子は、[[#svgImageProps]].hashを設定することで変更できる ([[#svgImageProps|⇒仕様参照]])

===動的な地図レイヤー===
svgドキュメントにjavascriptを記述することでも、動的なデータ生成を実装可能としています。
本フレームワークでは、svgドキュメント中に<script>要素を一つだけ記述することができ、その要素の中にjavascriptコードを入れることができます。

DOMを操作し、動的に描画を変化させることが可能です。ただし、[[解説書#.E5.8B.95.E4.BD.9C.E3.81.AE.E5.88.B6.E9.99.90.E3.83.BB.E5.B7.AE.E7.95.B0|動作の制限に注意してください]]

====動的SVGMapコンテンツで利用可能な拡張API====
一般のjavascriptAPIに加えて、動的な地図レイヤーを実装するために以下のAPIが提供されます。（既存のものでも注記があるものも列挙）
*document: このsvgMapドキュメント自身
*READ ONLY変数
**CRS:このドキュメントのCRS : CRS.a....fに、地理座標からこのドキュメントのSVGユーザ座標への変換係数が提供される
**docId:このSVGドキュメントのdocId
**scale：倍率：このドキュメントの座標系と、画面の(px座標系)との間の倍率(この値は等倍が1.0だが、svgMapコンテンツのvisibleMin/MaxZoom値は%(等倍は100)なので注意)
**actualViewBox：このドキュメントの座標系でのviewBox
**geoViewBox：地理座標におけるviewBox
**geoViewport
**viewport
**this.location:相対パス
**(this.verIE)
*refreshScreen(): 描画の更新を明示: refreshScreenを用いていない場合、そのレイヤーのDOMを編集してもそれが即座に表示に反映(更新)するとは限りません。文書のロード、ズーム、スクロールのときが表示のDOMの内容を反映した画面の自動更新のタイミングです。それ以外、多くの場合反映されません（性能確保のための本フレームワークの現在の制限）。DOMO編集をそれ以外のタイミングで表示に反映したい場合、この関数の呼び出しを行うひつようがあります。一方不必要にこの関数を呼び出すとシステム全体の性能が低下するかもしれません。
*transform()
*getCanvasSize()
*linkedDocOp()
*isIntersect()
*drawGeoJson()
*childDocOp()
*onload:この関数を設定すると、ロードされると呼ばれる(ドキュメントロード後、描画前のタイミング。)
** この関数は、DOMトラバース前に同期処理される。
**したがってonloadで実行される処理はその中が非同期でない限り、refreshScreen()しなくてもonload時のDOM編集は直後の描画に反映される。
*onscroll:この関数を設定すると、スクロールされるとき呼ばれる（ほかにズーム以外で画面更新時も）(スクロール後の描画前のタイミング。)
**同上
*onzoom:この関数を設定すると、ズーミングが発生するとき呼ばれる(同上)

====拡張イベント====
*document -> zoomPanMap イベント addEventHandlerすると、ズームパンが起き(viewPortが変化したとき)地図システム全体の描画が完了(含タイムアウト)後に発行される。SVGMap*.jsが地図をウェブアプリ起動後、最初に描画完了した時にもこのイベントが発生する。（レイヤー追加時には発生しない）
**これをイベントリスナに設定した関数は、非同期に実行される。onscroll()と異なり、もしその関数でDOM編集を行った場合は、直後の描画にそれが反映される保証がない。refreshScren()による再描画が必要。
*document -> screenRefreshed イベント addEventHandlerすると、ズームパン以外で地図システム全体の描画が完了(含タイムアウト)後に発行される。主にrefreshScreen()など。このイベントをフックにして、SVGMapコンテンツのDOM操作・再描画（refreshScreen()）を行うと無限ループに陥るので使用方法に注意が必要。
*document -> zoomPanMapCompleted イベント SVGMaplayerUIが有効な時に発行される。　zoomPanMapイベントは伸縮スクロール完了時に発行されるが、その直後にレイヤー固有UIにおいて(XHRやfetchを用いた)非同期なデータ取得とレイヤー書き換えが生じるケースでは、その完了を検知しない。zoomPanMapCompleted イベントはこのような非同期通信の完了後に発行される。

===SVGMapの埋め込み(SVGMapFrame)===
'''実験的機能段階''' :

SVGMapフレームワークはwindow全体に地図コンテンツが占有される形で表示する設計です。ウェブページはwebAppsとしてカプセル化されたレイヤーをsvgMapオブジェクトに差し込む形でアプリケーションが構築されます。すなわち、基本的に[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]windowにはsvgMapオブジェクトだけが単独で存在し、その他のアプリケーションをwindow上に実装する場合は、その開発者がsvgMapオブジェクトとのグローバル空間でのスパゲッティ化に注意を払いながら開発していく必要があります。

それに対して、''SVGMapLv0.1_Frame*.js''が提供する機能は、window内の指定した領域にsvgMapによる地図を埋め込むことを可能にします。さらにこの埋め込まれたsvgMapオブジェクトを　外部からより簡単に操作できるようカプセル化されたインターフェースを提供します。

====ライブラリ====
SVGMapを埋め込むウェブページでは''SVGMapLv0.1_Frame*.js''を導入します。
<!doctype html>
<html>
<script type="text/javascript" src="SVGMapLv0.1_Frame_r4.js"></script>
</html>

====svg-map要素====

svg-mapカスタム要素を使用してsvgMapオブジェクトを任意の場所に埋め込むことができます。
<nowiki>
<!doctype html>
<html>
<script type="text/javascript" src="SVGMapLv0.1_Frame_r4.js"></script>
<body>
<table>
<tr>
<td>
説明用地図
</td>
<td>
<svg-map svgMapAppPage="SVGMapper_r16_layerUICustom.html" id="svgMapTag" latitude="37" longitude="135" zoom="4" layerui="#layerUIarea">
</svg-map>
</td>
</tr>
</table>
</body>
</html></nowiki>

=====属性=====
======svgMapAppPage======
必須属性: 起動するSVGMapLv0.1*.jsが組み込まれたhtmlを指定。
svg-map要素はshadow domとなっており、内部はひとつのiframeとして構成されます。このiframe内のwindowで通常のsvgMapオブジェクトが稼働する形となります。svgMapAppPage属性はこのiframe内で起動するsvgMapオブジェクトを持ったhtmlを指定するものです。

======latitude, longitude======
オプション: 表示領域を下記の属性と組み合わせて指定します。DOMを操作することによって動的に表示領域を変更することが可能です。
======zoom======
オプション: 表示位置の中心点を上の2属性で、ズームレベルをこの属性で指定します。ズームレベルの定義は[https://docs.microsoft.com/ja-jp/azure/azure-maps/zoom-levels-and-tile-grid webMercatorタイルピラミッドのレベル番号]（ただし小数点指定も可能）
======latitude2, longitude2======
オプション: latitude, longitudeと組み合わせて対角線を指定し表示領域を設定します。
======customjson======
オプション: 任意のJSON文字列を(エスケープしたうえで)与えることができます。 SVGMap.jsのあるiframeのwindow.rootMessage.customJsonに、JSON.parseされたうえでその値が反映されます。この値もDOM操作により動的に反映されます。window.rootMessage.customJsonの変化を監視できるようsetterを設けることで動的な変化に対応する実装が可能です。

var rootMessage={
set customJson(json){
...
}
}

======layerui======
オプション: レイヤーUIの出力要素をxlinkで指定します。　この値はmutationをobserveしていません（svg-mapオブジェクトが生成された、最初の一回のみ有効です）

<svg-map svgMapAppPage="SVGMapper_r16_layerUICustom.html" id="svgMapTag" latitude="37" longitude="135" zoom="4" layerui="#layerUIarea">

=====DOM API=====
======setCenter======
setCenter( longitude, latitude, zoom ) : 緯度経度ズームレベルで地図を表示させる
======addLayer======
addLayer(url,title,visibility) : URLで指定したリソースのレイヤーをtitleを付けて追加する

======svgMapObject======
getter svgMapObject : この要素に紐付いたsvgMapオブジェクトを得る

====layer要素====
svg-map要素の子要素として、任意の個数のlayer要素を設置できます。
=====属性=====
======title======
iframeで起動されるsvgMapオブジェクトの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルにある、レイヤー名(title)を指定し、そのレイヤーとlayer要素を紐付ける。該当するレイヤーが無く、且つ下記のsrcが指定されている場合は新しいレイヤーを追加する。なお、任意の属性や子ノードが与えられている場合は、下記の通りレイヤーの読み込み後にそれらの値が該当するレイヤーの[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|data-controller]]の window.rootMessageに設定される。

======src======
iframeで起動されるsvgMapオブジェクトの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルにある、レイヤーをURLを使って指定する
======visibility [TBD] ======
visible もしくは hiddenを設定すると、そのレイヤーの表示状態を制御できる。

======任意の属性======
任意の属性を設定できる。設定した属性名と属性値は、対応するレイヤーの[[#レイヤー固有ユーザインターフェース|data-controller]]で指定されたレイヤーのコントローラのwindowにおけるwindow.rootMessageの対応するメンバ変数に反映される。[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/set setter]を設定することで変化に応じて動作させることが可能になる。

======rootMessage.update()関数======
レイヤーのコントローラのwindow.rootMessage.update()関数(引数なし)が定義されている場合、上記の属性変更(最初の設定も含む)が検知される度にこの関数が呼び出される。

=====子ノード(TEXT CONTENTやXML要素)=====
任意のテキスト(textContent)や、XML要素(xmlContent)を子ノードに入れることができる。
入れられた情報は、同様に対応するレイヤーのdata-controllerの
window.rootMessage.textContent、もしくはwindow.rootMessage.xmlContentメンバ変数に反映される。
XMLに関しては任意の階層化がされていても良い。DOM操作による変化があれば更新されるので、同様にsetterを用いて変化を反映させることが可能。

=====DOMAPI=====
======layerId======
layerId : このレイヤーのレイヤーIDを得る
======svgImage======
svgImage : このレイヤーに紐付いたsvgMapコンテンツ(document)を得る
======svgImageProps======
svgImageProps : このレイヤーに紐づいたsvgMapコンテンツのsvgImagePropsオブジェクト(各種プロパティを格納したオブジェクト)を得る
======controllerWindow======
controllerWindow : (もしあれば)このレイヤーに紐づいたsvgMapコンテンツのレイヤー固有UIを得る

==第四章：内部機構解説==
[[内部機構解説|別ページを参照してください。]]

==第五章：付加機能==
===3D可視化機能===
:- SVGMap.jsはCesium.jsを利用してSVGMapで表示しているレイヤーを3D可視化することができます。
:- 3D可視化はSVGMap.jsの地図ウィンドと独立した別ウィンドで行われます。
:- すなわち、ここから呼び出されるCesiumベースの3D可視化ウェブアプリは、それ専用のwebApps([https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4_module.js cesiumWindow*.js]を読み込んだアプリ。：基本的な3D可視化ウェブアプリとして、[https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4.html cesiumWindow4.html]を用意)を持つ別のブラウジングコンテキストで起動されます。
:- この3D可視化ウェブアプリは、svgmapjsとメッセージングを行いsvgmapjsで表示されているレイヤーを3D可視化します。

====3Dビジュアライザ起動用ボタンの設置====
3D可視化機能を起動するためのUI(ボタン)は、[[#フレームワークの呼び出し|ルートhtml文書]]に設置した以下の要素によって構築されます。
<code><pre><img id="3DviewButton" data-app="cesiumWindow4.html" .../></pre></code>

* <code>id</code>が<code>3DviewButton</code>である必要があります。
* <code>data-app</code>属性で、3D可視化ウェブアプリのパスを指定することが可能です。
** もし指定されていない場合は、ルートhtml文書と同一ディレクトリの<code>cesiumWindow2.html</code>というファイルがデフォルトで指定されます。
** パスは同一オリジンである必要があります。
** 基本的な3D可視化ウェブアプリとして、[https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4.html cesiumWindow4.html]が[https://github.com/svgmap/svgmapjs/ svgmapjsリポジトリ]に用意されています。

解説書

2026-04-16T08:36:52Z

Admin: /* 動作モードの指定 (data-lawa-mode) */

=SVGMap.js (Level0.1フレームワーク)解説書=

2018年現在のSVGMapのデータ形式、およびそれを実装した初歩的なフレームワーク(SVGMap Level0.1 Revision*)の解説を行います。

==第一章：SVGMapの基本機構と、更新部分==

この章は、JIS化されたSVGMap ([http://kikakurui.com/x7/X7197-2012-01.html JIS X.7197])や、[https://www.w3.org/Submission/2011/04/ W3C Member Submission]に対する、近年の開発成果に基づいたSVGMapのアップデートを解説しています。

[http://kikakurui.com/x7/X7197-2012-01.html JIS X.7197]もしくは、[https://www.w3.org/Submission/2011/04/ W3C Member Submission]に記載されているように、SVGMapの基本機構は主に以下の機能を　[https://ja.wikipedia.org/wiki/Scalable_Vector_Graphics 汎用的なグラフィイクスデータ記述形式SVG]に拡張することです。
* [[#地理座標系の処理|地理座標処理]]
** SVGの座標系と地理座標系との間の関係を記述する globalCoordinateSystems要素
* タイルピラミッド（タイリングとLevel of Detail）
** コンテンツを埋め込む[[#要素|image要素、animation要素]]のx,y,width,height属性への追加の振る舞いと、visible-min-zoom, visible-max-zoom属性の追加
** 詳細は [https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html こちらの論文]を参照
* 拡張された[[#レイヤー|レイヤー]]
** [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]におけるimage, animation要素の扱い
** [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が埋め込むsvgコンテンツ([[#レイヤー|レイヤーsvgコンテンツ]])の処理

===地理座標系の処理===
SVG2では地理空間座標を記述するスペック(metadata geospatial coordinate systems)が削除されました。これは、W3C SVG仕様の範囲では単なるメタデータであり、ユーザエージェントの振る舞いに何ら影響を及ぼさないことが理由です。　また、JIS SVGMapにおいては、coordinateReferenceSystem 要素が定義され、それに基づくユーザエージェントの振る舞いが規定されていますが、これは一方でW3Cのスペックではないという課題を持ちます。

これを受けて、現在提案されているSVGMapのデータ仕様では、SVG1.1の段階ですでに標準化と実装が行われたスペックを注意深く活用することにより、JIS SVGMapで規定された地理座標系に関する機能のいくつか（すべてではない）を実現する方法を用いることとしています。（[https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/globalView globalView spec]）

なお、JIS SVGMapのcoordinateReferenceSystem要素もサポートしています。

====メルカトル図法を含む任意の図法の定義とその合成機能(＞rev16)====
従来のSVGMapでは、グローバル座標系に緯度経度座標を用いた場合、使用できる図法は[https://ja.wikipedia.org/wiki/%E6%AD%A3%E8%B7%9D%E5%86%86%E7%AD%92%E5%9B%B3%E6%B3%95 PlateCarreeや正距円筒図法]でした。

一方、rev16では[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]を含む任意のSVGMapコンテンツ([[#レイヤー|レイヤーsvgコンテンツ]]やサブレイヤー、タイルなど)のglobalCoordinateSystem 要素のtransform属性に、下記のように"mercator"を指定することで、そのコンテンツの座標系がメルカトル図法([https://en.wikipedia.org/wiki/Web_Mercator_projection web mercator])であることを宣言できます。

<pre><globalCoordinateSystem srsName="http://purl.org/crs/84" transform="mercator" /></pre>

この記述がされたコンテンツのSVGの座標空間はメルカトル図法上のものとなり、この座標系上でのx,y=0,0(左上)は西経180.0度,北緯85.051129度、x,y=1,1(右下)は東経180.0度,南緯85.051129度に対応します。

=====メルカトル図法での地図表示=====
[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]で先述の宣言を行うことで、SVGMap0.1.jsはメルカトル図法で画面上に地図を表示します。このとき、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が参照する各レイヤーはメルカトル図法であっても、それ以外であっても構いません。フレームワーク内でオンザフライの図法変換が実行されます。（逆に[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]がPlateCarreeでレイヤーがメルカトルでも同様）

=====メルカトル図法のドキュメントルート要素のviewBox属性=====
* [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]において、地図の初期表示状態を記述するドキュメントルート要素(<svg>要素)のviewBoxに記述する座標も先述のメルカトル座標系で記述する必要があります。
* 一方、緯度経度で初期表示領域を記述したい場合に対応する仕様が拡張されており、その記述例は下記のとおり、'''global'''を追加します。
<pre><svg viewBox="global,138,35,2,2"></pre>

=====プロキシの設定=====
オンザフライでの図法変換では、多くのケースで非線形の座標変換が必要となります。ビットイメージ（タイルを含む）に対して子の座標変換を実行するためにSVGMap.jsではビット委イメージのピクセルにアクセスしています。これを実現するにはビットイメージがSVGMap.jsと同一オリジンにある必要があります。この条件を満たせないケースに対してフレームワークにはプロキシを設定する機能があります。([[#setProxyURLFactory|setProxyURLFactory API]]を参照)

'''[[クロスオリジンアクセス|詳細な情報をこちらに掲載しました]]'''

=====多様な図法の定義と利用=====
[[#動的な地図レイヤー|javascriptコード]]に記載されたscript要素内に定義した関数の関数名をglobalCoordinateSystem要素のtransform属性に記述することで、その関数を図法変換に用いた図法定義が可能となります。(先述のmercator属性は、フレームワークに特別に組み込まれた関数です）

たとえば、日本の平面直角座標系の地図(固有の基準点を持つ横メルカトル図法)をPlateCarreeやメルカトル図法の地図として合成・表示するケースなどに有効でしょう。

ユーザが定義できるこの関数は引数を持たない関数であり、返り値として以下の３つの関数を返す必要があります。
* {x,y} transform({x,y}) : グローバル座標(WGS84経度緯度)から、そのコンテンツの図法の座標への変換関数入出力値は.x,.yメンバを持つオブジェクト。
* {x,y} inverse({x,y}) : 同、逆変換関数
* number get scale : グローバル座標系に対するコンテンツの図法の座標系の座標値のスケール（グローバル座標系で1変化すると、コンテンツの座標系でいくつ変化するのかを表す）
* 記述例
<code><pre>
<svg ...>
<script>
function azimuthalEquidistant(){
...
return{
transform:function(inp){
var xy = transform_int(inp.y, inp.x, ...);
return{ x:xy.x, y:xy.y}
},
inverse:function(inp){
var latLng = inverse_int(inp.x, inp.y, ...);
return{ x:latLng.lng, y:latLng.lat }
},
scale: 1.0
}
}
</script>
<globalCoordinateSystem srsName="http://purl.org/crs/84" transform="azimuthalEquidistant" />
...map contents in projected coordinate system...
</svg>
</pre></code>

===ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング===
SVG2(SVG1.1 2nd Edition)では、SVG単独によるユーザエージェントという実装想定は撤廃され、よく知られているウェブブラウザの機能の一部としてのSVGデータの描画機能、HTMLやCSSと一体化されたデータ・コンテンツ　へと変化しました。一方、近代のウェブブラウザにおけるコンテンツでは古典的なhtmlに基づくコンテンツデータに対して、javascriptとDOM APIによるプログラムでコンテンツをブラウザ上で動的に生成する（ウェブアプリケーション）機構を備えます。すなわちSVGを実装する現代のユーザエージェントは例外なくウェブアプリケーションの実行が可能となりました。

そこで、SVGMapでは静的なSVGによる地図コンテンツに加え javascriptで動的に生成されるコンテンツ(ウェブアプリケーション)も地図コンテンツ（地図のレイヤー）として扱えることとしました。それにもかかわらず SVGMapは依然として複数のウェブ上で分散する地図データを一つの画面上にレイヤリングする機能（ハイパーレイヤリング）を維持しています。すなわち、ウェブアプリケーションとしての地図レイヤーをレイヤリング（マッシュアップ）する機能が拡張されます。これは、SVGMapのマッシュアップ・ハイパーレイヤリングの概念を、単に地図画像データのレイヤリングから、地図上に表現された動的なオブジェクトのマッシュアップ・レイヤリングに広げています。SVGMapではこのコンセプトを[[リンク集#.E8.A7.A3.E8.AA.AC.E9.9F.B3.E5.A3.B0|"Layers as WebApps"(LaWA : ウェブアプリケーションとしてのレイヤー)]]と呼んでいます。

このようなウェブアプリケーションは、レイヤーごとにカプセル化されることになります。これにより、'''グローバル空間'''(コンテナsvgコンテンツとそれを起動する、svgMap.jsフレームワークを読み込んだウェブページ)のスパゲッティ化なしに、多様な機能を実装していくことが可能になります。

[https://satakagi.github.io/mapsForWebWS2020-docs/De-centralizedWebMapping.html こちらの論文]も参考にしてください。

ウェブアプリケーションによる地図レイヤーを構築するには二つの方法があります。
* svg要素の'''data-controller'''属性で参照されたhtml文書
** [[#レイヤー固有ユーザインターフェース]]と呼ばれる機構です。この方法を用いること推奨します。
* svg要素内の'''script'''子要素 (将来廃止予定)
** htmlによるUIを伴わない実装の場合はscript要素を用いることができます。ただしsrcは属性には非対応、直接コードを埋め込む必要があります。

この機能を用いるにはSVGMapLevel0.1フレームワークを使用する場合は、拡張フレームワーク(SVGMapLv0.1_LayerUI2_r*.js)を更にロードする必要があります。SVGMapLevel0.2フレームワークの場合はデフォルトで機能します。

====レイヤー固有ユーザインターフェース====
SVGMap.jsではさらに、個々の地図レイヤー(レイヤーSVGコンテンツ)がそれぞれのレイヤーに特化した固有の演算ロジックだけでなく、ユーザーインターフェースも備えた[[#レイヤーsvgコンテンツの設定|HTMLを紐づける]]ことができる機能が拡張されています。UIも備えたより完全なwebAppをレイヤーとして実装できるため、カプセル化がより効果的に実現されます。（Layers as Web Apps, LaWA)

たとえば気象情報のレイヤーに対して気象情報の時間変化を表示するアニメーションのコントローラ(スライダーバー)や、気象情報の種類を選択するプルダウンメニュー　などのUIやロジックを任意に構築できます。

レイヤー固有ユーザーインターフェースは、[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]](SVGMap.jsをロードしたhtml)のレイヤー選択UIを通してwindowに設置されたiframe中に呼び出されます。

詳細は[[#レイヤー固有のUI]] を参照してください。



　

====例====
以下に、いくつかのこのような動的な地図コンテンツの例を示しましょう。
;検索によって表示スタイルを変更する機能を持ったレイヤー
: 例えばコンビニエンスストアのＰＯＩレイヤーを表示したとして、そのメタデータを読み取り、検索条件に基づいて（例えば深夜営業している店舗）の表示スタイルを変更するような検索機能を実装したレイヤー　メタデータは書くレイヤーごとに独特の値を持つため、その検索ロジックはレイヤーに固有のものとなることがあります。このケースではそのような機能をレイヤーに組み込むことを可能にします。
;CSVデータなどのレガシーな非SVGデータをHXRで取得し、ブラウザ上でSVG DOMツリーを生成するようなSVG地図コンテンツ。
: このケースでは、サーバからクライアントに送信されるデータの実体はSVG形式の地図データではなく、CSVなどのレガシーなデータです。SVG地図コンテンツには、CSVデータをSVGとして描画するためのデータ読み込み・解読・SVG DOMツリー生成機構を備えたjavascriptコードが含まれます。また、これよりはモダンなgeoJsonやKML等のデータをSVG DOMに変換することも容易に可能でしょう。これをより簡単に実現するためのライブラリも[[#svgMapGIStool.で呼び出せるAPI|svgMapGIStool]]に準備されています。
;タイリングされた地図コンテンツ
: それは、たとえば[https://wiki.openstreetmap.org/wiki/Tiles OpenStreepMapのTile Server]や、[https://en.wikipedia.org/wiki/Tile_Map_ServiceTileMap Tile Map Service]のような、特定のロジックによる数列のような法則性を持ったピラミッド状の地図タイルリソースをタイリングする地図コンテンツのことです。
: 更新されたSVGMapでは、地図コンテンツに内蔵されたjavascriptによるアプリケーションロジックとしてそれらを取り扱うことができます。タイリング規則をそのままウェブアプリケーションとしてで書き下し、スケールやビューポートに応じて適切なタイリング(配置)を行うSVG DOMツリーを生成するSVG地図コンテンツが構築できます。

=====タイリングに関するノート=====
[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html svgMapにおけるタイリング]は従来の地図フレームワークより柔軟で汎用的な概念に基づいています。
openLayersやleafletなどの従来の地図フレームワークでは、このようなタイリング機能は特定の固定的なタイリングロジックとパラメータを伴った機能として地図フレームワーク本体にハードコードされて提供されてきました。さらには地図フレームワークがこれらのタイリングロジックに強く依存したアーキテクチャを持っていました。一方、これらのロジックにはさまざまなバリエーションや最適化のための調整パラメータが存在し、これまで長らくその互換性や相互運用、更には効率の問題を抱えてきました。次のリンクでその多くの議論や多様な提案を参照できるでしょう。[https://wiki.osgeo.org/wiki/Tile_Map_Service_Specification TMSspecs@osgeowiki], [https://wiki.osgeo.org/wiki/Category:Tiling tiling@osgeowiki]
ベクターデータのタイリングにおいては、これらの課題はさらに増幅され、いまだ手法は確立していないといっても良いでしょう。たとえば、我々の研究では、Quad Tree Composite Tiling([https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-in-english スライド]、、[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html ペーパー])のような用途によってはもっと優れたタイリングの手法も見いだされています。

一方、これらのロジックはその多様なバリエーションを含め、javascriptによるプログラムコードとしては容易に記述可能です。多くの場合わずか数十行のロジックで記述できるでしょう。この程度のコードで多くのタイリングの手法が包含できるのであれば、特定のタイリング手法をフレームワークのコアに内包する・さらにはこれら特定のタイリングの手法にコアが依存する必要はなく、先述のウェブアプリケーションによる動的な地図レイヤーとして実装すれば良いであろうというのがSVGMapにおけるタイリング扱いです。3DマップのフレームワークであるCesiumはこれに似たタイリングポリシーを持っているようです。

=====SVG以外のデータサポートに関するノート=====
前章に記載した方針と同様、他の地図表示フレームワークと異なりSVGMapではSVGとして規定されたコンテンツ(もちろんビットイメージの埋め込みは可能)以外のネイティブサポートは行いません。例えばgeoJsonやKML, WKTなど地図業界でしばしば用いられるデータをSVGMapで表示したい場合は、変換ルーチンを埋め込んだ動的な地図コンテンツ（webAppレイヤー）としてそれらを扱います。SVGMap.jsの拡張モジュールである[[#svgMapGIStool.で呼び出せるAPI|SVGMapGIS.js]]には、これらのデータをwebAppsで読み込みSVGに変換するためのAPIがあります。

===トポロジースイート(地理空間情報処理)===
Rev.13で拡張

SVGMapLevel0.1 Revision 13以降では、SVGMapコンテンツに対してトポロジー演算機能(地理空間情報処理機能)を適用する拡張フレームワークが提供されます。この機能を用いるにはSVGMapLevel0.1フレームワークに加えて、拡張フレームワーク(SVGMapLv0.1_GIS_r*.js)をロードする必要があります。このフレームワークでは、[[#svgMapGIStool.で呼び出せるAPI|拡張されたAPI]]が利用可能です。フレームワークに内蔵された基本的な演算機能に加え、geoJSONと整合するインターフェースを備え、[https://github.com/bjornharrtell/jsts jsts]を組み込み、より高度な機能を実装するための機構も持ちます。

この機能を用いると、特定のレイヤーに登録されているポリゴンの範囲に入っている、特定のレイヤーのポイントをフィルタリングして表示の色を変更する。といったことが可能です。ただし、これらはすべてすでにブラウザ上にロードされている限られた量のコンテンツの中での演算に限定されます。もしもサーバ上にしかないデータに対してこれらの演算を試みたい場合、従来通りサーバサイド技術によってそれは実現すべきです。

また、主題情報を含むウェブマップコンテンツの多くのレイヤーがラスタータイルによって提供されているという現状を考慮し、このスイートはラスターレイヤーをカバレッジとして扱った空間情報処理を行う機能の実装も進められています。現在のところ、カバレッジとポイントとの間での演算が可能です。また、そのために便利なカラーピッカー等の付加的な機能の実装も進められています。

===オーサリングシステム===
Rev.14で拡張

SVGMapLevel0.1 Revision 14以降では、SVGMapコンテンツを編集するツール機能が実装された拡張フレームワークが提供されます。[[#svgMapAuthoringTool.で呼び出せるAPI|フレームワークが提供するAPI]]を使って、オーサリング機能を持ったレイヤーを作ることが可能です。コンテンツは、SVG DOMとして構築されます。なお編集したオブジェクトを保存したり登録するためには別のサービスやアプリケーションの開発が必要です。

===3D可視化システム===
Rev.15で拡張

[https://cesiumjs.org/ Cesium.js]を用いて、SVGMap.jsが表示できるすべてのコンテンツを3D可視化するシステムです。詳細解説はTBD ([[#svgMapCesiumWrapper.で呼び出せるAPI|フレームワークが提供するAPI]])

===プログレッシブウェブアプリケーション===
Rev.16で拡張

[https://developer.mozilla.org/docs/Web/Progressive_web_apps Progressive Web Apps]をサポートしたブラウザにおいて、SVGMap.jsをオフラインでも利用可能にする拡張機能です。詳細解説はTBD ([[#svgMapPWA.で呼び出せるAPI|フレームワークが提供するAPI]])

===SVGMapコンテンツのバックエンドソフトウェア (参考)===
本解説書は主にコンテンツ形式とユーザーエージェント側のソフトウェアについて解説していますが、サーバ・バックエンド側についてもここで少し言及します。

shapefileやcsvなどから、静的なSVGMapコンテンツを生成するためのソフトウェアが[https://github.com/svgmap/svgMapTools オープンソース]で準備されています。これらのソフトウェアでは、[[#タイリングに関するノート|高度なタイリング手法]]を用いた地図タイルを生成することができます。使用方法などは同リポジトリに用意されているチュートリアルを参照してください。

一方、もちろんSVGMapの仕様に準拠すれば、これらのソフトウェアに頼らず、自由にバックエンドを構築することができます。例えばよく知られた地図タイルサービスを用いたり、古典的な[https://wiki.openstreetmap.org/wiki/Web_feature_service WFS ]や[https://wiki.openstreetmap.org/wiki/WMS WMS]のような動的地図・地理空間情報サービスをベースにして比較的容易にそれらを構築することもできます。[https://github.com/svgmap/svgMapLv0.1/tree/master/appLayers SVGMap.jsのリポジトリのappLayersディレクトリ]にはそのようなシステムを構築する際のフロントエンド側の動的レイヤーのサンプルが掲載されています。

==第二章：SVGMap Revsion 0.1フレームワーク==
SVGMapは究極的には既存のすべてのウェブブラウザがネイティブの機能としてそれを備えることを目標とし、既存のHTML,CSS,SVGなどのウェブブラウザの標準規格との整合性を備え、且つ既存のWeb Mappingの規格との整合性をも備えた仕様として検討と標準化を進めています。しかし今のところまだその標準化は完遂されていないため、その完全な実装がなされたウェブブラウザは存在しません。一方、既存のウェブブザでSVGMapの機能が実行可能となるような拡張をJavascriptによるフレームワークとして構築することが可能です。SVGMap Revision 0.1フレームワークは、このようなJavascriptによるSVGMapの仕様に基づいた初歩的な制限と拡張がされた実装です。その実装はオープンソースとして[https://github.com/svgmap/svgMapLv0.1 こちらのgitubリポジトリ]で公開されています。

そのアーキテクチャの特徴は、ブラウザネイティブのSVGレンダラーを使用せず、HTML,CSS,HTMLCanvas2DAPIを用いてSVGMapが実装されている点です。この特徴は主にこのフレームワークの開発が開始された時期に起因しています。当時のウェブブラウザの多くはSVGが実装されていませんでした。また実装されていたとしても、大規模なベクトルデータのレンダリング、および伸縮スクロール・インタラクティブな操作に対する性能面での処理制御に問題がありました。これらの問題のいくつかは現在のブラウザで解消されているものがあるかもしれません。またこれらの問題の解決とともに、SVGMapフレームワークはLevel番号を上げつつよりネイティブの機能に基づいた実装に移行するかもしれません。<font size="-2">参考までに、[http://svg2.mbsrv.net/devinfo/devkddi/lvl0.5/ 実験的なネイティブのレンダラを用いた実装(2010年)]があります。</font>

SVGのベクトル描画機能は[https://github.com/canvg/canvg canvg]のpathパーサなどを引用することで実装されています。一方、地図としてあまり用いられないと想定された多くの要素やプロパティ、アトリビュートの実装が省略されています。

===追加・拡張された機能：===
====フレームワークの呼び出し====
本フレームワークを用いる場合、SVGMapコンテンツをブラウザに直接読み込ませることはできません。フレームワークを動作させるjavascriptライブラリをロードしたhtmlコンテンツ(WebApps)を準備し、そこでSVGMapコンテンツを読み込み表示させます。利用者には、このhtmlコンテンツのURLを告知します。このhtmlコンテンツを以降'''ルートhtml文書'''と呼ぶことにします。

SVGMapのフレームワークはgithubリポジトリ：https://github.com/svgmap/svgmapjs　で公開されています。

htmlコンテンツの<body>要素直下に以下の要素を配置します。
=====フレームワークを実装したjavascriptライブラリを読み込むscript要素=====
これがSVGMap.jsのコアのフレームワークを構成します。

<nowiki><script type="module">
import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

上のスクリプトで必要なモジュールが読み込まれます。[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]のwindowのメンバには、svgMapオブジェクトを設定しています。

[https://svgmap.org/devinfo/devkddi/tutorials/tutorial5_esm/tutorial5.html 実働サンプル(tutorial5_esm)]

もしくは https://github.com/svgmap/svgmapjs の内容を独自のウェブホストにコピーしそれを用いることもできます。(下の例は[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]のhtmlに対して、svgmapサブディレクトリにjsを置いた場合)
<nowiki><script type="module">
import { svgMap } from './svgmapjs/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

===== GISモジュールを利用する場合 =====
svgMap.jsの地理空間演算機能(GISモジュール)では、jsts.jsを使用しています。そのためGISモジュールを機能させるにはjsts.jsの読み込みが必要です。下記のようになります。もちろん独自のウェブホストにjstsをコピーしてそれを利用することも可能です。

<nowiki><script type="text/javascript" src="https://unpkg.com/jsts@1.6.1/dist/jsts.min.js"></script>
<script type="module">
import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

======本解説書でAPIを説明している、現在利用可能な拡張フレームワーク======
ECMA Script Module対応の内容に現在更新中

* [[#svgMapCesiumWrapper.で呼び出せるAPI|SVGMapLv0.1_CesiumWrapper_r*.js]] (実験的)
** https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/experimental/Cesium3D/SVGMapLv0.1_CesiumWrapper_r3.js
* [[#svgMapPWA.で呼び出せるAPI|SVGMapLv0.1_PWA_r*.js]] (実験的)
** https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/experimental/PWA/SVGMapLv0.1_PWA_r5.js

まだ実験的なsvgMapCesiumWrapperは、[http://www.svgmap.org/devinfo/devkddi/lvl0.1/cesiumSvgMap/top.html svgMap cesium visualizer]ページを参照ください。
SVGMapPWA(ProgressiveWebApp)については、[https://svgmap.org/devinfo/devkddi/lvl0.1/svgMapPWA/ SVGMap PWA Test]ページを参照ください。

=====SVGMapコンテンツを配置するためのdiv要素=====
id属性に"mapcanvas"を設定し、data-src属性(もしくはtitle属性(to be obsoluted))には、地図フレームワークが最初に読み込む、SVGMap.jsが表示する地図コンテンツの起点となるSVGコンテンツ（以降'''コンテナsvgコンテンツ'''と呼びます）のパスを指定したdiv要素を設置します。

コンテナsvgコンテンツはまた、'''[[#レイヤー|ここで記述するレイヤー]]'''を持つことができる特別のコンテンツです。

（要確認：地図のサイズ・配置はこのdiv要素のサイズとなります。無指定の場合は全ウィンドサイズ）
<nowiki><div id="mapcanvas" title="Container.svg"></div></nowiki>

<nowiki><div id="mapcanvas" data-src="Container.svg"></div></nowiki>

======差分データの指定======
data-custom-layers-root属性でContainer.svgに対するレイヤーの差分情報のパスを指定することができます。
もしくは、data-custom-layers-root属性に、レイヤーの差分情報が保管されているディレクトリを記述した場合、URLハッシュで差分ファイルを指定することもできます。
差分データは、[https://github.com/svgmap/svgmapjs/blob/main/SVGMapCustomLayersManager_r3module.html カスタムレイヤーマネージャ]で作成することが可能。（データ形式は後述）
<nowiki><div id="mapcanvas" data-src="Container.svg" data-custom-layers-root="./containerDif/dif0.json"></div></nowiki>

=====地図中心の照準イメージ。=====
参照する画像はあらかじめ用意されたもの以外も利用できます。
<nowiki><img id="centerSight" style="opacity:0.5" src="Xcursor.png" width="15" height="15"/></nowiki>

====任意で設置できる要素：====
=====[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]](後述)を設置するdiv要素=====
<nowiki><div id="layerList" style="left :30px; top: 10px; width:300px;height:90%; position: absolute; "></div></nowiki>
: idが上記の通りである必要があります。
　 styleは任意だが、heightは[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]が展開された状態におけるサイズとなります。格納された状態のサイズは、この要素における文字の縦幅となります。各種オプションについては[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|詳細を参照ください]]
　

=====[[#レイヤー固有のUI|レイヤー固有のUI]](後述)を設置するdiv要素=====
[[#レイヤー固有のUI|レイヤー固有のUI]]を使用するために設置するdiv要素です。

<nowiki><div id="layerSpecificUI" style="right :10px; top: 40px; width:400px;height:400px; position: absolute; background-color: white;opacity:0.8;display:none;"></nowiki>
<nowiki></div></nowiki>
: idが上記の通りである必要があります。styleは任意だが、heightはレイヤリストUIが展開され得る最大のサイズとなります。
　
=====伸縮ボタン=====
<nowiki><img id="zoomupButton" style="left: 5px; top: 5px; position: absolute;" src="zoomup.png" onclick="svgMap.zoomup()" width="20" height="20" /></nowiki>
<nowiki><img id="zoomdownButton" style="left: 5px; top: 25px; position: absolute;" src="zoomdown.png" onclick="svgMap.zoomdown()" width="20" height="20" /></nowiki>
: img要素かつidが上記の値である必要があります。
　伸縮ボタンを一回押すたびに伸縮する比率は、別途svgMap.setZoomRatio(ratio)で設定可能。
　デフォルトの比率はsqrt(3)
　
=====測位ボタン=====
<nowiki><img id="gpsButton" style="left: 5px; top: 45px; position: absolute;" src="gps.png" onclick="svgMap.gps()" width="20" height="20" /></nowiki>
: img要素かつidが上記の値である必要があります。ボタン押下で測位し、測位点を中心にして地図を表示する機能。表示の範囲は測位制度に応じて適当に設置されます。

=====グローバルメッセージ=====
レイヤー固有UIが任意のメッセージを出力可能にするために設置するエリア　[[#レイヤー固有のUI]]のAPI '''putGlobalMessage''' 参照
<nowiki><span id="globalMessage" style="font-size:10px;left:5px;bottom:16px;position:absolute;"></span></nowiki>
: idが上記の値である必要があります。
　styleは任意

=====地図中心の緯度経度値表示=====
<nowiki><font id="centerPos" size="-2" color="brown" style="left: 50px; bottom: 5px; position: absolute;" ></font></nowiki>
: idが上記の値である必要があります。
　styleは任意

=====地図スケールの表示=====
<nowiki><font id="vScale" size="-2" color="black" style="left: 5px; bottom: 28px; position: absolute;">-</font></nowiki>
: idが上記の値である必要があります。
: styleは任意
: 縦50pxに対応したスケール[Km]を表示します
: 近傍に縦50pxのスケールイメージを設置するとわかりやすいでしょう

=====レジューム機能のためのチェックボックス=====
<nowiki><form style="right:10px;top:20px;position:absolute;opacity:0.8" ></nowiki>
<nowiki><input type="checkBox" id="resumeBox" onChange="svgMap.resumeToggle(event)" autocomplete="off"/></nowiki>
<nowiki><label for="resumeBox"/>Keep and Resume view</label></nowiki>
<nowiki></form></nowiki>
: checkboxタイプのform要素であり、idが上記の通りである必要があります。レジューム機能とは、(rev16以前ではcookie、rev17以降ではlocalStorage)を用いて、前回最後に表示された状態（レイヤーの表示非表示状態、表示領域（view port）を再現する機能です。スタイルおよびlabel要素は任意

===== [[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]のためのスタイル=====
<style>
body {
font-family: Meiryo;
}
#layerTable{
background:#ffE0E0;
border: 2px solid #bbb;
}
.layerItem{
background-color: white;
}
.noGroup{
background-color: #fff0f0;
}
#layerList{
background-color: #ffff80;opacity:0.8;
}
</style>
====== [[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]を用いる場合、例えば上記のようなスタイルの定義が必要です。======
* layerList：レイヤーリストUI全体に対するスタイル
* layerTable：レイヤーリストUIの中のテーブルに対するスタイル。
* layerItem：同テーブルに表示される個々のレイヤー表示に対するスタイル
* noGroup：同レイヤー表示のうち、グループに属さないレイヤーに対するスタイル
　

====レイヤー====
SVGMapは古典的な地図情報システムのようなレイヤーの概念を備えていません。一方その上位概念ともみなせる、任意のドキュメントをツリー状に埋め込む機能を備えています。しかしそれでは古典的なユースケースを平易に表現しているとはいえないため、それをラップする古典的なレイヤーの概念と、それに基づくレイヤーユーザインターフェースのフレームワークを持ちます。

フレームワークが最初に読み込む地図コンテンツの起点となる'''[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]'''の中で、animationもしくはiframeを用いて（準拠規格に依る）埋め込まれるsvgコンテンツが、自動的にレイヤーとみなされます。いうまでもなくレイヤーの上下順はSVGコンテンツのスクリプト中での埋め込みの順番の逆順になります。

また、このコンテナsvgコンテンツが参照し埋め込んでいる、各レイヤーのSVGコンテンツのことを、'''[[#レイヤー|レイヤーsvgコンテンツ]]'''と呼ぶこととします。ここで、各[[#レイヤー|レイヤーsvgコンテンツ]]はさらに別のsvgコンテンツを埋め込むことがあります。これらのコンテンツはよくサブレイヤーSVGコンテンツもしくは単にサブレイヤーと呼ばれることもあります。

なお、Rev12以降のSVGMapLv0.1フレームワークではレイヤーフレームワークは本体と独立した実装となり、拡張や切り離しが可能となりました。以下は、標準で提供されるレイヤーフレームワークのVer2 (SVGMapLv0.1_LayerUI2_r*.js)に関して解説します。

レイヤーUIフレームワークが提供するUIは、先述のレイヤーリストUIを設置するdiv要素によって提供されます。このUIは以下の機能を持ちます。
* 折り畳み可能なレイヤーの一覧を表示する機能
* 各レイヤーの表示非表示を切り替える機能
* グルーピングされたレイヤー(後述)をグループとして表現、折り畳み、一括表示非表示する機能。
* そのレイヤーに紐づけられた[[#レイヤー固有のUI]]を出現させる機能。
* 表示されているレイヤーの個数などの情報を表示する機能

===== コンテナsvgコンテンツの記述内容とレイヤーフレームワークの振る舞い =====
* animation要素：　レイヤーとみなされる
** title属性: レイヤーの名称となる。(必須属性) title属性値は他のレイヤーと重複してはならない(ID(このコンテンツ内でのレイヤーの識別子)として振る舞う)
** xlink:href属性: レイヤーsvgコンテンツへの参照
** visibility属性 : レイヤーの初期の表示状態。UIにより変更できる (hidden or visible)
** opacity属性 : レイヤーの透明度
** x,y,width,height属性の振る舞いは共通(viewportがこの属性の値とintersectしていただロードされる)
** class属性: スペース区切りで規定値(複数)と任意値(一つ)を記述できる
*** 詳細は後述の[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供]]を参照
** data-controller属性: (Optional) [[#レイヤー固有のUI]]　の　[[#詳細]]参照
* globalCoordinateSystem要素：(1個つだけ必須要素)
** (コンテナsvgコンテンツにおける)本要素が、このフレームワークによってUser Agentに表示される地図の図法を規定する。
*** なお、それ以外のSVGコンテンツのglobalCoordinateSystem要素は、コンテナsvgコンテンツの図法への変換のために用いられる
*** より詳細は[[#地理座標系の処理]]を参照
* svg要素: (documentRoot要素)
** viewBox属性: 初期の表示範囲を指定。
*** ここに記述する座標値は、SVGの仕様に準ずるが、　拡張記述形式も使用可能　参照：[[#メルカトル図法のドキュメントルート要素のviewBox属性]]

===== レイヤーsvgコンテンツ =====
レイヤーsvgコンテンツは、[[#レイヤー固有のUI|レイヤー固有のUI]]を紐づけることができます。

====クリッカブルオブジェクト====
グラフィックスオブジェクトをクリック（タブレットの場合は、タップもしくは照準アイコンに合わせたうえでタップ）することでそれに紐づけられたインタラクティブ動作を実行する。インタラクティブ動作はフレームワークが独自に提供する、metadataフレームワークに基づく、メタデータの表示機能を対象とします。

なお、image要素(useによって間接的に設置されたimage要素を含む)は、a要素によるハイパーリンクが加えて実装されています。metadaとa要素の双方が設定されているimage要素では、どちらのインタラクティビティを発動させるかをモーダルダイアログによるユーザへの問い合わせが行われます。

====class属性によるレイヤーのグルーピング・クリッカブル機能の提供====
コンテナsvgコンテンツが参照するレイヤー（[[#レイヤー|レイヤーsvgコンテンツ]]）へのリンクを記述する要素(animationもしくはiframe要素)は、class属性によって、各レイヤーに特性を与えることができます。classはスペース区切りで複数指定することができますが、グループ名は一つしか認識されません。
;グルーピング
: 以下の属性値以外の値を記述すると、グループ名として認識され、同じグループ名を持ったレイヤーたちをグルーピングすることができます。グルーピングの効果はレイヤーＵＩにおけるグループ表現と、下記のbatch,switch特性です。グループはレイヤーリストUI上の表現に反映されます。最初に現れたグループ名がこのUIの下に表示されます。ただし地図画面上の描画の順番はこれとは別、SVGの基本的な描画順([https://www.w3.org/TR/SVG11/render.html#PaintersModel Painter Model])に準じます。
;batch
: グルーピングとともに使用します。そのグループに属するレイヤーを一括で表示非表示するための機能がレイヤーＵＩに付加されます。
;switch
: グルーピングとともに使用します。そのグループに属するレイヤーは、どれか一つしか表示されません。batchとの併存はできません。（無視されます（要確認））
;clickable
: Pathなどのベクトル図形要素はデフォルトではインタラクティビティが提供されません。クラス値にclickableを指定することでこのレイヤー（子供のsvgコンテンツを含む）の図形要素においてのみ、インタラクティビティが提供されます。提供されるインタラクティビティは、マウスによって図形をクリックしたとき、そのグラフィックス要素がクリッカブルな要因を備えているかどうかを検索し、備えている場合それに対応するアクションを起こします。
　なお、image要素(useによって間接的に設置されたimage要素を含む)は、このクラスの設定に依らず、a要素によるハイパーリンク、およびmetadataフレームワークを用いたクリッカブルオブジェクトとして機能します。
;editable
: 当該レイヤの[[#レイヤー固有のUI|レイヤー固有UI]]に[[#svgMapAuthoringTool.で呼び出せるAPI|svgMapAuthoringTool]]の図形編集オブジェクトを設置する場合、それを有効に機能させるためにはこの属性が必要です。(なお再編集機能を有効にするにはclickableも必要)

====data-nocache====
コンテナsvgコンテンツが参照するレイヤー（[[#レイヤー|レイヤーsvgコンテンツ]]）へのリンクを記述する要素(animationもしくはiframe要素)に、data-nocache属性をつけることによって、クライアントのコンテンツキャッシュを無効にすることができます。なお、無効化手段はunix-timeクエリパートをそのレイヤー下のすべてのリソースへのアクセスに付加させることによります。

====metadataフレームワーク====
データ格納効率に優れたメタデータのフレームワークが提供されます。このメタデータは先述のクリッカブルオブジェクトとしてインタラクティビティの実装に用いられます。 svgドキュメントルート要素のproperty属性にメタデータの属性名をカンマ区切りで列挙。同文書の図形要素のproperty属性に同じ順序でメタデータの値を記述します。(なお、xlink:title属性でマウスオーバーで機能する吹き出しを設置できます)

ひとつの文書に対して一つのスキーマ（メタデータの属性名とその順番）しか与えられないという制約を持ちます。（その代わり格納効率が高い）クリックやタッチ等によってデフォルトの状態ではブラウザが備えるモーダルダイアログに属性名と属性値がそれぞれ列挙された形で表示されます。metadata表示機能の拡張/カスタマイズについては、ウェブアプリケーションの開発の章で別途解説する'''setShowPoiProperty()'''関数を参照してください。

データ自体にカンマが含まれる場合はエスケープが必要です。

=====例：=====
<svg '''property="id,type,latitude,longitude,title,address,spec"''' ... >
...
<use transform="ref(svg,14118.37511,-4524.39994)" x="0" y="0" xlink:href="#syl8"
'''content="RIS/RJER,地方管理,45.2439994,141.1837511,利尻空港,北海道利尻郡利尻富
士町,1800×45(07/25)"''' xlink:title="利尻空港"/>
...
</svg>

====レイヤーリストUIの詳細====
[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.28.E5.BE.8C.E8.BF.B0.29.E3.82.92.E8.A8.AD.E7.BD.AE.E3.81.99.E3.82.8Bdiv.E8.A6.81.E7.B4.A0|レイヤーリストUIが設置されるdiv要素]]には、以下のプロパティを設定することで、UIの動作を調整するパラメータを与えることができます
* data-customizer [https://github.com/svgmap/svgmapjs/blob/main/SVGMapCustomLayersManager_r3module.html カスタムレイヤーマネージャ]の起動ボタンを設置し、プロパティ値で同ウェブアプリのパスを指定します。
* data-layerstylecontroller 各レイヤーの表示スタイルを調整するUIを設置します(値不要)
* data-hiddenfilter 表示されていないレイヤーをレイヤーリストUI上でも非表示にする機能を稼働させます(値不要)
* data-opened svgMapウェブアプリが起動した直後にレイヤーリストが開かれた状態にします
* data-fixed レイヤーリストが開かれた状態且つ閉じるボタンを表示させません(data-openedと排他)

===動作の制限・差異===
====再描画の制限====
* ブラウザネイティブのSVG描画機能に対して注意すべき点として、このSVGDOMの描画は、基本的に伸縮スクロールのタイミングでしか行われない点です。（ネイティブのSVG描画機能は60fpsで再描画する努力を行っている) そのため、再描画タイミングを意識・明示([[#refreshScreen|refreshScreen]]関数を使用)したアプリケーションの構築が必要になるケースがあります。
*関連情報
**[[内部機構解説#Zoom.2FPan_Controller:]]
**[[解説書#refreshScreen|refreshScreen]]
**[[解説書#setPreRenderController|setPreRenderController]]
**[[解説書#.E6.8B.A1.E5.BC.B5API|preRenderFunction ]]
**[[解説書#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|動的な地図レイヤー]]
**[[解説書#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|レイヤー固有のUI]]
**[[解説書#.E6.8B.A1.E5.BC.B5.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88|拡張イベント]]

===実装されている機能===
多くの機能が実装されていないため、実装されている機能、および拡張された機能をここでは列挙することとします。
====要素====
*path
*globalCoordinateSystem
*circle
*text
*defs
*animation
** 別のsvgコンテンツを取得して埋め込みます。
** コンテナsvgコンテンツで使用した場合は埋め込んだコンテンツは「レイヤー」と見做されます。
** それ以外で使用した場合はタイルやサブレイヤーとして使用できます。
** x,y,width,height属性は、SVGの仕様に基づき埋め込むコンテンツのtransformに影響を与えるとともに、下記の通り動的なコンテンツの読み込み機構が制御されます。
*** この属性で示された領域がtransform後のviewportと交差・包含した場合、その埋め込みコンテンツは動的に取得され表示されます。lazy loadの機構に相当し、タイリングメカニズムを構成します。
*** ただし、visible-min-zoom およびvisible-max-zoom属性で示された拡大率による表示条件を満たしていない場合は取得されません。level of detailの機構に相当します。（x.y,width,height属性と組み合わせることで、タイルピラミッド（ラスター、ベクターを含む）機構を実現します。詳しくは[http://kikakurui.com/x7/X7197-2012-01.html JISX.7197]、[https://www.w3.org/Submission/2011/04/ Tiling and Layering Moduleサブミッション]、もしくは[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html こちらの論文]を参照
** commonQuery属性：[[#レイヤーsvgコンテンツ]]のanimation要素でこの属性を設置すると、そのレイヤーのコンテンツを取得するすべてのGETリクエストのクエリパートにこの属性で設定した値が共通付加されます。(もしKey=Valueの形のクエリを追加したい場合は文字列として"Key="の部分も含めてこの属性値に設定します。)
*iframe
** animationと同等
*image
** 別のビットイメージコンテンツを取得して埋め込みます。
** animation属性のx,y,width,height属性と同様の追加のlazy loadの振る舞いを持ちます。
** visible-min-zoom およびvisible-max-zoom属性の振る舞いも同等です。
** xlink:href属性はspatial fragment をサポートし、(xywhによっ参照されるimageの部分を埋め込む機能をサポートします。)。もしもアスペクト比が異なった場合（ＴＢＤ）
** style:filterプロパティによる画像処理をサポートします。
** data-mercator-tile="true"　属性が設定されている場合、そのビットイメージはメルカトル図法で描画されていることを示します。
** htmlのimg要素のcrossoriginに対応する属性を持つことができます（この場合ビットイメージの埋め込みに際しoriginヘッダが送信）
*view

====属性====
*<code>ref(svg,x,y)</code> ：SVG1.2Tの[https://www.w3.org/TR/SVGTiny12/single-page.html#coords-transform-ref TransformRef]属性により、non-scaling objectが設置できます。Pointフィーチャの可視化に効果的です。　

'''TBD'''
*fill
*stroke
*arrow
*dasharray
*viewvox
*opacity
*style
**image-rendering : pixelated / image要素
**fill
**stroke
**opacity
*meta
**http-equiv="refresh" : [[#レイヤー|レイヤーsvgコンテンツ]]のみ。contentに秒数を設定することで、そのレイヤーを指定秒数ごとに(再読み込み)更新する。script要素はonloadが再実行される。　注：ブラウザのキャッシュが効く可能性を考慮して実装する必要がある。

==第三章：ウェブアプリケーションの開発==
本章はSVGMap Revsion 0.1フレームワークを用いたウェブアプリケーションの開発について解説します。
本フレームワークによる開発部分は以下に分類されます。
*[[#フレームワークの呼び出し|ルートhtml文書]]によるウェブアプリケーション(SVGMapフレームワーク)
* 動的な地図レイヤー(Layers as WebApps) : SVGコンテンツに以下のいずれかの情報を設定する
** [[#レイヤー|レイヤーsvgコンテンツ]]のドキュメントルート要素のdata-controller属性　[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|レイヤー固有のUI]]
** svgドキュメントに設置されたscript要素 [[#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|script要素による動的な地図レイヤー]]

===SVGMapフレームワーク===
[[#フレームワークの呼び出し|ルートhtml文書]]によるウェブアプリケーションはSVGMapLv0.1フレームワークを用いたウェブアプリケーションの基本であり、そのhtml文書と底傘参照されたjavascriptライブラリを読み込んだwindowが持つ''''svgMap''''という名前のインスタンスを用いてフレームワークのための拡張機能を利用することができます。

====SVGMapが持つ基幹オブジェクト====
SVGMapLv0.1フレームワークのインスタンス''''svgMap''''が持つ基幹のオブジェクトを解説します。これらの基幹オブジェクトはそれぞれゲッター(getSvgImages, getSvgImagesProps)によって取得できます。
=====svgImages[]=====
[[#getSvgImages|getSvgImages()]]により取得できる。svgImages[hashID]は、現在ローディングされているSVGドキュメント(“XML” DOMツリー(SVG DOMツリーというよりむしろ))が蓄積されているハッシュテーブル
*ハッシュID：フレームワークが任意に付番した文書ID。ただし、最初にロードされるルートのドキュメントのハッシュキーは、”root”
*なお、[[#レイヤー固有のUI]]のwebAppでは、そのレイヤーに該当するSVGドキュメントが[[#svgImage|svgImage]]で取得できる。

=====svgImagesProps[]=====
[[#getSvgImagesProps|getSvgImagesProps()]]によって取得できる。
同、個々のSVGドキュメントが持つ、各種プロパティが蓄積されているハッシュテーブル。
注記がない限り全てReadonly
*ハッシュID： svgImages同様
*なお、[[#レイヤー固有のUI]]のwebAppでは、そのレイヤーに該当するSVGドキュメントが持つ、各種プロパティが[[#svgImageProps|svgImageProps]]で取得できる。
======プロパティリスト======
*.Path コンテンツのパス（webAppsのdocument(html) rootに対する相対パス。Originが違う場合は絶対パス(クエリパートやフラグメント(ハッシュ)も含む)
*.CRS 地理座標からSVG座標に変換するための変換パラメータ
*.script SVG文書がscript要素を持つとき、そのscriptへのインターフェースが登録される。同script要素で生成されるオブジェクトに暗黙に登録されるメンバー変数については、[[#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|script要素による動的な地図レイヤー]]の章を参照
*.editable 編集可能レイヤーを示す　[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供|レイヤーのclass = editableに対応]]
*.editing 編集可能レイヤーを編集中
*.isClickable クリッカブルなレイヤーを示す
** true:設定　[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供|レイヤーのclass = clickableに対応]]
** 以下をメンバーに持つオブジェクト:ハイライト時のスタイルを設定可能(rev18以降)
*** .hilightFillStyle : ポリゴンオブジェクトのハイライト時スタイル（以下のメンバーが無い場合はハイライトしない）
**** .color : 塗りの色 (CSS の color値として解釈される文字列)
**** .lineWidth : 線幅
*** .hilightStrokeStyle : 線オブジェクトのハイライト時スタイル（以下のメンバーが無い場合はハイライトしない）
**** .color : 線の色 (CSS の color値として解釈される文字列)
**** .widthIncrement : 線幅の増加値
*.parentDocId このSVG文書を埋め込んでいる、親のSVG文書のハッシュID
*.childImages[hashID] このSVG文書が読み込んでいる、子のSVG文書(複数)
*.refresh
**.loadScript
**.timeout
**.start
*.controller レイヤー固有のUIへの(web appsのdoc rootに対する)相対パス
*.isSVG2 その文書がSVG2タイプの文書であるかどうか(CRSとembedの仕方がちがう）
*.rootLayer そのSVG文書が属する「レイヤー」を示す文書
*.scale そのSVG文書の現在のスケール。スケールはそのSVG文書の座標系と画面の座標系との間の値（地理座標系ではない）。拡大するとスケール値は大きくなる
*.preRenderControllerFunction そのSVG文書の再描画(画面更新)シーケンスの直前に実行される関数
*.hash そのレイヤーのURLのフラグメント部（この値は、レイヤ固有WebAppで変更が有効）

====利用可能API====
【TBD】 APIのリストは下記の通りです。
=====SVGMap.で呼び出せるAPI=====
======Geo2SVG======
*Geo2SVG( lat , lng , crs ) : 指定された緯度(lat)・経度(lng)・CRSより、SVG座標を計算する
======POIviewSelection======
*POIviewSelection( poi ) : 指定されたPOIの属性・リンクの表示選択画面を表示する。また、選択したイベントに従い、属性の表示または、リンク先のページを表示する。
======SVG2Geo ======
*SVG2Geo ( svgX , svgY , crs , inv ) : 指定されたSVG座標(svgX , svgY)をCRSにより、GEO座標に変換する。または、invにより逆変換する
======addEvent======
*addEvent(elm,listener,fn) : 指定された要素(elm)にイベント属性(listener)時の呼び出す関数(fn)を設定する (addEventListenerが実装されていなかったブラウザサポートの名残です)
======callFunction======
*callFunction( fname ,p1,p2,p3,p4,p5) : 指定した関数(fname)を引数(p1,p2,p3,p4,p5)を渡してフレームワーク内の任意の関数を実行する。(フレームワークの内部関数も呼び出すことができる)
======captureGISgeometries======
*captureGISgeometries( cbFunc , prop1 , prop2 , prop3 , prop4 , prop5 , prop6 , prop7 ): 現在画面上に表示中の地図コンテンツに対応した、GeoJsonのGeometryデータ構造に準拠のGISgeomerry情報をがレイヤ単位でまとまった連想配列の形で取り出す。非同期処理で、cbFuncの最初の引数に返却される。
** 連想配列のハッシュ値：レイヤID
** geomeryには、src(そのジオメトリのもととなっているSVGの図形要素), href(ビットイメージの場合のリンク)が付加される
** geoJsonのgeometryに相当する情報が含まれる（座標は[経度,緯度]）
** display="none"の図形要素は表示されていないとみなされる。また画面外にある図形要素も表示されていないとみなされる。画面に部分的に表示されている要素は表示されているものとみなされるとともにクリッピングも行われない。
** [[#captureGISgeometriesOption|captureGISgeometriesOption]](true)を設定してから実行すると、ビットイメージもジオメトリとして取得する。（ただし実データは含まれないので必要に応じて[[#getImagePixelData|getImagePixelData]]で取得する）
*** type : Coverage
*** src : 画像情報のURL
*** coordinates : transformのb,c==0の場合、当該画像の南西、北東端が設定される
*** transform : b,c!=0の場合の、画像の座標(左上隅を0,0、右下隅が画像のw,h)から地理座標([経度,緯度])への一次座標変換情報(a,b,c,d,e,f)が設定される

======captureGISgeometriesOption======
*captureGISgeometriesOption(BitImageGeometriesCaptureFlg, TreatRectAsPolygonFlg, SkipVectorRenderingFlg, captureAlsoAsBitImage): captureGISgeometriesでキャプチャするデータの取得条件を設定する。
** BitImageGeometriesCaptureFlg: ビットイメージタイルをカバレッジとして取得するか(Default:false)。captureGISgeometriesを呼び出す前に使用する。
*** 2019.5.17アップデートで、transform matrix(非対角要素あり)を持つビットイメージタイルについても必要な情報を得られるようになった。
** TreatRectAsPolygonFlg: rect要素をポリゴンとして扱う(デフォルトは円もrectもPointとして扱われる)
** SkipVectorRenderingFlg: ベクトル図形の描画をスキップする
** captureAlsoAsBitImage: polygon/polylineの図形を描画したビットイメージをレイヤー単位でカバレッジデータとして取得
*captureGISgeometriesOption(captureGISgeometriesOptionObject) : オブジェクトでも設定できる(rev18以降)（以下そのメンバー変数：全て値はboolean）
** .BitImageGeometriesCaptureFlag, .TreatRectAsPolygonFlag, .SkipVectorRendering, .captureAlsoAsBitImage　上と同様

======checkSmartphone======
*checkSmartphone() : タッチに対応したスマホブラウザなのかどうかを判別
======childDocOp======
*childDocOp(func , docHash , param1, param2 , param3 , param4 , param5) : 指定した文書をルートにして、DOM操作をその子文書に対して実行する。なおこれはlinkedDocOpの直系の子供のみ適用版(自身も適用しない)
======dynamicLoad======
*dynamicLoad( docId , parentElem ) : 指定した文書ID(docId)以下の表示に必要な文書を読み込み、指定したdiv要素(parentElem)に表示する
======escape======
*escape(str) : 以下の文字をHTMLエスケープする(&:&amp,":&quot;,':&#039;,<:&lt;,>:&gt;)
======geo2Screen======
*geo2Screen( lat ,lng ) : 地理座標を指定すると、その画面上のキャンバスの座標(px)を返す
======getBBox======
*getBBox( x , y , width , height ) : 指定された値でviewBoxを作成する

======getBasicPermanentLink======
* getBasicPermanentLink(copyLinkTextToClipboard) : 現在の表示状態(レイヤーの表示非表示および表示領域)を反映した基本的なパーマリンクを生成する
** URLオブジェクトが返却される
** copyLinkTextToClipboardがtrue場合、クリップボードにもURLがコピーされる。
** 生成されるURLは、[[#起動URLによるオプション指定]]の仕様に基づく
** 参考：[[#サブレイヤーパーマリンク]]

======getCentralGeoCoorinates======
*getCentralGeoCoorinates() : グローバル変数 rootViewBox,rootCrsから画面中心地理座標を得る
======getConversionMatrixViaGCS======
*getConversionMatrixViaGCS( fromCrs , toCrs ) : 元座標変換行列(fromCrs)から先座標変換行列(toCrs)への変換行列を作成する

======getCORSURL======
* getCORSURL(originalURL, alsoCrossoriginParam) : クロスオリジンアクセス用URLを生成する。([[#setProxyURLFactory|setProxyURLFactory]]の第4,5引数が設定されている場合)
** alsoCrossoriginParam クロスオリジンアクセスに際してoriginヘッダが必要かを取得する(この引数がある場合は.url, .crossorigin メンバを持つオブヘクトが返却される)
** レイヤー固有UIのウェブアプリなどで独自にクロスオリジンアクセスを行ってデータを取得するような場合にプロキシ経由のURLを生成するのに利用できます。
** 参考：[[#.E3.83.97.E3.83.AD.E3.82.AD.E3.82.B7.E3.81.AE.E8.A8.AD.E5.AE.9A|クロスオリジンアクセスのためのプロキシ設定]]

======getDevicePixelRatio======
*getDevicePixelRatio( docId ) : setDevicePixelRatioで設定した値を取得できる。 docIdが指定されなかった場合は全ての値が得られる

======getElementByImageId======
*getElementByImageId( XMLNode , searchId ) : 指定されたSVG文書群ノード(XMLNode)以下の属性iidが指定されたID(searchId)と等しいノードを返す

======getLoadErrorStatistics======
*getLoadErrorStatistics() : 伸縮スクロール、refreshScreenごとの、リソースの読み込み状況を取得する。
**メンバー変数: timeoutBitImagesCount,timeoutSvgDocCount,otherBitImagesCount,otherSvgDocCount

======getGeoViewBox======
*getGeoViewBox() : コンテナsvgのviewBoxをgeo変換したgeoのviewBoxを取得
======getHashByDocPath ======
*getHashByDocPath ( docPath ) : ターゲットのレイヤーのハッシュをPath名(docPath)から探し出す
======getHyperLink======
*getHyperLink( svgNode ) : 指定されたsvg文書(svgNode)から、親文書をたどり最初に取得できたハイパーリンクを取得
======getInverseMatrix======
*getInverseMatrix(matrix) : 逆行列を求める(matrix.a..f)
======getLayer======
*getLayer(layerID_Numb_Title) : [[#getLayerId|layerID]],title,番号,href(URI)のいずれかで、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]SVGDOMにおけるレイヤーの(svg:animation or svg:iframe)要素を取得する。getLayersと似ているが、getLayersのほうは任意のsvg文書(オプションなしではroot container)に対して、内包されるレイヤーのリストを返却。こちらは[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]に対して検索キーに基づいてレイヤーを返却する

======getLayerId======
*getLayerId( layerKey ) : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]における"レイヤ"概念のレイヤidを検索する。検索に用いることができるのは、getLayerと同じtitle,url,もしくはルートレイヤの要素
* layerIDはレイヤー名とは異なる、フレームワークによって任意に附番された、そのSVGMapドキュメントを識別するための文字列。このlayerIDを基に動作するAPIが多くあります。
* [[#レイヤー固有のUI]]　の　[[#layerID]] も参照

======getLayers======
*getLayers( id ) : オプションなしの場合、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーに該当する要素をリストアップし、返却する。オプションアリの場合、そのidを持つ要素を返却
======getLinearTransformMatrix======
*getLinearTransformMatrix(x1i,y1i,x2i,y2i,x3i,y3i,x1o,y1o,x2o,y2o,x3o,y3o) : ３つの基準点の変換前後の座標を与えると、それに適合する1次変換行列が得られる。(*i:変換前の座標, *o:変換後の座標)
======getMapCanvas======
*getMapCanvas() : 地図キャンバスとなる、おおもとのdiv要素の取得
======getMapCanvasSize======
*getMapCanvasSize() : 地図キャンバスのサイズ(画面サイズ)を取得
======getMouseXY======
*getMouseXY( evt ) : 指定されたイベント時のマウスの画面上の座標(px)を返す
======getNonScalingOffset======
*getNonScalingOffset(svgPoiNode) : 拡大縮小しても伸縮しない図形要素のオフセット値を取得する
======getObject======
*getObject( oname ) : 指定されたオブジェクト(oname)を取得
======getPoiPos======
*getPoiPos( svgPoiNode ) : =getNonScalingOffset
======getRoot2Geo======
*getRoot2Geo() : コンテナsvgのCRSの逆変換CRS( rootのsvg - > geo )を取得
======getRootCrs======
*getRootCrs() : コンテナsvgのCRS ( geo->rootのsvg )を取得
======getRootLayersProps======
*getRootLayersProps() : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の(animetion||iframeで構成される)レイヤー情報を取得する。Arrayが返却、並び順はsvgの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]と同じ（最初のレイヤーが一番下。selectメニュー創るときはひっくり返して使うこと）レイヤー情報：名称、表示非常時状態、レイヤーグループ、グループのフィーチャ(バッチ||スイッチ||ふつう)、編集可、編集中、対応SVGドキュメント、個別ユーザインターフェース、個別凡例
======getRootViewBox======
*getRootViewBox() : aspectを加味し実際に開いているコンテナsvgのviewBoxを取得
======getSvgImages======
*getSvgImages() : svg文書群(XML)の連想配列を取得(ハッシュキーは[[#getLayerId|layerID]]("root"以外は"i"+連番))
* (参考:[[#svgImages.5B.5D|svgImages]])

======getSvgImagesProps======
*getSvgImagesProps() : svg文書群のプロパティ( .Path,.CRS,.script,.editable,.editing,.isClickable,.parentDocId,.childImages,.controller)の連想配列を取得(ハッシュキーは[[#getLayerId|layerID]]("root"以外は"i"+連番))
* (参考:[[#svgImagesProps.5B.5D|svgImagesProps]])

======getSvgTarget======
*getSvgTarget( htmlImg ) : html文書中のimg要素(POI)を入力すると、対応するSVG文書の文書番号とその要素(use)が出力される。対応するuse要素を持つsvg文書自体を取得したい場合は.ownerDocumentする。idからhtml文書のimg要素を取得するには、Document.gelElementById(id)
======getSwLayers ======
*getSwLayers ( cat ) : swLayers[クラス名]に、クラス名ごとのレイヤー(のSVG要素)の全リストを構築する。catがある場合は、catの名称を持つもののリストのみを構築する
======getSymbols======
*getSymbols(svgDoc) : POI編集のsymbol選択を可能にするとともに、defsは、useより前に無いといけないという制約を払った
======getTickerMetadata======
*getTickerMetadata() : 現在Tickerが表示されているグラフィックスオブジェクトのメタデータを取得する
======getTransformedBox ======
*getTransformedBox ( inBox , matrix ) : 指定されたviewBox(inBox)を変換行列にてサイズ変更と移動のみでの座標変換する。b=0、c=0の場合のみ利用可能。たとえば、matrixには、svgImagePropsのCRSを設定することで、そのSVGMapコンテンツのSVG座標系でのviewPortが計算できる。このときmatrixは線形変換の係数が含まれたオブジェクトでも良いし、[[#.E5.A4.9A.E6.A7.98.E3.81.AA.E5.9B.B3.E6.B3.95.E3.81.AE.E5.AE.9A.E7.BE.A9.E3.81.A8.E5.88.A9.E7.94.A8|非線形変換のための関数が含まれたオブジェクト]]でも良い。　svgMap.getTransformedBox(svgMap.getGeoViewBox(),svgImageProps.CRS)

======getUaProp======
*getUaProp() : ブラウザの種類(isIE：IEかどうか、isSP：スマートフォンかどうか)を取得する
======getVerticalScreenScale======
*getVerticalScreenScale(screenLength) : 垂直(緯度)方向のscreenLengthに対する長さを取得する(input: px, return : Km)
======getViewBox======
*getViewBox( svgDoc ) : 指定したSVG文書のviewBoxを取得
======gps======
*gps() : ブラウザの測位APIによって測位しその点を中心に表示、表示縮尺は測位精度を元に適当に決定
======gpsCallback======
*gpsCallback(position) : GPS測位が成功した後に実行されるコールバック関数で、positionを中心とした場所を表示させる
======handleResult======
*handleResult( docId , docPath , parentElem , httpRes , parentSvgDocId ) : SVG文書を(docPathから)svg文書群とそのプロパティをHTTPXMLRequest(httpRes)から親文書(parentSvgDocId)の子文書(docId)として読込み、指定されたHTML要素(parentElem)に貼り付ける
======ignoreMapAspect======
*ignoreMapAspect() : 地図のアスペクト比を、rootSVGのviewBox( or hashのviewBox)そのものに設定する
======initLoad======
*initLoad() : load時に"一回だけ"呼ばれる初期化関数
======isIntersect======
*isIntersect( rect1, rect2 ): rect1(x,y,width,height)とrect2が交差(包含も含む)しているかどうかを返却
======linkedDocOp======
*linkedDocOp( func , docHash , param1, param2 , param3 , param4 , param5 ) : 再帰実行のルートになる文書のハッシュ(docHash)以下の子・孫・・・文書に対して、同じ処理(func( docHash , param1, param2 , param3 , param4 , param5 ))を再帰実行する関数
======loadSVG======
*loadSVG( path , id , parentElem , parentSvgDocId) : SVG文書を(pathから)svg文書群とそのプロパティを親文書(parentSvgDocId)の子文書(id)として読込み、指定されたHTML要素(parentElem)に貼り付ける
======matMul======
*matMul( m1 , m2 ) : 行列の積 x',y' = m2(m1(x,y)) = m(x,y) となる変換行列を構築
======numberFormat======
*numberFormat( number , digits ) : 指定された数値(number)を小数点以下第digit+1位を四捨五入した値を取得
======override======
*[OBSOLUTEWD] override( mname , mval ) : グローバルオブジェクトの関数プロパティでmnameという変数にmvalの値を代入する

======panMap======
* panMap( x, y, options ) : 地図をスムースにスクロールさせる
** x,y : パン量デフォルトはpx
** option.unit でパン量のコンテキストを変化できる
*** "%"||"percent"||"ratio" : 地図キャンバスに対する相対値で指定 (%,percentはパーセント, ratioは比率)
*** "canvas" : 地図キャンバス上の指定した座標を地図中心に
*** Note: 地理座標でパンする場所を変えたい場合は[[#geo2Screen]]を併用すると良い

======parseEscapedCsvLine======
*parseEscapedCsvLine(csv) : CSV 1行分文字列データ(csv)をエスケープを考慮して配列にパースする。
======refreshScreen======
*refreshScreen() : 画面の再描画を実行する（[[解説書#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90|参考情報]]）

======registLayerUiSetter======
*registLayerUiSetter( layerUIinitFunc, layerUIupdateFunc ) : レイヤー選択UI初期化関数と更新用関数を設定する
======reLoadLayer======
*reLoadLayer(layerID_Numb_Title) : 指定したレイヤー([[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーのみ。小孫レイヤーはNG)をリロードする
======resumeToggle======
*resumeToggle(evt) : 引数のイベント(evt)ターゲットのチェックボックスのチェック状態により、setResumeを実行する
======screen2Geo======
*screen2Geo( screenX , screenY ) : 画面上の座標(px)を指定すると、その地理座標を返す
======setCenterHitTest======
*setCenterHitTest(enable) : 自動中心ヒットテストの設定を変更するデフォルト:true

======setCursorCenterZooming======
*setCursorCenterZooming(enable) : (カーソル|ピンチ)位置中心ズーム機能を設定するデフォルト:false

======setCustomModal======
*setCustomModal( messageHTML , buttonMessages , callback,callbackParam) : モーダル画面を出現させ、指定されたメッセージ(messageHTML(String)もしくはdomオブジェクト(Object))、指定されたボタン(buttonMessages(Array))を表示する。ボタンが押された場合、コールバック関数(callback)を引数(クリックしたボタンのインデックス, callbackParam)を渡し呼び出す。
messageにHTML Stringだけではなく、DOM objectが使える点、ボタンに対するcallbackを設定できる点。ただしモーダルダイアログになる点が[[#showModal]]と異なる。

======setDefaultHilightStyle======
*setDefaultHilightStyle( style ) : ヒットテストなどによるオブジェクトのハイライト時のスタイルを設定する
* style : {stroke:{color,widthIncrement}, fill:{color,lineWidth,lineColor}}
** stroke : 線オブジェクトに対してハイライト時の色(color)と線幅増分(widthIncrement)
** fill : 塗りつぶしオブジェクトに対してハイライト時の色(color)、輪郭線幅(lineWidth)、輪郭線色(lineColor)

======setDevicePixelRatio======
*setDevicePixelRatio( dpr (, layerId) ) : zoom計算時に用いる(たとえば２にするとzoom値が本来の２分の１になる)変数を指定値(dpr)に設定する。ズームに応じた表示制御(visible*zoom属性等のLevel of Detail機能)に影響を与える。オプションの[[#getLayerId|layerId]]を指定すると、指定したlayerに対して別個の値を設定する。dprにnullを与えると初期値(1)にクリア。

======setGeoCenter======
*setGeoCenter( lat , lng , radius) : 中心地理座標を指定して地図を移動 (radiusは緯度方向の度1≒110Km) lat,lng:必須 radius:オプション(今の縮尺のまま移動)
======setGeoViewPort======
*setGeoViewPort( lat, lng, latSpan , lngSpan , norefresh) : 地理(グローバル)座標系で指定したエリアを包含する最小のviewportを設定する
======setLayerVisibility======
*setLayerVisibility([[#getLayerId|layerID]]_Numb_Title, visivility, [options]) : 指定した[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーの表示非表示を設定し、layerListUIのアップデートも行う
** layerID : String: [[#getLayerId|layerID]]のの文字列
** visivility : Boolean
** options : Object　以下のメンバー変数でオプションの指定が可能
*** .exec : String : 指定したレイヤーがレイヤー固有UIを持つ場合、その起動を指定できます。与えることができる文字列は[[#.E8.A9.B3.E7.B4.B0|data-controllerの起動オプション]]と同じ。
*** .hash : 指定したレイヤーを表示するときにハッシュ値を設定する

======setMapCanvas : ======
*setMapCanvas : ( mc ) : 地図キャンバスとなる、おおもとのdiv要素を指定した要素(mc)に設定
======setMapCanvasCSS======
*setMapCanvasCSS(mc) : マップキャンバスのCSS(postion、overflow、top、left、width、height)を設定
======setMapCanvasSize======
*setMapCanvasSize( mcs ) : 地図キャンバスのサイズを指定したサイズ(mcs)に設定
======setPreRenderController======
*setPreRenderController( layerID, cntFunc ) : 再描画(画面更新)シーケンスの直前に実行する関数(cntFunc)を設定する。　[[#getLayerId|layerID]]が指定されていると、そのIDをもつSVG文書に対して設定する。指定されていない場合は、全てのSVG文書に対して指定した関数が描画前に実行される。cnfFuncが無い場合は設定を解除する。また、cntFuncには再描画前制御の際に必要になるかもしれないいくつかの変数が第一引数にオブジェクトの形で渡される。(docId,scale,actualViewBox,geoViewBox,viewChanged(zoom|scroll|false) なお、SVGMapLayerUI.jsが有効化されている場合、[[#.E6.8B.A1.E5.BC.B5API|レイヤ固有UIのhtml文書中のscript内にpreRenderFunctionという関数]]がある場合、そのレイヤーを指定したsetPreRenderControllerでの関数設定と同じ振る舞いをする。なお、この処理内容は、動的レイヤー(<script>を持つSVGコンテンツ)のonload関数と同じタイミングで呼び出される関数をレイヤ固有UI等に設置できるものと考えると良い。

======setResume======
*setResume( stat ) : レジュームを実行するかどうかを引数(stat)によって設定し、cookieにレイヤー情報を保存する
======setRootLayersProps======
*setRootLayersProps(layerID_Numb_Title, visible , editing , hashOption , removeLayer , execOption ) : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の(animetion||iframeで構成される)レイヤー情報を設定する。[[#getLayerId|layerID]]_Numb_Titleは、レイヤー番号(root svg container内での順番)、[[#getLayerId|layerID]](svg文書のiid = htmlのid = selectのvalue)、タイトル名(不確実-同じ名前があるかもしれない。最初に当たったものを選択)。変化があるとtrueが返却される。
*visible , editingはtrue,false,nullのいずれか。nullの場合、その値を変化させないという意味。もしくは不合理の場合はfalseが返却される。この時classで設定されているレイヤーグループの特性(switch)に基づいた制御がかかる
*hashOption 指定したレイヤーを表示するとき、ハッシュを指定して表示する
*removeLayer 指定したレイヤーを消去する
*execOption レイヤ固有UIを持つレイヤーを表示する場合の起動方法を指定："hiddenOnLayerLoad", "onClick", "appearOnLayerLoad"のいずれか。[[#.E8.A9.B3.E7.B4.B0|詳細はこちらを参照]]

*setLayerVisibilityと異なり、アップデート(refreshScreen())は別途行う必要がある

======setRootViewBox ======
*setRootViewBox ( rvb ) : aspectを加味し実際に開いているコンテナsvgのviewBoxを指定したコンテナsvgのviewBox(rvg)に設定*setShowPoiProperty( func , docId ) : 特定のレイヤー・svg文書(docId)もしくは、全体に対して別のprop.表示関数(func)を指定する。funcが未指定の場合、設定された関数をクリアする。指定した関数は、帰り値がfalseだった場合、デフォルトprop.表示関数を再度呼び出す
======setShowPoiProperty======
*setShowPoiProperty(func , docId ): 特定のレイヤー・svg文書(いずれもdocIDで指定)もしくは、全体に対してPOIをクリックした時の表示関数をセットする
**セットされていないときは内蔵のデフォルト関数が使用される
**docId: セットされていないときはすべてのレイヤの docIdがルートレイヤに対応するものの場合はそのレイヤー下の子孫文書に対しても
**func: コールバック関数
*** funcがセットされいていないときはクリアする
*** funcの第一引数にはクリックされた要素が入る

======setSmoothZoomInterval======
*setSmoothZoomInterval(zoomInterval) : ズームアニメーションの設定(ズームイン／アウト後のタイル読み込み開始タイマー(ms))(Default:20ms)
======setSmoothZoomTransitionTime======
*setSmoothZoomTransitionTime(zoomTransitionTime) : ズームアップ[[#zoomup]]／ダウン[[#zoomdown]]／パン[[#panMap]]時の遷移時間(Default:300ms)

======setSummarizeCanvas======
*setSummarizeCanvas( val ) : 2Dベクトル図形描画用に統合キャンバス(レイヤー単位でのキャンバス統合)の使用有無を設定する。デフォルトは統合する
======setUpdateCenterPos======
*setUpdateCenterPos(func) : 中心座標書き換え関数を指定した関数に設定(デフォルト:id="centerPos"要素の文字列を適当に書き換える)
======setProxyURLFactory======
*setProxyURLFactory( documentURLviaProxyFunction, imageURLviaProxyFunction, imageCrossOriginAnonymous, imageURLviaProxyFunctionForNonlinearTransformation, imageCrossOriginAnonymousForNonlinearTransformation, LaWAfetchviaProxyFunction ): コンテンツの取得をプロキシ経由等にするために、URL(文字列)を書き換える関数を指定する。
** documentURLviaProxyFunction : svgドキュメント用のプロキシ経由のURLを生成する関数をここに設定する。<code>URLviaProxy = documentURLviaProxyFunction(URL)</code>
** imageURLviaProxyFunction : 同ビットイメージ用
** imageCrossOriginAnonymous : ビットイメージのコンテンツ取得に際しcrossorigin = "anonymous"を設定
** imageURLviaProxyFunctionForNonlinearTransformation: ビットイメージへの非線形図法変換専用のプロキシ経由URL生成関数を設定する。
** imageCrossOriginAnonymousForNonlinearTransformation : 同上のコンテンツ取得に際しcrossorigin = "anonymous"を設定
** LaWAfetchviaProxyFunction : [[#レイヤー固有ユーザインターフェース|LaWA]]内のFetch/XHRに対してプロキシ経由URL生成関数を設定する。
** 参考：[[#.E3.83.97.E3.83.AD.E3.82.AD.E3.82.B7.E3.81.AE.E8.A8.AD.E5.AE.9A|クロスオリジンアクセスのためのプロキシ設定]]

======setZoomRatio ======
*setZoomRatio ( ratio ) : zoomUp、zoomDownボタン押下時のズームレシオを指定した値(ratio)に設定する
======showModal======
*showModal( htm , maxW, maxH) : ダイアログ表示フレームワークを呼び出し、指定したhtm文字列を最大maxW,H値の中で表示する。closeボタンはフレームワークで設置される（参考[[#setCustomModal]]）（API名に反して、この関数はモーダルダイアログではない、ダイアログボックスの挙動を取る）
** htm：ダイアログ内に表示するhtmlのソース文字列、もしくはHTML DOM Elementオブジェクト
** maxW, maxH : Optional: ダイアログのサイズ（もしウィンドサイズに収まらない場合は、このサイズを下回ることがある。指定されていない場合はhtmの内容をベースにサイズが変化する


======showPage======
*showPage( hyperLink ) : 指定されたハイパーリンク先のページを表示する。ハッシュだけの場合は viewPort変化をさせる
======showUseProperty======
*showUseProperty( target ) : 指定されたPOI( target )の属性情報を表示する
======transform ======
*transform ( x , y , mat , calcSize , nonScaling) : 指定された座標を変換する。
======updateLayerListUI======
*updateLayerListUI() : レイヤーリストのUIの表示を更新したりレイヤー固有UIを設定したりする
** '''[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のsvgmap文書をDOMで直接編集したり、setRootLayersPropsで操作した場合、この関数を呼ばないとレイヤ固有UIが正しく設定されないなど多くの処理が破綻するので、必ず呼ぶ必要がある。(近い将来refreshScreenで自動的に反映されるようにする予定)'''

======zoomdown======
*zoomdown( ratio ) : 地図をスムースにズームダウン
** ratioはオプション(デフォルトは1.732)

======zoomup======
*zoomup( ratio ) : 地図をスムースにズームアップ
** ratioはオプション(デフォルトは1.732) (デフォルトは[[#setZoomRatio]]で変更可)

=====svgMapAuthoringTool.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_Authoring_r*.jsを用いた場合に使える
======cancelPointingPoiRegister======
* cancelPointingPoiRegister: initPOIregistToolで設置したUIの地図クリック・タッチでの座標入力イベント(click, touchend)をキャンセルする
======clearTools======
*clearTools: オーサリングツールを除去する。
======initGenericTool======
*initGenericTool(targetDiv,poiDocId,cbFunc,cbFuncParam,options): 点、線、多角形（オプションでそれらのバッファ付き）の総合オーサリングツールを初期化する。
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** options: {withBufferedTools,editingStyle,shapeStyle}　その他オプションをオブジェクトで指定(Optional)
*** withBufferedTools: boolean: trueでバッファ付きツールを追加
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルをブジェクトで指定
*** editingStyle: {opacity,strokeWidth,stroke,fill}：編集中の表示スタイルをブジェクトで指定
*** useXlinkTitle: trueでタイトル編集欄付きツール (Pointツールには影響しない)
*** styleEditor: trueでスタイル編集UI追加

======initPOItools======
*initPOItools(targetDiv,poiDocId,cbFunc,cbFuncParam,getPointOnly,returnSvgElement,options)　: 複数のPOIを編集するツールを初期化する (このツールは一個しか設置できない)
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** getPointOnly : ポイントを取得するのみで、その点にuse要素を設置することはしない(Optional)
** returnSvgElement : trueで編集したSVG要素などがコールバック関数に構造化され返却される(Optional)
** options : {bufferOption,editingStyle,shapeStyle}: その他のオプションをオブジェクトで指定(Optional)
*** bufferOption : trueでバッファ付きツール
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルを指定 (buffer指定時に有効)
*** styleEditor: trueでスタイル編集UI追加

======initPOIregistTool======
*initPOIregistTool(targetDiv,poiDocId,poiId,iconId,title,metaData,cbFunc,cbFuncParam,getPointOnly,returnSvgElement): 一個のPOINTオブジェクトの登録ツール・座標入力ツールを初期化する
** initPOItoolsと異なりこちらのツールは複数個設置できる
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** poiId : 登録するPOIのIDを指定
** iconId : 対象文書内のアイコンのIDを指定
** title : アイコンのタイトルを指定
** metaData : アイコンのメタデータ文字列を指定
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** getPointOnly : ポイントを取得するのみで、その点にuse要素を設置することはしない(Optional)
** returnSvgElement : trueで編集したSVG要素などがコールバック関数に構造化され返却される(Optional)
======initPolygonTools======
*initPolygonTools(targetDiv,poiDocId,cbFunc,cbFuncParam,isPolylineMode,options): POLYGONオブジェクトの"編集"ツール新規追加、削除、変更などが可能　ただし一個しか設置できない
** コンテナsvgコンテンツでclickable及びeditableを設定したレイヤーで再編集可能
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
*** 第一引数に成否、第二引数にcbFuncParam が入る。作成したPOIの情報は、SVGDOMから得るか、指定したdiv内に生成されているフォームから得る（少し使いづらいので、今後もう少し便利にするかもしれません）
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** isPolylineMode : ポリゴンではなくポリラインの編集ツールとする
** options : {bufferOption,editingStyle,shapeStyle}: その他のオプションをオブジェクトで指定(Optional)
*** bufferOption : trueでバッファ付きツール
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルを指定
*** editingStyle: {opacity,strokeWidth,stroke,fill}：編集中の表示スタイルを指定
*** useXlinkTitle: trueでタイトル編集欄付きツール
*** styleEditor: trueでスタイル編集UI追加

======setTargetObject======
*setTargetObject: TBD プログラムから編集対象オブジェクトを指示する（ただし編集中レイヤのオブジェクトに限る）
======isEditingGraphicsElement======
*isEditingGraphicsElement: 編集中のオブジェクトがあるかどうかを確認する

=====svgMapGIStool.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_GIS_r*.jsを用いた場合に使える。なお本機能拡張はJSTS([https://unpkg.com/jsts@1.6.1/dist/jsts.min.js jsts.min.js])の読み込みがさらに必要。

====== 参考：JSTS ======
[https://github.com/bjornharrtell/jsts/ JSTS](JavaScript Topology Suite)は、[https://github.com/locationtech/jts JTS](Java Topology Suite)をjavaScriptに移植した地理空間情報処理ライブラリです。地理空間情報の標準に準拠したAPIを備えています。
* [https://github.com/bjornharrtell/jsts JSTSのプロジェクトページ]
* [http://locationtech.github.io/jts/javadoc/ API](JTS用、JSTSもこれに準ずる)
* [https://www.tsusiatsoftware.net/jts/files/JTS_Library_for_Geometry_2011.pdf JTSの機能概要スライド]

====== buildDifference======
* buildDifference( sourceId1, sourceId2, targetId , strokeColor, strokeWidth, fillColor, progrssCallback, getResultAsGeoJsonCallback,getResultAsGeoJsonCallbackParam)
** JSTSのDifferenceを実行
** 引数はbuildIntersectionの該当引数に対応

======buildIntersection======
*buildIntersection( sourceId1, sourceId2, targetId , strokeColor, strokeWidth, fillColor, progrssCallback, addSourceMetadata, getResultAsGeoJsonCallback, getResultAsGeoJsonCallbackParam, options )
** sourceId1とsourceId2のレイヤーに対してJSTSのIntersectionを実行し、結果をtargetIdレイヤーにコンテンツとして出力する。性能はgetIncludedPointsより低いことが多い intersection処理の振る舞いは[https://bjornharrtell.github.io/jsts/ JSTSを参照]
** sourceId1: sourceId1レイヤーのレイヤーID
** sourceId2: sourceId2レイヤーのレイヤーID
** targetId : targetId レイヤーのレイヤーID
** strokeColor : 線の色 (なお、strokeColor, strokeWidth, fillColor のいずれも指定ない場合は描画しない(getResultAsGeoJsonCallbackがあればそこに結果を変換するのみ))
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** progrssCallback: 変換途中の状況が返されるコールバック関数。
** addSourceMetadata: sourceId1とsourceId2の各図形要素に付随しているメタデータ(contentアトリビュートの値)を演算結果の該当する図形要素に結合して付加する。
** getResultAsGeoJsonCallback: 演算結果をgeoJsonで返却を受けたい場合にコールバック関数を指定する。第一引数に結果が返る
** getResultAsGeoJsonCallbackParam : 上記コールバック関数に送りたい引数(第二引数に入力される)
** options: その他のオプションを指定するオブジェクト(下記、メンバ変数)
*** uniteSource1: trueでsourceId1のジオメトリ群をuniteしてから演算する
*** uniteSource2: trueでsourceId2のジオメトリ群をuniteしてから演算する
*** areaCompare: trueで演算結果と元のジオメトリとの面積比をメタデータに付与
*** resultGroupId: 演算結果を生成するグループを指定
*** opacity: 透明度

======captureGeometries======
*captureGeometries( cbFunc , opt ) : svgMap.captureGISgeometriesの引用
====== coverageImageXY2LatLng======
* coverageImageXY2LatLng(pixWidth , pixHeight, px,py,targetCoverage) : ビットイメージカバレッジのピクセル座標から地理座標を算出する関数
** pixWidth, pixHeight : ビットイメージカバレッジのサイズ
** px,py : ビットイメージカバレッジのピクセル座標
** targetCoverage : getInRangePolygonParts で得られた返り値を設定する
====== drawGeoJson======
* drawGeoJson( geojson , targetSvgDocId, strokeColor, strokeWidth, fillColor, POIiconId, poiTitle, metadata, parentElm, metaDictionary) : geojsonのgeomerty を指定したレイヤーに描画する
** geojson : geojson データのgeopmetry
*** メタデータ : メタデータはgeojsonの本来のメタデータ仕様(type:Featureのオブジェクトにpropertiesを設置する)で設定可能
**** また、連想配列もしくは配列の形で、関数の呼び出し時のmetadataパラメータでデフォルトのメタデータを指定できる。
**** また、geoJSONの任意のデータ階層にmetadataプロパティとしても埋め込める。
**** 加えて、propertiesを同様に任意のデータ階層に設定できる(この場合、上の階層の値は下の階層の値で上書きされる)
*** スタイリング : メタデータ仕様を拡張した、geojsonの[https://github.com/mapbox/simplestyle-spec mapbox拡張仕様]に基づいて、描画スタイルを各Featureに設定可能　上記の拡張properties拡張により、デフォルト描画スタイルを設定することも可能。
**** marker-sizeは未実装。marker-symbolではsvgコンテンツのdefsで登録済みのアイコンのIDを指定する。
**** 参考: properties.で設定できる、スタイル属性名: <code>title, description, marker-size, marker-symbol, marker-color, stroke, stroke-opacity, stroke-width, fill, fill-opacity</code>
** targetSvgDocId : 描画先のレイヤーID
** strokeColor : 線の色
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** POIiconId :　Pointの場合のアイコンID(あらかじめ指定した描画先のレイヤーのコンテンツに該当IDのアイコンが定義されている必要がある)
** poiTitle : POIのタイトル
** metadata : POIのメタデータ（連想配列）
** parentElm : (Optional) 指定した要素の子要素として描画
** metaDictionary: (Optional) メタデータとして要素に埋め込みたい属性名のリストを配列で指定する（これ以外の属性は無視するようになる）

====== drawKml======
* drawKml( kml , targetSvgDocId, strokeColor, strokeWidth, fillColor, POIiconId, poiTitle, metadata, parentElm,styleData) : KMLを指定したレイヤーに描画する
** KML : KML 描画するKMLデータのXML DOM
** targetSvgDocId : 描画先のレイヤーID
** strokeColor : 線の色
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** POIiconId :　Pointの場合のアイコンID(あらかじめ指定した描画先のレイヤーのコンテンツに該当IDのアイコンが定義されている必要がある)
** poiTitle : POIのタイトル
** metadata : POIのメタデータ文字列
** parentElm : (Optional) 指定した要素の子要素として描画
** styleData : TBD

====== getBufferedPolygon ======
* getBufferedPolygon(geom,bufferLength) : 任意のジオメトリ(geom)に対して、指定のバッファ長[m]のポリゴンジオメトリを生成する。
** Note: [[#captureGISgeometries]]で取得したデータ等も演算対象にすることができる。

====== getColorString ======
* getColorString(r,g,b) : r,g,b値から、webColor文字列を生成する

======getExcludedPoints======
*getExcludedPoints(poiID, polyID, cbFunc, param , progrssCallback , pointOnly ) : 指定したpoiID検索対象レイヤーのうち、指定したpolyIDポリゴンコンテンツレイヤーのポリゴンに内包されないものを抽出する。
** パラメータはinverseを除きgetIncludedPointsと同じ。
====== getImage======
* getImage(sourceData, renderingOptions ) : メッシュデータからビットイメージ(mage/pngのdataURL)を生成
** sourceData : 以下のデータ構造を持つオブジェクト
*** width, height メッシュのピクセル数
*** rasterData[py][px] 以下のデータ構造を持つオブジェクト
**** color 以下のデータ構造を持つオブジェクト
***** r,g,b,a
**** inRange : boolean
** renderingOptions : 以下のデータ構造を持つオブジェクト
*** drawOutOfRange : boolean レンジ内ではなくレンジ外を描画する
*** fillColor : boolean 上記条件のピクセルを指定した色で描画する
*** useCoverageColor 上記条件のピクセルをカバレッジの色で描画する

====== getImagePixelData======
* getImagePixelData(capturedSvgMapGeometry, callBackFunction, param) : ラスタ画像のビットマップデータを取得する。
** capturedSvgMapGeometry : [[#captureGISgeometries|captureGISgeometries]]で取得したビットイメージカバレッジのジオメトリ情報をもとに取得する
** callBackFunction : 取得したビットイメージデータが引数に渡される
*** data : RGBA intArray ( CanvasのContext.getImageData(...).dataで得られる情報と同様のデータ)
*** width
*** height
*** param : getImagePixelDataの第三引数がそのまま渡される

====== getIncludedPoints======
* getIncludedPoints(poiID, polyID, cbFunc, param , progrssCallback , inverse , pointOnly ) : 指定したpoiID検索対象レイヤーのうち、指定したpolyIDポリゴンコンテンツレイヤーのポリゴンに内包されるものを抽出する。
** poiID : 検索対象コンテンツレイヤーのレイヤID
** polyID : ポリゴンコンテンツレイヤーのレイヤID
** cbFunc : 検索完了後の結果を返却するコールバック関数　第一引数にポイントがGeoJasonのGeometry形式で返却され、第二引数にその個数、第三引数に(あれば)下記paramが返却される
** param : cbFuncに渡す任意パラメータ(第三引数に入る)
** progrssCallback : 変換途中の状況が返されるコールバック関数。　変換中　時々呼び出され、変換状態[%]が第一引数に渡される。
** inverse : trueで getExcludedPoints
** pointOnly : trueの場合検索対象コンテンツレイヤーのジオメトリがPoint以外の物は無視、false(もしくは未設定)の場合はPolygonやMultiLineStringのデータの場合中心点をPointと見立てて検索なお、ポリゴンやポリラインのしっかりした処理を期待する場合は下記のbuildIntersectionを使用すべき。
====== getInRangePoints======
* getInRangePoints(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : 検索対象のPointジオメトリが、検索条件としてのラスターデータ(カバレッジ)の特定色域に入っているものを検索する（ラスターGIS機能）
** poiID_or_points : 検索対象のPointジオメトリのあるレイヤIDもしくは、geoJsonのPointジオメトリ自体
** coverIDラスターデータ(カバレッジ)のレイヤーID
** rangeData : 色域 .hue, .satulation, .value, .alphaをそれぞれ指定する
*** hue: 0..360
*** satulation, value, alpha : 0..100
*** .hue, .satulation, .value, .alphaそれぞれのレンジは<nowiki>[[range1Min,Max],[range2Min,Max],...[rangenMin,Max]]</nowiki>の形で指定する。
*** データがない場合のデフォルトは<nowiki>{hue:[[0,360]],satulation: [[10,100]],value:[[10,100]],alpha:[[10,100]]}</nowiki> : アルファが10以上の全ての色
*** .outOfBoundsColor : TBD {r:255,g:0,b:0} の形で色を指定するとその色のピクセルは領域外(存在しないもの)として評価をスキップする
** cbFunc : 検索完了後の結果を返却するコールバック関数　第一引数にポイントがGeoJasonのGeometry形式で返却され、第二引数にその個数、第三引数に(あれば)下記paramが返却される
** param : cbFuncに渡す任意パラメータ(第三引数に入る)
** progrssCallback : 変換途中の状況が返されるコールバック関数。　変換中　時々呼び出され、変換状態[%]が第一引数に渡される。
** preCapturedGeometry : svgMap.captureGISgeometries()であらかじめ取得したgeometryがある場合、それを投入するとそれを用いて処理する
** computingOptions : getInRangeGeometriesOnCoverageを参照
====== getInRangeLineParts======
* getInRangeLineParts(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : ラインストリングジオメトリ用のラスターGIS機能パラメータはgetInRangePoints()と同じ
====== getInRangePolygonParts======
* getInRangePolygonParts(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : ポリゴンジオメトリ用のラスターGIS機能パラメータはgetInRangePoints()と同じ

====== getInRangeGeometriesOnCoverage======
* getInRangeGeometriesOnCoverage(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry, computingOptions ) : getInRange*を包含する関数
** computingOptions.targetVectorTypeで以下を設定することでそれぞれの機能を動かすことができる
*** 0:point,1:polyline(multiLineString),2:polygon
** computingOptions:
*** overlappingCoverage : "or"
*** splitByCoverage : boolean カバレッジが複数のビットイメージ(タイル)で構成されている場合、タイルごとに分割した答えを返す
***
====== haltComputing======
* haltComputing() : getIncludedPoints, getExcludedPoints, buildIntersectionを中断する
====== imageUrlEncoder ======
* imageUrlEncoder : オリジナルのURLから、setImageProxyの設定を加味したURLを生成する関数
====== latLng2coverageImageXY======
* latLng2coverageImageXY(pixWidth , pixHeight, lng,lat,targetCoverage) : 地理座標からビットイメージカバレッジのピクセル座標を算出する関数
** pixWidth, pixHeight : ビットイメージカバレッジのサイズ
** lng,lat : 地理座標
** targetCoverage : getInRangePolygonParts で得られた返り値を設定する
====== latLng2GeoJsonPoint======
* latLng2GeoJsonPoint(lat , lng ) : 緯度経度をGeoJsonのPointジオメトリに変換する
====== renderImages ======
* renderImages(sourceDataArray, parentElment, crs, renderingOptions) : ビットイメージカバレッジ×ポリゴンGIS(getInRangePolygonParts)の結果を直接可視化する
**sourceDataArray : [[#getInRangePolygonParts]]の結果を設定
**parentElment: SVGMapコンテンツ内で描画する親要素を設定
**crs: 描画するSVGMapコンテンツのCRS matrix(a,b,c,d,e,f)を設定
**renderingOptions : [[#getImage]]を参照

====== setImageProxy======
* setImageProxy( url , directURLls , useAnonProxy): getInRangePointsは、canvasを使った処理のため、CORSの制約にかかる場合、proxyを設定して回避できる。
** url : encodeURIComponent()でエンコードしたカバレッジのレイヤーのビットイメージのURLを付加すると、proxyとしてimageを返却してくれるURL文字列を指定
** directURLls : proxyを使わず直接アクセスするコンテンツを判定するための文字列の配列（この文字列のどれかが含まれていたら直接アクセス）
** useAnonProxy : Image.crossOrigin = "anonymous"を指定してアクセスする

====== hsv2rgb ======
* hsv2rgb(h, s, v) : hsv値からrgb値の色情報変換
** h (hue): 0..360
** s (saturation): 0..100
** v (value): 0..100
** 帰り値 : {r,g,b}: いずれも0..255

====== rgb2hsv ======
*rgb2hsv(r, g, b): RGB値からHSV値の色情報変換
** rgb: いずれも0..255
** 帰り値:{h,s,v}
*** h:0..360
*** s,v: いずれも0..100

=====svgMapLayerUI.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_LayerUI2_r*.jsを用いた場合に使える。
======assignLayerSpecificUiElement======
* >r4
* assignLayerSpecificUiElement( targetElement , isInline , autoSizing) : レイヤ固有UIを出力する先のDOM要素を指定する
** この関数は、レイヤーUIの初期化前～[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]読み込み前に呼ばれる必要がある（すなわち、load時のみ有効）
** targetElement : 出力先要素：出力先はsvgMapオブジェクトを持つwindowでなくても良い
** isInline : boolean 指定した要素をインライン要素として扱い、UIが存在しえない場合は消える。レイヤ固有UIを消すボタンも付与される
** autoSizing : boolean 自動リサイズを有効化

======customEvents======
*customEvents() : サポートしているイベントを返却

======launchController======
* >r4
* launchController(layerID, cbf) : レイヤ固有UIを出現させる。ただしそのレイヤーがレイヤー固有UIを持っており、且つ表示状態になっている必要がある。
** [[#getLayerId|layerID]] : レイヤーのID
** cbf (optional) : レイヤー固有UIが生成されたとき、第一引数にレイヤー固有UIのwindowオブジェクトが返却される。

======layerSpecificUIhide======
* layerSpecificUIhide() : レイヤ固有UIを隠す

======setLayerListmessage======
* setLayerListmessage( head , foot ) : head 及び footで指定した文字列を　レイヤリストUIのトップのメッセージに設定する。[head]numberOfVisibleLayers[foot] : デフォルトはhead :"Layer List: ", foot :" layers visible"

=====svgMapPWA.で呼び出せるAPI=====
'''実験的機能段階''' :
; 以下のAPIは、SVGMapLv0.1_PWA_r*.jsを用いた場合に使える。
:- SVGMap.jsをPrpgressiveWebApps(PWA)として動作させ、オフラインでも利用できるウェブアプリを構築することができる。
:- Progressive Web Appsが機能するブラウザで有効。Chrome,Edge(PC,Android), Safari(Apple製品)
:- iOS SafariのPWAネイティブキャッシュの50MB制限を回避するIndexedDBによる実装がなされており、そのクォータが許す限りの(iOSでも数百MB以上の)オフライン地図コンテンツを利用できる
:- 同じく、iOS Safariが持たないsyncの一部を代替する機能(オンラインになったらポストする機能)が利用できる
:- zip圧縮されたオフラインコンテンツパッケージ読み込み機構を使う場合はzip.jsおよびそれが利用するArrayBufferReader.js,deflate.js,inflate.jsの読み込みが必要。
:- <code>serviceWorkerPath</code>グローバル変数で、専用のサービスワーカープログラムsvgMapServiceWorker_r*.jsのパスを指定する必要がある。
::- サービスワーカー～svgMapServiceWorker_r*.jsは、同jsと同じディレクトリにあるbaseResources.jsonを読み込み初期設定を行う
::- baseResources.json：　srcにサービスワーカーネイティブのキャッシュに読み込むべきリソースのリストを記載、mapCacheTargetに、SVGMapのコンテンツキャッシュを稼働させるターゲットとなるパスを記載
::-baseResources.jsonの例
<pre>
{
"src": [
"index.html",
"Container_mercator_org.svg",
"SVGMapLv0.1_PWA_r5.js",
"js/SVGMapLv0.1_r16.js",
"js/SVGMapLv0.1_LayerUI2_r3.js",
"js/SVGMapLv0.1_GIS_r2.js",
"js/SVGMapLv0.1_Authoring_r7.js",
"js/jsts.min.js",
"imgs/gps.png",
"imgs/gps_s.png",
"imgs/Xcursor.png",
"imgs/zoomdown.png",
"imgs/zoomdown_s.png",
"imgs/zoomup.png",
"imgs/zoomup_s.png",
"imgs/mappin.png"
],
"mapCacheTarget":"localMaps/"
}
</pre>

* autoPilotDownloader
*:エリアと縮尺を指定し、オートパイロットで地図画面をスクロールさせることで、オフラインキャッシュに地図を保存する動作を自動的に行う機能のオブジェクト。レイヤー固有UIでの利用などを想定しており、以下のメンバー関数を持つ
** halt()
**:オートパイロット動作を中断させる
** searchAll(initialViewBox, minScale, maxScale)
**:- initialViewBoxで指定したエリアを、minScale、maxScaleの間でオートパイロットをかけキャッシュに保存させる
**:- minScale, maxScaleは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の座標系におけるscale値(getRootScale()で取れるもの)
** setProgressCallBack(cbf)
**:オートパイロット動作中の進行状況をcbfの第一引数に返却する
* async clearOfflineContents()
*:SVGMapのオフラインコンテンツを全消去する。SVGMapのオフラインコンテンツはserviceWorkerのネイティブキャッシュ機構とは別の独自キャッシュ機構(indexedDBを使用した機構)として構築される
* clearCache()
*:（未実装）serviceWorkerのネイティブキャッシュを全消去する
* cacheDB
*:SVGMapのオフラインコンテンツデータベースのオブジェクト。IndexedDBをpromise化した簡略的APIをメンバ関数として持つ。
** clear()
**:データベースをクリア
** async connect()
**:データベースに接続
** async delete(path)
**:pathで指定したコンテンツを削除
** async get(path)
**:pathで指定したコンテンツ(blob)を取得
** async getAll()
**:全コンテンツを取得
** async getAllKeys()
**:全Key(コンテンツのpath)を取得
** async put({idCol:path,contentBlob:blobdata})
**:コンテンツ(blobdata)をpathをキーにして格納(上書き)
* deleteCachedLayerMeta()
* async disableCache()
*:serviceWorkerのネイティブのキャッシュ機構とSVGMapの独自キャッシュ機構を全て無効化する
* async enableCache()
*:serviceWorkerのネイティブのキャッシュ機構とSVGMapの独自キャッシュ機構を全て有効化する
* getCachedLayerMeta
* async getPostQueue()
*:postMessageWhenConnectedでポストをリクエストし、未完了のリクエストを取得する
* getRootScale()
*:svgMapの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]座標系における現在の表示のscaleを取得
* getScales()
*:読み込み済み文書全てのscaleを連想配列で返す(hashKeyはdocID)
* getVisibleLayers
* getStorageUsage
* async loadOfflineContents(contentUrlList, overwrite, progressCallBack)
*:-contentUrlListで指定したコンテンツをオフラインキャッシュに読み込む(自ドメイン内のコンテンツ限定)
*:-overwriteをtrueにすると上書きする。progressCallBackは指定した関数の第一引数に進捗状況を返却
* async loadZippedOfflineContents(zip_url,progressCallBack)
*:保存してあるディレクトリに対して、そのzipファイルの中のディレクトリ構造で、コンテンツがあるものと見做したURLもつキャッシュを形成する
* async postMessageWhenConnected(URL, postData, postCompleteCBF)
*:-postDataデータをURLにポストする　オンライン時は即座にポスト、オフライン時はいったんindexedDBにポストデータを格納後オンラインになったらポストする。
*:-postDataは、文字列(この場合form-data決め打ちのリクエスト)、もしくは .bodyメンバー変数を持ったオブジェクト
*:-この場合は .bodyはFormDataタイプのインスタンスもしくは任意のデータ、そしてfetchAPIに準じた.headers, .methodをメンバー変数に持たせることができる。(methodでGETを指定すればGETリクエストも可能)またserviceWorkerが管理する
* async setCachedLayerMeta
* setScaleTrim
* async updateCacheIndex()

=====svgMapCustomLayersManager.で呼び出せるAPI=====

'''実験的機能段階''' :

基本的なフレームワークで提供されているレジューム機能を更に強化し、レイヤーの表示非表示状態、初期表示エリア(viewPort)等をユースケースなどに応じて複数登録、切り替えを可能とする機能を提供します。更に[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]をさらに積極的に編集し、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルに無いレイヤーを追加したり、削除したりした、カスタマイズされた[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]を差分情報の形でlocalStorageに保存・利用する機能を提供します。

:- 以下のAPIは、SVGMapLv0.1_CustomLayersManager_r*.jsを用いた場合に使用できます。
:- SVGMapLv0.1_CustomLayersManager_r*.jsは、svgMapオブジェクトもつwindowで使用するとともに、svgMapオブジェクト用のカスタムレイヤーセットを構築するための別ページのwebAppsにおいても使用することができます。
:- 上記svgMapオブジェクト用のカスタムレイヤーセットを構築するためのwebApps用としてSVGMapCustomLayersManagerApp_r*.js、SVGMapCustomLayersManager.htmlが用意されています。

*registCustomLayer(customLayerObject, applyImmediately, customLayerMetadata)
*applyCustomLayers(customLayersObject, baseLayersPropertySet)
*getDetailedLayersPropertySet(rootContainerDoc, ignoreIid)
*getDetailedLayersPropertySetFromPath(rootContainerUrl, ignoreIid)
*getDif( edit, orig )
*originalLayersProperty
*deepCopy(obj)
*deleteAllCustomLayerSettings()
*deleteCustomLayerSetting( key )
*setCustomLayerSettingIndex(key)
*buildCustomLayersSetting(difObj, editedLayersProperty, originalLayersProperty)
*loadCustomLayerSettings()
*storeCustomLayerSettings( settings )
*getElementByAttr( XMLNode , searchId , atName )

*applyCustomLayersSettingsToCurrentMapView(lpEdit, svgMapWin)
*loadCustomGeoViewboxes()
*storeCustomGeoViewboxes(customViewBoxes)
*buildCustomGeoViewboxSettingObject(key, title, geoViewBoxX, geoViewBoxY, geoViewBoxWidth, geoViewBoxHeight)

====起動URLによるオプション指定====
svgMapフレームワークを導入したhtmlコンテンツは、URLの"#"以降であるフラグメント識別子によってフレームワークにいくつかの起動時オプションを提示することができます。
通常、これらのオプションは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]における記述で示されています。フラグメント識別子による指示はそれをオーバーライドします。
一般的な"&"による区切りで複数の複数のパラメータを指定できます。
=====表示範囲の指定=====
global座標系によって表示範囲を指示することができます。　標準のフラグメント記述に対してそれぞれ"global"文字列の追加が必要です。
なおglobal座標系におけるxは一般的に経度、yは一般的に緯度に対応することに留意してください。
*メディアフラグメントによる指定 : xywh=global:<xmin>,<ymin>,<width>,<height>
*svgViewフラグメントによる指定 : svgView(viewbox(global,<xmin>,<ymin>,<width>,<height>))

=====表示・非表示レイヤーの指定=====
* 表示すべきレイヤー: visibleLayer=<layer title>,<layer title>...
* 非表示すべきレイヤー: hiddenLayer=<layer title>,<layer title>...
* 個々のレイヤーに対するフラグメントの提示 : それぞれのレイヤーに対しては、さらにフラグメントを追加することができます。ただし"="は"%3D",&は"%26"でURLエンコードしてください。<layer title>#fragment1=val1&fragment2=val2　⇒<layer title>#fragment1%3Dval1%26fragment2%3Dval2　

===レイヤー固有のUI===
"[https://satakagi.github.io/mapsForWebWS2020-docs/De-centralizedWebMapping.html#:~:text=To%20achieve%20this,everything%20in%20detail. Layers as WebApps]"(ウェブアプリケーションとしてのレイヤー: webApp Layer)を実現する機構　（LaWA、レイヤーwebApp、webAppレイヤー、アプリレイヤー、レイヤーアプリなどと呼ぶこともある）（[[#レイヤー固有ユーザインターフェース|こちらも参照]]）

====概要====
[[#レイヤー|レイヤーsvgコンテンツ]](フレームワークが最初に読み込むコンテナsvgコンテンツの中で埋め込まれるsvgコンテンツ)に対して、[[#動的な地図レイヤー|動的な地図レイヤー]]の一種として、そのレイヤーに固有の処理ロジックや、可視化・描画ロジック　そしてユーザインターフェースも含むことができる　htmlによるウェブアプリを定義できる機能です。

javascriptを使った独自のロジックによる動的な可視化データの生成が実装可能です。

また、この機能はそのレイヤーの設定やインタラクティブ操作のための表示やユーザインターフェースを地図表現とは別に表示したい場合にも用いることができます。従来のアーキテクチャでは、もしもこのようなレイヤーに固有のUIが必要だった場合でも、地図アプリケーション全体の処理や表示を司るグローバルな空間(ルートhtmlコンテンツのwindowオブジェクト直下)に、サイドエフェクトを考慮しながらコードを組み込む必要があり、結果としてコードのスパゲッティ化が懸念されました。SVGMapのレイヤー固有UIは、レイヤーごとにUIとそのロジックをカプセル化可能にし、これを排除することが可能です。(カプセル化はiframeによって行われます。)さらに、レイヤー固有UIによるウェブアプリは自律分散的な配置にも対応し、UIを備えた地図レイヤーにまでハイパーレイヤリングアーキテクチャを拡張します。

なお、[[#動的な地図レイヤー]]は、htmlによるユーザーインターフェースを持つことができませんが、同種のウェブアプリケーションのカプセル化の効果があります。

このＵＩには主に二つの用途が考えられます。
;凡例
: 各レイヤーはその地図表現の意味を示すための固有の凡例を持つことがあります。その凡例を表示するために利用できます。
;ウェブアプリケーションによる動的な地図レイヤー
: 先述のように、ウェブアプリケーションによる動的な地図レイヤーは独自のロジックによってそのレイヤーの地図表現を動的に変化させる機能を備えることができます。この場合、例えばエンドユーザがFORMで入力したフィルター条件ををもとに表現を変更するようなケースも考えられます。
これらケースでは、そのフォームや凡例は、[[#フレームワークの呼び出し|ルートhtml文書]]に設置することは可能ですが、もしも多くのレイヤーを表示するアプリケーションであり、それらのレイヤーがそれぞれ固有のフィルタ条件を持つような場合、[[#フレームワークの呼び出し|ルートhtml文書]]は、それぞれのレイヤーをフィルタリングするためのFORMとそのフィルタリングロジックをすべて埋め込む必要があり、画面のデザイン、およびロジックのコーディングの双方がスパゲッティ化する可能性があります。さらに、もしもこのアプリケーションに後日さらにレイヤーが追加される場合、スパゲッティ化の問題はより深刻になるかもしれません。凡例の表示についても同様の問題が考えられます。本レイヤー固有ＵＩはこのような問題に対するソリューションを提供しています。

この機能は、ベースのフレームワークrev12以上　且つLayerUI2フレームワークを読み込み、[[#レイヤー固有のUI(後述)を設置するdiv要素|id="layerSpecificUI"のdiv要素]]が[[#フレームワークの呼び出し|ルートhtml文書]]に設置されているときに使用できます。

;サンプル
:[[チュートリアル#WebApp_Layer.E7.B7.A8|開発者向けチュートリアル]]でいくつかのサンプルを見ることができます。

====[[#レイヤー|レイヤーsvgコンテンツ]]での指定====
レイヤー固有UIの設置には、[[#レイヤー|レイヤーsvgコンテンツ]](のルート要素(svg要素))に、data-controller属性を与え、そこにそのレイヤー固有のUIのためのhtml文書のリンク(ただしsame origin)を設置します。またサブセットとして、data-controller属性にビットイメージ(.pngもしくは.jpg, .jpeg, .gif拡張子を持つビットイメージ)へのリンクを与えることでレイヤーの凡例情報の提示をすることもできます。

[[#レイヤー固有のUI(後述)を設置するdiv要素|レイヤー固有ＵＩの表示部位]]には、このように指定されたリソース(ビットイメージもしくはhtml)がレイヤーの選択の状況に応じて、切り替わり表示されます。レイヤーがONになっている間、それに紐付けられたレイヤー固有UI(htmkのwindowオブジェクト)が存在し続け、そのレイヤーのsvgDOMの操作やUIの提供が可能です。

なお、標準のフレームワークでは、表示中のレイヤーの中の選択された一つのUIのみが地図のメインのwindowに配置されたiframeで表示されます。表示中ではあっても選択されていないレイヤーのUI(iframe)は非表示状態で動作しています。

'''サンプル'''
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="9000.0 -9000.0 9000.0 9000.0" go:dataArea="9000.0 -9000.0 9000.0 9000.0"
'''data-controller="../Self-GS-POI_controller.html"'''>
.....

====レイヤー固有のUIのためのhtml文書(webApp)の構造・作法====
レイヤー固有のUIとなるhtml文書は、下記の通り、その初期化等を行うライブラリ <code>svgMapLayerLib.js</code> を読み込む必要があります。（現在のところ通常のjavascriptライブラリのみ提供されます）
CDNからライブラリを読む場合は、<code>https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/svgMapLayerLib.js</code>です。

'''サンプル'''
<!doctype html>
<html>
...
<script src="https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/svgMapLayerLib.js"></script>
...
</html>

====LaWAとS-LaWA（サンドボックス化LaWA）のアーキテクチャ====
SVGMapにおけるレイヤー固有UI（LaWA: Layers as Web Apps）には、セキュリティと用途に応じた2つの動作モードが存在します。2026年のアップデートにより、Web標準のセキュリティモデル（クロスオリジン制約）に準拠した'''S-LaWA（サンドボックス化LaWA）'''が導入されました。 (2026/4/16現在 dev2リリース段階)

'''T-LaWA (Tight-coupled LaWA / 従来の密結合モード)'''
* 親のSVGMapフレームワークと同じオリジン（ドメイン）で動作する、従来型のレイヤーWebAppです。
* iframeのJavaScriptコンテキストに、親フレームワークから直接APIオブジェクトが注入されます。
* 全ての[[#拡張API]]にアクセスでき、複雑なDOM操作や関数渡しが可能ですが、サードパーティ製のレイヤーを読み込む際にはセキュリティ上のリスク（XSS等）を伴います。

'''S-LaWA (Strict/Sandbox LaWA / 分離モード)'''
* 親のSVGMapフレームワークとは異なるオリジンで動作することを前提とした、セキュアなレイヤーWebAppです。
* iframeは完全に隔離（サンドボックス化）され、親フレームワークとの通信は全て非同期メッセージング（postMessage）を介して行われます。
* 悪意のあるスクリプトから親フレームワークを保護できるため、外部のサードパーティ製レイヤーを安全に統合できます。
* 代わりに直接的なオブジェクト参照や関数の受け渡しが禁止されるため、[[#拡張API]]の利用に強い制限がかかります（前節の「S-LaWAでの制限」を参照）。

===== 動作モードの指定 (data-lawa-mode) =====
レイヤーがどちらのモードで起動するかは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]内でそのレイヤーを参照している '''<code>animation</code> 要素の <code>xlink:href</code> の値（URLのオリジン）'''、もしくは同要素に付与する '''<code>data-lawa-mode</code>''' 属性で制御できます。

<code>data-lawa-mode="auto"</code> (未指定時のデフォルト): レイヤー（コントローラ）のURLが親フレームワークと同一オリジンであれば '''T-LaWA''' として、クロスオリジンであれば自動的に '''S-LaWA''' として起動します。

<code>data-lawa-mode="isolated"</code>: 同一オリジンであっても、強制的に '''S-LaWA''' として隔離して起動します（開発時のテスト等に有用です）。

<code>data-lawa-mode="tight"</code>: 強制的に '''T-LaWA''' として起動を試みます。（※クロスオリジン環境でこれを指定した場合は、適切なCORS設定やプロキシサーバーの利用が必須となります）

====詳細====

レイヤー固有UIは、SVGMapのグローバルなwindowに設置されたiframeの中で動作します。このiframeの性質と利用できるAPIは、前述の動作モード（T-LaWAかS-LaWAか）によって大きく異なります。

どのような環境・モードで起動された場合でも、レイヤー固有UI内でSVGMapの各種リソースへ安全にアクセスするためには、レイヤーのHTML内で提供される初期化ライブラリ（<code>svgMapLayerLib.js</code> 等）を読み込む必要があります。

'''【重要】''' 各種APIへのアクセスが可能になるのは、iframe自体の "load" イベントではなく、SVGMapフレームワークとの接続が完了した後に発行される '''<code>layerWebAppReady</code>''' イベント以降です。
* 初期化処理は以下のように記述することを強く推奨します。
* <code>window.addEventListener("layerWebAppReady", function(){ /* 初期化処理 */ });</code>

[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が設置されたSVGMapのグローバルなwindowと異なるドメインにレイヤーを設置し、そのレイヤーがレイヤー固有UIを持つこともできます。デフォルト（<code>data-lawa-mode="auto"</code>）では、これは自動的にセキュアなS-LaWAとして起動するため、特別なCORS設定は不要です。ただし前述の通りAPIには制限がかかります。

[[#レイヤー|レイヤーsvgコンテンツ]]のドキュメントルート要素へdata-controller属性を設定する代わりに、コンテナsvgコンテンツにおける[[#レイヤー|レイヤーsvgコンテンツ]]への参照要素にdata-controller属性を設定することもできます。

data-controller属性の代わりに、data-controller-src属性の値に、適切にエスケープすることで直接htmlを記述することもできます。（※この機能は主にT-LaWAでの利用を想定しています）

data-controller属性によって参照されるhtmlコンテンツでは、次節[[#拡張API]]で説明する値や関数が使用できます（※モードによる制限あり）。

data-controller属性のURLには以下のオプションをフラグメント識別子として指定することができます。
* #exec=appearOnLayerLoad||hiddenOnLayerLoad||onClick レイヤー固有UIの起動オプション
** appearOnLayerLoad : レイヤーを表示状態にすると即座にレイヤ固有UIが出現
** hiddenOnLayerLoad : レイヤーを表示状態にすると即座にレイヤ固有UIがhidden状態で起動(そのレイヤ固有UIに含まれるscriptが起動)
** onClick : レイヤー固有UI起動ボタン">"を押したときにレイヤ固有UIが出現(デフォルト)
* #requiredHeight=hhh&requiredWidth=www
** id="layerSpecificUI"のdiv要素のcss値に関わらず、requiredHeight、requiredWidthでiframeの表示を指示

====拡張API====
レイヤー固有UI(iframeのwindowオブジェクトのjavascriptコード)では以下のAPIが拡張されています。
'''【注意】S-LaWA（サンドボックス化LaWA）環境においては、セキュリティ上の理由から親フレームワークのオブジェクトに直接アクセスできません。代わりに <code>svgMapSandboxLayerLib.js</code> が提供する「モック（代替）オブジェクト」を介して非同期に操作が行われます。各項目の「S-LaWAでの仕様」を参照してください。'''

=====イベント=====
*layerWebAppReady : 初期化が完了しLaWAの実行が可能になった (LaWAでは、loadイベントではなくlayerWebAppReadyを使用することを強く推奨します)
*openFrame : そのiframeが、新たに生成された
*closeFrame : 同、消滅した
*hideFrame : 同、隠された
*appearFrame : 同、隠されていたのが再度現れた
*zoomPanMap : [[#.E6.8B.A1.E5.BC.B5.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88|SVGMapフレームワークと同じ]]
*zoomPanMapCompleted : 同上
*screenRefreshed : 同上

'''【S-LaWAでの仕様】''' すべてのイベントがサポートされています。親フレームワークで発生したイベントは、メッセージングを通じてS-LaWA内のwindowオブジェクトに中継・ディスパッチされます。

=====svgImageProps=====
このレイヤー固有UIに紐づいたレイヤーSVGの各種プロパティを参照できる（基本的に全て読み出しのみ） (参考:[[#svgImagesProps.5B.5D]])
*[[解説書#svgImagesProps.5B.5D|プロパティのリストはこちらを参照]]
*svgImageProps.scriptで、動的地図レイヤーのscript要素によって生成されたオブジェクトにもアクセスできます。
*svgMap.getSvgImagesProps(layerID) で得た値と同等。
*.hashは書き込みが有効(参考 [[#サブレイヤーパーマリンク]])

'''【S-LaWAでの仕様】''' 親フレームワークから非同期で同期された静的なコピーデータとして提供されます。<code>.hash</code> プロパティへの書き込みはS-LaWAでもサポートされており、裏側で自動的に親へ同期されます。ただし、<code>.script</code> による親の実行コンテキストへのアクセスはできません。

=====svgImage=====
このレイヤー固有UIに紐づいたレイヤーSVG文書(DOM Documentオブジェクト) (参考：[[#svgImages.5B.5D]])
*このドキュメントを操作することで、そのレイヤーの表示を動的に変化させることが可能です。
*特に、[[解説書#.E5.8B.95.E4.BD.9C.E3.81.AE.E5.88.B6.E9.99.90.E3.83.BB.E5.B7.AE.E7.95.B0|動作の制限に注意して実装してください]]
*svgMap.getSvgImages(layerID) で得た値と同等。

'''【S-LaWAでの仕様】''' S-LaWA環境内に展開された「ローカルXML DOM」が提供されます。このドキュメント（要素の追加・削除・属性変更・テキスト変更など）を操作して <code>svgMap.refreshScreen()</code> を呼び出すと、フレームワークの共通地図キャンバスに送信され更新します。

=====svgMap=====
svgMapフレームワークインスタンス

'''【S-LaWAでの仕様】''' 親のインスタンスの代わりに、S-LaWA用のモッククラス（<code>SandboxSvgMap</code>）が提供されます。以下のメソッドのみが利用可能です。
* <code>refreshScreen()</code>, <code>transform()</code>, <code>getGeoViewBox()</code>, <code>getSvgImageProps()</code>, <code>setShowPoiProperty()</code>, <code>showModal()</code>, <code>getCORSURL()</code>, <code>setCORSproxy()</code>, <code>parseEscapedCsvLine()</code>

=====layerID=====

svgMapフレームワークが管理しているSVG文書ハッシュリスト(svgMap.getSvgImages())における、このレイヤー固有UIに紐づいたレイヤーSVG文書のハッシュキー

[[#getLayerId]]参照

'''【S-LaWAでの仕様】''' 制限なく利用可能です。

=====svgMapGIStool=====
GIStoolsフレームワークを拡張した時、同インスタンス
*[[解説書#svgMapGIStool..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI|svgMapGIStoolが持つAPI]]

'''【S-LaWAでの仕様】''' '''現在のところ利用不可です。'''

=====svgMapAuthoringTool=====
svgMapAuthoringToolフレームワークを拡張した時、同インスタンス
*[[解説書#svgMapAuthoringTool..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI|svgMapAuthoringToolが持つAPI]]

'''【S-LaWAでの仕様】''' '''現在のところ利用不可です。'''

=====controllerSrc=====
レイヤー固有UIのiframeの起動に使われたsrc属性(レイヤー固有UIのパス・URL)が読み出せます。特にレイヤーが異なるドメインから配信されたものの場合、レイヤー固有UIのwindowのlocation属性(及びそれによるURL解決を行うAPI)からは適切な情報が得られません。これ代えてこの値が使用できるケースがあるでしょう。

'''【S-LaWAでの仕様】''' 参照できません。S-LaWAは自身のURLコンテキストで動作するため、自身の <code>location.href</code> などを参照してください。

=====putGlobalMessage(messageText)=====
messageTextを[[#グローバルメッセージ]]エリアに表示する　レイヤーが消滅したら自動でメッセージも消滅します。

'''【S-LaWAでの仕様】''' 現在のところ利用不可です。

=====preRenderFunction=====
この名前の関数を(レイヤー固有UIのwindowに)定義すると、そのレイヤーのSVG文書の再描画(画面更新)シーケンスの直前にこの関数の内容が実行される。詳細は[[解説書#setPreRenderController|setPreRenderControllerを参照]]

'''【S-LaWAでの仕様】''' '''利用可能です。''' S-LaWA内で <code>window.preRenderFunction</code> を定義しておくと、<code>svgMap.refreshScreen()</code> が呼ばれた際や、親からズーム・パンなどのイベントを受信した際に、S-LaWA内でローカルに実行されます。この関数内でローカルDOMを変更することで、描画前の状態更新をエミュレートできます。

=====customHitTester=====
この名前の関数を定義すると、そのレイヤーに固有のヒットテスト（マウスやタッチによって地図上をヒットしたときの振る舞い）機能を追加することができます。ヒットテストは通常のクリッカブルオブジェクト（ポイントやライン・ポリゴンなど）のそれと同等に扱われます。
* customHitTester( position )
** 第一引数に、ヒットされた座標(.screenX,Y:window上の座標、.lat,lng:地理座標、.isMapCenterHitTest:後述)が与えられます。（この値をもとに実際のヒットテスト処理を書く）　この関数の帰り値が'''null'''や'''undefined'''の場合はヒットしなかったこと、'''true'''もしくは文字列もしくはそのレイヤーの任意の図形要素、もしくはそれらの配列の場合はヒットしたことを示します。
*** isMapCenterHitTestが'''true'''の場合、そのヒットテストは伸縮スクロール時自動発生するケースで発生したものです。（もしこのケースでのテストを除外したいなど特別な処理をしたい場合に利用できます）
** ヒットテスト後の振る舞いも通常のクリッカブルオブジェクトと同等で、通常はデフォルトで備えるヒットされたグラフィックスオブジェクトの[[#metadata.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF|メタデータ]]表示パネルが呼び出されます。(帰り値が図形要素の場合）　もしこの振る舞いを変更したい場合は、[[#setShowPoiProperty|setShowPoiProperty]]を用いることが可能です。
** 帰り値がtrue、文字列、およびそれらの配列を返す場合は、[[#setShowPoiProperty|setShowPoiProperty]]を使用してカスタマイズされた処理を行う必要があります。この場合[[#setShowPoiProperty|setShowPoiProperty]]で設定された関数が受け取る引数は、そのSVG文書のドキュメントルート要素であり、その'''"data-hitTestIndex"'''属性に選択されたオブジェクトのインデックス(配列の場合。配列でない場合は常に0)が設定されます。

'''【S-LaWAでの仕様】''' <code>customHitTester</code> 自体は利用できません。（なお<code>svgMap.setShowPoiProperty(func)</code>は利用可能です。）

====サブレイヤーパーマリンク====
(2024/10のdev1ブランチから有効)
*[[#レイヤーsvgコンテンツ]]のURLが任意のフラグメント識別子を持つことができる。
*ただしフラグメント識別子はカンマ","、アンパサンド"&"を含めることはできない。
*[[#レイヤー固有のUI]]が以下を実装する場合、任意のレイヤーの設定をパーマリンク([[#getBasicPermanentLink]])に反映できる。
**[[#レイヤー固有のUI]]は起動時(onload)同フラグメント識別子の情報を解釈し適切な状態に変化させる機能
**[[#レイヤー固有のUI]]は、パーマリンクによる指定に対応した標示状態に表示が切り替わるタイミングで[[#レイヤーsvgコンテンツ]]のURLのフラグメント識別子の内容をそれに対応した値に変更する機能
*[[#レイヤーsvgコンテンツ]]のURLのフラグメント識別子は、[[#svgImageProps]].hashを設定することで変更できる ([[#svgImageProps|⇒仕様参照]])

===動的な地図レイヤー===
svgドキュメントにjavascriptを記述することでも、動的なデータ生成を実装可能としています。
本フレームワークでは、svgドキュメント中に<script>要素を一つだけ記述することができ、その要素の中にjavascriptコードを入れることができます。

DOMを操作し、動的に描画を変化させることが可能です。ただし、[[解説書#.E5.8B.95.E4.BD.9C.E3.81.AE.E5.88.B6.E9.99.90.E3.83.BB.E5.B7.AE.E7.95.B0|動作の制限に注意してください]]

====動的SVGMapコンテンツで利用可能な拡張API====
一般のjavascriptAPIに加えて、動的な地図レイヤーを実装するために以下のAPIが提供されます。（既存のものでも注記があるものも列挙）
*document: このsvgMapドキュメント自身
*READ ONLY変数
**CRS:このドキュメントのCRS : CRS.a....fに、地理座標からこのドキュメントのSVGユーザ座標への変換係数が提供される
**docId:このSVGドキュメントのdocId
**scale：倍率：このドキュメントの座標系と、画面の(px座標系)との間の倍率(この値は等倍が1.0だが、svgMapコンテンツのvisibleMin/MaxZoom値は%(等倍は100)なので注意)
**actualViewBox：このドキュメントの座標系でのviewBox
**geoViewBox：地理座標におけるviewBox
**geoViewport
**viewport
**this.location:相対パス
**(this.verIE)
*refreshScreen(): 描画の更新を明示: refreshScreenを用いていない場合、そのレイヤーのDOMを編集してもそれが即座に表示に反映(更新)するとは限りません。文書のロード、ズーム、スクロールのときが表示のDOMの内容を反映した画面の自動更新のタイミングです。それ以外、多くの場合反映されません（性能確保のための本フレームワークの現在の制限）。DOMO編集をそれ以外のタイミングで表示に反映したい場合、この関数の呼び出しを行うひつようがあります。一方不必要にこの関数を呼び出すとシステム全体の性能が低下するかもしれません。
*transform()
*getCanvasSize()
*linkedDocOp()
*isIntersect()
*drawGeoJson()
*childDocOp()
*onload:この関数を設定すると、ロードされると呼ばれる(ドキュメントロード後、描画前のタイミング。)
** この関数は、DOMトラバース前に同期処理される。
**したがってonloadで実行される処理はその中が非同期でない限り、refreshScreen()しなくてもonload時のDOM編集は直後の描画に反映される。
*onscroll:この関数を設定すると、スクロールされるとき呼ばれる（ほかにズーム以外で画面更新時も）(スクロール後の描画前のタイミング。)
**同上
*onzoom:この関数を設定すると、ズーミングが発生するとき呼ばれる(同上)

====拡張イベント====
*document -> zoomPanMap イベント addEventHandlerすると、ズームパンが起き(viewPortが変化したとき)地図システム全体の描画が完了(含タイムアウト)後に発行される。SVGMap*.jsが地図をウェブアプリ起動後、最初に描画完了した時にもこのイベントが発生する。（レイヤー追加時には発生しない）
**これをイベントリスナに設定した関数は、非同期に実行される。onscroll()と異なり、もしその関数でDOM編集を行った場合は、直後の描画にそれが反映される保証がない。refreshScren()による再描画が必要。
*document -> screenRefreshed イベント addEventHandlerすると、ズームパン以外で地図システム全体の描画が完了(含タイムアウト)後に発行される。主にrefreshScreen()など。このイベントをフックにして、SVGMapコンテンツのDOM操作・再描画（refreshScreen()）を行うと無限ループに陥るので使用方法に注意が必要。
*document -> zoomPanMapCompleted イベント SVGMaplayerUIが有効な時に発行される。　zoomPanMapイベントは伸縮スクロール完了時に発行されるが、その直後にレイヤー固有UIにおいて(XHRやfetchを用いた)非同期なデータ取得とレイヤー書き換えが生じるケースでは、その完了を検知しない。zoomPanMapCompleted イベントはこのような非同期通信の完了後に発行される。

===SVGMapの埋め込み(SVGMapFrame)===
'''実験的機能段階''' :

SVGMapフレームワークはwindow全体に地図コンテンツが占有される形で表示する設計です。ウェブページはwebAppsとしてカプセル化されたレイヤーをsvgMapオブジェクトに差し込む形でアプリケーションが構築されます。すなわち、基本的に[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]windowにはsvgMapオブジェクトだけが単独で存在し、その他のアプリケーションをwindow上に実装する場合は、その開発者がsvgMapオブジェクトとのグローバル空間でのスパゲッティ化に注意を払いながら開発していく必要があります。

それに対して、''SVGMapLv0.1_Frame*.js''が提供する機能は、window内の指定した領域にsvgMapによる地図を埋め込むことを可能にします。さらにこの埋め込まれたsvgMapオブジェクトを　外部からより簡単に操作できるようカプセル化されたインターフェースを提供します。

====ライブラリ====
SVGMapを埋め込むウェブページでは''SVGMapLv0.1_Frame*.js''を導入します。
<!doctype html>
<html>
<script type="text/javascript" src="SVGMapLv0.1_Frame_r4.js"></script>
</html>

====svg-map要素====

svg-mapカスタム要素を使用してsvgMapオブジェクトを任意の場所に埋め込むことができます。
<nowiki>
<!doctype html>
<html>
<script type="text/javascript" src="SVGMapLv0.1_Frame_r4.js"></script>
<body>
<table>
<tr>
<td>
説明用地図
</td>
<td>
<svg-map svgMapAppPage="SVGMapper_r16_layerUICustom.html" id="svgMapTag" latitude="37" longitude="135" zoom="4" layerui="#layerUIarea">
</svg-map>
</td>
</tr>
</table>
</body>
</html></nowiki>

=====属性=====
======svgMapAppPage======
必須属性: 起動するSVGMapLv0.1*.jsが組み込まれたhtmlを指定。
svg-map要素はshadow domとなっており、内部はひとつのiframeとして構成されます。このiframe内のwindowで通常のsvgMapオブジェクトが稼働する形となります。svgMapAppPage属性はこのiframe内で起動するsvgMapオブジェクトを持ったhtmlを指定するものです。

======latitude, longitude======
オプション: 表示領域を下記の属性と組み合わせて指定します。DOMを操作することによって動的に表示領域を変更することが可能です。
======zoom======
オプション: 表示位置の中心点を上の2属性で、ズームレベルをこの属性で指定します。ズームレベルの定義は[https://docs.microsoft.com/ja-jp/azure/azure-maps/zoom-levels-and-tile-grid webMercatorタイルピラミッドのレベル番号]（ただし小数点指定も可能）
======latitude2, longitude2======
オプション: latitude, longitudeと組み合わせて対角線を指定し表示領域を設定します。
======customjson======
オプション: 任意のJSON文字列を(エスケープしたうえで)与えることができます。 SVGMap.jsのあるiframeのwindow.rootMessage.customJsonに、JSON.parseされたうえでその値が反映されます。この値もDOM操作により動的に反映されます。window.rootMessage.customJsonの変化を監視できるようsetterを設けることで動的な変化に対応する実装が可能です。

var rootMessage={
set customJson(json){
...
}
}

======layerui======
オプション: レイヤーUIの出力要素をxlinkで指定します。　この値はmutationをobserveしていません（svg-mapオブジェクトが生成された、最初の一回のみ有効です）

<svg-map svgMapAppPage="SVGMapper_r16_layerUICustom.html" id="svgMapTag" latitude="37" longitude="135" zoom="4" layerui="#layerUIarea">

=====DOM API=====
======setCenter======
setCenter( longitude, latitude, zoom ) : 緯度経度ズームレベルで地図を表示させる
======addLayer======
addLayer(url,title,visibility) : URLで指定したリソースのレイヤーをtitleを付けて追加する

======svgMapObject======
getter svgMapObject : この要素に紐付いたsvgMapオブジェクトを得る

====layer要素====
svg-map要素の子要素として、任意の個数のlayer要素を設置できます。
=====属性=====
======title======
iframeで起動されるsvgMapオブジェクトの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルにある、レイヤー名(title)を指定し、そのレイヤーとlayer要素を紐付ける。該当するレイヤーが無く、且つ下記のsrcが指定されている場合は新しいレイヤーを追加する。なお、任意の属性や子ノードが与えられている場合は、下記の通りレイヤーの読み込み後にそれらの値が該当するレイヤーの[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|data-controller]]の window.rootMessageに設定される。

======src======
iframeで起動されるsvgMapオブジェクトの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルにある、レイヤーをURLを使って指定する
======visibility [TBD] ======
visible もしくは hiddenを設定すると、そのレイヤーの表示状態を制御できる。

======任意の属性======
任意の属性を設定できる。設定した属性名と属性値は、対応するレイヤーの[[#レイヤー固有ユーザインターフェース|data-controller]]で指定されたレイヤーのコントローラのwindowにおけるwindow.rootMessageの対応するメンバ変数に反映される。[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/set setter]を設定することで変化に応じて動作させることが可能になる。

======rootMessage.update()関数======
レイヤーのコントローラのwindow.rootMessage.update()関数(引数なし)が定義されている場合、上記の属性変更(最初の設定も含む)が検知される度にこの関数が呼び出される。

=====子ノード(TEXT CONTENTやXML要素)=====
任意のテキスト(textContent)や、XML要素(xmlContent)を子ノードに入れることができる。
入れられた情報は、同様に対応するレイヤーのdata-controllerの
window.rootMessage.textContent、もしくはwindow.rootMessage.xmlContentメンバ変数に反映される。
XMLに関しては任意の階層化がされていても良い。DOM操作による変化があれば更新されるので、同様にsetterを用いて変化を反映させることが可能。

=====DOMAPI=====
======layerId======
layerId : このレイヤーのレイヤーIDを得る
======svgImage======
svgImage : このレイヤーに紐付いたsvgMapコンテンツ(document)を得る
======svgImageProps======
svgImageProps : このレイヤーに紐づいたsvgMapコンテンツのsvgImagePropsオブジェクト(各種プロパティを格納したオブジェクト)を得る
======controllerWindow======
controllerWindow : (もしあれば)このレイヤーに紐づいたsvgMapコンテンツのレイヤー固有UIを得る

==第四章：内部機構解説==
[[内部機構解説|別ページを参照してください。]]

==第五章：付加機能==
===3D可視化機能===
:- SVGMap.jsはCesium.jsを利用してSVGMapで表示しているレイヤーを3D可視化することができます。
:- 3D可視化はSVGMap.jsの地図ウィンドと独立した別ウィンドで行われます。
:- すなわち、ここから呼び出されるCesiumベースの3D可視化ウェブアプリは、それ専用のwebApps([https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4_module.js cesiumWindow*.js]を読み込んだアプリ。：基本的な3D可視化ウェブアプリとして、[https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4.html cesiumWindow4.html]を用意)を持つ別のブラウジングコンテキストで起動されます。
:- この3D可視化ウェブアプリは、svgmapjsとメッセージングを行いsvgmapjsで表示されているレイヤーを3D可視化します。

====3Dビジュアライザ起動用ボタンの設置====
3D可視化機能を起動するためのUI(ボタン)は、[[#フレームワークの呼び出し|ルートhtml文書]]に設置した以下の要素によって構築されます。
<code><pre><img id="3DviewButton" data-app="cesiumWindow4.html" .../></pre></code>

* <code>id</code>が<code>3DviewButton</code>である必要があります。
* <code>data-app</code>属性で、3D可視化ウェブアプリのパスを指定することが可能です。
** もし指定されていない場合は、ルートhtml文書と同一ディレクトリの<code>cesiumWindow2.html</code>というファイルがデフォルトで指定されます。
** パスは同一オリジンである必要があります。
** 基本的な3D可視化ウェブアプリとして、[https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4.html cesiumWindow4.html]が[https://github.com/svgmap/svgmapjs/ svgmapjsリポジトリ]に用意されています。

解説書

2026-04-16T08:36:14Z

Admin: /* LaWAとS-LaWA（サンドボックス化LaWA）のアーキテクチャ */

=SVGMap.js (Level0.1フレームワーク)解説書=

2018年現在のSVGMapのデータ形式、およびそれを実装した初歩的なフレームワーク(SVGMap Level0.1 Revision*)の解説を行います。

==第一章：SVGMapの基本機構と、更新部分==

この章は、JIS化されたSVGMap ([http://kikakurui.com/x7/X7197-2012-01.html JIS X.7197])や、[https://www.w3.org/Submission/2011/04/ W3C Member Submission]に対する、近年の開発成果に基づいたSVGMapのアップデートを解説しています。

[http://kikakurui.com/x7/X7197-2012-01.html JIS X.7197]もしくは、[https://www.w3.org/Submission/2011/04/ W3C Member Submission]に記載されているように、SVGMapの基本機構は主に以下の機能を　[https://ja.wikipedia.org/wiki/Scalable_Vector_Graphics 汎用的なグラフィイクスデータ記述形式SVG]に拡張することです。
* [[#地理座標系の処理|地理座標処理]]
** SVGの座標系と地理座標系との間の関係を記述する globalCoordinateSystems要素
* タイルピラミッド（タイリングとLevel of Detail）
** コンテンツを埋め込む[[#要素|image要素、animation要素]]のx,y,width,height属性への追加の振る舞いと、visible-min-zoom, visible-max-zoom属性の追加
** 詳細は [https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html こちらの論文]を参照
* 拡張された[[#レイヤー|レイヤー]]
** [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]におけるimage, animation要素の扱い
** [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が埋め込むsvgコンテンツ([[#レイヤー|レイヤーsvgコンテンツ]])の処理

===地理座標系の処理===
SVG2では地理空間座標を記述するスペック(metadata geospatial coordinate systems)が削除されました。これは、W3C SVG仕様の範囲では単なるメタデータであり、ユーザエージェントの振る舞いに何ら影響を及ぼさないことが理由です。　また、JIS SVGMapにおいては、coordinateReferenceSystem 要素が定義され、それに基づくユーザエージェントの振る舞いが規定されていますが、これは一方でW3Cのスペックではないという課題を持ちます。

これを受けて、現在提案されているSVGMapのデータ仕様では、SVG1.1の段階ですでに標準化と実装が行われたスペックを注意深く活用することにより、JIS SVGMapで規定された地理座標系に関する機能のいくつか（すべてではない）を実現する方法を用いることとしています。（[https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/globalView globalView spec]）

なお、JIS SVGMapのcoordinateReferenceSystem要素もサポートしています。

====メルカトル図法を含む任意の図法の定義とその合成機能(＞rev16)====
従来のSVGMapでは、グローバル座標系に緯度経度座標を用いた場合、使用できる図法は[https://ja.wikipedia.org/wiki/%E6%AD%A3%E8%B7%9D%E5%86%86%E7%AD%92%E5%9B%B3%E6%B3%95 PlateCarreeや正距円筒図法]でした。

一方、rev16では[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]を含む任意のSVGMapコンテンツ([[#レイヤー|レイヤーsvgコンテンツ]]やサブレイヤー、タイルなど)のglobalCoordinateSystem 要素のtransform属性に、下記のように"mercator"を指定することで、そのコンテンツの座標系がメルカトル図法([https://en.wikipedia.org/wiki/Web_Mercator_projection web mercator])であることを宣言できます。

<pre><globalCoordinateSystem srsName="http://purl.org/crs/84" transform="mercator" /></pre>

この記述がされたコンテンツのSVGの座標空間はメルカトル図法上のものとなり、この座標系上でのx,y=0,0(左上)は西経180.0度,北緯85.051129度、x,y=1,1(右下)は東経180.0度,南緯85.051129度に対応します。

=====メルカトル図法での地図表示=====
[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]で先述の宣言を行うことで、SVGMap0.1.jsはメルカトル図法で画面上に地図を表示します。このとき、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が参照する各レイヤーはメルカトル図法であっても、それ以外であっても構いません。フレームワーク内でオンザフライの図法変換が実行されます。（逆に[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]がPlateCarreeでレイヤーがメルカトルでも同様）

=====メルカトル図法のドキュメントルート要素のviewBox属性=====
* [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]において、地図の初期表示状態を記述するドキュメントルート要素(<svg>要素)のviewBoxに記述する座標も先述のメルカトル座標系で記述する必要があります。
* 一方、緯度経度で初期表示領域を記述したい場合に対応する仕様が拡張されており、その記述例は下記のとおり、'''global'''を追加します。
<pre><svg viewBox="global,138,35,2,2"></pre>

=====プロキシの設定=====
オンザフライでの図法変換では、多くのケースで非線形の座標変換が必要となります。ビットイメージ（タイルを含む）に対して子の座標変換を実行するためにSVGMap.jsではビット委イメージのピクセルにアクセスしています。これを実現するにはビットイメージがSVGMap.jsと同一オリジンにある必要があります。この条件を満たせないケースに対してフレームワークにはプロキシを設定する機能があります。([[#setProxyURLFactory|setProxyURLFactory API]]を参照)

'''[[クロスオリジンアクセス|詳細な情報をこちらに掲載しました]]'''

=====多様な図法の定義と利用=====
[[#動的な地図レイヤー|javascriptコード]]に記載されたscript要素内に定義した関数の関数名をglobalCoordinateSystem要素のtransform属性に記述することで、その関数を図法変換に用いた図法定義が可能となります。(先述のmercator属性は、フレームワークに特別に組み込まれた関数です）

たとえば、日本の平面直角座標系の地図(固有の基準点を持つ横メルカトル図法)をPlateCarreeやメルカトル図法の地図として合成・表示するケースなどに有効でしょう。

ユーザが定義できるこの関数は引数を持たない関数であり、返り値として以下の３つの関数を返す必要があります。
* {x,y} transform({x,y}) : グローバル座標(WGS84経度緯度)から、そのコンテンツの図法の座標への変換関数入出力値は.x,.yメンバを持つオブジェクト。
* {x,y} inverse({x,y}) : 同、逆変換関数
* number get scale : グローバル座標系に対するコンテンツの図法の座標系の座標値のスケール（グローバル座標系で1変化すると、コンテンツの座標系でいくつ変化するのかを表す）
* 記述例
<code><pre>
<svg ...>
<script>
function azimuthalEquidistant(){
...
return{
transform:function(inp){
var xy = transform_int(inp.y, inp.x, ...);
return{ x:xy.x, y:xy.y}
},
inverse:function(inp){
var latLng = inverse_int(inp.x, inp.y, ...);
return{ x:latLng.lng, y:latLng.lat }
},
scale: 1.0
}
}
</script>
<globalCoordinateSystem srsName="http://purl.org/crs/84" transform="azimuthalEquidistant" />
...map contents in projected coordinate system...
</svg>
</pre></code>

===ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング===
SVG2(SVG1.1 2nd Edition)では、SVG単独によるユーザエージェントという実装想定は撤廃され、よく知られているウェブブラウザの機能の一部としてのSVGデータの描画機能、HTMLやCSSと一体化されたデータ・コンテンツ　へと変化しました。一方、近代のウェブブラウザにおけるコンテンツでは古典的なhtmlに基づくコンテンツデータに対して、javascriptとDOM APIによるプログラムでコンテンツをブラウザ上で動的に生成する（ウェブアプリケーション）機構を備えます。すなわちSVGを実装する現代のユーザエージェントは例外なくウェブアプリケーションの実行が可能となりました。

そこで、SVGMapでは静的なSVGによる地図コンテンツに加え javascriptで動的に生成されるコンテンツ(ウェブアプリケーション)も地図コンテンツ（地図のレイヤー）として扱えることとしました。それにもかかわらず SVGMapは依然として複数のウェブ上で分散する地図データを一つの画面上にレイヤリングする機能（ハイパーレイヤリング）を維持しています。すなわち、ウェブアプリケーションとしての地図レイヤーをレイヤリング（マッシュアップ）する機能が拡張されます。これは、SVGMapのマッシュアップ・ハイパーレイヤリングの概念を、単に地図画像データのレイヤリングから、地図上に表現された動的なオブジェクトのマッシュアップ・レイヤリングに広げています。SVGMapではこのコンセプトを[[リンク集#.E8.A7.A3.E8.AA.AC.E9.9F.B3.E5.A3.B0|"Layers as WebApps"(LaWA : ウェブアプリケーションとしてのレイヤー)]]と呼んでいます。

このようなウェブアプリケーションは、レイヤーごとにカプセル化されることになります。これにより、'''グローバル空間'''(コンテナsvgコンテンツとそれを起動する、svgMap.jsフレームワークを読み込んだウェブページ)のスパゲッティ化なしに、多様な機能を実装していくことが可能になります。

[https://satakagi.github.io/mapsForWebWS2020-docs/De-centralizedWebMapping.html こちらの論文]も参考にしてください。

ウェブアプリケーションによる地図レイヤーを構築するには二つの方法があります。
* svg要素の'''data-controller'''属性で参照されたhtml文書
** [[#レイヤー固有ユーザインターフェース]]と呼ばれる機構です。この方法を用いること推奨します。
* svg要素内の'''script'''子要素 (将来廃止予定)
** htmlによるUIを伴わない実装の場合はscript要素を用いることができます。ただしsrcは属性には非対応、直接コードを埋め込む必要があります。

この機能を用いるにはSVGMapLevel0.1フレームワークを使用する場合は、拡張フレームワーク(SVGMapLv0.1_LayerUI2_r*.js)を更にロードする必要があります。SVGMapLevel0.2フレームワークの場合はデフォルトで機能します。

====レイヤー固有ユーザインターフェース====
SVGMap.jsではさらに、個々の地図レイヤー(レイヤーSVGコンテンツ)がそれぞれのレイヤーに特化した固有の演算ロジックだけでなく、ユーザーインターフェースも備えた[[#レイヤーsvgコンテンツの設定|HTMLを紐づける]]ことができる機能が拡張されています。UIも備えたより完全なwebAppをレイヤーとして実装できるため、カプセル化がより効果的に実現されます。（Layers as Web Apps, LaWA)

たとえば気象情報のレイヤーに対して気象情報の時間変化を表示するアニメーションのコントローラ(スライダーバー)や、気象情報の種類を選択するプルダウンメニュー　などのUIやロジックを任意に構築できます。

レイヤー固有ユーザーインターフェースは、[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]](SVGMap.jsをロードしたhtml)のレイヤー選択UIを通してwindowに設置されたiframe中に呼び出されます。

詳細は[[#レイヤー固有のUI]] を参照してください。



　

====例====
以下に、いくつかのこのような動的な地図コンテンツの例を示しましょう。
;検索によって表示スタイルを変更する機能を持ったレイヤー
: 例えばコンビニエンスストアのＰＯＩレイヤーを表示したとして、そのメタデータを読み取り、検索条件に基づいて（例えば深夜営業している店舗）の表示スタイルを変更するような検索機能を実装したレイヤー　メタデータは書くレイヤーごとに独特の値を持つため、その検索ロジックはレイヤーに固有のものとなることがあります。このケースではそのような機能をレイヤーに組み込むことを可能にします。
;CSVデータなどのレガシーな非SVGデータをHXRで取得し、ブラウザ上でSVG DOMツリーを生成するようなSVG地図コンテンツ。
: このケースでは、サーバからクライアントに送信されるデータの実体はSVG形式の地図データではなく、CSVなどのレガシーなデータです。SVG地図コンテンツには、CSVデータをSVGとして描画するためのデータ読み込み・解読・SVG DOMツリー生成機構を備えたjavascriptコードが含まれます。また、これよりはモダンなgeoJsonやKML等のデータをSVG DOMに変換することも容易に可能でしょう。これをより簡単に実現するためのライブラリも[[#svgMapGIStool.で呼び出せるAPI|svgMapGIStool]]に準備されています。
;タイリングされた地図コンテンツ
: それは、たとえば[https://wiki.openstreetmap.org/wiki/Tiles OpenStreepMapのTile Server]や、[https://en.wikipedia.org/wiki/Tile_Map_ServiceTileMap Tile Map Service]のような、特定のロジックによる数列のような法則性を持ったピラミッド状の地図タイルリソースをタイリングする地図コンテンツのことです。
: 更新されたSVGMapでは、地図コンテンツに内蔵されたjavascriptによるアプリケーションロジックとしてそれらを取り扱うことができます。タイリング規則をそのままウェブアプリケーションとしてで書き下し、スケールやビューポートに応じて適切なタイリング(配置)を行うSVG DOMツリーを生成するSVG地図コンテンツが構築できます。

=====タイリングに関するノート=====
[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html svgMapにおけるタイリング]は従来の地図フレームワークより柔軟で汎用的な概念に基づいています。
openLayersやleafletなどの従来の地図フレームワークでは、このようなタイリング機能は特定の固定的なタイリングロジックとパラメータを伴った機能として地図フレームワーク本体にハードコードされて提供されてきました。さらには地図フレームワークがこれらのタイリングロジックに強く依存したアーキテクチャを持っていました。一方、これらのロジックにはさまざまなバリエーションや最適化のための調整パラメータが存在し、これまで長らくその互換性や相互運用、更には効率の問題を抱えてきました。次のリンクでその多くの議論や多様な提案を参照できるでしょう。[https://wiki.osgeo.org/wiki/Tile_Map_Service_Specification TMSspecs@osgeowiki], [https://wiki.osgeo.org/wiki/Category:Tiling tiling@osgeowiki]
ベクターデータのタイリングにおいては、これらの課題はさらに増幅され、いまだ手法は確立していないといっても良いでしょう。たとえば、我々の研究では、Quad Tree Composite Tiling([https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-in-english スライド]、、[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html ペーパー])のような用途によってはもっと優れたタイリングの手法も見いだされています。

一方、これらのロジックはその多様なバリエーションを含め、javascriptによるプログラムコードとしては容易に記述可能です。多くの場合わずか数十行のロジックで記述できるでしょう。この程度のコードで多くのタイリングの手法が包含できるのであれば、特定のタイリング手法をフレームワークのコアに内包する・さらにはこれら特定のタイリングの手法にコアが依存する必要はなく、先述のウェブアプリケーションによる動的な地図レイヤーとして実装すれば良いであろうというのがSVGMapにおけるタイリング扱いです。3DマップのフレームワークであるCesiumはこれに似たタイリングポリシーを持っているようです。

=====SVG以外のデータサポートに関するノート=====
前章に記載した方針と同様、他の地図表示フレームワークと異なりSVGMapではSVGとして規定されたコンテンツ(もちろんビットイメージの埋め込みは可能)以外のネイティブサポートは行いません。例えばgeoJsonやKML, WKTなど地図業界でしばしば用いられるデータをSVGMapで表示したい場合は、変換ルーチンを埋め込んだ動的な地図コンテンツ（webAppレイヤー）としてそれらを扱います。SVGMap.jsの拡張モジュールである[[#svgMapGIStool.で呼び出せるAPI|SVGMapGIS.js]]には、これらのデータをwebAppsで読み込みSVGに変換するためのAPIがあります。

===トポロジースイート(地理空間情報処理)===
Rev.13で拡張

SVGMapLevel0.1 Revision 13以降では、SVGMapコンテンツに対してトポロジー演算機能(地理空間情報処理機能)を適用する拡張フレームワークが提供されます。この機能を用いるにはSVGMapLevel0.1フレームワークに加えて、拡張フレームワーク(SVGMapLv0.1_GIS_r*.js)をロードする必要があります。このフレームワークでは、[[#svgMapGIStool.で呼び出せるAPI|拡張されたAPI]]が利用可能です。フレームワークに内蔵された基本的な演算機能に加え、geoJSONと整合するインターフェースを備え、[https://github.com/bjornharrtell/jsts jsts]を組み込み、より高度な機能を実装するための機構も持ちます。

この機能を用いると、特定のレイヤーに登録されているポリゴンの範囲に入っている、特定のレイヤーのポイントをフィルタリングして表示の色を変更する。といったことが可能です。ただし、これらはすべてすでにブラウザ上にロードされている限られた量のコンテンツの中での演算に限定されます。もしもサーバ上にしかないデータに対してこれらの演算を試みたい場合、従来通りサーバサイド技術によってそれは実現すべきです。

また、主題情報を含むウェブマップコンテンツの多くのレイヤーがラスタータイルによって提供されているという現状を考慮し、このスイートはラスターレイヤーをカバレッジとして扱った空間情報処理を行う機能の実装も進められています。現在のところ、カバレッジとポイントとの間での演算が可能です。また、そのために便利なカラーピッカー等の付加的な機能の実装も進められています。

===オーサリングシステム===
Rev.14で拡張

SVGMapLevel0.1 Revision 14以降では、SVGMapコンテンツを編集するツール機能が実装された拡張フレームワークが提供されます。[[#svgMapAuthoringTool.で呼び出せるAPI|フレームワークが提供するAPI]]を使って、オーサリング機能を持ったレイヤーを作ることが可能です。コンテンツは、SVG DOMとして構築されます。なお編集したオブジェクトを保存したり登録するためには別のサービスやアプリケーションの開発が必要です。

===3D可視化システム===
Rev.15で拡張

[https://cesiumjs.org/ Cesium.js]を用いて、SVGMap.jsが表示できるすべてのコンテンツを3D可視化するシステムです。詳細解説はTBD ([[#svgMapCesiumWrapper.で呼び出せるAPI|フレームワークが提供するAPI]])

===プログレッシブウェブアプリケーション===
Rev.16で拡張

[https://developer.mozilla.org/docs/Web/Progressive_web_apps Progressive Web Apps]をサポートしたブラウザにおいて、SVGMap.jsをオフラインでも利用可能にする拡張機能です。詳細解説はTBD ([[#svgMapPWA.で呼び出せるAPI|フレームワークが提供するAPI]])

===SVGMapコンテンツのバックエンドソフトウェア (参考)===
本解説書は主にコンテンツ形式とユーザーエージェント側のソフトウェアについて解説していますが、サーバ・バックエンド側についてもここで少し言及します。

shapefileやcsvなどから、静的なSVGMapコンテンツを生成するためのソフトウェアが[https://github.com/svgmap/svgMapTools オープンソース]で準備されています。これらのソフトウェアでは、[[#タイリングに関するノート|高度なタイリング手法]]を用いた地図タイルを生成することができます。使用方法などは同リポジトリに用意されているチュートリアルを参照してください。

一方、もちろんSVGMapの仕様に準拠すれば、これらのソフトウェアに頼らず、自由にバックエンドを構築することができます。例えばよく知られた地図タイルサービスを用いたり、古典的な[https://wiki.openstreetmap.org/wiki/Web_feature_service WFS ]や[https://wiki.openstreetmap.org/wiki/WMS WMS]のような動的地図・地理空間情報サービスをベースにして比較的容易にそれらを構築することもできます。[https://github.com/svgmap/svgMapLv0.1/tree/master/appLayers SVGMap.jsのリポジトリのappLayersディレクトリ]にはそのようなシステムを構築する際のフロントエンド側の動的レイヤーのサンプルが掲載されています。

==第二章：SVGMap Revsion 0.1フレームワーク==
SVGMapは究極的には既存のすべてのウェブブラウザがネイティブの機能としてそれを備えることを目標とし、既存のHTML,CSS,SVGなどのウェブブラウザの標準規格との整合性を備え、且つ既存のWeb Mappingの規格との整合性をも備えた仕様として検討と標準化を進めています。しかし今のところまだその標準化は完遂されていないため、その完全な実装がなされたウェブブラウザは存在しません。一方、既存のウェブブザでSVGMapの機能が実行可能となるような拡張をJavascriptによるフレームワークとして構築することが可能です。SVGMap Revision 0.1フレームワークは、このようなJavascriptによるSVGMapの仕様に基づいた初歩的な制限と拡張がされた実装です。その実装はオープンソースとして[https://github.com/svgmap/svgMapLv0.1 こちらのgitubリポジトリ]で公開されています。

そのアーキテクチャの特徴は、ブラウザネイティブのSVGレンダラーを使用せず、HTML,CSS,HTMLCanvas2DAPIを用いてSVGMapが実装されている点です。この特徴は主にこのフレームワークの開発が開始された時期に起因しています。当時のウェブブラウザの多くはSVGが実装されていませんでした。また実装されていたとしても、大規模なベクトルデータのレンダリング、および伸縮スクロール・インタラクティブな操作に対する性能面での処理制御に問題がありました。これらの問題のいくつかは現在のブラウザで解消されているものがあるかもしれません。またこれらの問題の解決とともに、SVGMapフレームワークはLevel番号を上げつつよりネイティブの機能に基づいた実装に移行するかもしれません。<font size="-2">参考までに、[http://svg2.mbsrv.net/devinfo/devkddi/lvl0.5/ 実験的なネイティブのレンダラを用いた実装(2010年)]があります。</font>

SVGのベクトル描画機能は[https://github.com/canvg/canvg canvg]のpathパーサなどを引用することで実装されています。一方、地図としてあまり用いられないと想定された多くの要素やプロパティ、アトリビュートの実装が省略されています。

===追加・拡張された機能：===
====フレームワークの呼び出し====
本フレームワークを用いる場合、SVGMapコンテンツをブラウザに直接読み込ませることはできません。フレームワークを動作させるjavascriptライブラリをロードしたhtmlコンテンツ(WebApps)を準備し、そこでSVGMapコンテンツを読み込み表示させます。利用者には、このhtmlコンテンツのURLを告知します。このhtmlコンテンツを以降'''ルートhtml文書'''と呼ぶことにします。

SVGMapのフレームワークはgithubリポジトリ：https://github.com/svgmap/svgmapjs　で公開されています。

htmlコンテンツの<body>要素直下に以下の要素を配置します。
=====フレームワークを実装したjavascriptライブラリを読み込むscript要素=====
これがSVGMap.jsのコアのフレームワークを構成します。

<nowiki><script type="module">
import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

上のスクリプトで必要なモジュールが読み込まれます。[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]のwindowのメンバには、svgMapオブジェクトを設定しています。

[https://svgmap.org/devinfo/devkddi/tutorials/tutorial5_esm/tutorial5.html 実働サンプル(tutorial5_esm)]

もしくは https://github.com/svgmap/svgmapjs の内容を独自のウェブホストにコピーしそれを用いることもできます。(下の例は[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]のhtmlに対して、svgmapサブディレクトリにjsを置いた場合)
<nowiki><script type="module">
import { svgMap } from './svgmapjs/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

===== GISモジュールを利用する場合 =====
svgMap.jsの地理空間演算機能(GISモジュール)では、jsts.jsを使用しています。そのためGISモジュールを機能させるにはjsts.jsの読み込みが必要です。下記のようになります。もちろん独自のウェブホストにjstsをコピーしてそれを利用することも可能です。

<nowiki><script type="text/javascript" src="https://unpkg.com/jsts@1.6.1/dist/jsts.min.js"></script>
<script type="module">
import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

======本解説書でAPIを説明している、現在利用可能な拡張フレームワーク======
ECMA Script Module対応の内容に現在更新中

* [[#svgMapCesiumWrapper.で呼び出せるAPI|SVGMapLv0.1_CesiumWrapper_r*.js]] (実験的)
** https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/experimental/Cesium3D/SVGMapLv0.1_CesiumWrapper_r3.js
* [[#svgMapPWA.で呼び出せるAPI|SVGMapLv0.1_PWA_r*.js]] (実験的)
** https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/experimental/PWA/SVGMapLv0.1_PWA_r5.js

まだ実験的なsvgMapCesiumWrapperは、[http://www.svgmap.org/devinfo/devkddi/lvl0.1/cesiumSvgMap/top.html svgMap cesium visualizer]ページを参照ください。
SVGMapPWA(ProgressiveWebApp)については、[https://svgmap.org/devinfo/devkddi/lvl0.1/svgMapPWA/ SVGMap PWA Test]ページを参照ください。

=====SVGMapコンテンツを配置するためのdiv要素=====
id属性に"mapcanvas"を設定し、data-src属性(もしくはtitle属性(to be obsoluted))には、地図フレームワークが最初に読み込む、SVGMap.jsが表示する地図コンテンツの起点となるSVGコンテンツ（以降'''コンテナsvgコンテンツ'''と呼びます）のパスを指定したdiv要素を設置します。

コンテナsvgコンテンツはまた、'''[[#レイヤー|ここで記述するレイヤー]]'''を持つことができる特別のコンテンツです。

（要確認：地図のサイズ・配置はこのdiv要素のサイズとなります。無指定の場合は全ウィンドサイズ）
<nowiki><div id="mapcanvas" title="Container.svg"></div></nowiki>

<nowiki><div id="mapcanvas" data-src="Container.svg"></div></nowiki>

======差分データの指定======
data-custom-layers-root属性でContainer.svgに対するレイヤーの差分情報のパスを指定することができます。
もしくは、data-custom-layers-root属性に、レイヤーの差分情報が保管されているディレクトリを記述した場合、URLハッシュで差分ファイルを指定することもできます。
差分データは、[https://github.com/svgmap/svgmapjs/blob/main/SVGMapCustomLayersManager_r3module.html カスタムレイヤーマネージャ]で作成することが可能。（データ形式は後述）
<nowiki><div id="mapcanvas" data-src="Container.svg" data-custom-layers-root="./containerDif/dif0.json"></div></nowiki>

=====地図中心の照準イメージ。=====
参照する画像はあらかじめ用意されたもの以外も利用できます。
<nowiki><img id="centerSight" style="opacity:0.5" src="Xcursor.png" width="15" height="15"/></nowiki>

====任意で設置できる要素：====
=====[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]](後述)を設置するdiv要素=====
<nowiki><div id="layerList" style="left :30px; top: 10px; width:300px;height:90%; position: absolute; "></div></nowiki>
: idが上記の通りである必要があります。
　 styleは任意だが、heightは[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]が展開された状態におけるサイズとなります。格納された状態のサイズは、この要素における文字の縦幅となります。各種オプションについては[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|詳細を参照ください]]
　

=====[[#レイヤー固有のUI|レイヤー固有のUI]](後述)を設置するdiv要素=====
[[#レイヤー固有のUI|レイヤー固有のUI]]を使用するために設置するdiv要素です。

<nowiki><div id="layerSpecificUI" style="right :10px; top: 40px; width:400px;height:400px; position: absolute; background-color: white;opacity:0.8;display:none;"></nowiki>
<nowiki></div></nowiki>
: idが上記の通りである必要があります。styleは任意だが、heightはレイヤリストUIが展開され得る最大のサイズとなります。
　
=====伸縮ボタン=====
<nowiki><img id="zoomupButton" style="left: 5px; top: 5px; position: absolute;" src="zoomup.png" onclick="svgMap.zoomup()" width="20" height="20" /></nowiki>
<nowiki><img id="zoomdownButton" style="left: 5px; top: 25px; position: absolute;" src="zoomdown.png" onclick="svgMap.zoomdown()" width="20" height="20" /></nowiki>
: img要素かつidが上記の値である必要があります。
　伸縮ボタンを一回押すたびに伸縮する比率は、別途svgMap.setZoomRatio(ratio)で設定可能。
　デフォルトの比率はsqrt(3)
　
=====測位ボタン=====
<nowiki><img id="gpsButton" style="left: 5px; top: 45px; position: absolute;" src="gps.png" onclick="svgMap.gps()" width="20" height="20" /></nowiki>
: img要素かつidが上記の値である必要があります。ボタン押下で測位し、測位点を中心にして地図を表示する機能。表示の範囲は測位制度に応じて適当に設置されます。

=====グローバルメッセージ=====
レイヤー固有UIが任意のメッセージを出力可能にするために設置するエリア　[[#レイヤー固有のUI]]のAPI '''putGlobalMessage''' 参照
<nowiki><span id="globalMessage" style="font-size:10px;left:5px;bottom:16px;position:absolute;"></span></nowiki>
: idが上記の値である必要があります。
　styleは任意

=====地図中心の緯度経度値表示=====
<nowiki><font id="centerPos" size="-2" color="brown" style="left: 50px; bottom: 5px; position: absolute;" ></font></nowiki>
: idが上記の値である必要があります。
　styleは任意

=====地図スケールの表示=====
<nowiki><font id="vScale" size="-2" color="black" style="left: 5px; bottom: 28px; position: absolute;">-</font></nowiki>
: idが上記の値である必要があります。
: styleは任意
: 縦50pxに対応したスケール[Km]を表示します
: 近傍に縦50pxのスケールイメージを設置するとわかりやすいでしょう

=====レジューム機能のためのチェックボックス=====
<nowiki><form style="right:10px;top:20px;position:absolute;opacity:0.8" ></nowiki>
<nowiki><input type="checkBox" id="resumeBox" onChange="svgMap.resumeToggle(event)" autocomplete="off"/></nowiki>
<nowiki><label for="resumeBox"/>Keep and Resume view</label></nowiki>
<nowiki></form></nowiki>
: checkboxタイプのform要素であり、idが上記の通りである必要があります。レジューム機能とは、(rev16以前ではcookie、rev17以降ではlocalStorage)を用いて、前回最後に表示された状態（レイヤーの表示非表示状態、表示領域（view port）を再現する機能です。スタイルおよびlabel要素は任意

===== [[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]のためのスタイル=====
<style>
body {
font-family: Meiryo;
}
#layerTable{
background:#ffE0E0;
border: 2px solid #bbb;
}
.layerItem{
background-color: white;
}
.noGroup{
background-color: #fff0f0;
}
#layerList{
background-color: #ffff80;opacity:0.8;
}
</style>
====== [[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]を用いる場合、例えば上記のようなスタイルの定義が必要です。======
* layerList：レイヤーリストUI全体に対するスタイル
* layerTable：レイヤーリストUIの中のテーブルに対するスタイル。
* layerItem：同テーブルに表示される個々のレイヤー表示に対するスタイル
* noGroup：同レイヤー表示のうち、グループに属さないレイヤーに対するスタイル
　

====レイヤー====
SVGMapは古典的な地図情報システムのようなレイヤーの概念を備えていません。一方その上位概念ともみなせる、任意のドキュメントをツリー状に埋め込む機能を備えています。しかしそれでは古典的なユースケースを平易に表現しているとはいえないため、それをラップする古典的なレイヤーの概念と、それに基づくレイヤーユーザインターフェースのフレームワークを持ちます。

フレームワークが最初に読み込む地図コンテンツの起点となる'''[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]'''の中で、animationもしくはiframeを用いて（準拠規格に依る）埋め込まれるsvgコンテンツが、自動的にレイヤーとみなされます。いうまでもなくレイヤーの上下順はSVGコンテンツのスクリプト中での埋め込みの順番の逆順になります。

また、このコンテナsvgコンテンツが参照し埋め込んでいる、各レイヤーのSVGコンテンツのことを、'''[[#レイヤー|レイヤーsvgコンテンツ]]'''と呼ぶこととします。ここで、各[[#レイヤー|レイヤーsvgコンテンツ]]はさらに別のsvgコンテンツを埋め込むことがあります。これらのコンテンツはよくサブレイヤーSVGコンテンツもしくは単にサブレイヤーと呼ばれることもあります。

なお、Rev12以降のSVGMapLv0.1フレームワークではレイヤーフレームワークは本体と独立した実装となり、拡張や切り離しが可能となりました。以下は、標準で提供されるレイヤーフレームワークのVer2 (SVGMapLv0.1_LayerUI2_r*.js)に関して解説します。

レイヤーUIフレームワークが提供するUIは、先述のレイヤーリストUIを設置するdiv要素によって提供されます。このUIは以下の機能を持ちます。
* 折り畳み可能なレイヤーの一覧を表示する機能
* 各レイヤーの表示非表示を切り替える機能
* グルーピングされたレイヤー(後述)をグループとして表現、折り畳み、一括表示非表示する機能。
* そのレイヤーに紐づけられた[[#レイヤー固有のUI]]を出現させる機能。
* 表示されているレイヤーの個数などの情報を表示する機能

===== コンテナsvgコンテンツの記述内容とレイヤーフレームワークの振る舞い =====
* animation要素：　レイヤーとみなされる
** title属性: レイヤーの名称となる。(必須属性) title属性値は他のレイヤーと重複してはならない(ID(このコンテンツ内でのレイヤーの識別子)として振る舞う)
** xlink:href属性: レイヤーsvgコンテンツへの参照
** visibility属性 : レイヤーの初期の表示状態。UIにより変更できる (hidden or visible)
** opacity属性 : レイヤーの透明度
** x,y,width,height属性の振る舞いは共通(viewportがこの属性の値とintersectしていただロードされる)
** class属性: スペース区切りで規定値(複数)と任意値(一つ)を記述できる
*** 詳細は後述の[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供]]を参照
** data-controller属性: (Optional) [[#レイヤー固有のUI]]　の　[[#詳細]]参照
* globalCoordinateSystem要素：(1個つだけ必須要素)
** (コンテナsvgコンテンツにおける)本要素が、このフレームワークによってUser Agentに表示される地図の図法を規定する。
*** なお、それ以外のSVGコンテンツのglobalCoordinateSystem要素は、コンテナsvgコンテンツの図法への変換のために用いられる
*** より詳細は[[#地理座標系の処理]]を参照
* svg要素: (documentRoot要素)
** viewBox属性: 初期の表示範囲を指定。
*** ここに記述する座標値は、SVGの仕様に準ずるが、　拡張記述形式も使用可能　参照：[[#メルカトル図法のドキュメントルート要素のviewBox属性]]

===== レイヤーsvgコンテンツ =====
レイヤーsvgコンテンツは、[[#レイヤー固有のUI|レイヤー固有のUI]]を紐づけることができます。

====クリッカブルオブジェクト====
グラフィックスオブジェクトをクリック（タブレットの場合は、タップもしくは照準アイコンに合わせたうえでタップ）することでそれに紐づけられたインタラクティブ動作を実行する。インタラクティブ動作はフレームワークが独自に提供する、metadataフレームワークに基づく、メタデータの表示機能を対象とします。

なお、image要素(useによって間接的に設置されたimage要素を含む)は、a要素によるハイパーリンクが加えて実装されています。metadaとa要素の双方が設定されているimage要素では、どちらのインタラクティビティを発動させるかをモーダルダイアログによるユーザへの問い合わせが行われます。

====class属性によるレイヤーのグルーピング・クリッカブル機能の提供====
コンテナsvgコンテンツが参照するレイヤー（[[#レイヤー|レイヤーsvgコンテンツ]]）へのリンクを記述する要素(animationもしくはiframe要素)は、class属性によって、各レイヤーに特性を与えることができます。classはスペース区切りで複数指定することができますが、グループ名は一つしか認識されません。
;グルーピング
: 以下の属性値以外の値を記述すると、グループ名として認識され、同じグループ名を持ったレイヤーたちをグルーピングすることができます。グルーピングの効果はレイヤーＵＩにおけるグループ表現と、下記のbatch,switch特性です。グループはレイヤーリストUI上の表現に反映されます。最初に現れたグループ名がこのUIの下に表示されます。ただし地図画面上の描画の順番はこれとは別、SVGの基本的な描画順([https://www.w3.org/TR/SVG11/render.html#PaintersModel Painter Model])に準じます。
;batch
: グルーピングとともに使用します。そのグループに属するレイヤーを一括で表示非表示するための機能がレイヤーＵＩに付加されます。
;switch
: グルーピングとともに使用します。そのグループに属するレイヤーは、どれか一つしか表示されません。batchとの併存はできません。（無視されます（要確認））
;clickable
: Pathなどのベクトル図形要素はデフォルトではインタラクティビティが提供されません。クラス値にclickableを指定することでこのレイヤー（子供のsvgコンテンツを含む）の図形要素においてのみ、インタラクティビティが提供されます。提供されるインタラクティビティは、マウスによって図形をクリックしたとき、そのグラフィックス要素がクリッカブルな要因を備えているかどうかを検索し、備えている場合それに対応するアクションを起こします。
　なお、image要素(useによって間接的に設置されたimage要素を含む)は、このクラスの設定に依らず、a要素によるハイパーリンク、およびmetadataフレームワークを用いたクリッカブルオブジェクトとして機能します。
;editable
: 当該レイヤの[[#レイヤー固有のUI|レイヤー固有UI]]に[[#svgMapAuthoringTool.で呼び出せるAPI|svgMapAuthoringTool]]の図形編集オブジェクトを設置する場合、それを有効に機能させるためにはこの属性が必要です。(なお再編集機能を有効にするにはclickableも必要)

====data-nocache====
コンテナsvgコンテンツが参照するレイヤー（[[#レイヤー|レイヤーsvgコンテンツ]]）へのリンクを記述する要素(animationもしくはiframe要素)に、data-nocache属性をつけることによって、クライアントのコンテンツキャッシュを無効にすることができます。なお、無効化手段はunix-timeクエリパートをそのレイヤー下のすべてのリソースへのアクセスに付加させることによります。

====metadataフレームワーク====
データ格納効率に優れたメタデータのフレームワークが提供されます。このメタデータは先述のクリッカブルオブジェクトとしてインタラクティビティの実装に用いられます。 svgドキュメントルート要素のproperty属性にメタデータの属性名をカンマ区切りで列挙。同文書の図形要素のproperty属性に同じ順序でメタデータの値を記述します。(なお、xlink:title属性でマウスオーバーで機能する吹き出しを設置できます)

ひとつの文書に対して一つのスキーマ（メタデータの属性名とその順番）しか与えられないという制約を持ちます。（その代わり格納効率が高い）クリックやタッチ等によってデフォルトの状態ではブラウザが備えるモーダルダイアログに属性名と属性値がそれぞれ列挙された形で表示されます。metadata表示機能の拡張/カスタマイズについては、ウェブアプリケーションの開発の章で別途解説する'''setShowPoiProperty()'''関数を参照してください。

データ自体にカンマが含まれる場合はエスケープが必要です。

=====例：=====
<svg '''property="id,type,latitude,longitude,title,address,spec"''' ... >
...
<use transform="ref(svg,14118.37511,-4524.39994)" x="0" y="0" xlink:href="#syl8"
'''content="RIS/RJER,地方管理,45.2439994,141.1837511,利尻空港,北海道利尻郡利尻富
士町,1800×45(07/25)"''' xlink:title="利尻空港"/>
...
</svg>

====レイヤーリストUIの詳細====
[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.28.E5.BE.8C.E8.BF.B0.29.E3.82.92.E8.A8.AD.E7.BD.AE.E3.81.99.E3.82.8Bdiv.E8.A6.81.E7.B4.A0|レイヤーリストUIが設置されるdiv要素]]には、以下のプロパティを設定することで、UIの動作を調整するパラメータを与えることができます
* data-customizer [https://github.com/svgmap/svgmapjs/blob/main/SVGMapCustomLayersManager_r3module.html カスタムレイヤーマネージャ]の起動ボタンを設置し、プロパティ値で同ウェブアプリのパスを指定します。
* data-layerstylecontroller 各レイヤーの表示スタイルを調整するUIを設置します(値不要)
* data-hiddenfilter 表示されていないレイヤーをレイヤーリストUI上でも非表示にする機能を稼働させます(値不要)
* data-opened svgMapウェブアプリが起動した直後にレイヤーリストが開かれた状態にします
* data-fixed レイヤーリストが開かれた状態且つ閉じるボタンを表示させません(data-openedと排他)

===動作の制限・差異===
====再描画の制限====
* ブラウザネイティブのSVG描画機能に対して注意すべき点として、このSVGDOMの描画は、基本的に伸縮スクロールのタイミングでしか行われない点です。（ネイティブのSVG描画機能は60fpsで再描画する努力を行っている) そのため、再描画タイミングを意識・明示([[#refreshScreen|refreshScreen]]関数を使用)したアプリケーションの構築が必要になるケースがあります。
*関連情報
**[[内部機構解説#Zoom.2FPan_Controller:]]
**[[解説書#refreshScreen|refreshScreen]]
**[[解説書#setPreRenderController|setPreRenderController]]
**[[解説書#.E6.8B.A1.E5.BC.B5API|preRenderFunction ]]
**[[解説書#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|動的な地図レイヤー]]
**[[解説書#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|レイヤー固有のUI]]
**[[解説書#.E6.8B.A1.E5.BC.B5.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88|拡張イベント]]

===実装されている機能===
多くの機能が実装されていないため、実装されている機能、および拡張された機能をここでは列挙することとします。
====要素====
*path
*globalCoordinateSystem
*circle
*text
*defs
*animation
** 別のsvgコンテンツを取得して埋め込みます。
** コンテナsvgコンテンツで使用した場合は埋め込んだコンテンツは「レイヤー」と見做されます。
** それ以外で使用した場合はタイルやサブレイヤーとして使用できます。
** x,y,width,height属性は、SVGの仕様に基づき埋め込むコンテンツのtransformに影響を与えるとともに、下記の通り動的なコンテンツの読み込み機構が制御されます。
*** この属性で示された領域がtransform後のviewportと交差・包含した場合、その埋め込みコンテンツは動的に取得され表示されます。lazy loadの機構に相当し、タイリングメカニズムを構成します。
*** ただし、visible-min-zoom およびvisible-max-zoom属性で示された拡大率による表示条件を満たしていない場合は取得されません。level of detailの機構に相当します。（x.y,width,height属性と組み合わせることで、タイルピラミッド（ラスター、ベクターを含む）機構を実現します。詳しくは[http://kikakurui.com/x7/X7197-2012-01.html JISX.7197]、[https://www.w3.org/Submission/2011/04/ Tiling and Layering Moduleサブミッション]、もしくは[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html こちらの論文]を参照
** commonQuery属性：[[#レイヤーsvgコンテンツ]]のanimation要素でこの属性を設置すると、そのレイヤーのコンテンツを取得するすべてのGETリクエストのクエリパートにこの属性で設定した値が共通付加されます。(もしKey=Valueの形のクエリを追加したい場合は文字列として"Key="の部分も含めてこの属性値に設定します。)
*iframe
** animationと同等
*image
** 別のビットイメージコンテンツを取得して埋め込みます。
** animation属性のx,y,width,height属性と同様の追加のlazy loadの振る舞いを持ちます。
** visible-min-zoom およびvisible-max-zoom属性の振る舞いも同等です。
** xlink:href属性はspatial fragment をサポートし、(xywhによっ参照されるimageの部分を埋め込む機能をサポートします。)。もしもアスペクト比が異なった場合（ＴＢＤ）
** style:filterプロパティによる画像処理をサポートします。
** data-mercator-tile="true"　属性が設定されている場合、そのビットイメージはメルカトル図法で描画されていることを示します。
** htmlのimg要素のcrossoriginに対応する属性を持つことができます（この場合ビットイメージの埋め込みに際しoriginヘッダが送信）
*view

====属性====
*<code>ref(svg,x,y)</code> ：SVG1.2Tの[https://www.w3.org/TR/SVGTiny12/single-page.html#coords-transform-ref TransformRef]属性により、non-scaling objectが設置できます。Pointフィーチャの可視化に効果的です。　

'''TBD'''
*fill
*stroke
*arrow
*dasharray
*viewvox
*opacity
*style
**image-rendering : pixelated / image要素
**fill
**stroke
**opacity
*meta
**http-equiv="refresh" : [[#レイヤー|レイヤーsvgコンテンツ]]のみ。contentに秒数を設定することで、そのレイヤーを指定秒数ごとに(再読み込み)更新する。script要素はonloadが再実行される。　注：ブラウザのキャッシュが効く可能性を考慮して実装する必要がある。

==第三章：ウェブアプリケーションの開発==
本章はSVGMap Revsion 0.1フレームワークを用いたウェブアプリケーションの開発について解説します。
本フレームワークによる開発部分は以下に分類されます。
*[[#フレームワークの呼び出し|ルートhtml文書]]によるウェブアプリケーション(SVGMapフレームワーク)
* 動的な地図レイヤー(Layers as WebApps) : SVGコンテンツに以下のいずれかの情報を設定する
** [[#レイヤー|レイヤーsvgコンテンツ]]のドキュメントルート要素のdata-controller属性　[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|レイヤー固有のUI]]
** svgドキュメントに設置されたscript要素 [[#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|script要素による動的な地図レイヤー]]

===SVGMapフレームワーク===
[[#フレームワークの呼び出し|ルートhtml文書]]によるウェブアプリケーションはSVGMapLv0.1フレームワークを用いたウェブアプリケーションの基本であり、そのhtml文書と底傘参照されたjavascriptライブラリを読み込んだwindowが持つ''''svgMap''''という名前のインスタンスを用いてフレームワークのための拡張機能を利用することができます。

====SVGMapが持つ基幹オブジェクト====
SVGMapLv0.1フレームワークのインスタンス''''svgMap''''が持つ基幹のオブジェクトを解説します。これらの基幹オブジェクトはそれぞれゲッター(getSvgImages, getSvgImagesProps)によって取得できます。
=====svgImages[]=====
[[#getSvgImages|getSvgImages()]]により取得できる。svgImages[hashID]は、現在ローディングされているSVGドキュメント(“XML” DOMツリー(SVG DOMツリーというよりむしろ))が蓄積されているハッシュテーブル
*ハッシュID：フレームワークが任意に付番した文書ID。ただし、最初にロードされるルートのドキュメントのハッシュキーは、”root”
*なお、[[#レイヤー固有のUI]]のwebAppでは、そのレイヤーに該当するSVGドキュメントが[[#svgImage|svgImage]]で取得できる。

=====svgImagesProps[]=====
[[#getSvgImagesProps|getSvgImagesProps()]]によって取得できる。
同、個々のSVGドキュメントが持つ、各種プロパティが蓄積されているハッシュテーブル。
注記がない限り全てReadonly
*ハッシュID： svgImages同様
*なお、[[#レイヤー固有のUI]]のwebAppでは、そのレイヤーに該当するSVGドキュメントが持つ、各種プロパティが[[#svgImageProps|svgImageProps]]で取得できる。
======プロパティリスト======
*.Path コンテンツのパス（webAppsのdocument(html) rootに対する相対パス。Originが違う場合は絶対パス(クエリパートやフラグメント(ハッシュ)も含む)
*.CRS 地理座標からSVG座標に変換するための変換パラメータ
*.script SVG文書がscript要素を持つとき、そのscriptへのインターフェースが登録される。同script要素で生成されるオブジェクトに暗黙に登録されるメンバー変数については、[[#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|script要素による動的な地図レイヤー]]の章を参照
*.editable 編集可能レイヤーを示す　[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供|レイヤーのclass = editableに対応]]
*.editing 編集可能レイヤーを編集中
*.isClickable クリッカブルなレイヤーを示す
** true:設定　[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供|レイヤーのclass = clickableに対応]]
** 以下をメンバーに持つオブジェクト:ハイライト時のスタイルを設定可能(rev18以降)
*** .hilightFillStyle : ポリゴンオブジェクトのハイライト時スタイル（以下のメンバーが無い場合はハイライトしない）
**** .color : 塗りの色 (CSS の color値として解釈される文字列)
**** .lineWidth : 線幅
*** .hilightStrokeStyle : 線オブジェクトのハイライト時スタイル（以下のメンバーが無い場合はハイライトしない）
**** .color : 線の色 (CSS の color値として解釈される文字列)
**** .widthIncrement : 線幅の増加値
*.parentDocId このSVG文書を埋め込んでいる、親のSVG文書のハッシュID
*.childImages[hashID] このSVG文書が読み込んでいる、子のSVG文書(複数)
*.refresh
**.loadScript
**.timeout
**.start
*.controller レイヤー固有のUIへの(web appsのdoc rootに対する)相対パス
*.isSVG2 その文書がSVG2タイプの文書であるかどうか(CRSとembedの仕方がちがう）
*.rootLayer そのSVG文書が属する「レイヤー」を示す文書
*.scale そのSVG文書の現在のスケール。スケールはそのSVG文書の座標系と画面の座標系との間の値（地理座標系ではない）。拡大するとスケール値は大きくなる
*.preRenderControllerFunction そのSVG文書の再描画(画面更新)シーケンスの直前に実行される関数
*.hash そのレイヤーのURLのフラグメント部（この値は、レイヤ固有WebAppで変更が有効）

====利用可能API====
【TBD】 APIのリストは下記の通りです。
=====SVGMap.で呼び出せるAPI=====
======Geo2SVG======
*Geo2SVG( lat , lng , crs ) : 指定された緯度(lat)・経度(lng)・CRSより、SVG座標を計算する
======POIviewSelection======
*POIviewSelection( poi ) : 指定されたPOIの属性・リンクの表示選択画面を表示する。また、選択したイベントに従い、属性の表示または、リンク先のページを表示する。
======SVG2Geo ======
*SVG2Geo ( svgX , svgY , crs , inv ) : 指定されたSVG座標(svgX , svgY)をCRSにより、GEO座標に変換する。または、invにより逆変換する
======addEvent======
*addEvent(elm,listener,fn) : 指定された要素(elm)にイベント属性(listener)時の呼び出す関数(fn)を設定する (addEventListenerが実装されていなかったブラウザサポートの名残です)
======callFunction======
*callFunction( fname ,p1,p2,p3,p4,p5) : 指定した関数(fname)を引数(p1,p2,p3,p4,p5)を渡してフレームワーク内の任意の関数を実行する。(フレームワークの内部関数も呼び出すことができる)
======captureGISgeometries======
*captureGISgeometries( cbFunc , prop1 , prop2 , prop3 , prop4 , prop5 , prop6 , prop7 ): 現在画面上に表示中の地図コンテンツに対応した、GeoJsonのGeometryデータ構造に準拠のGISgeomerry情報をがレイヤ単位でまとまった連想配列の形で取り出す。非同期処理で、cbFuncの最初の引数に返却される。
** 連想配列のハッシュ値：レイヤID
** geomeryには、src(そのジオメトリのもととなっているSVGの図形要素), href(ビットイメージの場合のリンク)が付加される
** geoJsonのgeometryに相当する情報が含まれる（座標は[経度,緯度]）
** display="none"の図形要素は表示されていないとみなされる。また画面外にある図形要素も表示されていないとみなされる。画面に部分的に表示されている要素は表示されているものとみなされるとともにクリッピングも行われない。
** [[#captureGISgeometriesOption|captureGISgeometriesOption]](true)を設定してから実行すると、ビットイメージもジオメトリとして取得する。（ただし実データは含まれないので必要に応じて[[#getImagePixelData|getImagePixelData]]で取得する）
*** type : Coverage
*** src : 画像情報のURL
*** coordinates : transformのb,c==0の場合、当該画像の南西、北東端が設定される
*** transform : b,c!=0の場合の、画像の座標(左上隅を0,0、右下隅が画像のw,h)から地理座標([経度,緯度])への一次座標変換情報(a,b,c,d,e,f)が設定される

======captureGISgeometriesOption======
*captureGISgeometriesOption(BitImageGeometriesCaptureFlg, TreatRectAsPolygonFlg, SkipVectorRenderingFlg, captureAlsoAsBitImage): captureGISgeometriesでキャプチャするデータの取得条件を設定する。
** BitImageGeometriesCaptureFlg: ビットイメージタイルをカバレッジとして取得するか(Default:false)。captureGISgeometriesを呼び出す前に使用する。
*** 2019.5.17アップデートで、transform matrix(非対角要素あり)を持つビットイメージタイルについても必要な情報を得られるようになった。
** TreatRectAsPolygonFlg: rect要素をポリゴンとして扱う(デフォルトは円もrectもPointとして扱われる)
** SkipVectorRenderingFlg: ベクトル図形の描画をスキップする
** captureAlsoAsBitImage: polygon/polylineの図形を描画したビットイメージをレイヤー単位でカバレッジデータとして取得
*captureGISgeometriesOption(captureGISgeometriesOptionObject) : オブジェクトでも設定できる(rev18以降)（以下そのメンバー変数：全て値はboolean）
** .BitImageGeometriesCaptureFlag, .TreatRectAsPolygonFlag, .SkipVectorRendering, .captureAlsoAsBitImage　上と同様

======checkSmartphone======
*checkSmartphone() : タッチに対応したスマホブラウザなのかどうかを判別
======childDocOp======
*childDocOp(func , docHash , param1, param2 , param3 , param4 , param5) : 指定した文書をルートにして、DOM操作をその子文書に対して実行する。なおこれはlinkedDocOpの直系の子供のみ適用版(自身も適用しない)
======dynamicLoad======
*dynamicLoad( docId , parentElem ) : 指定した文書ID(docId)以下の表示に必要な文書を読み込み、指定したdiv要素(parentElem)に表示する
======escape======
*escape(str) : 以下の文字をHTMLエスケープする(&:&amp,":&quot;,':&#039;,<:&lt;,>:&gt;)
======geo2Screen======
*geo2Screen( lat ,lng ) : 地理座標を指定すると、その画面上のキャンバスの座標(px)を返す
======getBBox======
*getBBox( x , y , width , height ) : 指定された値でviewBoxを作成する

======getBasicPermanentLink======
* getBasicPermanentLink(copyLinkTextToClipboard) : 現在の表示状態(レイヤーの表示非表示および表示領域)を反映した基本的なパーマリンクを生成する
** URLオブジェクトが返却される
** copyLinkTextToClipboardがtrue場合、クリップボードにもURLがコピーされる。
** 生成されるURLは、[[#起動URLによるオプション指定]]の仕様に基づく
** 参考：[[#サブレイヤーパーマリンク]]

======getCentralGeoCoorinates======
*getCentralGeoCoorinates() : グローバル変数 rootViewBox,rootCrsから画面中心地理座標を得る
======getConversionMatrixViaGCS======
*getConversionMatrixViaGCS( fromCrs , toCrs ) : 元座標変換行列(fromCrs)から先座標変換行列(toCrs)への変換行列を作成する

======getCORSURL======
* getCORSURL(originalURL, alsoCrossoriginParam) : クロスオリジンアクセス用URLを生成する。([[#setProxyURLFactory|setProxyURLFactory]]の第4,5引数が設定されている場合)
** alsoCrossoriginParam クロスオリジンアクセスに際してoriginヘッダが必要かを取得する(この引数がある場合は.url, .crossorigin メンバを持つオブヘクトが返却される)
** レイヤー固有UIのウェブアプリなどで独自にクロスオリジンアクセスを行ってデータを取得するような場合にプロキシ経由のURLを生成するのに利用できます。
** 参考：[[#.E3.83.97.E3.83.AD.E3.82.AD.E3.82.B7.E3.81.AE.E8.A8.AD.E5.AE.9A|クロスオリジンアクセスのためのプロキシ設定]]

======getDevicePixelRatio======
*getDevicePixelRatio( docId ) : setDevicePixelRatioで設定した値を取得できる。 docIdが指定されなかった場合は全ての値が得られる

======getElementByImageId======
*getElementByImageId( XMLNode , searchId ) : 指定されたSVG文書群ノード(XMLNode)以下の属性iidが指定されたID(searchId)と等しいノードを返す

======getLoadErrorStatistics======
*getLoadErrorStatistics() : 伸縮スクロール、refreshScreenごとの、リソースの読み込み状況を取得する。
**メンバー変数: timeoutBitImagesCount,timeoutSvgDocCount,otherBitImagesCount,otherSvgDocCount

======getGeoViewBox======
*getGeoViewBox() : コンテナsvgのviewBoxをgeo変換したgeoのviewBoxを取得
======getHashByDocPath ======
*getHashByDocPath ( docPath ) : ターゲットのレイヤーのハッシュをPath名(docPath)から探し出す
======getHyperLink======
*getHyperLink( svgNode ) : 指定されたsvg文書(svgNode)から、親文書をたどり最初に取得できたハイパーリンクを取得
======getInverseMatrix======
*getInverseMatrix(matrix) : 逆行列を求める(matrix.a..f)
======getLayer======
*getLayer(layerID_Numb_Title) : [[#getLayerId|layerID]],title,番号,href(URI)のいずれかで、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]SVGDOMにおけるレイヤーの(svg:animation or svg:iframe)要素を取得する。getLayersと似ているが、getLayersのほうは任意のsvg文書(オプションなしではroot container)に対して、内包されるレイヤーのリストを返却。こちらは[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]に対して検索キーに基づいてレイヤーを返却する

======getLayerId======
*getLayerId( layerKey ) : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]における"レイヤ"概念のレイヤidを検索する。検索に用いることができるのは、getLayerと同じtitle,url,もしくはルートレイヤの要素
* layerIDはレイヤー名とは異なる、フレームワークによって任意に附番された、そのSVGMapドキュメントを識別するための文字列。このlayerIDを基に動作するAPIが多くあります。
* [[#レイヤー固有のUI]]　の　[[#layerID]] も参照

======getLayers======
*getLayers( id ) : オプションなしの場合、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーに該当する要素をリストアップし、返却する。オプションアリの場合、そのidを持つ要素を返却
======getLinearTransformMatrix======
*getLinearTransformMatrix(x1i,y1i,x2i,y2i,x3i,y3i,x1o,y1o,x2o,y2o,x3o,y3o) : ３つの基準点の変換前後の座標を与えると、それに適合する1次変換行列が得られる。(*i:変換前の座標, *o:変換後の座標)
======getMapCanvas======
*getMapCanvas() : 地図キャンバスとなる、おおもとのdiv要素の取得
======getMapCanvasSize======
*getMapCanvasSize() : 地図キャンバスのサイズ(画面サイズ)を取得
======getMouseXY======
*getMouseXY( evt ) : 指定されたイベント時のマウスの画面上の座標(px)を返す
======getNonScalingOffset======
*getNonScalingOffset(svgPoiNode) : 拡大縮小しても伸縮しない図形要素のオフセット値を取得する
======getObject======
*getObject( oname ) : 指定されたオブジェクト(oname)を取得
======getPoiPos======
*getPoiPos( svgPoiNode ) : =getNonScalingOffset
======getRoot2Geo======
*getRoot2Geo() : コンテナsvgのCRSの逆変換CRS( rootのsvg - > geo )を取得
======getRootCrs======
*getRootCrs() : コンテナsvgのCRS ( geo->rootのsvg )を取得
======getRootLayersProps======
*getRootLayersProps() : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の(animetion||iframeで構成される)レイヤー情報を取得する。Arrayが返却、並び順はsvgの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]と同じ（最初のレイヤーが一番下。selectメニュー創るときはひっくり返して使うこと）レイヤー情報：名称、表示非常時状態、レイヤーグループ、グループのフィーチャ(バッチ||スイッチ||ふつう)、編集可、編集中、対応SVGドキュメント、個別ユーザインターフェース、個別凡例
======getRootViewBox======
*getRootViewBox() : aspectを加味し実際に開いているコンテナsvgのviewBoxを取得
======getSvgImages======
*getSvgImages() : svg文書群(XML)の連想配列を取得(ハッシュキーは[[#getLayerId|layerID]]("root"以外は"i"+連番))
* (参考:[[#svgImages.5B.5D|svgImages]])

======getSvgImagesProps======
*getSvgImagesProps() : svg文書群のプロパティ( .Path,.CRS,.script,.editable,.editing,.isClickable,.parentDocId,.childImages,.controller)の連想配列を取得(ハッシュキーは[[#getLayerId|layerID]]("root"以外は"i"+連番))
* (参考:[[#svgImagesProps.5B.5D|svgImagesProps]])

======getSvgTarget======
*getSvgTarget( htmlImg ) : html文書中のimg要素(POI)を入力すると、対応するSVG文書の文書番号とその要素(use)が出力される。対応するuse要素を持つsvg文書自体を取得したい場合は.ownerDocumentする。idからhtml文書のimg要素を取得するには、Document.gelElementById(id)
======getSwLayers ======
*getSwLayers ( cat ) : swLayers[クラス名]に、クラス名ごとのレイヤー(のSVG要素)の全リストを構築する。catがある場合は、catの名称を持つもののリストのみを構築する
======getSymbols======
*getSymbols(svgDoc) : POI編集のsymbol選択を可能にするとともに、defsは、useより前に無いといけないという制約を払った
======getTickerMetadata======
*getTickerMetadata() : 現在Tickerが表示されているグラフィックスオブジェクトのメタデータを取得する
======getTransformedBox ======
*getTransformedBox ( inBox , matrix ) : 指定されたviewBox(inBox)を変換行列にてサイズ変更と移動のみでの座標変換する。b=0、c=0の場合のみ利用可能。たとえば、matrixには、svgImagePropsのCRSを設定することで、そのSVGMapコンテンツのSVG座標系でのviewPortが計算できる。このときmatrixは線形変換の係数が含まれたオブジェクトでも良いし、[[#.E5.A4.9A.E6.A7.98.E3.81.AA.E5.9B.B3.E6.B3.95.E3.81.AE.E5.AE.9A.E7.BE.A9.E3.81.A8.E5.88.A9.E7.94.A8|非線形変換のための関数が含まれたオブジェクト]]でも良い。　svgMap.getTransformedBox(svgMap.getGeoViewBox(),svgImageProps.CRS)

======getUaProp======
*getUaProp() : ブラウザの種類(isIE：IEかどうか、isSP：スマートフォンかどうか)を取得する
======getVerticalScreenScale======
*getVerticalScreenScale(screenLength) : 垂直(緯度)方向のscreenLengthに対する長さを取得する(input: px, return : Km)
======getViewBox======
*getViewBox( svgDoc ) : 指定したSVG文書のviewBoxを取得
======gps======
*gps() : ブラウザの測位APIによって測位しその点を中心に表示、表示縮尺は測位精度を元に適当に決定
======gpsCallback======
*gpsCallback(position) : GPS測位が成功した後に実行されるコールバック関数で、positionを中心とした場所を表示させる
======handleResult======
*handleResult( docId , docPath , parentElem , httpRes , parentSvgDocId ) : SVG文書を(docPathから)svg文書群とそのプロパティをHTTPXMLRequest(httpRes)から親文書(parentSvgDocId)の子文書(docId)として読込み、指定されたHTML要素(parentElem)に貼り付ける
======ignoreMapAspect======
*ignoreMapAspect() : 地図のアスペクト比を、rootSVGのviewBox( or hashのviewBox)そのものに設定する
======initLoad======
*initLoad() : load時に"一回だけ"呼ばれる初期化関数
======isIntersect======
*isIntersect( rect1, rect2 ): rect1(x,y,width,height)とrect2が交差(包含も含む)しているかどうかを返却
======linkedDocOp======
*linkedDocOp( func , docHash , param1, param2 , param3 , param4 , param5 ) : 再帰実行のルートになる文書のハッシュ(docHash)以下の子・孫・・・文書に対して、同じ処理(func( docHash , param1, param2 , param3 , param4 , param5 ))を再帰実行する関数
======loadSVG======
*loadSVG( path , id , parentElem , parentSvgDocId) : SVG文書を(pathから)svg文書群とそのプロパティを親文書(parentSvgDocId)の子文書(id)として読込み、指定されたHTML要素(parentElem)に貼り付ける
======matMul======
*matMul( m1 , m2 ) : 行列の積 x',y' = m2(m1(x,y)) = m(x,y) となる変換行列を構築
======numberFormat======
*numberFormat( number , digits ) : 指定された数値(number)を小数点以下第digit+1位を四捨五入した値を取得
======override======
*[OBSOLUTEWD] override( mname , mval ) : グローバルオブジェクトの関数プロパティでmnameという変数にmvalの値を代入する

======panMap======
* panMap( x, y, options ) : 地図をスムースにスクロールさせる
** x,y : パン量デフォルトはpx
** option.unit でパン量のコンテキストを変化できる
*** "%"||"percent"||"ratio" : 地図キャンバスに対する相対値で指定 (%,percentはパーセント, ratioは比率)
*** "canvas" : 地図キャンバス上の指定した座標を地図中心に
*** Note: 地理座標でパンする場所を変えたい場合は[[#geo2Screen]]を併用すると良い

======parseEscapedCsvLine======
*parseEscapedCsvLine(csv) : CSV 1行分文字列データ(csv)をエスケープを考慮して配列にパースする。
======refreshScreen======
*refreshScreen() : 画面の再描画を実行する（[[解説書#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90|参考情報]]）

======registLayerUiSetter======
*registLayerUiSetter( layerUIinitFunc, layerUIupdateFunc ) : レイヤー選択UI初期化関数と更新用関数を設定する
======reLoadLayer======
*reLoadLayer(layerID_Numb_Title) : 指定したレイヤー([[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーのみ。小孫レイヤーはNG)をリロードする
======resumeToggle======
*resumeToggle(evt) : 引数のイベント(evt)ターゲットのチェックボックスのチェック状態により、setResumeを実行する
======screen2Geo======
*screen2Geo( screenX , screenY ) : 画面上の座標(px)を指定すると、その地理座標を返す
======setCenterHitTest======
*setCenterHitTest(enable) : 自動中心ヒットテストの設定を変更するデフォルト:true

======setCursorCenterZooming======
*setCursorCenterZooming(enable) : (カーソル|ピンチ)位置中心ズーム機能を設定するデフォルト:false

======setCustomModal======
*setCustomModal( messageHTML , buttonMessages , callback,callbackParam) : モーダル画面を出現させ、指定されたメッセージ(messageHTML(String)もしくはdomオブジェクト(Object))、指定されたボタン(buttonMessages(Array))を表示する。ボタンが押された場合、コールバック関数(callback)を引数(クリックしたボタンのインデックス, callbackParam)を渡し呼び出す。
messageにHTML Stringだけではなく、DOM objectが使える点、ボタンに対するcallbackを設定できる点。ただしモーダルダイアログになる点が[[#showModal]]と異なる。

======setDefaultHilightStyle======
*setDefaultHilightStyle( style ) : ヒットテストなどによるオブジェクトのハイライト時のスタイルを設定する
* style : {stroke:{color,widthIncrement}, fill:{color,lineWidth,lineColor}}
** stroke : 線オブジェクトに対してハイライト時の色(color)と線幅増分(widthIncrement)
** fill : 塗りつぶしオブジェクトに対してハイライト時の色(color)、輪郭線幅(lineWidth)、輪郭線色(lineColor)

======setDevicePixelRatio======
*setDevicePixelRatio( dpr (, layerId) ) : zoom計算時に用いる(たとえば２にするとzoom値が本来の２分の１になる)変数を指定値(dpr)に設定する。ズームに応じた表示制御(visible*zoom属性等のLevel of Detail機能)に影響を与える。オプションの[[#getLayerId|layerId]]を指定すると、指定したlayerに対して別個の値を設定する。dprにnullを与えると初期値(1)にクリア。

======setGeoCenter======
*setGeoCenter( lat , lng , radius) : 中心地理座標を指定して地図を移動 (radiusは緯度方向の度1≒110Km) lat,lng:必須 radius:オプション(今の縮尺のまま移動)
======setGeoViewPort======
*setGeoViewPort( lat, lng, latSpan , lngSpan , norefresh) : 地理(グローバル)座標系で指定したエリアを包含する最小のviewportを設定する
======setLayerVisibility======
*setLayerVisibility([[#getLayerId|layerID]]_Numb_Title, visivility, [options]) : 指定した[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーの表示非表示を設定し、layerListUIのアップデートも行う
** layerID : String: [[#getLayerId|layerID]]のの文字列
** visivility : Boolean
** options : Object　以下のメンバー変数でオプションの指定が可能
*** .exec : String : 指定したレイヤーがレイヤー固有UIを持つ場合、その起動を指定できます。与えることができる文字列は[[#.E8.A9.B3.E7.B4.B0|data-controllerの起動オプション]]と同じ。
*** .hash : 指定したレイヤーを表示するときにハッシュ値を設定する

======setMapCanvas : ======
*setMapCanvas : ( mc ) : 地図キャンバスとなる、おおもとのdiv要素を指定した要素(mc)に設定
======setMapCanvasCSS======
*setMapCanvasCSS(mc) : マップキャンバスのCSS(postion、overflow、top、left、width、height)を設定
======setMapCanvasSize======
*setMapCanvasSize( mcs ) : 地図キャンバスのサイズを指定したサイズ(mcs)に設定
======setPreRenderController======
*setPreRenderController( layerID, cntFunc ) : 再描画(画面更新)シーケンスの直前に実行する関数(cntFunc)を設定する。　[[#getLayerId|layerID]]が指定されていると、そのIDをもつSVG文書に対して設定する。指定されていない場合は、全てのSVG文書に対して指定した関数が描画前に実行される。cnfFuncが無い場合は設定を解除する。また、cntFuncには再描画前制御の際に必要になるかもしれないいくつかの変数が第一引数にオブジェクトの形で渡される。(docId,scale,actualViewBox,geoViewBox,viewChanged(zoom|scroll|false) なお、SVGMapLayerUI.jsが有効化されている場合、[[#.E6.8B.A1.E5.BC.B5API|レイヤ固有UIのhtml文書中のscript内にpreRenderFunctionという関数]]がある場合、そのレイヤーを指定したsetPreRenderControllerでの関数設定と同じ振る舞いをする。なお、この処理内容は、動的レイヤー(<script>を持つSVGコンテンツ)のonload関数と同じタイミングで呼び出される関数をレイヤ固有UI等に設置できるものと考えると良い。

======setResume======
*setResume( stat ) : レジュームを実行するかどうかを引数(stat)によって設定し、cookieにレイヤー情報を保存する
======setRootLayersProps======
*setRootLayersProps(layerID_Numb_Title, visible , editing , hashOption , removeLayer , execOption ) : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の(animetion||iframeで構成される)レイヤー情報を設定する。[[#getLayerId|layerID]]_Numb_Titleは、レイヤー番号(root svg container内での順番)、[[#getLayerId|layerID]](svg文書のiid = htmlのid = selectのvalue)、タイトル名(不確実-同じ名前があるかもしれない。最初に当たったものを選択)。変化があるとtrueが返却される。
*visible , editingはtrue,false,nullのいずれか。nullの場合、その値を変化させないという意味。もしくは不合理の場合はfalseが返却される。この時classで設定されているレイヤーグループの特性(switch)に基づいた制御がかかる
*hashOption 指定したレイヤーを表示するとき、ハッシュを指定して表示する
*removeLayer 指定したレイヤーを消去する
*execOption レイヤ固有UIを持つレイヤーを表示する場合の起動方法を指定："hiddenOnLayerLoad", "onClick", "appearOnLayerLoad"のいずれか。[[#.E8.A9.B3.E7.B4.B0|詳細はこちらを参照]]

*setLayerVisibilityと異なり、アップデート(refreshScreen())は別途行う必要がある

======setRootViewBox ======
*setRootViewBox ( rvb ) : aspectを加味し実際に開いているコンテナsvgのviewBoxを指定したコンテナsvgのviewBox(rvg)に設定*setShowPoiProperty( func , docId ) : 特定のレイヤー・svg文書(docId)もしくは、全体に対して別のprop.表示関数(func)を指定する。funcが未指定の場合、設定された関数をクリアする。指定した関数は、帰り値がfalseだった場合、デフォルトprop.表示関数を再度呼び出す
======setShowPoiProperty======
*setShowPoiProperty(func , docId ): 特定のレイヤー・svg文書(いずれもdocIDで指定)もしくは、全体に対してPOIをクリックした時の表示関数をセットする
**セットされていないときは内蔵のデフォルト関数が使用される
**docId: セットされていないときはすべてのレイヤの docIdがルートレイヤに対応するものの場合はそのレイヤー下の子孫文書に対しても
**func: コールバック関数
*** funcがセットされいていないときはクリアする
*** funcの第一引数にはクリックされた要素が入る

======setSmoothZoomInterval======
*setSmoothZoomInterval(zoomInterval) : ズームアニメーションの設定(ズームイン／アウト後のタイル読み込み開始タイマー(ms))(Default:20ms)
======setSmoothZoomTransitionTime======
*setSmoothZoomTransitionTime(zoomTransitionTime) : ズームアップ[[#zoomup]]／ダウン[[#zoomdown]]／パン[[#panMap]]時の遷移時間(Default:300ms)

======setSummarizeCanvas======
*setSummarizeCanvas( val ) : 2Dベクトル図形描画用に統合キャンバス(レイヤー単位でのキャンバス統合)の使用有無を設定する。デフォルトは統合する
======setUpdateCenterPos======
*setUpdateCenterPos(func) : 中心座標書き換え関数を指定した関数に設定(デフォルト:id="centerPos"要素の文字列を適当に書き換える)
======setProxyURLFactory======
*setProxyURLFactory( documentURLviaProxyFunction, imageURLviaProxyFunction, imageCrossOriginAnonymous, imageURLviaProxyFunctionForNonlinearTransformation, imageCrossOriginAnonymousForNonlinearTransformation, LaWAfetchviaProxyFunction ): コンテンツの取得をプロキシ経由等にするために、URL(文字列)を書き換える関数を指定する。
** documentURLviaProxyFunction : svgドキュメント用のプロキシ経由のURLを生成する関数をここに設定する。<code>URLviaProxy = documentURLviaProxyFunction(URL)</code>
** imageURLviaProxyFunction : 同ビットイメージ用
** imageCrossOriginAnonymous : ビットイメージのコンテンツ取得に際しcrossorigin = "anonymous"を設定
** imageURLviaProxyFunctionForNonlinearTransformation: ビットイメージへの非線形図法変換専用のプロキシ経由URL生成関数を設定する。
** imageCrossOriginAnonymousForNonlinearTransformation : 同上のコンテンツ取得に際しcrossorigin = "anonymous"を設定
** LaWAfetchviaProxyFunction : [[#レイヤー固有ユーザインターフェース|LaWA]]内のFetch/XHRに対してプロキシ経由URL生成関数を設定する。
** 参考：[[#.E3.83.97.E3.83.AD.E3.82.AD.E3.82.B7.E3.81.AE.E8.A8.AD.E5.AE.9A|クロスオリジンアクセスのためのプロキシ設定]]

======setZoomRatio ======
*setZoomRatio ( ratio ) : zoomUp、zoomDownボタン押下時のズームレシオを指定した値(ratio)に設定する
======showModal======
*showModal( htm , maxW, maxH) : ダイアログ表示フレームワークを呼び出し、指定したhtm文字列を最大maxW,H値の中で表示する。closeボタンはフレームワークで設置される（参考[[#setCustomModal]]）（API名に反して、この関数はモーダルダイアログではない、ダイアログボックスの挙動を取る）
** htm：ダイアログ内に表示するhtmlのソース文字列、もしくはHTML DOM Elementオブジェクト
** maxW, maxH : Optional: ダイアログのサイズ（もしウィンドサイズに収まらない場合は、このサイズを下回ることがある。指定されていない場合はhtmの内容をベースにサイズが変化する


======showPage======
*showPage( hyperLink ) : 指定されたハイパーリンク先のページを表示する。ハッシュだけの場合は viewPort変化をさせる
======showUseProperty======
*showUseProperty( target ) : 指定されたPOI( target )の属性情報を表示する
======transform ======
*transform ( x , y , mat , calcSize , nonScaling) : 指定された座標を変換する。
======updateLayerListUI======
*updateLayerListUI() : レイヤーリストのUIの表示を更新したりレイヤー固有UIを設定したりする
** '''[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のsvgmap文書をDOMで直接編集したり、setRootLayersPropsで操作した場合、この関数を呼ばないとレイヤ固有UIが正しく設定されないなど多くの処理が破綻するので、必ず呼ぶ必要がある。(近い将来refreshScreenで自動的に反映されるようにする予定)'''

======zoomdown======
*zoomdown( ratio ) : 地図をスムースにズームダウン
** ratioはオプション(デフォルトは1.732)

======zoomup======
*zoomup( ratio ) : 地図をスムースにズームアップ
** ratioはオプション(デフォルトは1.732) (デフォルトは[[#setZoomRatio]]で変更可)

=====svgMapAuthoringTool.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_Authoring_r*.jsを用いた場合に使える
======cancelPointingPoiRegister======
* cancelPointingPoiRegister: initPOIregistToolで設置したUIの地図クリック・タッチでの座標入力イベント(click, touchend)をキャンセルする
======clearTools======
*clearTools: オーサリングツールを除去する。
======initGenericTool======
*initGenericTool(targetDiv,poiDocId,cbFunc,cbFuncParam,options): 点、線、多角形（オプションでそれらのバッファ付き）の総合オーサリングツールを初期化する。
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** options: {withBufferedTools,editingStyle,shapeStyle}　その他オプションをオブジェクトで指定(Optional)
*** withBufferedTools: boolean: trueでバッファ付きツールを追加
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルをブジェクトで指定
*** editingStyle: {opacity,strokeWidth,stroke,fill}：編集中の表示スタイルをブジェクトで指定
*** useXlinkTitle: trueでタイトル編集欄付きツール (Pointツールには影響しない)
*** styleEditor: trueでスタイル編集UI追加

======initPOItools======
*initPOItools(targetDiv,poiDocId,cbFunc,cbFuncParam,getPointOnly,returnSvgElement,options)　: 複数のPOIを編集するツールを初期化する (このツールは一個しか設置できない)
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** getPointOnly : ポイントを取得するのみで、その点にuse要素を設置することはしない(Optional)
** returnSvgElement : trueで編集したSVG要素などがコールバック関数に構造化され返却される(Optional)
** options : {bufferOption,editingStyle,shapeStyle}: その他のオプションをオブジェクトで指定(Optional)
*** bufferOption : trueでバッファ付きツール
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルを指定 (buffer指定時に有効)
*** styleEditor: trueでスタイル編集UI追加

======initPOIregistTool======
*initPOIregistTool(targetDiv,poiDocId,poiId,iconId,title,metaData,cbFunc,cbFuncParam,getPointOnly,returnSvgElement): 一個のPOINTオブジェクトの登録ツール・座標入力ツールを初期化する
** initPOItoolsと異なりこちらのツールは複数個設置できる
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** poiId : 登録するPOIのIDを指定
** iconId : 対象文書内のアイコンのIDを指定
** title : アイコンのタイトルを指定
** metaData : アイコンのメタデータ文字列を指定
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** getPointOnly : ポイントを取得するのみで、その点にuse要素を設置することはしない(Optional)
** returnSvgElement : trueで編集したSVG要素などがコールバック関数に構造化され返却される(Optional)
======initPolygonTools======
*initPolygonTools(targetDiv,poiDocId,cbFunc,cbFuncParam,isPolylineMode,options): POLYGONオブジェクトの"編集"ツール新規追加、削除、変更などが可能　ただし一個しか設置できない
** コンテナsvgコンテンツでclickable及びeditableを設定したレイヤーで再編集可能
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
*** 第一引数に成否、第二引数にcbFuncParam が入る。作成したPOIの情報は、SVGDOMから得るか、指定したdiv内に生成されているフォームから得る（少し使いづらいので、今後もう少し便利にするかもしれません）
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** isPolylineMode : ポリゴンではなくポリラインの編集ツールとする
** options : {bufferOption,editingStyle,shapeStyle}: その他のオプションをオブジェクトで指定(Optional)
*** bufferOption : trueでバッファ付きツール
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルを指定
*** editingStyle: {opacity,strokeWidth,stroke,fill}：編集中の表示スタイルを指定
*** useXlinkTitle: trueでタイトル編集欄付きツール
*** styleEditor: trueでスタイル編集UI追加

======setTargetObject======
*setTargetObject: TBD プログラムから編集対象オブジェクトを指示する（ただし編集中レイヤのオブジェクトに限る）
======isEditingGraphicsElement======
*isEditingGraphicsElement: 編集中のオブジェクトがあるかどうかを確認する

=====svgMapGIStool.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_GIS_r*.jsを用いた場合に使える。なお本機能拡張はJSTS([https://unpkg.com/jsts@1.6.1/dist/jsts.min.js jsts.min.js])の読み込みがさらに必要。

====== 参考：JSTS ======
[https://github.com/bjornharrtell/jsts/ JSTS](JavaScript Topology Suite)は、[https://github.com/locationtech/jts JTS](Java Topology Suite)をjavaScriptに移植した地理空間情報処理ライブラリです。地理空間情報の標準に準拠したAPIを備えています。
* [https://github.com/bjornharrtell/jsts JSTSのプロジェクトページ]
* [http://locationtech.github.io/jts/javadoc/ API](JTS用、JSTSもこれに準ずる)
* [https://www.tsusiatsoftware.net/jts/files/JTS_Library_for_Geometry_2011.pdf JTSの機能概要スライド]

====== buildDifference======
* buildDifference( sourceId1, sourceId2, targetId , strokeColor, strokeWidth, fillColor, progrssCallback, getResultAsGeoJsonCallback,getResultAsGeoJsonCallbackParam)
** JSTSのDifferenceを実行
** 引数はbuildIntersectionの該当引数に対応

======buildIntersection======
*buildIntersection( sourceId1, sourceId2, targetId , strokeColor, strokeWidth, fillColor, progrssCallback, addSourceMetadata, getResultAsGeoJsonCallback, getResultAsGeoJsonCallbackParam, options )
** sourceId1とsourceId2のレイヤーに対してJSTSのIntersectionを実行し、結果をtargetIdレイヤーにコンテンツとして出力する。性能はgetIncludedPointsより低いことが多い intersection処理の振る舞いは[https://bjornharrtell.github.io/jsts/ JSTSを参照]
** sourceId1: sourceId1レイヤーのレイヤーID
** sourceId2: sourceId2レイヤーのレイヤーID
** targetId : targetId レイヤーのレイヤーID
** strokeColor : 線の色 (なお、strokeColor, strokeWidth, fillColor のいずれも指定ない場合は描画しない(getResultAsGeoJsonCallbackがあればそこに結果を変換するのみ))
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** progrssCallback: 変換途中の状況が返されるコールバック関数。
** addSourceMetadata: sourceId1とsourceId2の各図形要素に付随しているメタデータ(contentアトリビュートの値)を演算結果の該当する図形要素に結合して付加する。
** getResultAsGeoJsonCallback: 演算結果をgeoJsonで返却を受けたい場合にコールバック関数を指定する。第一引数に結果が返る
** getResultAsGeoJsonCallbackParam : 上記コールバック関数に送りたい引数(第二引数に入力される)
** options: その他のオプションを指定するオブジェクト(下記、メンバ変数)
*** uniteSource1: trueでsourceId1のジオメトリ群をuniteしてから演算する
*** uniteSource2: trueでsourceId2のジオメトリ群をuniteしてから演算する
*** areaCompare: trueで演算結果と元のジオメトリとの面積比をメタデータに付与
*** resultGroupId: 演算結果を生成するグループを指定
*** opacity: 透明度

======captureGeometries======
*captureGeometries( cbFunc , opt ) : svgMap.captureGISgeometriesの引用
====== coverageImageXY2LatLng======
* coverageImageXY2LatLng(pixWidth , pixHeight, px,py,targetCoverage) : ビットイメージカバレッジのピクセル座標から地理座標を算出する関数
** pixWidth, pixHeight : ビットイメージカバレッジのサイズ
** px,py : ビットイメージカバレッジのピクセル座標
** targetCoverage : getInRangePolygonParts で得られた返り値を設定する
====== drawGeoJson======
* drawGeoJson( geojson , targetSvgDocId, strokeColor, strokeWidth, fillColor, POIiconId, poiTitle, metadata, parentElm, metaDictionary) : geojsonのgeomerty を指定したレイヤーに描画する
** geojson : geojson データのgeopmetry
*** メタデータ : メタデータはgeojsonの本来のメタデータ仕様(type:Featureのオブジェクトにpropertiesを設置する)で設定可能
**** また、連想配列もしくは配列の形で、関数の呼び出し時のmetadataパラメータでデフォルトのメタデータを指定できる。
**** また、geoJSONの任意のデータ階層にmetadataプロパティとしても埋め込める。
**** 加えて、propertiesを同様に任意のデータ階層に設定できる(この場合、上の階層の値は下の階層の値で上書きされる)
*** スタイリング : メタデータ仕様を拡張した、geojsonの[https://github.com/mapbox/simplestyle-spec mapbox拡張仕様]に基づいて、描画スタイルを各Featureに設定可能　上記の拡張properties拡張により、デフォルト描画スタイルを設定することも可能。
**** marker-sizeは未実装。marker-symbolではsvgコンテンツのdefsで登録済みのアイコンのIDを指定する。
**** 参考: properties.で設定できる、スタイル属性名: <code>title, description, marker-size, marker-symbol, marker-color, stroke, stroke-opacity, stroke-width, fill, fill-opacity</code>
** targetSvgDocId : 描画先のレイヤーID
** strokeColor : 線の色
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** POIiconId :　Pointの場合のアイコンID(あらかじめ指定した描画先のレイヤーのコンテンツに該当IDのアイコンが定義されている必要がある)
** poiTitle : POIのタイトル
** metadata : POIのメタデータ（連想配列）
** parentElm : (Optional) 指定した要素の子要素として描画
** metaDictionary: (Optional) メタデータとして要素に埋め込みたい属性名のリストを配列で指定する（これ以外の属性は無視するようになる）

====== drawKml======
* drawKml( kml , targetSvgDocId, strokeColor, strokeWidth, fillColor, POIiconId, poiTitle, metadata, parentElm,styleData) : KMLを指定したレイヤーに描画する
** KML : KML 描画するKMLデータのXML DOM
** targetSvgDocId : 描画先のレイヤーID
** strokeColor : 線の色
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** POIiconId :　Pointの場合のアイコンID(あらかじめ指定した描画先のレイヤーのコンテンツに該当IDのアイコンが定義されている必要がある)
** poiTitle : POIのタイトル
** metadata : POIのメタデータ文字列
** parentElm : (Optional) 指定した要素の子要素として描画
** styleData : TBD

====== getBufferedPolygon ======
* getBufferedPolygon(geom,bufferLength) : 任意のジオメトリ(geom)に対して、指定のバッファ長[m]のポリゴンジオメトリを生成する。
** Note: [[#captureGISgeometries]]で取得したデータ等も演算対象にすることができる。

====== getColorString ======
* getColorString(r,g,b) : r,g,b値から、webColor文字列を生成する

======getExcludedPoints======
*getExcludedPoints(poiID, polyID, cbFunc, param , progrssCallback , pointOnly ) : 指定したpoiID検索対象レイヤーのうち、指定したpolyIDポリゴンコンテンツレイヤーのポリゴンに内包されないものを抽出する。
** パラメータはinverseを除きgetIncludedPointsと同じ。
====== getImage======
* getImage(sourceData, renderingOptions ) : メッシュデータからビットイメージ(mage/pngのdataURL)を生成
** sourceData : 以下のデータ構造を持つオブジェクト
*** width, height メッシュのピクセル数
*** rasterData[py][px] 以下のデータ構造を持つオブジェクト
**** color 以下のデータ構造を持つオブジェクト
***** r,g,b,a
**** inRange : boolean
** renderingOptions : 以下のデータ構造を持つオブジェクト
*** drawOutOfRange : boolean レンジ内ではなくレンジ外を描画する
*** fillColor : boolean 上記条件のピクセルを指定した色で描画する
*** useCoverageColor 上記条件のピクセルをカバレッジの色で描画する

====== getImagePixelData======
* getImagePixelData(capturedSvgMapGeometry, callBackFunction, param) : ラスタ画像のビットマップデータを取得する。
** capturedSvgMapGeometry : [[#captureGISgeometries|captureGISgeometries]]で取得したビットイメージカバレッジのジオメトリ情報をもとに取得する
** callBackFunction : 取得したビットイメージデータが引数に渡される
*** data : RGBA intArray ( CanvasのContext.getImageData(...).dataで得られる情報と同様のデータ)
*** width
*** height
*** param : getImagePixelDataの第三引数がそのまま渡される

====== getIncludedPoints======
* getIncludedPoints(poiID, polyID, cbFunc, param , progrssCallback , inverse , pointOnly ) : 指定したpoiID検索対象レイヤーのうち、指定したpolyIDポリゴンコンテンツレイヤーのポリゴンに内包されるものを抽出する。
** poiID : 検索対象コンテンツレイヤーのレイヤID
** polyID : ポリゴンコンテンツレイヤーのレイヤID
** cbFunc : 検索完了後の結果を返却するコールバック関数　第一引数にポイントがGeoJasonのGeometry形式で返却され、第二引数にその個数、第三引数に(あれば)下記paramが返却される
** param : cbFuncに渡す任意パラメータ(第三引数に入る)
** progrssCallback : 変換途中の状況が返されるコールバック関数。　変換中　時々呼び出され、変換状態[%]が第一引数に渡される。
** inverse : trueで getExcludedPoints
** pointOnly : trueの場合検索対象コンテンツレイヤーのジオメトリがPoint以外の物は無視、false(もしくは未設定)の場合はPolygonやMultiLineStringのデータの場合中心点をPointと見立てて検索なお、ポリゴンやポリラインのしっかりした処理を期待する場合は下記のbuildIntersectionを使用すべき。
====== getInRangePoints======
* getInRangePoints(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : 検索対象のPointジオメトリが、検索条件としてのラスターデータ(カバレッジ)の特定色域に入っているものを検索する（ラスターGIS機能）
** poiID_or_points : 検索対象のPointジオメトリのあるレイヤIDもしくは、geoJsonのPointジオメトリ自体
** coverIDラスターデータ(カバレッジ)のレイヤーID
** rangeData : 色域 .hue, .satulation, .value, .alphaをそれぞれ指定する
*** hue: 0..360
*** satulation, value, alpha : 0..100
*** .hue, .satulation, .value, .alphaそれぞれのレンジは<nowiki>[[range1Min,Max],[range2Min,Max],...[rangenMin,Max]]</nowiki>の形で指定する。
*** データがない場合のデフォルトは<nowiki>{hue:[[0,360]],satulation: [[10,100]],value:[[10,100]],alpha:[[10,100]]}</nowiki> : アルファが10以上の全ての色
*** .outOfBoundsColor : TBD {r:255,g:0,b:0} の形で色を指定するとその色のピクセルは領域外(存在しないもの)として評価をスキップする
** cbFunc : 検索完了後の結果を返却するコールバック関数　第一引数にポイントがGeoJasonのGeometry形式で返却され、第二引数にその個数、第三引数に(あれば)下記paramが返却される
** param : cbFuncに渡す任意パラメータ(第三引数に入る)
** progrssCallback : 変換途中の状況が返されるコールバック関数。　変換中　時々呼び出され、変換状態[%]が第一引数に渡される。
** preCapturedGeometry : svgMap.captureGISgeometries()であらかじめ取得したgeometryがある場合、それを投入するとそれを用いて処理する
** computingOptions : getInRangeGeometriesOnCoverageを参照
====== getInRangeLineParts======
* getInRangeLineParts(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : ラインストリングジオメトリ用のラスターGIS機能パラメータはgetInRangePoints()と同じ
====== getInRangePolygonParts======
* getInRangePolygonParts(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : ポリゴンジオメトリ用のラスターGIS機能パラメータはgetInRangePoints()と同じ

====== getInRangeGeometriesOnCoverage======
* getInRangeGeometriesOnCoverage(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry, computingOptions ) : getInRange*を包含する関数
** computingOptions.targetVectorTypeで以下を設定することでそれぞれの機能を動かすことができる
*** 0:point,1:polyline(multiLineString),2:polygon
** computingOptions:
*** overlappingCoverage : "or"
*** splitByCoverage : boolean カバレッジが複数のビットイメージ(タイル)で構成されている場合、タイルごとに分割した答えを返す
***
====== haltComputing======
* haltComputing() : getIncludedPoints, getExcludedPoints, buildIntersectionを中断する
====== imageUrlEncoder ======
* imageUrlEncoder : オリジナルのURLから、setImageProxyの設定を加味したURLを生成する関数
====== latLng2coverageImageXY======
* latLng2coverageImageXY(pixWidth , pixHeight, lng,lat,targetCoverage) : 地理座標からビットイメージカバレッジのピクセル座標を算出する関数
** pixWidth, pixHeight : ビットイメージカバレッジのサイズ
** lng,lat : 地理座標
** targetCoverage : getInRangePolygonParts で得られた返り値を設定する
====== latLng2GeoJsonPoint======
* latLng2GeoJsonPoint(lat , lng ) : 緯度経度をGeoJsonのPointジオメトリに変換する
====== renderImages ======
* renderImages(sourceDataArray, parentElment, crs, renderingOptions) : ビットイメージカバレッジ×ポリゴンGIS(getInRangePolygonParts)の結果を直接可視化する
**sourceDataArray : [[#getInRangePolygonParts]]の結果を設定
**parentElment: SVGMapコンテンツ内で描画する親要素を設定
**crs: 描画するSVGMapコンテンツのCRS matrix(a,b,c,d,e,f)を設定
**renderingOptions : [[#getImage]]を参照

====== setImageProxy======
* setImageProxy( url , directURLls , useAnonProxy): getInRangePointsは、canvasを使った処理のため、CORSの制約にかかる場合、proxyを設定して回避できる。
** url : encodeURIComponent()でエンコードしたカバレッジのレイヤーのビットイメージのURLを付加すると、proxyとしてimageを返却してくれるURL文字列を指定
** directURLls : proxyを使わず直接アクセスするコンテンツを判定するための文字列の配列（この文字列のどれかが含まれていたら直接アクセス）
** useAnonProxy : Image.crossOrigin = "anonymous"を指定してアクセスする

====== hsv2rgb ======
* hsv2rgb(h, s, v) : hsv値からrgb値の色情報変換
** h (hue): 0..360
** s (saturation): 0..100
** v (value): 0..100
** 帰り値 : {r,g,b}: いずれも0..255

====== rgb2hsv ======
*rgb2hsv(r, g, b): RGB値からHSV値の色情報変換
** rgb: いずれも0..255
** 帰り値:{h,s,v}
*** h:0..360
*** s,v: いずれも0..100

=====svgMapLayerUI.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_LayerUI2_r*.jsを用いた場合に使える。
======assignLayerSpecificUiElement======
* >r4
* assignLayerSpecificUiElement( targetElement , isInline , autoSizing) : レイヤ固有UIを出力する先のDOM要素を指定する
** この関数は、レイヤーUIの初期化前～[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]読み込み前に呼ばれる必要がある（すなわち、load時のみ有効）
** targetElement : 出力先要素：出力先はsvgMapオブジェクトを持つwindowでなくても良い
** isInline : boolean 指定した要素をインライン要素として扱い、UIが存在しえない場合は消える。レイヤ固有UIを消すボタンも付与される
** autoSizing : boolean 自動リサイズを有効化

======customEvents======
*customEvents() : サポートしているイベントを返却

======launchController======
* >r4
* launchController(layerID, cbf) : レイヤ固有UIを出現させる。ただしそのレイヤーがレイヤー固有UIを持っており、且つ表示状態になっている必要がある。
** [[#getLayerId|layerID]] : レイヤーのID
** cbf (optional) : レイヤー固有UIが生成されたとき、第一引数にレイヤー固有UIのwindowオブジェクトが返却される。

======layerSpecificUIhide======
* layerSpecificUIhide() : レイヤ固有UIを隠す

======setLayerListmessage======
* setLayerListmessage( head , foot ) : head 及び footで指定した文字列を　レイヤリストUIのトップのメッセージに設定する。[head]numberOfVisibleLayers[foot] : デフォルトはhead :"Layer List: ", foot :" layers visible"

=====svgMapPWA.で呼び出せるAPI=====
'''実験的機能段階''' :
; 以下のAPIは、SVGMapLv0.1_PWA_r*.jsを用いた場合に使える。
:- SVGMap.jsをPrpgressiveWebApps(PWA)として動作させ、オフラインでも利用できるウェブアプリを構築することができる。
:- Progressive Web Appsが機能するブラウザで有効。Chrome,Edge(PC,Android), Safari(Apple製品)
:- iOS SafariのPWAネイティブキャッシュの50MB制限を回避するIndexedDBによる実装がなされており、そのクォータが許す限りの(iOSでも数百MB以上の)オフライン地図コンテンツを利用できる
:- 同じく、iOS Safariが持たないsyncの一部を代替する機能(オンラインになったらポストする機能)が利用できる
:- zip圧縮されたオフラインコンテンツパッケージ読み込み機構を使う場合はzip.jsおよびそれが利用するArrayBufferReader.js,deflate.js,inflate.jsの読み込みが必要。
:- <code>serviceWorkerPath</code>グローバル変数で、専用のサービスワーカープログラムsvgMapServiceWorker_r*.jsのパスを指定する必要がある。
::- サービスワーカー～svgMapServiceWorker_r*.jsは、同jsと同じディレクトリにあるbaseResources.jsonを読み込み初期設定を行う
::- baseResources.json：　srcにサービスワーカーネイティブのキャッシュに読み込むべきリソースのリストを記載、mapCacheTargetに、SVGMapのコンテンツキャッシュを稼働させるターゲットとなるパスを記載
::-baseResources.jsonの例
<pre>
{
"src": [
"index.html",
"Container_mercator_org.svg",
"SVGMapLv0.1_PWA_r5.js",
"js/SVGMapLv0.1_r16.js",
"js/SVGMapLv0.1_LayerUI2_r3.js",
"js/SVGMapLv0.1_GIS_r2.js",
"js/SVGMapLv0.1_Authoring_r7.js",
"js/jsts.min.js",
"imgs/gps.png",
"imgs/gps_s.png",
"imgs/Xcursor.png",
"imgs/zoomdown.png",
"imgs/zoomdown_s.png",
"imgs/zoomup.png",
"imgs/zoomup_s.png",
"imgs/mappin.png"
],
"mapCacheTarget":"localMaps/"
}
</pre>

* autoPilotDownloader
*:エリアと縮尺を指定し、オートパイロットで地図画面をスクロールさせることで、オフラインキャッシュに地図を保存する動作を自動的に行う機能のオブジェクト。レイヤー固有UIでの利用などを想定しており、以下のメンバー関数を持つ
** halt()
**:オートパイロット動作を中断させる
** searchAll(initialViewBox, minScale, maxScale)
**:- initialViewBoxで指定したエリアを、minScale、maxScaleの間でオートパイロットをかけキャッシュに保存させる
**:- minScale, maxScaleは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の座標系におけるscale値(getRootScale()で取れるもの)
** setProgressCallBack(cbf)
**:オートパイロット動作中の進行状況をcbfの第一引数に返却する
* async clearOfflineContents()
*:SVGMapのオフラインコンテンツを全消去する。SVGMapのオフラインコンテンツはserviceWorkerのネイティブキャッシュ機構とは別の独自キャッシュ機構(indexedDBを使用した機構)として構築される
* clearCache()
*:（未実装）serviceWorkerのネイティブキャッシュを全消去する
* cacheDB
*:SVGMapのオフラインコンテンツデータベースのオブジェクト。IndexedDBをpromise化した簡略的APIをメンバ関数として持つ。
** clear()
**:データベースをクリア
** async connect()
**:データベースに接続
** async delete(path)
**:pathで指定したコンテンツを削除
** async get(path)
**:pathで指定したコンテンツ(blob)を取得
** async getAll()
**:全コンテンツを取得
** async getAllKeys()
**:全Key(コンテンツのpath)を取得
** async put({idCol:path,contentBlob:blobdata})
**:コンテンツ(blobdata)をpathをキーにして格納(上書き)
* deleteCachedLayerMeta()
* async disableCache()
*:serviceWorkerのネイティブのキャッシュ機構とSVGMapの独自キャッシュ機構を全て無効化する
* async enableCache()
*:serviceWorkerのネイティブのキャッシュ機構とSVGMapの独自キャッシュ機構を全て有効化する
* getCachedLayerMeta
* async getPostQueue()
*:postMessageWhenConnectedでポストをリクエストし、未完了のリクエストを取得する
* getRootScale()
*:svgMapの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]座標系における現在の表示のscaleを取得
* getScales()
*:読み込み済み文書全てのscaleを連想配列で返す(hashKeyはdocID)
* getVisibleLayers
* getStorageUsage
* async loadOfflineContents(contentUrlList, overwrite, progressCallBack)
*:-contentUrlListで指定したコンテンツをオフラインキャッシュに読み込む(自ドメイン内のコンテンツ限定)
*:-overwriteをtrueにすると上書きする。progressCallBackは指定した関数の第一引数に進捗状況を返却
* async loadZippedOfflineContents(zip_url,progressCallBack)
*:保存してあるディレクトリに対して、そのzipファイルの中のディレクトリ構造で、コンテンツがあるものと見做したURLもつキャッシュを形成する
* async postMessageWhenConnected(URL, postData, postCompleteCBF)
*:-postDataデータをURLにポストする　オンライン時は即座にポスト、オフライン時はいったんindexedDBにポストデータを格納後オンラインになったらポストする。
*:-postDataは、文字列(この場合form-data決め打ちのリクエスト)、もしくは .bodyメンバー変数を持ったオブジェクト
*:-この場合は .bodyはFormDataタイプのインスタンスもしくは任意のデータ、そしてfetchAPIに準じた.headers, .methodをメンバー変数に持たせることができる。(methodでGETを指定すればGETリクエストも可能)またserviceWorkerが管理する
* async setCachedLayerMeta
* setScaleTrim
* async updateCacheIndex()

=====svgMapCustomLayersManager.で呼び出せるAPI=====

'''実験的機能段階''' :

基本的なフレームワークで提供されているレジューム機能を更に強化し、レイヤーの表示非表示状態、初期表示エリア(viewPort)等をユースケースなどに応じて複数登録、切り替えを可能とする機能を提供します。更に[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]をさらに積極的に編集し、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルに無いレイヤーを追加したり、削除したりした、カスタマイズされた[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]を差分情報の形でlocalStorageに保存・利用する機能を提供します。

:- 以下のAPIは、SVGMapLv0.1_CustomLayersManager_r*.jsを用いた場合に使用できます。
:- SVGMapLv0.1_CustomLayersManager_r*.jsは、svgMapオブジェクトもつwindowで使用するとともに、svgMapオブジェクト用のカスタムレイヤーセットを構築するための別ページのwebAppsにおいても使用することができます。
:- 上記svgMapオブジェクト用のカスタムレイヤーセットを構築するためのwebApps用としてSVGMapCustomLayersManagerApp_r*.js、SVGMapCustomLayersManager.htmlが用意されています。

*registCustomLayer(customLayerObject, applyImmediately, customLayerMetadata)
*applyCustomLayers(customLayersObject, baseLayersPropertySet)
*getDetailedLayersPropertySet(rootContainerDoc, ignoreIid)
*getDetailedLayersPropertySetFromPath(rootContainerUrl, ignoreIid)
*getDif( edit, orig )
*originalLayersProperty
*deepCopy(obj)
*deleteAllCustomLayerSettings()
*deleteCustomLayerSetting( key )
*setCustomLayerSettingIndex(key)
*buildCustomLayersSetting(difObj, editedLayersProperty, originalLayersProperty)
*loadCustomLayerSettings()
*storeCustomLayerSettings( settings )
*getElementByAttr( XMLNode , searchId , atName )

*applyCustomLayersSettingsToCurrentMapView(lpEdit, svgMapWin)
*loadCustomGeoViewboxes()
*storeCustomGeoViewboxes(customViewBoxes)
*buildCustomGeoViewboxSettingObject(key, title, geoViewBoxX, geoViewBoxY, geoViewBoxWidth, geoViewBoxHeight)

====起動URLによるオプション指定====
svgMapフレームワークを導入したhtmlコンテンツは、URLの"#"以降であるフラグメント識別子によってフレームワークにいくつかの起動時オプションを提示することができます。
通常、これらのオプションは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]における記述で示されています。フラグメント識別子による指示はそれをオーバーライドします。
一般的な"&"による区切りで複数の複数のパラメータを指定できます。
=====表示範囲の指定=====
global座標系によって表示範囲を指示することができます。　標準のフラグメント記述に対してそれぞれ"global"文字列の追加が必要です。
なおglobal座標系におけるxは一般的に経度、yは一般的に緯度に対応することに留意してください。
*メディアフラグメントによる指定 : xywh=global:<xmin>,<ymin>,<width>,<height>
*svgViewフラグメントによる指定 : svgView(viewbox(global,<xmin>,<ymin>,<width>,<height>))

=====表示・非表示レイヤーの指定=====
* 表示すべきレイヤー: visibleLayer=<layer title>,<layer title>...
* 非表示すべきレイヤー: hiddenLayer=<layer title>,<layer title>...
* 個々のレイヤーに対するフラグメントの提示 : それぞれのレイヤーに対しては、さらにフラグメントを追加することができます。ただし"="は"%3D",&は"%26"でURLエンコードしてください。<layer title>#fragment1=val1&fragment2=val2　⇒<layer title>#fragment1%3Dval1%26fragment2%3Dval2　

===レイヤー固有のUI===
"[https://satakagi.github.io/mapsForWebWS2020-docs/De-centralizedWebMapping.html#:~:text=To%20achieve%20this,everything%20in%20detail. Layers as WebApps]"(ウェブアプリケーションとしてのレイヤー: webApp Layer)を実現する機構　（LaWA、レイヤーwebApp、webAppレイヤー、アプリレイヤー、レイヤーアプリなどと呼ぶこともある）（[[#レイヤー固有ユーザインターフェース|こちらも参照]]）

====概要====
[[#レイヤー|レイヤーsvgコンテンツ]](フレームワークが最初に読み込むコンテナsvgコンテンツの中で埋め込まれるsvgコンテンツ)に対して、[[#動的な地図レイヤー|動的な地図レイヤー]]の一種として、そのレイヤーに固有の処理ロジックや、可視化・描画ロジック　そしてユーザインターフェースも含むことができる　htmlによるウェブアプリを定義できる機能です。

javascriptを使った独自のロジックによる動的な可視化データの生成が実装可能です。

また、この機能はそのレイヤーの設定やインタラクティブ操作のための表示やユーザインターフェースを地図表現とは別に表示したい場合にも用いることができます。従来のアーキテクチャでは、もしもこのようなレイヤーに固有のUIが必要だった場合でも、地図アプリケーション全体の処理や表示を司るグローバルな空間(ルートhtmlコンテンツのwindowオブジェクト直下)に、サイドエフェクトを考慮しながらコードを組み込む必要があり、結果としてコードのスパゲッティ化が懸念されました。SVGMapのレイヤー固有UIは、レイヤーごとにUIとそのロジックをカプセル化可能にし、これを排除することが可能です。(カプセル化はiframeによって行われます。)さらに、レイヤー固有UIによるウェブアプリは自律分散的な配置にも対応し、UIを備えた地図レイヤーにまでハイパーレイヤリングアーキテクチャを拡張します。

なお、[[#動的な地図レイヤー]]は、htmlによるユーザーインターフェースを持つことができませんが、同種のウェブアプリケーションのカプセル化の効果があります。

このＵＩには主に二つの用途が考えられます。
;凡例
: 各レイヤーはその地図表現の意味を示すための固有の凡例を持つことがあります。その凡例を表示するために利用できます。
;ウェブアプリケーションによる動的な地図レイヤー
: 先述のように、ウェブアプリケーションによる動的な地図レイヤーは独自のロジックによってそのレイヤーの地図表現を動的に変化させる機能を備えることができます。この場合、例えばエンドユーザがFORMで入力したフィルター条件ををもとに表現を変更するようなケースも考えられます。
これらケースでは、そのフォームや凡例は、[[#フレームワークの呼び出し|ルートhtml文書]]に設置することは可能ですが、もしも多くのレイヤーを表示するアプリケーションであり、それらのレイヤーがそれぞれ固有のフィルタ条件を持つような場合、[[#フレームワークの呼び出し|ルートhtml文書]]は、それぞれのレイヤーをフィルタリングするためのFORMとそのフィルタリングロジックをすべて埋め込む必要があり、画面のデザイン、およびロジックのコーディングの双方がスパゲッティ化する可能性があります。さらに、もしもこのアプリケーションに後日さらにレイヤーが追加される場合、スパゲッティ化の問題はより深刻になるかもしれません。凡例の表示についても同様の問題が考えられます。本レイヤー固有ＵＩはこのような問題に対するソリューションを提供しています。

この機能は、ベースのフレームワークrev12以上　且つLayerUI2フレームワークを読み込み、[[#レイヤー固有のUI(後述)を設置するdiv要素|id="layerSpecificUI"のdiv要素]]が[[#フレームワークの呼び出し|ルートhtml文書]]に設置されているときに使用できます。

;サンプル
:[[チュートリアル#WebApp_Layer.E7.B7.A8|開発者向けチュートリアル]]でいくつかのサンプルを見ることができます。

====[[#レイヤー|レイヤーsvgコンテンツ]]での指定====
レイヤー固有UIの設置には、[[#レイヤー|レイヤーsvgコンテンツ]](のルート要素(svg要素))に、data-controller属性を与え、そこにそのレイヤー固有のUIのためのhtml文書のリンク(ただしsame origin)を設置します。またサブセットとして、data-controller属性にビットイメージ(.pngもしくは.jpg, .jpeg, .gif拡張子を持つビットイメージ)へのリンクを与えることでレイヤーの凡例情報の提示をすることもできます。

[[#レイヤー固有のUI(後述)を設置するdiv要素|レイヤー固有ＵＩの表示部位]]には、このように指定されたリソース(ビットイメージもしくはhtml)がレイヤーの選択の状況に応じて、切り替わり表示されます。レイヤーがONになっている間、それに紐付けられたレイヤー固有UI(htmkのwindowオブジェクト)が存在し続け、そのレイヤーのsvgDOMの操作やUIの提供が可能です。

なお、標準のフレームワークでは、表示中のレイヤーの中の選択された一つのUIのみが地図のメインのwindowに配置されたiframeで表示されます。表示中ではあっても選択されていないレイヤーのUI(iframe)は非表示状態で動作しています。

'''サンプル'''
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="9000.0 -9000.0 9000.0 9000.0" go:dataArea="9000.0 -9000.0 9000.0 9000.0"
'''data-controller="../Self-GS-POI_controller.html"'''>
.....

====レイヤー固有のUIのためのhtml文書(webApp)の構造・作法====
レイヤー固有のUIとなるhtml文書は、下記の通り、その初期化等を行うライブラリ <code>svgMapLayerLib.js</code> を読み込む必要があります。（現在のところ通常のjavascriptライブラリのみ提供されます）
CDNからライブラリを読む場合は、<code>https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/svgMapLayerLib.js</code>です。

'''サンプル'''
<!doctype html>
<html>
...
<script src="https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/svgMapLayerLib.js"></script>
...
</html>

====LaWAとS-LaWA（サンドボックス化LaWA）のアーキテクチャ====
SVGMapにおけるレイヤー固有UI（LaWA: Layers as Web Apps）には、セキュリティと用途に応じた2つの動作モードが存在します。2026年のアップデートにより、Web標準のセキュリティモデル（クロスオリジン制約）に準拠した'''S-LaWA（サンドボックス化LaWA）'''が導入されました。 (2026/4/16現在 dev2リリース段階)

'''T-LaWA (Tight-coupled LaWA / 従来の密結合モード)'''
* 親のSVGMapフレームワークと同じオリジン（ドメイン）で動作する、従来型のレイヤーWebAppです。
* iframeのJavaScriptコンテキストに、親フレームワークから直接APIオブジェクトが注入されます。
* 全ての[[#拡張API]]にアクセスでき、複雑なDOM操作や関数渡しが可能ですが、サードパーティ製のレイヤーを読み込む際にはセキュリティ上のリスク（XSS等）を伴います。

'''S-LaWA (Strict/Sandbox LaWA / 分離モード)'''
* 親のSVGMapフレームワークとは異なるオリジンで動作することを前提とした、セキュアなレイヤーWebAppです。
* iframeは完全に隔離（サンドボックス化）され、親フレームワークとの通信は全て非同期メッセージング（postMessage）を介して行われます。
* 悪意のあるスクリプトから親フレームワークを保護できるため、外部のサードパーティ製レイヤーを安全に統合できます。
* 代わりに直接的なオブジェクト参照や関数の受け渡しが禁止されるため、[[#拡張API]]の利用に強い制限がかかります（前節の「S-LaWAでの制限」を参照）。

===== 動作モードの指定 (data-lawa-mode) =====
レイヤーがどちらのモードで起動するかは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]内でそのレイヤーを参照している '''<code>animation</code> 要素の <code>xlink:href</code> の値（URLのオリジン）'''、もしくは同要素に付与する '''<code>data-lawa-mode</code>''' 属性で制御できます。

<code>data-lawa-mode="auto"</code> (未指定時のデフォルト): レイヤー（コントローラ）のURLが親フレームワークと同一オリジンであれば '''T-LaWA''' として、クロスオリジンであれば自動的に '''S-LaWA''' として起動します。

<code>data-lawa-mode="isolated"</code>: 同一オリジンであっても、強制的に '''S-LaWA''' として完全に隔離して起動します（開発時のテスト等に有用です）。

<code>data-lawa-mode="tight"</code>: 強制的に '''T-LaWA''' として起動を試みます。（※クロスオリジン環境でこれを指定した場合は、適切なCORS設定やプロキシサーバーの利用が必須となります）

====詳細====

レイヤー固有UIは、SVGMapのグローバルなwindowに設置されたiframeの中で動作します。このiframeの性質と利用できるAPIは、前述の動作モード（T-LaWAかS-LaWAか）によって大きく異なります。

どのような環境・モードで起動された場合でも、レイヤー固有UI内でSVGMapの各種リソースへ安全にアクセスするためには、レイヤーのHTML内で提供される初期化ライブラリ（<code>svgMapLayerLib.js</code> 等）を読み込む必要があります。

'''【重要】''' 各種APIへのアクセスが可能になるのは、iframe自体の "load" イベントではなく、SVGMapフレームワークとの接続が完了した後に発行される '''<code>layerWebAppReady</code>''' イベント以降です。
* 初期化処理は以下のように記述することを強く推奨します。
* <code>window.addEventListener("layerWebAppReady", function(){ /* 初期化処理 */ });</code>

[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が設置されたSVGMapのグローバルなwindowと異なるドメインにレイヤーを設置し、そのレイヤーがレイヤー固有UIを持つこともできます。デフォルト（<code>data-lawa-mode="auto"</code>）では、これは自動的にセキュアなS-LaWAとして起動するため、特別なCORS設定は不要です。ただし前述の通りAPIには制限がかかります。

[[#レイヤー|レイヤーsvgコンテンツ]]のドキュメントルート要素へdata-controller属性を設定する代わりに、コンテナsvgコンテンツにおける[[#レイヤー|レイヤーsvgコンテンツ]]への参照要素にdata-controller属性を設定することもできます。

data-controller属性の代わりに、data-controller-src属性の値に、適切にエスケープすることで直接htmlを記述することもできます。（※この機能は主にT-LaWAでの利用を想定しています）

data-controller属性によって参照されるhtmlコンテンツでは、次節[[#拡張API]]で説明する値や関数が使用できます（※モードによる制限あり）。

data-controller属性のURLには以下のオプションをフラグメント識別子として指定することができます。
* #exec=appearOnLayerLoad||hiddenOnLayerLoad||onClick レイヤー固有UIの起動オプション
** appearOnLayerLoad : レイヤーを表示状態にすると即座にレイヤ固有UIが出現
** hiddenOnLayerLoad : レイヤーを表示状態にすると即座にレイヤ固有UIがhidden状態で起動(そのレイヤ固有UIに含まれるscriptが起動)
** onClick : レイヤー固有UI起動ボタン">"を押したときにレイヤ固有UIが出現(デフォルト)
* #requiredHeight=hhh&requiredWidth=www
** id="layerSpecificUI"のdiv要素のcss値に関わらず、requiredHeight、requiredWidthでiframeの表示を指示

====拡張API====
レイヤー固有UI(iframeのwindowオブジェクトのjavascriptコード)では以下のAPIが拡張されています。
'''【注意】S-LaWA（サンドボックス化LaWA）環境においては、セキュリティ上の理由から親フレームワークのオブジェクトに直接アクセスできません。代わりに <code>svgMapSandboxLayerLib.js</code> が提供する「モック（代替）オブジェクト」を介して非同期に操作が行われます。各項目の「S-LaWAでの仕様」を参照してください。'''

=====イベント=====
*layerWebAppReady : 初期化が完了しLaWAの実行が可能になった (LaWAでは、loadイベントではなくlayerWebAppReadyを使用することを強く推奨します)
*openFrame : そのiframeが、新たに生成された
*closeFrame : 同、消滅した
*hideFrame : 同、隠された
*appearFrame : 同、隠されていたのが再度現れた
*zoomPanMap : [[#.E6.8B.A1.E5.BC.B5.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88|SVGMapフレームワークと同じ]]
*zoomPanMapCompleted : 同上
*screenRefreshed : 同上

'''【S-LaWAでの仕様】''' すべてのイベントがサポートされています。親フレームワークで発生したイベントは、メッセージングを通じてS-LaWA内のwindowオブジェクトに中継・ディスパッチされます。

=====svgImageProps=====
このレイヤー固有UIに紐づいたレイヤーSVGの各種プロパティを参照できる（基本的に全て読み出しのみ） (参考:[[#svgImagesProps.5B.5D]])
*[[解説書#svgImagesProps.5B.5D|プロパティのリストはこちらを参照]]
*svgImageProps.scriptで、動的地図レイヤーのscript要素によって生成されたオブジェクトにもアクセスできます。
*svgMap.getSvgImagesProps(layerID) で得た値と同等。
*.hashは書き込みが有効(参考 [[#サブレイヤーパーマリンク]])

'''【S-LaWAでの仕様】''' 親フレームワークから非同期で同期された静的なコピーデータとして提供されます。<code>.hash</code> プロパティへの書き込みはS-LaWAでもサポートされており、裏側で自動的に親へ同期されます。ただし、<code>.script</code> による親の実行コンテキストへのアクセスはできません。

=====svgImage=====
このレイヤー固有UIに紐づいたレイヤーSVG文書(DOM Documentオブジェクト) (参考：[[#svgImages.5B.5D]])
*このドキュメントを操作することで、そのレイヤーの表示を動的に変化させることが可能です。
*特に、[[解説書#.E5.8B.95.E4.BD.9C.E3.81.AE.E5.88.B6.E9.99.90.E3.83.BB.E5.B7.AE.E7.95.B0|動作の制限に注意して実装してください]]
*svgMap.getSvgImages(layerID) で得た値と同等。

'''【S-LaWAでの仕様】''' S-LaWA環境内に展開された「ローカルXML DOM」が提供されます。このドキュメント（要素の追加・削除・属性変更・テキスト変更など）を操作して <code>svgMap.refreshScreen()</code> を呼び出すと、フレームワークの共通地図キャンバスに送信され更新します。

=====svgMap=====
svgMapフレームワークインスタンス

'''【S-LaWAでの仕様】''' 親のインスタンスの代わりに、S-LaWA用のモッククラス（<code>SandboxSvgMap</code>）が提供されます。以下のメソッドのみが利用可能です。
* <code>refreshScreen()</code>, <code>transform()</code>, <code>getGeoViewBox()</code>, <code>getSvgImageProps()</code>, <code>setShowPoiProperty()</code>, <code>showModal()</code>, <code>getCORSURL()</code>, <code>setCORSproxy()</code>, <code>parseEscapedCsvLine()</code>

=====layerID=====

svgMapフレームワークが管理しているSVG文書ハッシュリスト(svgMap.getSvgImages())における、このレイヤー固有UIに紐づいたレイヤーSVG文書のハッシュキー

[[#getLayerId]]参照

'''【S-LaWAでの仕様】''' 制限なく利用可能です。

=====svgMapGIStool=====
GIStoolsフレームワークを拡張した時、同インスタンス
*[[解説書#svgMapGIStool..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI|svgMapGIStoolが持つAPI]]

'''【S-LaWAでの仕様】''' '''現在のところ利用不可です。'''

=====svgMapAuthoringTool=====
svgMapAuthoringToolフレームワークを拡張した時、同インスタンス
*[[解説書#svgMapAuthoringTool..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI|svgMapAuthoringToolが持つAPI]]

'''【S-LaWAでの仕様】''' '''現在のところ利用不可です。'''

=====controllerSrc=====
レイヤー固有UIのiframeの起動に使われたsrc属性(レイヤー固有UIのパス・URL)が読み出せます。特にレイヤーが異なるドメインから配信されたものの場合、レイヤー固有UIのwindowのlocation属性(及びそれによるURL解決を行うAPI)からは適切な情報が得られません。これ代えてこの値が使用できるケースがあるでしょう。

'''【S-LaWAでの仕様】''' 参照できません。S-LaWAは自身のURLコンテキストで動作するため、自身の <code>location.href</code> などを参照してください。

=====putGlobalMessage(messageText)=====
messageTextを[[#グローバルメッセージ]]エリアに表示する　レイヤーが消滅したら自動でメッセージも消滅します。

'''【S-LaWAでの仕様】''' 現在のところ利用不可です。

=====preRenderFunction=====
この名前の関数を(レイヤー固有UIのwindowに)定義すると、そのレイヤーのSVG文書の再描画(画面更新)シーケンスの直前にこの関数の内容が実行される。詳細は[[解説書#setPreRenderController|setPreRenderControllerを参照]]

'''【S-LaWAでの仕様】''' '''利用可能です。''' S-LaWA内で <code>window.preRenderFunction</code> を定義しておくと、<code>svgMap.refreshScreen()</code> が呼ばれた際や、親からズーム・パンなどのイベントを受信した際に、S-LaWA内でローカルに実行されます。この関数内でローカルDOMを変更することで、描画前の状態更新をエミュレートできます。

=====customHitTester=====
この名前の関数を定義すると、そのレイヤーに固有のヒットテスト（マウスやタッチによって地図上をヒットしたときの振る舞い）機能を追加することができます。ヒットテストは通常のクリッカブルオブジェクト（ポイントやライン・ポリゴンなど）のそれと同等に扱われます。
* customHitTester( position )
** 第一引数に、ヒットされた座標(.screenX,Y:window上の座標、.lat,lng:地理座標、.isMapCenterHitTest:後述)が与えられます。（この値をもとに実際のヒットテスト処理を書く）　この関数の帰り値が'''null'''や'''undefined'''の場合はヒットしなかったこと、'''true'''もしくは文字列もしくはそのレイヤーの任意の図形要素、もしくはそれらの配列の場合はヒットしたことを示します。
*** isMapCenterHitTestが'''true'''の場合、そのヒットテストは伸縮スクロール時自動発生するケースで発生したものです。（もしこのケースでのテストを除外したいなど特別な処理をしたい場合に利用できます）
** ヒットテスト後の振る舞いも通常のクリッカブルオブジェクトと同等で、通常はデフォルトで備えるヒットされたグラフィックスオブジェクトの[[#metadata.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF|メタデータ]]表示パネルが呼び出されます。(帰り値が図形要素の場合）　もしこの振る舞いを変更したい場合は、[[#setShowPoiProperty|setShowPoiProperty]]を用いることが可能です。
** 帰り値がtrue、文字列、およびそれらの配列を返す場合は、[[#setShowPoiProperty|setShowPoiProperty]]を使用してカスタマイズされた処理を行う必要があります。この場合[[#setShowPoiProperty|setShowPoiProperty]]で設定された関数が受け取る引数は、そのSVG文書のドキュメントルート要素であり、その'''"data-hitTestIndex"'''属性に選択されたオブジェクトのインデックス(配列の場合。配列でない場合は常に0)が設定されます。

'''【S-LaWAでの仕様】''' <code>customHitTester</code> 自体は利用できません。（なお<code>svgMap.setShowPoiProperty(func)</code>は利用可能です。）

====サブレイヤーパーマリンク====
(2024/10のdev1ブランチから有効)
*[[#レイヤーsvgコンテンツ]]のURLが任意のフラグメント識別子を持つことができる。
*ただしフラグメント識別子はカンマ","、アンパサンド"&"を含めることはできない。
*[[#レイヤー固有のUI]]が以下を実装する場合、任意のレイヤーの設定をパーマリンク([[#getBasicPermanentLink]])に反映できる。
**[[#レイヤー固有のUI]]は起動時(onload)同フラグメント識別子の情報を解釈し適切な状態に変化させる機能
**[[#レイヤー固有のUI]]は、パーマリンクによる指定に対応した標示状態に表示が切り替わるタイミングで[[#レイヤーsvgコンテンツ]]のURLのフラグメント識別子の内容をそれに対応した値に変更する機能
*[[#レイヤーsvgコンテンツ]]のURLのフラグメント識別子は、[[#svgImageProps]].hashを設定することで変更できる ([[#svgImageProps|⇒仕様参照]])

===動的な地図レイヤー===
svgドキュメントにjavascriptを記述することでも、動的なデータ生成を実装可能としています。
本フレームワークでは、svgドキュメント中に<script>要素を一つだけ記述することができ、その要素の中にjavascriptコードを入れることができます。

DOMを操作し、動的に描画を変化させることが可能です。ただし、[[解説書#.E5.8B.95.E4.BD.9C.E3.81.AE.E5.88.B6.E9.99.90.E3.83.BB.E5.B7.AE.E7.95.B0|動作の制限に注意してください]]

====動的SVGMapコンテンツで利用可能な拡張API====
一般のjavascriptAPIに加えて、動的な地図レイヤーを実装するために以下のAPIが提供されます。（既存のものでも注記があるものも列挙）
*document: このsvgMapドキュメント自身
*READ ONLY変数
**CRS:このドキュメントのCRS : CRS.a....fに、地理座標からこのドキュメントのSVGユーザ座標への変換係数が提供される
**docId:このSVGドキュメントのdocId
**scale：倍率：このドキュメントの座標系と、画面の(px座標系)との間の倍率(この値は等倍が1.0だが、svgMapコンテンツのvisibleMin/MaxZoom値は%(等倍は100)なので注意)
**actualViewBox：このドキュメントの座標系でのviewBox
**geoViewBox：地理座標におけるviewBox
**geoViewport
**viewport
**this.location:相対パス
**(this.verIE)
*refreshScreen(): 描画の更新を明示: refreshScreenを用いていない場合、そのレイヤーのDOMを編集してもそれが即座に表示に反映(更新)するとは限りません。文書のロード、ズーム、スクロールのときが表示のDOMの内容を反映した画面の自動更新のタイミングです。それ以外、多くの場合反映されません（性能確保のための本フレームワークの現在の制限）。DOMO編集をそれ以外のタイミングで表示に反映したい場合、この関数の呼び出しを行うひつようがあります。一方不必要にこの関数を呼び出すとシステム全体の性能が低下するかもしれません。
*transform()
*getCanvasSize()
*linkedDocOp()
*isIntersect()
*drawGeoJson()
*childDocOp()
*onload:この関数を設定すると、ロードされると呼ばれる(ドキュメントロード後、描画前のタイミング。)
** この関数は、DOMトラバース前に同期処理される。
**したがってonloadで実行される処理はその中が非同期でない限り、refreshScreen()しなくてもonload時のDOM編集は直後の描画に反映される。
*onscroll:この関数を設定すると、スクロールされるとき呼ばれる（ほかにズーム以外で画面更新時も）(スクロール後の描画前のタイミング。)
**同上
*onzoom:この関数を設定すると、ズーミングが発生するとき呼ばれる(同上)

====拡張イベント====
*document -> zoomPanMap イベント addEventHandlerすると、ズームパンが起き(viewPortが変化したとき)地図システム全体の描画が完了(含タイムアウト)後に発行される。SVGMap*.jsが地図をウェブアプリ起動後、最初に描画完了した時にもこのイベントが発生する。（レイヤー追加時には発生しない）
**これをイベントリスナに設定した関数は、非同期に実行される。onscroll()と異なり、もしその関数でDOM編集を行った場合は、直後の描画にそれが反映される保証がない。refreshScren()による再描画が必要。
*document -> screenRefreshed イベント addEventHandlerすると、ズームパン以外で地図システム全体の描画が完了(含タイムアウト)後に発行される。主にrefreshScreen()など。このイベントをフックにして、SVGMapコンテンツのDOM操作・再描画（refreshScreen()）を行うと無限ループに陥るので使用方法に注意が必要。
*document -> zoomPanMapCompleted イベント SVGMaplayerUIが有効な時に発行される。　zoomPanMapイベントは伸縮スクロール完了時に発行されるが、その直後にレイヤー固有UIにおいて(XHRやfetchを用いた)非同期なデータ取得とレイヤー書き換えが生じるケースでは、その完了を検知しない。zoomPanMapCompleted イベントはこのような非同期通信の完了後に発行される。

===SVGMapの埋め込み(SVGMapFrame)===
'''実験的機能段階''' :

SVGMapフレームワークはwindow全体に地図コンテンツが占有される形で表示する設計です。ウェブページはwebAppsとしてカプセル化されたレイヤーをsvgMapオブジェクトに差し込む形でアプリケーションが構築されます。すなわち、基本的に[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]windowにはsvgMapオブジェクトだけが単独で存在し、その他のアプリケーションをwindow上に実装する場合は、その開発者がsvgMapオブジェクトとのグローバル空間でのスパゲッティ化に注意を払いながら開発していく必要があります。

それに対して、''SVGMapLv0.1_Frame*.js''が提供する機能は、window内の指定した領域にsvgMapによる地図を埋め込むことを可能にします。さらにこの埋め込まれたsvgMapオブジェクトを　外部からより簡単に操作できるようカプセル化されたインターフェースを提供します。

====ライブラリ====
SVGMapを埋め込むウェブページでは''SVGMapLv0.1_Frame*.js''を導入します。
<!doctype html>
<html>
<script type="text/javascript" src="SVGMapLv0.1_Frame_r4.js"></script>
</html>

====svg-map要素====

svg-mapカスタム要素を使用してsvgMapオブジェクトを任意の場所に埋め込むことができます。
<nowiki>
<!doctype html>
<html>
<script type="text/javascript" src="SVGMapLv0.1_Frame_r4.js"></script>
<body>
<table>
<tr>
<td>
説明用地図
</td>
<td>
<svg-map svgMapAppPage="SVGMapper_r16_layerUICustom.html" id="svgMapTag" latitude="37" longitude="135" zoom="4" layerui="#layerUIarea">
</svg-map>
</td>
</tr>
</table>
</body>
</html></nowiki>

=====属性=====
======svgMapAppPage======
必須属性: 起動するSVGMapLv0.1*.jsが組み込まれたhtmlを指定。
svg-map要素はshadow domとなっており、内部はひとつのiframeとして構成されます。このiframe内のwindowで通常のsvgMapオブジェクトが稼働する形となります。svgMapAppPage属性はこのiframe内で起動するsvgMapオブジェクトを持ったhtmlを指定するものです。

======latitude, longitude======
オプション: 表示領域を下記の属性と組み合わせて指定します。DOMを操作することによって動的に表示領域を変更することが可能です。
======zoom======
オプション: 表示位置の中心点を上の2属性で、ズームレベルをこの属性で指定します。ズームレベルの定義は[https://docs.microsoft.com/ja-jp/azure/azure-maps/zoom-levels-and-tile-grid webMercatorタイルピラミッドのレベル番号]（ただし小数点指定も可能）
======latitude2, longitude2======
オプション: latitude, longitudeと組み合わせて対角線を指定し表示領域を設定します。
======customjson======
オプション: 任意のJSON文字列を(エスケープしたうえで)与えることができます。 SVGMap.jsのあるiframeのwindow.rootMessage.customJsonに、JSON.parseされたうえでその値が反映されます。この値もDOM操作により動的に反映されます。window.rootMessage.customJsonの変化を監視できるようsetterを設けることで動的な変化に対応する実装が可能です。

var rootMessage={
set customJson(json){
...
}
}

======layerui======
オプション: レイヤーUIの出力要素をxlinkで指定します。　この値はmutationをobserveしていません（svg-mapオブジェクトが生成された、最初の一回のみ有効です）

<svg-map svgMapAppPage="SVGMapper_r16_layerUICustom.html" id="svgMapTag" latitude="37" longitude="135" zoom="4" layerui="#layerUIarea">

=====DOM API=====
======setCenter======
setCenter( longitude, latitude, zoom ) : 緯度経度ズームレベルで地図を表示させる
======addLayer======
addLayer(url,title,visibility) : URLで指定したリソースのレイヤーをtitleを付けて追加する

======svgMapObject======
getter svgMapObject : この要素に紐付いたsvgMapオブジェクトを得る

====layer要素====
svg-map要素の子要素として、任意の個数のlayer要素を設置できます。
=====属性=====
======title======
iframeで起動されるsvgMapオブジェクトの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルにある、レイヤー名(title)を指定し、そのレイヤーとlayer要素を紐付ける。該当するレイヤーが無く、且つ下記のsrcが指定されている場合は新しいレイヤーを追加する。なお、任意の属性や子ノードが与えられている場合は、下記の通りレイヤーの読み込み後にそれらの値が該当するレイヤーの[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|data-controller]]の window.rootMessageに設定される。

======src======
iframeで起動されるsvgMapオブジェクトの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルにある、レイヤーをURLを使って指定する
======visibility [TBD] ======
visible もしくは hiddenを設定すると、そのレイヤーの表示状態を制御できる。

======任意の属性======
任意の属性を設定できる。設定した属性名と属性値は、対応するレイヤーの[[#レイヤー固有ユーザインターフェース|data-controller]]で指定されたレイヤーのコントローラのwindowにおけるwindow.rootMessageの対応するメンバ変数に反映される。[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/set setter]を設定することで変化に応じて動作させることが可能になる。

======rootMessage.update()関数======
レイヤーのコントローラのwindow.rootMessage.update()関数(引数なし)が定義されている場合、上記の属性変更(最初の設定も含む)が検知される度にこの関数が呼び出される。

=====子ノード(TEXT CONTENTやXML要素)=====
任意のテキスト(textContent)や、XML要素(xmlContent)を子ノードに入れることができる。
入れられた情報は、同様に対応するレイヤーのdata-controllerの
window.rootMessage.textContent、もしくはwindow.rootMessage.xmlContentメンバ変数に反映される。
XMLに関しては任意の階層化がされていても良い。DOM操作による変化があれば更新されるので、同様にsetterを用いて変化を反映させることが可能。

=====DOMAPI=====
======layerId======
layerId : このレイヤーのレイヤーIDを得る
======svgImage======
svgImage : このレイヤーに紐付いたsvgMapコンテンツ(document)を得る
======svgImageProps======
svgImageProps : このレイヤーに紐づいたsvgMapコンテンツのsvgImagePropsオブジェクト(各種プロパティを格納したオブジェクト)を得る
======controllerWindow======
controllerWindow : (もしあれば)このレイヤーに紐づいたsvgMapコンテンツのレイヤー固有UIを得る

==第四章：内部機構解説==
[[内部機構解説|別ページを参照してください。]]

==第五章：付加機能==
===3D可視化機能===
:- SVGMap.jsはCesium.jsを利用してSVGMapで表示しているレイヤーを3D可視化することができます。
:- 3D可視化はSVGMap.jsの地図ウィンドと独立した別ウィンドで行われます。
:- すなわち、ここから呼び出されるCesiumベースの3D可視化ウェブアプリは、それ専用のwebApps([https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4_module.js cesiumWindow*.js]を読み込んだアプリ。：基本的な3D可視化ウェブアプリとして、[https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4.html cesiumWindow4.html]を用意)を持つ別のブラウジングコンテキストで起動されます。
:- この3D可視化ウェブアプリは、svgmapjsとメッセージングを行いsvgmapjsで表示されているレイヤーを3D可視化します。

====3Dビジュアライザ起動用ボタンの設置====
3D可視化機能を起動するためのUI(ボタン)は、[[#フレームワークの呼び出し|ルートhtml文書]]に設置した以下の要素によって構築されます。
<code><pre><img id="3DviewButton" data-app="cesiumWindow4.html" .../></pre></code>

* <code>id</code>が<code>3DviewButton</code>である必要があります。
* <code>data-app</code>属性で、3D可視化ウェブアプリのパスを指定することが可能です。
** もし指定されていない場合は、ルートhtml文書と同一ディレクトリの<code>cesiumWindow2.html</code>というファイルがデフォルトで指定されます。
** パスは同一オリジンである必要があります。
** 基本的な3D可視化ウェブアプリとして、[https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4.html cesiumWindow4.html]が[https://github.com/svgmap/svgmapjs/ svgmapjsリポジトリ]に用意されています。

解説書

2026-04-16T08:35:18Z

Admin: /* LaWAとS-LaWA（サンドボックス化LaWA）のアーキテクチャ */

=SVGMap.js (Level0.1フレームワーク)解説書=

2018年現在のSVGMapのデータ形式、およびそれを実装した初歩的なフレームワーク(SVGMap Level0.1 Revision*)の解説を行います。

==第一章：SVGMapの基本機構と、更新部分==

この章は、JIS化されたSVGMap ([http://kikakurui.com/x7/X7197-2012-01.html JIS X.7197])や、[https://www.w3.org/Submission/2011/04/ W3C Member Submission]に対する、近年の開発成果に基づいたSVGMapのアップデートを解説しています。

[http://kikakurui.com/x7/X7197-2012-01.html JIS X.7197]もしくは、[https://www.w3.org/Submission/2011/04/ W3C Member Submission]に記載されているように、SVGMapの基本機構は主に以下の機能を　[https://ja.wikipedia.org/wiki/Scalable_Vector_Graphics 汎用的なグラフィイクスデータ記述形式SVG]に拡張することです。
* [[#地理座標系の処理|地理座標処理]]
** SVGの座標系と地理座標系との間の関係を記述する globalCoordinateSystems要素
* タイルピラミッド（タイリングとLevel of Detail）
** コンテンツを埋め込む[[#要素|image要素、animation要素]]のx,y,width,height属性への追加の振る舞いと、visible-min-zoom, visible-max-zoom属性の追加
** 詳細は [https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html こちらの論文]を参照
* 拡張された[[#レイヤー|レイヤー]]
** [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]におけるimage, animation要素の扱い
** [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が埋め込むsvgコンテンツ([[#レイヤー|レイヤーsvgコンテンツ]])の処理

===地理座標系の処理===
SVG2では地理空間座標を記述するスペック(metadata geospatial coordinate systems)が削除されました。これは、W3C SVG仕様の範囲では単なるメタデータであり、ユーザエージェントの振る舞いに何ら影響を及ぼさないことが理由です。　また、JIS SVGMapにおいては、coordinateReferenceSystem 要素が定義され、それに基づくユーザエージェントの振る舞いが規定されていますが、これは一方でW3Cのスペックではないという課題を持ちます。

これを受けて、現在提案されているSVGMapのデータ仕様では、SVG1.1の段階ですでに標準化と実装が行われたスペックを注意深く活用することにより、JIS SVGMapで規定された地理座標系に関する機能のいくつか（すべてではない）を実現する方法を用いることとしています。（[https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/globalView globalView spec]）

なお、JIS SVGMapのcoordinateReferenceSystem要素もサポートしています。

====メルカトル図法を含む任意の図法の定義とその合成機能(＞rev16)====
従来のSVGMapでは、グローバル座標系に緯度経度座標を用いた場合、使用できる図法は[https://ja.wikipedia.org/wiki/%E6%AD%A3%E8%B7%9D%E5%86%86%E7%AD%92%E5%9B%B3%E6%B3%95 PlateCarreeや正距円筒図法]でした。

一方、rev16では[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]を含む任意のSVGMapコンテンツ([[#レイヤー|レイヤーsvgコンテンツ]]やサブレイヤー、タイルなど)のglobalCoordinateSystem 要素のtransform属性に、下記のように"mercator"を指定することで、そのコンテンツの座標系がメルカトル図法([https://en.wikipedia.org/wiki/Web_Mercator_projection web mercator])であることを宣言できます。

<pre><globalCoordinateSystem srsName="http://purl.org/crs/84" transform="mercator" /></pre>

この記述がされたコンテンツのSVGの座標空間はメルカトル図法上のものとなり、この座標系上でのx,y=0,0(左上)は西経180.0度,北緯85.051129度、x,y=1,1(右下)は東経180.0度,南緯85.051129度に対応します。

=====メルカトル図法での地図表示=====
[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]で先述の宣言を行うことで、SVGMap0.1.jsはメルカトル図法で画面上に地図を表示します。このとき、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が参照する各レイヤーはメルカトル図法であっても、それ以外であっても構いません。フレームワーク内でオンザフライの図法変換が実行されます。（逆に[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]がPlateCarreeでレイヤーがメルカトルでも同様）

=====メルカトル図法のドキュメントルート要素のviewBox属性=====
* [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]において、地図の初期表示状態を記述するドキュメントルート要素(<svg>要素)のviewBoxに記述する座標も先述のメルカトル座標系で記述する必要があります。
* 一方、緯度経度で初期表示領域を記述したい場合に対応する仕様が拡張されており、その記述例は下記のとおり、'''global'''を追加します。
<pre><svg viewBox="global,138,35,2,2"></pre>

=====プロキシの設定=====
オンザフライでの図法変換では、多くのケースで非線形の座標変換が必要となります。ビットイメージ（タイルを含む）に対して子の座標変換を実行するためにSVGMap.jsではビット委イメージのピクセルにアクセスしています。これを実現するにはビットイメージがSVGMap.jsと同一オリジンにある必要があります。この条件を満たせないケースに対してフレームワークにはプロキシを設定する機能があります。([[#setProxyURLFactory|setProxyURLFactory API]]を参照)

'''[[クロスオリジンアクセス|詳細な情報をこちらに掲載しました]]'''

=====多様な図法の定義と利用=====
[[#動的な地図レイヤー|javascriptコード]]に記載されたscript要素内に定義した関数の関数名をglobalCoordinateSystem要素のtransform属性に記述することで、その関数を図法変換に用いた図法定義が可能となります。(先述のmercator属性は、フレームワークに特別に組み込まれた関数です）

たとえば、日本の平面直角座標系の地図(固有の基準点を持つ横メルカトル図法)をPlateCarreeやメルカトル図法の地図として合成・表示するケースなどに有効でしょう。

ユーザが定義できるこの関数は引数を持たない関数であり、返り値として以下の３つの関数を返す必要があります。
* {x,y} transform({x,y}) : グローバル座標(WGS84経度緯度)から、そのコンテンツの図法の座標への変換関数入出力値は.x,.yメンバを持つオブジェクト。
* {x,y} inverse({x,y}) : 同、逆変換関数
* number get scale : グローバル座標系に対するコンテンツの図法の座標系の座標値のスケール（グローバル座標系で1変化すると、コンテンツの座標系でいくつ変化するのかを表す）
* 記述例
<code><pre>
<svg ...>
<script>
function azimuthalEquidistant(){
...
return{
transform:function(inp){
var xy = transform_int(inp.y, inp.x, ...);
return{ x:xy.x, y:xy.y}
},
inverse:function(inp){
var latLng = inverse_int(inp.x, inp.y, ...);
return{ x:latLng.lng, y:latLng.lat }
},
scale: 1.0
}
}
</script>
<globalCoordinateSystem srsName="http://purl.org/crs/84" transform="azimuthalEquidistant" />
...map contents in projected coordinate system...
</svg>
</pre></code>

===ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング===
SVG2(SVG1.1 2nd Edition)では、SVG単独によるユーザエージェントという実装想定は撤廃され、よく知られているウェブブラウザの機能の一部としてのSVGデータの描画機能、HTMLやCSSと一体化されたデータ・コンテンツ　へと変化しました。一方、近代のウェブブラウザにおけるコンテンツでは古典的なhtmlに基づくコンテンツデータに対して、javascriptとDOM APIによるプログラムでコンテンツをブラウザ上で動的に生成する（ウェブアプリケーション）機構を備えます。すなわちSVGを実装する現代のユーザエージェントは例外なくウェブアプリケーションの実行が可能となりました。

そこで、SVGMapでは静的なSVGによる地図コンテンツに加え javascriptで動的に生成されるコンテンツ(ウェブアプリケーション)も地図コンテンツ（地図のレイヤー）として扱えることとしました。それにもかかわらず SVGMapは依然として複数のウェブ上で分散する地図データを一つの画面上にレイヤリングする機能（ハイパーレイヤリング）を維持しています。すなわち、ウェブアプリケーションとしての地図レイヤーをレイヤリング（マッシュアップ）する機能が拡張されます。これは、SVGMapのマッシュアップ・ハイパーレイヤリングの概念を、単に地図画像データのレイヤリングから、地図上に表現された動的なオブジェクトのマッシュアップ・レイヤリングに広げています。SVGMapではこのコンセプトを[[リンク集#.E8.A7.A3.E8.AA.AC.E9.9F.B3.E5.A3.B0|"Layers as WebApps"(LaWA : ウェブアプリケーションとしてのレイヤー)]]と呼んでいます。

このようなウェブアプリケーションは、レイヤーごとにカプセル化されることになります。これにより、'''グローバル空間'''(コンテナsvgコンテンツとそれを起動する、svgMap.jsフレームワークを読み込んだウェブページ)のスパゲッティ化なしに、多様な機能を実装していくことが可能になります。

[https://satakagi.github.io/mapsForWebWS2020-docs/De-centralizedWebMapping.html こちらの論文]も参考にしてください。

ウェブアプリケーションによる地図レイヤーを構築するには二つの方法があります。
* svg要素の'''data-controller'''属性で参照されたhtml文書
** [[#レイヤー固有ユーザインターフェース]]と呼ばれる機構です。この方法を用いること推奨します。
* svg要素内の'''script'''子要素 (将来廃止予定)
** htmlによるUIを伴わない実装の場合はscript要素を用いることができます。ただしsrcは属性には非対応、直接コードを埋め込む必要があります。

この機能を用いるにはSVGMapLevel0.1フレームワークを使用する場合は、拡張フレームワーク(SVGMapLv0.1_LayerUI2_r*.js)を更にロードする必要があります。SVGMapLevel0.2フレームワークの場合はデフォルトで機能します。

====レイヤー固有ユーザインターフェース====
SVGMap.jsではさらに、個々の地図レイヤー(レイヤーSVGコンテンツ)がそれぞれのレイヤーに特化した固有の演算ロジックだけでなく、ユーザーインターフェースも備えた[[#レイヤーsvgコンテンツの設定|HTMLを紐づける]]ことができる機能が拡張されています。UIも備えたより完全なwebAppをレイヤーとして実装できるため、カプセル化がより効果的に実現されます。（Layers as Web Apps, LaWA)

たとえば気象情報のレイヤーに対して気象情報の時間変化を表示するアニメーションのコントローラ(スライダーバー)や、気象情報の種類を選択するプルダウンメニュー　などのUIやロジックを任意に構築できます。

レイヤー固有ユーザーインターフェースは、[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]](SVGMap.jsをロードしたhtml)のレイヤー選択UIを通してwindowに設置されたiframe中に呼び出されます。

詳細は[[#レイヤー固有のUI]] を参照してください。



　

====例====
以下に、いくつかのこのような動的な地図コンテンツの例を示しましょう。
;検索によって表示スタイルを変更する機能を持ったレイヤー
: 例えばコンビニエンスストアのＰＯＩレイヤーを表示したとして、そのメタデータを読み取り、検索条件に基づいて（例えば深夜営業している店舗）の表示スタイルを変更するような検索機能を実装したレイヤー　メタデータは書くレイヤーごとに独特の値を持つため、その検索ロジックはレイヤーに固有のものとなることがあります。このケースではそのような機能をレイヤーに組み込むことを可能にします。
;CSVデータなどのレガシーな非SVGデータをHXRで取得し、ブラウザ上でSVG DOMツリーを生成するようなSVG地図コンテンツ。
: このケースでは、サーバからクライアントに送信されるデータの実体はSVG形式の地図データではなく、CSVなどのレガシーなデータです。SVG地図コンテンツには、CSVデータをSVGとして描画するためのデータ読み込み・解読・SVG DOMツリー生成機構を備えたjavascriptコードが含まれます。また、これよりはモダンなgeoJsonやKML等のデータをSVG DOMに変換することも容易に可能でしょう。これをより簡単に実現するためのライブラリも[[#svgMapGIStool.で呼び出せるAPI|svgMapGIStool]]に準備されています。
;タイリングされた地図コンテンツ
: それは、たとえば[https://wiki.openstreetmap.org/wiki/Tiles OpenStreepMapのTile Server]や、[https://en.wikipedia.org/wiki/Tile_Map_ServiceTileMap Tile Map Service]のような、特定のロジックによる数列のような法則性を持ったピラミッド状の地図タイルリソースをタイリングする地図コンテンツのことです。
: 更新されたSVGMapでは、地図コンテンツに内蔵されたjavascriptによるアプリケーションロジックとしてそれらを取り扱うことができます。タイリング規則をそのままウェブアプリケーションとしてで書き下し、スケールやビューポートに応じて適切なタイリング(配置)を行うSVG DOMツリーを生成するSVG地図コンテンツが構築できます。

=====タイリングに関するノート=====
[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html svgMapにおけるタイリング]は従来の地図フレームワークより柔軟で汎用的な概念に基づいています。
openLayersやleafletなどの従来の地図フレームワークでは、このようなタイリング機能は特定の固定的なタイリングロジックとパラメータを伴った機能として地図フレームワーク本体にハードコードされて提供されてきました。さらには地図フレームワークがこれらのタイリングロジックに強く依存したアーキテクチャを持っていました。一方、これらのロジックにはさまざまなバリエーションや最適化のための調整パラメータが存在し、これまで長らくその互換性や相互運用、更には効率の問題を抱えてきました。次のリンクでその多くの議論や多様な提案を参照できるでしょう。[https://wiki.osgeo.org/wiki/Tile_Map_Service_Specification TMSspecs@osgeowiki], [https://wiki.osgeo.org/wiki/Category:Tiling tiling@osgeowiki]
ベクターデータのタイリングにおいては、これらの課題はさらに増幅され、いまだ手法は確立していないといっても良いでしょう。たとえば、我々の研究では、Quad Tree Composite Tiling([https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-in-english スライド]、、[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html ペーパー])のような用途によってはもっと優れたタイリングの手法も見いだされています。

一方、これらのロジックはその多様なバリエーションを含め、javascriptによるプログラムコードとしては容易に記述可能です。多くの場合わずか数十行のロジックで記述できるでしょう。この程度のコードで多くのタイリングの手法が包含できるのであれば、特定のタイリング手法をフレームワークのコアに内包する・さらにはこれら特定のタイリングの手法にコアが依存する必要はなく、先述のウェブアプリケーションによる動的な地図レイヤーとして実装すれば良いであろうというのがSVGMapにおけるタイリング扱いです。3DマップのフレームワークであるCesiumはこれに似たタイリングポリシーを持っているようです。

=====SVG以外のデータサポートに関するノート=====
前章に記載した方針と同様、他の地図表示フレームワークと異なりSVGMapではSVGとして規定されたコンテンツ(もちろんビットイメージの埋め込みは可能)以外のネイティブサポートは行いません。例えばgeoJsonやKML, WKTなど地図業界でしばしば用いられるデータをSVGMapで表示したい場合は、変換ルーチンを埋め込んだ動的な地図コンテンツ（webAppレイヤー）としてそれらを扱います。SVGMap.jsの拡張モジュールである[[#svgMapGIStool.で呼び出せるAPI|SVGMapGIS.js]]には、これらのデータをwebAppsで読み込みSVGに変換するためのAPIがあります。

===トポロジースイート(地理空間情報処理)===
Rev.13で拡張

SVGMapLevel0.1 Revision 13以降では、SVGMapコンテンツに対してトポロジー演算機能(地理空間情報処理機能)を適用する拡張フレームワークが提供されます。この機能を用いるにはSVGMapLevel0.1フレームワークに加えて、拡張フレームワーク(SVGMapLv0.1_GIS_r*.js)をロードする必要があります。このフレームワークでは、[[#svgMapGIStool.で呼び出せるAPI|拡張されたAPI]]が利用可能です。フレームワークに内蔵された基本的な演算機能に加え、geoJSONと整合するインターフェースを備え、[https://github.com/bjornharrtell/jsts jsts]を組み込み、より高度な機能を実装するための機構も持ちます。

この機能を用いると、特定のレイヤーに登録されているポリゴンの範囲に入っている、特定のレイヤーのポイントをフィルタリングして表示の色を変更する。といったことが可能です。ただし、これらはすべてすでにブラウザ上にロードされている限られた量のコンテンツの中での演算に限定されます。もしもサーバ上にしかないデータに対してこれらの演算を試みたい場合、従来通りサーバサイド技術によってそれは実現すべきです。

また、主題情報を含むウェブマップコンテンツの多くのレイヤーがラスタータイルによって提供されているという現状を考慮し、このスイートはラスターレイヤーをカバレッジとして扱った空間情報処理を行う機能の実装も進められています。現在のところ、カバレッジとポイントとの間での演算が可能です。また、そのために便利なカラーピッカー等の付加的な機能の実装も進められています。

===オーサリングシステム===
Rev.14で拡張

SVGMapLevel0.1 Revision 14以降では、SVGMapコンテンツを編集するツール機能が実装された拡張フレームワークが提供されます。[[#svgMapAuthoringTool.で呼び出せるAPI|フレームワークが提供するAPI]]を使って、オーサリング機能を持ったレイヤーを作ることが可能です。コンテンツは、SVG DOMとして構築されます。なお編集したオブジェクトを保存したり登録するためには別のサービスやアプリケーションの開発が必要です。

===3D可視化システム===
Rev.15で拡張

[https://cesiumjs.org/ Cesium.js]を用いて、SVGMap.jsが表示できるすべてのコンテンツを3D可視化するシステムです。詳細解説はTBD ([[#svgMapCesiumWrapper.で呼び出せるAPI|フレームワークが提供するAPI]])

===プログレッシブウェブアプリケーション===
Rev.16で拡張

[https://developer.mozilla.org/docs/Web/Progressive_web_apps Progressive Web Apps]をサポートしたブラウザにおいて、SVGMap.jsをオフラインでも利用可能にする拡張機能です。詳細解説はTBD ([[#svgMapPWA.で呼び出せるAPI|フレームワークが提供するAPI]])

===SVGMapコンテンツのバックエンドソフトウェア (参考)===
本解説書は主にコンテンツ形式とユーザーエージェント側のソフトウェアについて解説していますが、サーバ・バックエンド側についてもここで少し言及します。

shapefileやcsvなどから、静的なSVGMapコンテンツを生成するためのソフトウェアが[https://github.com/svgmap/svgMapTools オープンソース]で準備されています。これらのソフトウェアでは、[[#タイリングに関するノート|高度なタイリング手法]]を用いた地図タイルを生成することができます。使用方法などは同リポジトリに用意されているチュートリアルを参照してください。

一方、もちろんSVGMapの仕様に準拠すれば、これらのソフトウェアに頼らず、自由にバックエンドを構築することができます。例えばよく知られた地図タイルサービスを用いたり、古典的な[https://wiki.openstreetmap.org/wiki/Web_feature_service WFS ]や[https://wiki.openstreetmap.org/wiki/WMS WMS]のような動的地図・地理空間情報サービスをベースにして比較的容易にそれらを構築することもできます。[https://github.com/svgmap/svgMapLv0.1/tree/master/appLayers SVGMap.jsのリポジトリのappLayersディレクトリ]にはそのようなシステムを構築する際のフロントエンド側の動的レイヤーのサンプルが掲載されています。

==第二章：SVGMap Revsion 0.1フレームワーク==
SVGMapは究極的には既存のすべてのウェブブラウザがネイティブの機能としてそれを備えることを目標とし、既存のHTML,CSS,SVGなどのウェブブラウザの標準規格との整合性を備え、且つ既存のWeb Mappingの規格との整合性をも備えた仕様として検討と標準化を進めています。しかし今のところまだその標準化は完遂されていないため、その完全な実装がなされたウェブブラウザは存在しません。一方、既存のウェブブザでSVGMapの機能が実行可能となるような拡張をJavascriptによるフレームワークとして構築することが可能です。SVGMap Revision 0.1フレームワークは、このようなJavascriptによるSVGMapの仕様に基づいた初歩的な制限と拡張がされた実装です。その実装はオープンソースとして[https://github.com/svgmap/svgMapLv0.1 こちらのgitubリポジトリ]で公開されています。

そのアーキテクチャの特徴は、ブラウザネイティブのSVGレンダラーを使用せず、HTML,CSS,HTMLCanvas2DAPIを用いてSVGMapが実装されている点です。この特徴は主にこのフレームワークの開発が開始された時期に起因しています。当時のウェブブラウザの多くはSVGが実装されていませんでした。また実装されていたとしても、大規模なベクトルデータのレンダリング、および伸縮スクロール・インタラクティブな操作に対する性能面での処理制御に問題がありました。これらの問題のいくつかは現在のブラウザで解消されているものがあるかもしれません。またこれらの問題の解決とともに、SVGMapフレームワークはLevel番号を上げつつよりネイティブの機能に基づいた実装に移行するかもしれません。<font size="-2">参考までに、[http://svg2.mbsrv.net/devinfo/devkddi/lvl0.5/ 実験的なネイティブのレンダラを用いた実装(2010年)]があります。</font>

SVGのベクトル描画機能は[https://github.com/canvg/canvg canvg]のpathパーサなどを引用することで実装されています。一方、地図としてあまり用いられないと想定された多くの要素やプロパティ、アトリビュートの実装が省略されています。

===追加・拡張された機能：===
====フレームワークの呼び出し====
本フレームワークを用いる場合、SVGMapコンテンツをブラウザに直接読み込ませることはできません。フレームワークを動作させるjavascriptライブラリをロードしたhtmlコンテンツ(WebApps)を準備し、そこでSVGMapコンテンツを読み込み表示させます。利用者には、このhtmlコンテンツのURLを告知します。このhtmlコンテンツを以降'''ルートhtml文書'''と呼ぶことにします。

SVGMapのフレームワークはgithubリポジトリ：https://github.com/svgmap/svgmapjs　で公開されています。

htmlコンテンツの<body>要素直下に以下の要素を配置します。
=====フレームワークを実装したjavascriptライブラリを読み込むscript要素=====
これがSVGMap.jsのコアのフレームワークを構成します。

<nowiki><script type="module">
import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

上のスクリプトで必要なモジュールが読み込まれます。[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]のwindowのメンバには、svgMapオブジェクトを設定しています。

[https://svgmap.org/devinfo/devkddi/tutorials/tutorial5_esm/tutorial5.html 実働サンプル(tutorial5_esm)]

もしくは https://github.com/svgmap/svgmapjs の内容を独自のウェブホストにコピーしそれを用いることもできます。(下の例は[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]のhtmlに対して、svgmapサブディレクトリにjsを置いた場合)
<nowiki><script type="module">
import { svgMap } from './svgmapjs/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

===== GISモジュールを利用する場合 =====
svgMap.jsの地理空間演算機能(GISモジュール)では、jsts.jsを使用しています。そのためGISモジュールを機能させるにはjsts.jsの読み込みが必要です。下記のようになります。もちろん独自のウェブホストにjstsをコピーしてそれを利用することも可能です。

<nowiki><script type="text/javascript" src="https://unpkg.com/jsts@1.6.1/dist/jsts.min.js"></script>
<script type="module">
import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

======本解説書でAPIを説明している、現在利用可能な拡張フレームワーク======
ECMA Script Module対応の内容に現在更新中

* [[#svgMapCesiumWrapper.で呼び出せるAPI|SVGMapLv0.1_CesiumWrapper_r*.js]] (実験的)
** https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/experimental/Cesium3D/SVGMapLv0.1_CesiumWrapper_r3.js
* [[#svgMapPWA.で呼び出せるAPI|SVGMapLv0.1_PWA_r*.js]] (実験的)
** https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/experimental/PWA/SVGMapLv0.1_PWA_r5.js

まだ実験的なsvgMapCesiumWrapperは、[http://www.svgmap.org/devinfo/devkddi/lvl0.1/cesiumSvgMap/top.html svgMap cesium visualizer]ページを参照ください。
SVGMapPWA(ProgressiveWebApp)については、[https://svgmap.org/devinfo/devkddi/lvl0.1/svgMapPWA/ SVGMap PWA Test]ページを参照ください。

=====SVGMapコンテンツを配置するためのdiv要素=====
id属性に"mapcanvas"を設定し、data-src属性(もしくはtitle属性(to be obsoluted))には、地図フレームワークが最初に読み込む、SVGMap.jsが表示する地図コンテンツの起点となるSVGコンテンツ（以降'''コンテナsvgコンテンツ'''と呼びます）のパスを指定したdiv要素を設置します。

コンテナsvgコンテンツはまた、'''[[#レイヤー|ここで記述するレイヤー]]'''を持つことができる特別のコンテンツです。

（要確認：地図のサイズ・配置はこのdiv要素のサイズとなります。無指定の場合は全ウィンドサイズ）
<nowiki><div id="mapcanvas" title="Container.svg"></div></nowiki>

<nowiki><div id="mapcanvas" data-src="Container.svg"></div></nowiki>

======差分データの指定======
data-custom-layers-root属性でContainer.svgに対するレイヤーの差分情報のパスを指定することができます。
もしくは、data-custom-layers-root属性に、レイヤーの差分情報が保管されているディレクトリを記述した場合、URLハッシュで差分ファイルを指定することもできます。
差分データは、[https://github.com/svgmap/svgmapjs/blob/main/SVGMapCustomLayersManager_r3module.html カスタムレイヤーマネージャ]で作成することが可能。（データ形式は後述）
<nowiki><div id="mapcanvas" data-src="Container.svg" data-custom-layers-root="./containerDif/dif0.json"></div></nowiki>

=====地図中心の照準イメージ。=====
参照する画像はあらかじめ用意されたもの以外も利用できます。
<nowiki><img id="centerSight" style="opacity:0.5" src="Xcursor.png" width="15" height="15"/></nowiki>

====任意で設置できる要素：====
=====[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]](後述)を設置するdiv要素=====
<nowiki><div id="layerList" style="left :30px; top: 10px; width:300px;height:90%; position: absolute; "></div></nowiki>
: idが上記の通りである必要があります。
　 styleは任意だが、heightは[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]が展開された状態におけるサイズとなります。格納された状態のサイズは、この要素における文字の縦幅となります。各種オプションについては[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|詳細を参照ください]]
　

=====[[#レイヤー固有のUI|レイヤー固有のUI]](後述)を設置するdiv要素=====
[[#レイヤー固有のUI|レイヤー固有のUI]]を使用するために設置するdiv要素です。

<nowiki><div id="layerSpecificUI" style="right :10px; top: 40px; width:400px;height:400px; position: absolute; background-color: white;opacity:0.8;display:none;"></nowiki>
<nowiki></div></nowiki>
: idが上記の通りである必要があります。styleは任意だが、heightはレイヤリストUIが展開され得る最大のサイズとなります。
　
=====伸縮ボタン=====
<nowiki><img id="zoomupButton" style="left: 5px; top: 5px; position: absolute;" src="zoomup.png" onclick="svgMap.zoomup()" width="20" height="20" /></nowiki>
<nowiki><img id="zoomdownButton" style="left: 5px; top: 25px; position: absolute;" src="zoomdown.png" onclick="svgMap.zoomdown()" width="20" height="20" /></nowiki>
: img要素かつidが上記の値である必要があります。
　伸縮ボタンを一回押すたびに伸縮する比率は、別途svgMap.setZoomRatio(ratio)で設定可能。
　デフォルトの比率はsqrt(3)
　
=====測位ボタン=====
<nowiki><img id="gpsButton" style="left: 5px; top: 45px; position: absolute;" src="gps.png" onclick="svgMap.gps()" width="20" height="20" /></nowiki>
: img要素かつidが上記の値である必要があります。ボタン押下で測位し、測位点を中心にして地図を表示する機能。表示の範囲は測位制度に応じて適当に設置されます。

=====グローバルメッセージ=====
レイヤー固有UIが任意のメッセージを出力可能にするために設置するエリア　[[#レイヤー固有のUI]]のAPI '''putGlobalMessage''' 参照
<nowiki><span id="globalMessage" style="font-size:10px;left:5px;bottom:16px;position:absolute;"></span></nowiki>
: idが上記の値である必要があります。
　styleは任意

=====地図中心の緯度経度値表示=====
<nowiki><font id="centerPos" size="-2" color="brown" style="left: 50px; bottom: 5px; position: absolute;" ></font></nowiki>
: idが上記の値である必要があります。
　styleは任意

=====地図スケールの表示=====
<nowiki><font id="vScale" size="-2" color="black" style="left: 5px; bottom: 28px; position: absolute;">-</font></nowiki>
: idが上記の値である必要があります。
: styleは任意
: 縦50pxに対応したスケール[Km]を表示します
: 近傍に縦50pxのスケールイメージを設置するとわかりやすいでしょう

=====レジューム機能のためのチェックボックス=====
<nowiki><form style="right:10px;top:20px;position:absolute;opacity:0.8" ></nowiki>
<nowiki><input type="checkBox" id="resumeBox" onChange="svgMap.resumeToggle(event)" autocomplete="off"/></nowiki>
<nowiki><label for="resumeBox"/>Keep and Resume view</label></nowiki>
<nowiki></form></nowiki>
: checkboxタイプのform要素であり、idが上記の通りである必要があります。レジューム機能とは、(rev16以前ではcookie、rev17以降ではlocalStorage)を用いて、前回最後に表示された状態（レイヤーの表示非表示状態、表示領域（view port）を再現する機能です。スタイルおよびlabel要素は任意

===== [[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]のためのスタイル=====
<style>
body {
font-family: Meiryo;
}
#layerTable{
background:#ffE0E0;
border: 2px solid #bbb;
}
.layerItem{
background-color: white;
}
.noGroup{
background-color: #fff0f0;
}
#layerList{
background-color: #ffff80;opacity:0.8;
}
</style>
====== [[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]を用いる場合、例えば上記のようなスタイルの定義が必要です。======
* layerList：レイヤーリストUI全体に対するスタイル
* layerTable：レイヤーリストUIの中のテーブルに対するスタイル。
* layerItem：同テーブルに表示される個々のレイヤー表示に対するスタイル
* noGroup：同レイヤー表示のうち、グループに属さないレイヤーに対するスタイル
　

====レイヤー====
SVGMapは古典的な地図情報システムのようなレイヤーの概念を備えていません。一方その上位概念ともみなせる、任意のドキュメントをツリー状に埋め込む機能を備えています。しかしそれでは古典的なユースケースを平易に表現しているとはいえないため、それをラップする古典的なレイヤーの概念と、それに基づくレイヤーユーザインターフェースのフレームワークを持ちます。

フレームワークが最初に読み込む地図コンテンツの起点となる'''[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]'''の中で、animationもしくはiframeを用いて（準拠規格に依る）埋め込まれるsvgコンテンツが、自動的にレイヤーとみなされます。いうまでもなくレイヤーの上下順はSVGコンテンツのスクリプト中での埋め込みの順番の逆順になります。

また、このコンテナsvgコンテンツが参照し埋め込んでいる、各レイヤーのSVGコンテンツのことを、'''[[#レイヤー|レイヤーsvgコンテンツ]]'''と呼ぶこととします。ここで、各[[#レイヤー|レイヤーsvgコンテンツ]]はさらに別のsvgコンテンツを埋め込むことがあります。これらのコンテンツはよくサブレイヤーSVGコンテンツもしくは単にサブレイヤーと呼ばれることもあります。

なお、Rev12以降のSVGMapLv0.1フレームワークではレイヤーフレームワークは本体と独立した実装となり、拡張や切り離しが可能となりました。以下は、標準で提供されるレイヤーフレームワークのVer2 (SVGMapLv0.1_LayerUI2_r*.js)に関して解説します。

レイヤーUIフレームワークが提供するUIは、先述のレイヤーリストUIを設置するdiv要素によって提供されます。このUIは以下の機能を持ちます。
* 折り畳み可能なレイヤーの一覧を表示する機能
* 各レイヤーの表示非表示を切り替える機能
* グルーピングされたレイヤー(後述)をグループとして表現、折り畳み、一括表示非表示する機能。
* そのレイヤーに紐づけられた[[#レイヤー固有のUI]]を出現させる機能。
* 表示されているレイヤーの個数などの情報を表示する機能

===== コンテナsvgコンテンツの記述内容とレイヤーフレームワークの振る舞い =====
* animation要素：　レイヤーとみなされる
** title属性: レイヤーの名称となる。(必須属性) title属性値は他のレイヤーと重複してはならない(ID(このコンテンツ内でのレイヤーの識別子)として振る舞う)
** xlink:href属性: レイヤーsvgコンテンツへの参照
** visibility属性 : レイヤーの初期の表示状態。UIにより変更できる (hidden or visible)
** opacity属性 : レイヤーの透明度
** x,y,width,height属性の振る舞いは共通(viewportがこの属性の値とintersectしていただロードされる)
** class属性: スペース区切りで規定値(複数)と任意値(一つ)を記述できる
*** 詳細は後述の[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供]]を参照
** data-controller属性: (Optional) [[#レイヤー固有のUI]]　の　[[#詳細]]参照
* globalCoordinateSystem要素：(1個つだけ必須要素)
** (コンテナsvgコンテンツにおける)本要素が、このフレームワークによってUser Agentに表示される地図の図法を規定する。
*** なお、それ以外のSVGコンテンツのglobalCoordinateSystem要素は、コンテナsvgコンテンツの図法への変換のために用いられる
*** より詳細は[[#地理座標系の処理]]を参照
* svg要素: (documentRoot要素)
** viewBox属性: 初期の表示範囲を指定。
*** ここに記述する座標値は、SVGの仕様に準ずるが、　拡張記述形式も使用可能　参照：[[#メルカトル図法のドキュメントルート要素のviewBox属性]]

===== レイヤーsvgコンテンツ =====
レイヤーsvgコンテンツは、[[#レイヤー固有のUI|レイヤー固有のUI]]を紐づけることができます。

====クリッカブルオブジェクト====
グラフィックスオブジェクトをクリック（タブレットの場合は、タップもしくは照準アイコンに合わせたうえでタップ）することでそれに紐づけられたインタラクティブ動作を実行する。インタラクティブ動作はフレームワークが独自に提供する、metadataフレームワークに基づく、メタデータの表示機能を対象とします。

なお、image要素(useによって間接的に設置されたimage要素を含む)は、a要素によるハイパーリンクが加えて実装されています。metadaとa要素の双方が設定されているimage要素では、どちらのインタラクティビティを発動させるかをモーダルダイアログによるユーザへの問い合わせが行われます。

====class属性によるレイヤーのグルーピング・クリッカブル機能の提供====
コンテナsvgコンテンツが参照するレイヤー（[[#レイヤー|レイヤーsvgコンテンツ]]）へのリンクを記述する要素(animationもしくはiframe要素)は、class属性によって、各レイヤーに特性を与えることができます。classはスペース区切りで複数指定することができますが、グループ名は一つしか認識されません。
;グルーピング
: 以下の属性値以外の値を記述すると、グループ名として認識され、同じグループ名を持ったレイヤーたちをグルーピングすることができます。グルーピングの効果はレイヤーＵＩにおけるグループ表現と、下記のbatch,switch特性です。グループはレイヤーリストUI上の表現に反映されます。最初に現れたグループ名がこのUIの下に表示されます。ただし地図画面上の描画の順番はこれとは別、SVGの基本的な描画順([https://www.w3.org/TR/SVG11/render.html#PaintersModel Painter Model])に準じます。
;batch
: グルーピングとともに使用します。そのグループに属するレイヤーを一括で表示非表示するための機能がレイヤーＵＩに付加されます。
;switch
: グルーピングとともに使用します。そのグループに属するレイヤーは、どれか一つしか表示されません。batchとの併存はできません。（無視されます（要確認））
;clickable
: Pathなどのベクトル図形要素はデフォルトではインタラクティビティが提供されません。クラス値にclickableを指定することでこのレイヤー（子供のsvgコンテンツを含む）の図形要素においてのみ、インタラクティビティが提供されます。提供されるインタラクティビティは、マウスによって図形をクリックしたとき、そのグラフィックス要素がクリッカブルな要因を備えているかどうかを検索し、備えている場合それに対応するアクションを起こします。
　なお、image要素(useによって間接的に設置されたimage要素を含む)は、このクラスの設定に依らず、a要素によるハイパーリンク、およびmetadataフレームワークを用いたクリッカブルオブジェクトとして機能します。
;editable
: 当該レイヤの[[#レイヤー固有のUI|レイヤー固有UI]]に[[#svgMapAuthoringTool.で呼び出せるAPI|svgMapAuthoringTool]]の図形編集オブジェクトを設置する場合、それを有効に機能させるためにはこの属性が必要です。(なお再編集機能を有効にするにはclickableも必要)

====data-nocache====
コンテナsvgコンテンツが参照するレイヤー（[[#レイヤー|レイヤーsvgコンテンツ]]）へのリンクを記述する要素(animationもしくはiframe要素)に、data-nocache属性をつけることによって、クライアントのコンテンツキャッシュを無効にすることができます。なお、無効化手段はunix-timeクエリパートをそのレイヤー下のすべてのリソースへのアクセスに付加させることによります。

====metadataフレームワーク====
データ格納効率に優れたメタデータのフレームワークが提供されます。このメタデータは先述のクリッカブルオブジェクトとしてインタラクティビティの実装に用いられます。 svgドキュメントルート要素のproperty属性にメタデータの属性名をカンマ区切りで列挙。同文書の図形要素のproperty属性に同じ順序でメタデータの値を記述します。(なお、xlink:title属性でマウスオーバーで機能する吹き出しを設置できます)

ひとつの文書に対して一つのスキーマ（メタデータの属性名とその順番）しか与えられないという制約を持ちます。（その代わり格納効率が高い）クリックやタッチ等によってデフォルトの状態ではブラウザが備えるモーダルダイアログに属性名と属性値がそれぞれ列挙された形で表示されます。metadata表示機能の拡張/カスタマイズについては、ウェブアプリケーションの開発の章で別途解説する'''setShowPoiProperty()'''関数を参照してください。

データ自体にカンマが含まれる場合はエスケープが必要です。

=====例：=====
<svg '''property="id,type,latitude,longitude,title,address,spec"''' ... >
...
<use transform="ref(svg,14118.37511,-4524.39994)" x="0" y="0" xlink:href="#syl8"
'''content="RIS/RJER,地方管理,45.2439994,141.1837511,利尻空港,北海道利尻郡利尻富
士町,1800×45(07/25)"''' xlink:title="利尻空港"/>
...
</svg>

====レイヤーリストUIの詳細====
[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.28.E5.BE.8C.E8.BF.B0.29.E3.82.92.E8.A8.AD.E7.BD.AE.E3.81.99.E3.82.8Bdiv.E8.A6.81.E7.B4.A0|レイヤーリストUIが設置されるdiv要素]]には、以下のプロパティを設定することで、UIの動作を調整するパラメータを与えることができます
* data-customizer [https://github.com/svgmap/svgmapjs/blob/main/SVGMapCustomLayersManager_r3module.html カスタムレイヤーマネージャ]の起動ボタンを設置し、プロパティ値で同ウェブアプリのパスを指定します。
* data-layerstylecontroller 各レイヤーの表示スタイルを調整するUIを設置します(値不要)
* data-hiddenfilter 表示されていないレイヤーをレイヤーリストUI上でも非表示にする機能を稼働させます(値不要)
* data-opened svgMapウェブアプリが起動した直後にレイヤーリストが開かれた状態にします
* data-fixed レイヤーリストが開かれた状態且つ閉じるボタンを表示させません(data-openedと排他)

===動作の制限・差異===
====再描画の制限====
* ブラウザネイティブのSVG描画機能に対して注意すべき点として、このSVGDOMの描画は、基本的に伸縮スクロールのタイミングでしか行われない点です。（ネイティブのSVG描画機能は60fpsで再描画する努力を行っている) そのため、再描画タイミングを意識・明示([[#refreshScreen|refreshScreen]]関数を使用)したアプリケーションの構築が必要になるケースがあります。
*関連情報
**[[内部機構解説#Zoom.2FPan_Controller:]]
**[[解説書#refreshScreen|refreshScreen]]
**[[解説書#setPreRenderController|setPreRenderController]]
**[[解説書#.E6.8B.A1.E5.BC.B5API|preRenderFunction ]]
**[[解説書#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|動的な地図レイヤー]]
**[[解説書#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|レイヤー固有のUI]]
**[[解説書#.E6.8B.A1.E5.BC.B5.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88|拡張イベント]]

===実装されている機能===
多くの機能が実装されていないため、実装されている機能、および拡張された機能をここでは列挙することとします。
====要素====
*path
*globalCoordinateSystem
*circle
*text
*defs
*animation
** 別のsvgコンテンツを取得して埋め込みます。
** コンテナsvgコンテンツで使用した場合は埋め込んだコンテンツは「レイヤー」と見做されます。
** それ以外で使用した場合はタイルやサブレイヤーとして使用できます。
** x,y,width,height属性は、SVGの仕様に基づき埋め込むコンテンツのtransformに影響を与えるとともに、下記の通り動的なコンテンツの読み込み機構が制御されます。
*** この属性で示された領域がtransform後のviewportと交差・包含した場合、その埋め込みコンテンツは動的に取得され表示されます。lazy loadの機構に相当し、タイリングメカニズムを構成します。
*** ただし、visible-min-zoom およびvisible-max-zoom属性で示された拡大率による表示条件を満たしていない場合は取得されません。level of detailの機構に相当します。（x.y,width,height属性と組み合わせることで、タイルピラミッド（ラスター、ベクターを含む）機構を実現します。詳しくは[http://kikakurui.com/x7/X7197-2012-01.html JISX.7197]、[https://www.w3.org/Submission/2011/04/ Tiling and Layering Moduleサブミッション]、もしくは[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html こちらの論文]を参照
** commonQuery属性：[[#レイヤーsvgコンテンツ]]のanimation要素でこの属性を設置すると、そのレイヤーのコンテンツを取得するすべてのGETリクエストのクエリパートにこの属性で設定した値が共通付加されます。(もしKey=Valueの形のクエリを追加したい場合は文字列として"Key="の部分も含めてこの属性値に設定します。)
*iframe
** animationと同等
*image
** 別のビットイメージコンテンツを取得して埋め込みます。
** animation属性のx,y,width,height属性と同様の追加のlazy loadの振る舞いを持ちます。
** visible-min-zoom およびvisible-max-zoom属性の振る舞いも同等です。
** xlink:href属性はspatial fragment をサポートし、(xywhによっ参照されるimageの部分を埋め込む機能をサポートします。)。もしもアスペクト比が異なった場合（ＴＢＤ）
** style:filterプロパティによる画像処理をサポートします。
** data-mercator-tile="true"　属性が設定されている場合、そのビットイメージはメルカトル図法で描画されていることを示します。
** htmlのimg要素のcrossoriginに対応する属性を持つことができます（この場合ビットイメージの埋め込みに際しoriginヘッダが送信）
*view

====属性====
*<code>ref(svg,x,y)</code> ：SVG1.2Tの[https://www.w3.org/TR/SVGTiny12/single-page.html#coords-transform-ref TransformRef]属性により、non-scaling objectが設置できます。Pointフィーチャの可視化に効果的です。　

'''TBD'''
*fill
*stroke
*arrow
*dasharray
*viewvox
*opacity
*style
**image-rendering : pixelated / image要素
**fill
**stroke
**opacity
*meta
**http-equiv="refresh" : [[#レイヤー|レイヤーsvgコンテンツ]]のみ。contentに秒数を設定することで、そのレイヤーを指定秒数ごとに(再読み込み)更新する。script要素はonloadが再実行される。　注：ブラウザのキャッシュが効く可能性を考慮して実装する必要がある。

==第三章：ウェブアプリケーションの開発==
本章はSVGMap Revsion 0.1フレームワークを用いたウェブアプリケーションの開発について解説します。
本フレームワークによる開発部分は以下に分類されます。
*[[#フレームワークの呼び出し|ルートhtml文書]]によるウェブアプリケーション(SVGMapフレームワーク)
* 動的な地図レイヤー(Layers as WebApps) : SVGコンテンツに以下のいずれかの情報を設定する
** [[#レイヤー|レイヤーsvgコンテンツ]]のドキュメントルート要素のdata-controller属性　[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|レイヤー固有のUI]]
** svgドキュメントに設置されたscript要素 [[#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|script要素による動的な地図レイヤー]]

===SVGMapフレームワーク===
[[#フレームワークの呼び出し|ルートhtml文書]]によるウェブアプリケーションはSVGMapLv0.1フレームワークを用いたウェブアプリケーションの基本であり、そのhtml文書と底傘参照されたjavascriptライブラリを読み込んだwindowが持つ''''svgMap''''という名前のインスタンスを用いてフレームワークのための拡張機能を利用することができます。

====SVGMapが持つ基幹オブジェクト====
SVGMapLv0.1フレームワークのインスタンス''''svgMap''''が持つ基幹のオブジェクトを解説します。これらの基幹オブジェクトはそれぞれゲッター(getSvgImages, getSvgImagesProps)によって取得できます。
=====svgImages[]=====
[[#getSvgImages|getSvgImages()]]により取得できる。svgImages[hashID]は、現在ローディングされているSVGドキュメント(“XML” DOMツリー(SVG DOMツリーというよりむしろ))が蓄積されているハッシュテーブル
*ハッシュID：フレームワークが任意に付番した文書ID。ただし、最初にロードされるルートのドキュメントのハッシュキーは、”root”
*なお、[[#レイヤー固有のUI]]のwebAppでは、そのレイヤーに該当するSVGドキュメントが[[#svgImage|svgImage]]で取得できる。

=====svgImagesProps[]=====
[[#getSvgImagesProps|getSvgImagesProps()]]によって取得できる。
同、個々のSVGドキュメントが持つ、各種プロパティが蓄積されているハッシュテーブル。
注記がない限り全てReadonly
*ハッシュID： svgImages同様
*なお、[[#レイヤー固有のUI]]のwebAppでは、そのレイヤーに該当するSVGドキュメントが持つ、各種プロパティが[[#svgImageProps|svgImageProps]]で取得できる。
======プロパティリスト======
*.Path コンテンツのパス（webAppsのdocument(html) rootに対する相対パス。Originが違う場合は絶対パス(クエリパートやフラグメント(ハッシュ)も含む)
*.CRS 地理座標からSVG座標に変換するための変換パラメータ
*.script SVG文書がscript要素を持つとき、そのscriptへのインターフェースが登録される。同script要素で生成されるオブジェクトに暗黙に登録されるメンバー変数については、[[#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|script要素による動的な地図レイヤー]]の章を参照
*.editable 編集可能レイヤーを示す　[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供|レイヤーのclass = editableに対応]]
*.editing 編集可能レイヤーを編集中
*.isClickable クリッカブルなレイヤーを示す
** true:設定　[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供|レイヤーのclass = clickableに対応]]
** 以下をメンバーに持つオブジェクト:ハイライト時のスタイルを設定可能(rev18以降)
*** .hilightFillStyle : ポリゴンオブジェクトのハイライト時スタイル（以下のメンバーが無い場合はハイライトしない）
**** .color : 塗りの色 (CSS の color値として解釈される文字列)
**** .lineWidth : 線幅
*** .hilightStrokeStyle : 線オブジェクトのハイライト時スタイル（以下のメンバーが無い場合はハイライトしない）
**** .color : 線の色 (CSS の color値として解釈される文字列)
**** .widthIncrement : 線幅の増加値
*.parentDocId このSVG文書を埋め込んでいる、親のSVG文書のハッシュID
*.childImages[hashID] このSVG文書が読み込んでいる、子のSVG文書(複数)
*.refresh
**.loadScript
**.timeout
**.start
*.controller レイヤー固有のUIへの(web appsのdoc rootに対する)相対パス
*.isSVG2 その文書がSVG2タイプの文書であるかどうか(CRSとembedの仕方がちがう）
*.rootLayer そのSVG文書が属する「レイヤー」を示す文書
*.scale そのSVG文書の現在のスケール。スケールはそのSVG文書の座標系と画面の座標系との間の値（地理座標系ではない）。拡大するとスケール値は大きくなる
*.preRenderControllerFunction そのSVG文書の再描画(画面更新)シーケンスの直前に実行される関数
*.hash そのレイヤーのURLのフラグメント部（この値は、レイヤ固有WebAppで変更が有効）

====利用可能API====
【TBD】 APIのリストは下記の通りです。
=====SVGMap.で呼び出せるAPI=====
======Geo2SVG======
*Geo2SVG( lat , lng , crs ) : 指定された緯度(lat)・経度(lng)・CRSより、SVG座標を計算する
======POIviewSelection======
*POIviewSelection( poi ) : 指定されたPOIの属性・リンクの表示選択画面を表示する。また、選択したイベントに従い、属性の表示または、リンク先のページを表示する。
======SVG2Geo ======
*SVG2Geo ( svgX , svgY , crs , inv ) : 指定されたSVG座標(svgX , svgY)をCRSにより、GEO座標に変換する。または、invにより逆変換する
======addEvent======
*addEvent(elm,listener,fn) : 指定された要素(elm)にイベント属性(listener)時の呼び出す関数(fn)を設定する (addEventListenerが実装されていなかったブラウザサポートの名残です)
======callFunction======
*callFunction( fname ,p1,p2,p3,p4,p5) : 指定した関数(fname)を引数(p1,p2,p3,p4,p5)を渡してフレームワーク内の任意の関数を実行する。(フレームワークの内部関数も呼び出すことができる)
======captureGISgeometries======
*captureGISgeometries( cbFunc , prop1 , prop2 , prop3 , prop4 , prop5 , prop6 , prop7 ): 現在画面上に表示中の地図コンテンツに対応した、GeoJsonのGeometryデータ構造に準拠のGISgeomerry情報をがレイヤ単位でまとまった連想配列の形で取り出す。非同期処理で、cbFuncの最初の引数に返却される。
** 連想配列のハッシュ値：レイヤID
** geomeryには、src(そのジオメトリのもととなっているSVGの図形要素), href(ビットイメージの場合のリンク)が付加される
** geoJsonのgeometryに相当する情報が含まれる（座標は[経度,緯度]）
** display="none"の図形要素は表示されていないとみなされる。また画面外にある図形要素も表示されていないとみなされる。画面に部分的に表示されている要素は表示されているものとみなされるとともにクリッピングも行われない。
** [[#captureGISgeometriesOption|captureGISgeometriesOption]](true)を設定してから実行すると、ビットイメージもジオメトリとして取得する。（ただし実データは含まれないので必要に応じて[[#getImagePixelData|getImagePixelData]]で取得する）
*** type : Coverage
*** src : 画像情報のURL
*** coordinates : transformのb,c==0の場合、当該画像の南西、北東端が設定される
*** transform : b,c!=0の場合の、画像の座標(左上隅を0,0、右下隅が画像のw,h)から地理座標([経度,緯度])への一次座標変換情報(a,b,c,d,e,f)が設定される

======captureGISgeometriesOption======
*captureGISgeometriesOption(BitImageGeometriesCaptureFlg, TreatRectAsPolygonFlg, SkipVectorRenderingFlg, captureAlsoAsBitImage): captureGISgeometriesでキャプチャするデータの取得条件を設定する。
** BitImageGeometriesCaptureFlg: ビットイメージタイルをカバレッジとして取得するか(Default:false)。captureGISgeometriesを呼び出す前に使用する。
*** 2019.5.17アップデートで、transform matrix(非対角要素あり)を持つビットイメージタイルについても必要な情報を得られるようになった。
** TreatRectAsPolygonFlg: rect要素をポリゴンとして扱う(デフォルトは円もrectもPointとして扱われる)
** SkipVectorRenderingFlg: ベクトル図形の描画をスキップする
** captureAlsoAsBitImage: polygon/polylineの図形を描画したビットイメージをレイヤー単位でカバレッジデータとして取得
*captureGISgeometriesOption(captureGISgeometriesOptionObject) : オブジェクトでも設定できる(rev18以降)（以下そのメンバー変数：全て値はboolean）
** .BitImageGeometriesCaptureFlag, .TreatRectAsPolygonFlag, .SkipVectorRendering, .captureAlsoAsBitImage　上と同様

======checkSmartphone======
*checkSmartphone() : タッチに対応したスマホブラウザなのかどうかを判別
======childDocOp======
*childDocOp(func , docHash , param1, param2 , param3 , param4 , param5) : 指定した文書をルートにして、DOM操作をその子文書に対して実行する。なおこれはlinkedDocOpの直系の子供のみ適用版(自身も適用しない)
======dynamicLoad======
*dynamicLoad( docId , parentElem ) : 指定した文書ID(docId)以下の表示に必要な文書を読み込み、指定したdiv要素(parentElem)に表示する
======escape======
*escape(str) : 以下の文字をHTMLエスケープする(&:&amp,":&quot;,':&#039;,<:&lt;,>:&gt;)
======geo2Screen======
*geo2Screen( lat ,lng ) : 地理座標を指定すると、その画面上のキャンバスの座標(px)を返す
======getBBox======
*getBBox( x , y , width , height ) : 指定された値でviewBoxを作成する

======getBasicPermanentLink======
* getBasicPermanentLink(copyLinkTextToClipboard) : 現在の表示状態(レイヤーの表示非表示および表示領域)を反映した基本的なパーマリンクを生成する
** URLオブジェクトが返却される
** copyLinkTextToClipboardがtrue場合、クリップボードにもURLがコピーされる。
** 生成されるURLは、[[#起動URLによるオプション指定]]の仕様に基づく
** 参考：[[#サブレイヤーパーマリンク]]

======getCentralGeoCoorinates======
*getCentralGeoCoorinates() : グローバル変数 rootViewBox,rootCrsから画面中心地理座標を得る
======getConversionMatrixViaGCS======
*getConversionMatrixViaGCS( fromCrs , toCrs ) : 元座標変換行列(fromCrs)から先座標変換行列(toCrs)への変換行列を作成する

======getCORSURL======
* getCORSURL(originalURL, alsoCrossoriginParam) : クロスオリジンアクセス用URLを生成する。([[#setProxyURLFactory|setProxyURLFactory]]の第4,5引数が設定されている場合)
** alsoCrossoriginParam クロスオリジンアクセスに際してoriginヘッダが必要かを取得する(この引数がある場合は.url, .crossorigin メンバを持つオブヘクトが返却される)
** レイヤー固有UIのウェブアプリなどで独自にクロスオリジンアクセスを行ってデータを取得するような場合にプロキシ経由のURLを生成するのに利用できます。
** 参考：[[#.E3.83.97.E3.83.AD.E3.82.AD.E3.82.B7.E3.81.AE.E8.A8.AD.E5.AE.9A|クロスオリジンアクセスのためのプロキシ設定]]

======getDevicePixelRatio======
*getDevicePixelRatio( docId ) : setDevicePixelRatioで設定した値を取得できる。 docIdが指定されなかった場合は全ての値が得られる

======getElementByImageId======
*getElementByImageId( XMLNode , searchId ) : 指定されたSVG文書群ノード(XMLNode)以下の属性iidが指定されたID(searchId)と等しいノードを返す

======getLoadErrorStatistics======
*getLoadErrorStatistics() : 伸縮スクロール、refreshScreenごとの、リソースの読み込み状況を取得する。
**メンバー変数: timeoutBitImagesCount,timeoutSvgDocCount,otherBitImagesCount,otherSvgDocCount

======getGeoViewBox======
*getGeoViewBox() : コンテナsvgのviewBoxをgeo変換したgeoのviewBoxを取得
======getHashByDocPath ======
*getHashByDocPath ( docPath ) : ターゲットのレイヤーのハッシュをPath名(docPath)から探し出す
======getHyperLink======
*getHyperLink( svgNode ) : 指定されたsvg文書(svgNode)から、親文書をたどり最初に取得できたハイパーリンクを取得
======getInverseMatrix======
*getInverseMatrix(matrix) : 逆行列を求める(matrix.a..f)
======getLayer======
*getLayer(layerID_Numb_Title) : [[#getLayerId|layerID]],title,番号,href(URI)のいずれかで、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]SVGDOMにおけるレイヤーの(svg:animation or svg:iframe)要素を取得する。getLayersと似ているが、getLayersのほうは任意のsvg文書(オプションなしではroot container)に対して、内包されるレイヤーのリストを返却。こちらは[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]に対して検索キーに基づいてレイヤーを返却する

======getLayerId======
*getLayerId( layerKey ) : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]における"レイヤ"概念のレイヤidを検索する。検索に用いることができるのは、getLayerと同じtitle,url,もしくはルートレイヤの要素
* layerIDはレイヤー名とは異なる、フレームワークによって任意に附番された、そのSVGMapドキュメントを識別するための文字列。このlayerIDを基に動作するAPIが多くあります。
* [[#レイヤー固有のUI]]　の　[[#layerID]] も参照

======getLayers======
*getLayers( id ) : オプションなしの場合、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーに該当する要素をリストアップし、返却する。オプションアリの場合、そのidを持つ要素を返却
======getLinearTransformMatrix======
*getLinearTransformMatrix(x1i,y1i,x2i,y2i,x3i,y3i,x1o,y1o,x2o,y2o,x3o,y3o) : ３つの基準点の変換前後の座標を与えると、それに適合する1次変換行列が得られる。(*i:変換前の座標, *o:変換後の座標)
======getMapCanvas======
*getMapCanvas() : 地図キャンバスとなる、おおもとのdiv要素の取得
======getMapCanvasSize======
*getMapCanvasSize() : 地図キャンバスのサイズ(画面サイズ)を取得
======getMouseXY======
*getMouseXY( evt ) : 指定されたイベント時のマウスの画面上の座標(px)を返す
======getNonScalingOffset======
*getNonScalingOffset(svgPoiNode) : 拡大縮小しても伸縮しない図形要素のオフセット値を取得する
======getObject======
*getObject( oname ) : 指定されたオブジェクト(oname)を取得
======getPoiPos======
*getPoiPos( svgPoiNode ) : =getNonScalingOffset
======getRoot2Geo======
*getRoot2Geo() : コンテナsvgのCRSの逆変換CRS( rootのsvg - > geo )を取得
======getRootCrs======
*getRootCrs() : コンテナsvgのCRS ( geo->rootのsvg )を取得
======getRootLayersProps======
*getRootLayersProps() : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の(animetion||iframeで構成される)レイヤー情報を取得する。Arrayが返却、並び順はsvgの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]と同じ（最初のレイヤーが一番下。selectメニュー創るときはひっくり返して使うこと）レイヤー情報：名称、表示非常時状態、レイヤーグループ、グループのフィーチャ(バッチ||スイッチ||ふつう)、編集可、編集中、対応SVGドキュメント、個別ユーザインターフェース、個別凡例
======getRootViewBox======
*getRootViewBox() : aspectを加味し実際に開いているコンテナsvgのviewBoxを取得
======getSvgImages======
*getSvgImages() : svg文書群(XML)の連想配列を取得(ハッシュキーは[[#getLayerId|layerID]]("root"以外は"i"+連番))
* (参考:[[#svgImages.5B.5D|svgImages]])

======getSvgImagesProps======
*getSvgImagesProps() : svg文書群のプロパティ( .Path,.CRS,.script,.editable,.editing,.isClickable,.parentDocId,.childImages,.controller)の連想配列を取得(ハッシュキーは[[#getLayerId|layerID]]("root"以外は"i"+連番))
* (参考:[[#svgImagesProps.5B.5D|svgImagesProps]])

======getSvgTarget======
*getSvgTarget( htmlImg ) : html文書中のimg要素(POI)を入力すると、対応するSVG文書の文書番号とその要素(use)が出力される。対応するuse要素を持つsvg文書自体を取得したい場合は.ownerDocumentする。idからhtml文書のimg要素を取得するには、Document.gelElementById(id)
======getSwLayers ======
*getSwLayers ( cat ) : swLayers[クラス名]に、クラス名ごとのレイヤー(のSVG要素)の全リストを構築する。catがある場合は、catの名称を持つもののリストのみを構築する
======getSymbols======
*getSymbols(svgDoc) : POI編集のsymbol選択を可能にするとともに、defsは、useより前に無いといけないという制約を払った
======getTickerMetadata======
*getTickerMetadata() : 現在Tickerが表示されているグラフィックスオブジェクトのメタデータを取得する
======getTransformedBox ======
*getTransformedBox ( inBox , matrix ) : 指定されたviewBox(inBox)を変換行列にてサイズ変更と移動のみでの座標変換する。b=0、c=0の場合のみ利用可能。たとえば、matrixには、svgImagePropsのCRSを設定することで、そのSVGMapコンテンツのSVG座標系でのviewPortが計算できる。このときmatrixは線形変換の係数が含まれたオブジェクトでも良いし、[[#.E5.A4.9A.E6.A7.98.E3.81.AA.E5.9B.B3.E6.B3.95.E3.81.AE.E5.AE.9A.E7.BE.A9.E3.81.A8.E5.88.A9.E7.94.A8|非線形変換のための関数が含まれたオブジェクト]]でも良い。　svgMap.getTransformedBox(svgMap.getGeoViewBox(),svgImageProps.CRS)

======getUaProp======
*getUaProp() : ブラウザの種類(isIE：IEかどうか、isSP：スマートフォンかどうか)を取得する
======getVerticalScreenScale======
*getVerticalScreenScale(screenLength) : 垂直(緯度)方向のscreenLengthに対する長さを取得する(input: px, return : Km)
======getViewBox======
*getViewBox( svgDoc ) : 指定したSVG文書のviewBoxを取得
======gps======
*gps() : ブラウザの測位APIによって測位しその点を中心に表示、表示縮尺は測位精度を元に適当に決定
======gpsCallback======
*gpsCallback(position) : GPS測位が成功した後に実行されるコールバック関数で、positionを中心とした場所を表示させる
======handleResult======
*handleResult( docId , docPath , parentElem , httpRes , parentSvgDocId ) : SVG文書を(docPathから)svg文書群とそのプロパティをHTTPXMLRequest(httpRes)から親文書(parentSvgDocId)の子文書(docId)として読込み、指定されたHTML要素(parentElem)に貼り付ける
======ignoreMapAspect======
*ignoreMapAspect() : 地図のアスペクト比を、rootSVGのviewBox( or hashのviewBox)そのものに設定する
======initLoad======
*initLoad() : load時に"一回だけ"呼ばれる初期化関数
======isIntersect======
*isIntersect( rect1, rect2 ): rect1(x,y,width,height)とrect2が交差(包含も含む)しているかどうかを返却
======linkedDocOp======
*linkedDocOp( func , docHash , param1, param2 , param3 , param4 , param5 ) : 再帰実行のルートになる文書のハッシュ(docHash)以下の子・孫・・・文書に対して、同じ処理(func( docHash , param1, param2 , param3 , param4 , param5 ))を再帰実行する関数
======loadSVG======
*loadSVG( path , id , parentElem , parentSvgDocId) : SVG文書を(pathから)svg文書群とそのプロパティを親文書(parentSvgDocId)の子文書(id)として読込み、指定されたHTML要素(parentElem)に貼り付ける
======matMul======
*matMul( m1 , m2 ) : 行列の積 x',y' = m2(m1(x,y)) = m(x,y) となる変換行列を構築
======numberFormat======
*numberFormat( number , digits ) : 指定された数値(number)を小数点以下第digit+1位を四捨五入した値を取得
======override======
*[OBSOLUTEWD] override( mname , mval ) : グローバルオブジェクトの関数プロパティでmnameという変数にmvalの値を代入する

======panMap======
* panMap( x, y, options ) : 地図をスムースにスクロールさせる
** x,y : パン量デフォルトはpx
** option.unit でパン量のコンテキストを変化できる
*** "%"||"percent"||"ratio" : 地図キャンバスに対する相対値で指定 (%,percentはパーセント, ratioは比率)
*** "canvas" : 地図キャンバス上の指定した座標を地図中心に
*** Note: 地理座標でパンする場所を変えたい場合は[[#geo2Screen]]を併用すると良い

======parseEscapedCsvLine======
*parseEscapedCsvLine(csv) : CSV 1行分文字列データ(csv)をエスケープを考慮して配列にパースする。
======refreshScreen======
*refreshScreen() : 画面の再描画を実行する（[[解説書#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90|参考情報]]）

======registLayerUiSetter======
*registLayerUiSetter( layerUIinitFunc, layerUIupdateFunc ) : レイヤー選択UI初期化関数と更新用関数を設定する
======reLoadLayer======
*reLoadLayer(layerID_Numb_Title) : 指定したレイヤー([[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーのみ。小孫レイヤーはNG)をリロードする
======resumeToggle======
*resumeToggle(evt) : 引数のイベント(evt)ターゲットのチェックボックスのチェック状態により、setResumeを実行する
======screen2Geo======
*screen2Geo( screenX , screenY ) : 画面上の座標(px)を指定すると、その地理座標を返す
======setCenterHitTest======
*setCenterHitTest(enable) : 自動中心ヒットテストの設定を変更するデフォルト:true

======setCursorCenterZooming======
*setCursorCenterZooming(enable) : (カーソル|ピンチ)位置中心ズーム機能を設定するデフォルト:false

======setCustomModal======
*setCustomModal( messageHTML , buttonMessages , callback,callbackParam) : モーダル画面を出現させ、指定されたメッセージ(messageHTML(String)もしくはdomオブジェクト(Object))、指定されたボタン(buttonMessages(Array))を表示する。ボタンが押された場合、コールバック関数(callback)を引数(クリックしたボタンのインデックス, callbackParam)を渡し呼び出す。
messageにHTML Stringだけではなく、DOM objectが使える点、ボタンに対するcallbackを設定できる点。ただしモーダルダイアログになる点が[[#showModal]]と異なる。

======setDefaultHilightStyle======
*setDefaultHilightStyle( style ) : ヒットテストなどによるオブジェクトのハイライト時のスタイルを設定する
* style : {stroke:{color,widthIncrement}, fill:{color,lineWidth,lineColor}}
** stroke : 線オブジェクトに対してハイライト時の色(color)と線幅増分(widthIncrement)
** fill : 塗りつぶしオブジェクトに対してハイライト時の色(color)、輪郭線幅(lineWidth)、輪郭線色(lineColor)

======setDevicePixelRatio======
*setDevicePixelRatio( dpr (, layerId) ) : zoom計算時に用いる(たとえば２にするとzoom値が本来の２分の１になる)変数を指定値(dpr)に設定する。ズームに応じた表示制御(visible*zoom属性等のLevel of Detail機能)に影響を与える。オプションの[[#getLayerId|layerId]]を指定すると、指定したlayerに対して別個の値を設定する。dprにnullを与えると初期値(1)にクリア。

======setGeoCenter======
*setGeoCenter( lat , lng , radius) : 中心地理座標を指定して地図を移動 (radiusは緯度方向の度1≒110Km) lat,lng:必須 radius:オプション(今の縮尺のまま移動)
======setGeoViewPort======
*setGeoViewPort( lat, lng, latSpan , lngSpan , norefresh) : 地理(グローバル)座標系で指定したエリアを包含する最小のviewportを設定する
======setLayerVisibility======
*setLayerVisibility([[#getLayerId|layerID]]_Numb_Title, visivility, [options]) : 指定した[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーの表示非表示を設定し、layerListUIのアップデートも行う
** layerID : String: [[#getLayerId|layerID]]のの文字列
** visivility : Boolean
** options : Object　以下のメンバー変数でオプションの指定が可能
*** .exec : String : 指定したレイヤーがレイヤー固有UIを持つ場合、その起動を指定できます。与えることができる文字列は[[#.E8.A9.B3.E7.B4.B0|data-controllerの起動オプション]]と同じ。
*** .hash : 指定したレイヤーを表示するときにハッシュ値を設定する

======setMapCanvas : ======
*setMapCanvas : ( mc ) : 地図キャンバスとなる、おおもとのdiv要素を指定した要素(mc)に設定
======setMapCanvasCSS======
*setMapCanvasCSS(mc) : マップキャンバスのCSS(postion、overflow、top、left、width、height)を設定
======setMapCanvasSize======
*setMapCanvasSize( mcs ) : 地図キャンバスのサイズを指定したサイズ(mcs)に設定
======setPreRenderController======
*setPreRenderController( layerID, cntFunc ) : 再描画(画面更新)シーケンスの直前に実行する関数(cntFunc)を設定する。　[[#getLayerId|layerID]]が指定されていると、そのIDをもつSVG文書に対して設定する。指定されていない場合は、全てのSVG文書に対して指定した関数が描画前に実行される。cnfFuncが無い場合は設定を解除する。また、cntFuncには再描画前制御の際に必要になるかもしれないいくつかの変数が第一引数にオブジェクトの形で渡される。(docId,scale,actualViewBox,geoViewBox,viewChanged(zoom|scroll|false) なお、SVGMapLayerUI.jsが有効化されている場合、[[#.E6.8B.A1.E5.BC.B5API|レイヤ固有UIのhtml文書中のscript内にpreRenderFunctionという関数]]がある場合、そのレイヤーを指定したsetPreRenderControllerでの関数設定と同じ振る舞いをする。なお、この処理内容は、動的レイヤー(<script>を持つSVGコンテンツ)のonload関数と同じタイミングで呼び出される関数をレイヤ固有UI等に設置できるものと考えると良い。

======setResume======
*setResume( stat ) : レジュームを実行するかどうかを引数(stat)によって設定し、cookieにレイヤー情報を保存する
======setRootLayersProps======
*setRootLayersProps(layerID_Numb_Title, visible , editing , hashOption , removeLayer , execOption ) : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の(animetion||iframeで構成される)レイヤー情報を設定する。[[#getLayerId|layerID]]_Numb_Titleは、レイヤー番号(root svg container内での順番)、[[#getLayerId|layerID]](svg文書のiid = htmlのid = selectのvalue)、タイトル名(不確実-同じ名前があるかもしれない。最初に当たったものを選択)。変化があるとtrueが返却される。
*visible , editingはtrue,false,nullのいずれか。nullの場合、その値を変化させないという意味。もしくは不合理の場合はfalseが返却される。この時classで設定されているレイヤーグループの特性(switch)に基づいた制御がかかる
*hashOption 指定したレイヤーを表示するとき、ハッシュを指定して表示する
*removeLayer 指定したレイヤーを消去する
*execOption レイヤ固有UIを持つレイヤーを表示する場合の起動方法を指定："hiddenOnLayerLoad", "onClick", "appearOnLayerLoad"のいずれか。[[#.E8.A9.B3.E7.B4.B0|詳細はこちらを参照]]

*setLayerVisibilityと異なり、アップデート(refreshScreen())は別途行う必要がある

======setRootViewBox ======
*setRootViewBox ( rvb ) : aspectを加味し実際に開いているコンテナsvgのviewBoxを指定したコンテナsvgのviewBox(rvg)に設定*setShowPoiProperty( func , docId ) : 特定のレイヤー・svg文書(docId)もしくは、全体に対して別のprop.表示関数(func)を指定する。funcが未指定の場合、設定された関数をクリアする。指定した関数は、帰り値がfalseだった場合、デフォルトprop.表示関数を再度呼び出す
======setShowPoiProperty======
*setShowPoiProperty(func , docId ): 特定のレイヤー・svg文書(いずれもdocIDで指定)もしくは、全体に対してPOIをクリックした時の表示関数をセットする
**セットされていないときは内蔵のデフォルト関数が使用される
**docId: セットされていないときはすべてのレイヤの docIdがルートレイヤに対応するものの場合はそのレイヤー下の子孫文書に対しても
**func: コールバック関数
*** funcがセットされいていないときはクリアする
*** funcの第一引数にはクリックされた要素が入る

======setSmoothZoomInterval======
*setSmoothZoomInterval(zoomInterval) : ズームアニメーションの設定(ズームイン／アウト後のタイル読み込み開始タイマー(ms))(Default:20ms)
======setSmoothZoomTransitionTime======
*setSmoothZoomTransitionTime(zoomTransitionTime) : ズームアップ[[#zoomup]]／ダウン[[#zoomdown]]／パン[[#panMap]]時の遷移時間(Default:300ms)

======setSummarizeCanvas======
*setSummarizeCanvas( val ) : 2Dベクトル図形描画用に統合キャンバス(レイヤー単位でのキャンバス統合)の使用有無を設定する。デフォルトは統合する
======setUpdateCenterPos======
*setUpdateCenterPos(func) : 中心座標書き換え関数を指定した関数に設定(デフォルト:id="centerPos"要素の文字列を適当に書き換える)
======setProxyURLFactory======
*setProxyURLFactory( documentURLviaProxyFunction, imageURLviaProxyFunction, imageCrossOriginAnonymous, imageURLviaProxyFunctionForNonlinearTransformation, imageCrossOriginAnonymousForNonlinearTransformation, LaWAfetchviaProxyFunction ): コンテンツの取得をプロキシ経由等にするために、URL(文字列)を書き換える関数を指定する。
** documentURLviaProxyFunction : svgドキュメント用のプロキシ経由のURLを生成する関数をここに設定する。<code>URLviaProxy = documentURLviaProxyFunction(URL)</code>
** imageURLviaProxyFunction : 同ビットイメージ用
** imageCrossOriginAnonymous : ビットイメージのコンテンツ取得に際しcrossorigin = "anonymous"を設定
** imageURLviaProxyFunctionForNonlinearTransformation: ビットイメージへの非線形図法変換専用のプロキシ経由URL生成関数を設定する。
** imageCrossOriginAnonymousForNonlinearTransformation : 同上のコンテンツ取得に際しcrossorigin = "anonymous"を設定
** LaWAfetchviaProxyFunction : [[#レイヤー固有ユーザインターフェース|LaWA]]内のFetch/XHRに対してプロキシ経由URL生成関数を設定する。
** 参考：[[#.E3.83.97.E3.83.AD.E3.82.AD.E3.82.B7.E3.81.AE.E8.A8.AD.E5.AE.9A|クロスオリジンアクセスのためのプロキシ設定]]

======setZoomRatio ======
*setZoomRatio ( ratio ) : zoomUp、zoomDownボタン押下時のズームレシオを指定した値(ratio)に設定する
======showModal======
*showModal( htm , maxW, maxH) : ダイアログ表示フレームワークを呼び出し、指定したhtm文字列を最大maxW,H値の中で表示する。closeボタンはフレームワークで設置される（参考[[#setCustomModal]]）（API名に反して、この関数はモーダルダイアログではない、ダイアログボックスの挙動を取る）
** htm：ダイアログ内に表示するhtmlのソース文字列、もしくはHTML DOM Elementオブジェクト
** maxW, maxH : Optional: ダイアログのサイズ（もしウィンドサイズに収まらない場合は、このサイズを下回ることがある。指定されていない場合はhtmの内容をベースにサイズが変化する


======showPage======
*showPage( hyperLink ) : 指定されたハイパーリンク先のページを表示する。ハッシュだけの場合は viewPort変化をさせる
======showUseProperty======
*showUseProperty( target ) : 指定されたPOI( target )の属性情報を表示する
======transform ======
*transform ( x , y , mat , calcSize , nonScaling) : 指定された座標を変換する。
======updateLayerListUI======
*updateLayerListUI() : レイヤーリストのUIの表示を更新したりレイヤー固有UIを設定したりする
** '''[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のsvgmap文書をDOMで直接編集したり、setRootLayersPropsで操作した場合、この関数を呼ばないとレイヤ固有UIが正しく設定されないなど多くの処理が破綻するので、必ず呼ぶ必要がある。(近い将来refreshScreenで自動的に反映されるようにする予定)'''

======zoomdown======
*zoomdown( ratio ) : 地図をスムースにズームダウン
** ratioはオプション(デフォルトは1.732)

======zoomup======
*zoomup( ratio ) : 地図をスムースにズームアップ
** ratioはオプション(デフォルトは1.732) (デフォルトは[[#setZoomRatio]]で変更可)

=====svgMapAuthoringTool.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_Authoring_r*.jsを用いた場合に使える
======cancelPointingPoiRegister======
* cancelPointingPoiRegister: initPOIregistToolで設置したUIの地図クリック・タッチでの座標入力イベント(click, touchend)をキャンセルする
======clearTools======
*clearTools: オーサリングツールを除去する。
======initGenericTool======
*initGenericTool(targetDiv,poiDocId,cbFunc,cbFuncParam,options): 点、線、多角形（オプションでそれらのバッファ付き）の総合オーサリングツールを初期化する。
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** options: {withBufferedTools,editingStyle,shapeStyle}　その他オプションをオブジェクトで指定(Optional)
*** withBufferedTools: boolean: trueでバッファ付きツールを追加
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルをブジェクトで指定
*** editingStyle: {opacity,strokeWidth,stroke,fill}：編集中の表示スタイルをブジェクトで指定
*** useXlinkTitle: trueでタイトル編集欄付きツール (Pointツールには影響しない)
*** styleEditor: trueでスタイル編集UI追加

======initPOItools======
*initPOItools(targetDiv,poiDocId,cbFunc,cbFuncParam,getPointOnly,returnSvgElement,options)　: 複数のPOIを編集するツールを初期化する (このツールは一個しか設置できない)
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** getPointOnly : ポイントを取得するのみで、その点にuse要素を設置することはしない(Optional)
** returnSvgElement : trueで編集したSVG要素などがコールバック関数に構造化され返却される(Optional)
** options : {bufferOption,editingStyle,shapeStyle}: その他のオプションをオブジェクトで指定(Optional)
*** bufferOption : trueでバッファ付きツール
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルを指定 (buffer指定時に有効)
*** styleEditor: trueでスタイル編集UI追加

======initPOIregistTool======
*initPOIregistTool(targetDiv,poiDocId,poiId,iconId,title,metaData,cbFunc,cbFuncParam,getPointOnly,returnSvgElement): 一個のPOINTオブジェクトの登録ツール・座標入力ツールを初期化する
** initPOItoolsと異なりこちらのツールは複数個設置できる
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** poiId : 登録するPOIのIDを指定
** iconId : 対象文書内のアイコンのIDを指定
** title : アイコンのタイトルを指定
** metaData : アイコンのメタデータ文字列を指定
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** getPointOnly : ポイントを取得するのみで、その点にuse要素を設置することはしない(Optional)
** returnSvgElement : trueで編集したSVG要素などがコールバック関数に構造化され返却される(Optional)
======initPolygonTools======
*initPolygonTools(targetDiv,poiDocId,cbFunc,cbFuncParam,isPolylineMode,options): POLYGONオブジェクトの"編集"ツール新規追加、削除、変更などが可能　ただし一個しか設置できない
** コンテナsvgコンテンツでclickable及びeditableを設定したレイヤーで再編集可能
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
*** 第一引数に成否、第二引数にcbFuncParam が入る。作成したPOIの情報は、SVGDOMから得るか、指定したdiv内に生成されているフォームから得る（少し使いづらいので、今後もう少し便利にするかもしれません）
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** isPolylineMode : ポリゴンではなくポリラインの編集ツールとする
** options : {bufferOption,editingStyle,shapeStyle}: その他のオプションをオブジェクトで指定(Optional)
*** bufferOption : trueでバッファ付きツール
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルを指定
*** editingStyle: {opacity,strokeWidth,stroke,fill}：編集中の表示スタイルを指定
*** useXlinkTitle: trueでタイトル編集欄付きツール
*** styleEditor: trueでスタイル編集UI追加

======setTargetObject======
*setTargetObject: TBD プログラムから編集対象オブジェクトを指示する（ただし編集中レイヤのオブジェクトに限る）
======isEditingGraphicsElement======
*isEditingGraphicsElement: 編集中のオブジェクトがあるかどうかを確認する

=====svgMapGIStool.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_GIS_r*.jsを用いた場合に使える。なお本機能拡張はJSTS([https://unpkg.com/jsts@1.6.1/dist/jsts.min.js jsts.min.js])の読み込みがさらに必要。

====== 参考：JSTS ======
[https://github.com/bjornharrtell/jsts/ JSTS](JavaScript Topology Suite)は、[https://github.com/locationtech/jts JTS](Java Topology Suite)をjavaScriptに移植した地理空間情報処理ライブラリです。地理空間情報の標準に準拠したAPIを備えています。
* [https://github.com/bjornharrtell/jsts JSTSのプロジェクトページ]
* [http://locationtech.github.io/jts/javadoc/ API](JTS用、JSTSもこれに準ずる)
* [https://www.tsusiatsoftware.net/jts/files/JTS_Library_for_Geometry_2011.pdf JTSの機能概要スライド]

====== buildDifference======
* buildDifference( sourceId1, sourceId2, targetId , strokeColor, strokeWidth, fillColor, progrssCallback, getResultAsGeoJsonCallback,getResultAsGeoJsonCallbackParam)
** JSTSのDifferenceを実行
** 引数はbuildIntersectionの該当引数に対応

======buildIntersection======
*buildIntersection( sourceId1, sourceId2, targetId , strokeColor, strokeWidth, fillColor, progrssCallback, addSourceMetadata, getResultAsGeoJsonCallback, getResultAsGeoJsonCallbackParam, options )
** sourceId1とsourceId2のレイヤーに対してJSTSのIntersectionを実行し、結果をtargetIdレイヤーにコンテンツとして出力する。性能はgetIncludedPointsより低いことが多い intersection処理の振る舞いは[https://bjornharrtell.github.io/jsts/ JSTSを参照]
** sourceId1: sourceId1レイヤーのレイヤーID
** sourceId2: sourceId2レイヤーのレイヤーID
** targetId : targetId レイヤーのレイヤーID
** strokeColor : 線の色 (なお、strokeColor, strokeWidth, fillColor のいずれも指定ない場合は描画しない(getResultAsGeoJsonCallbackがあればそこに結果を変換するのみ))
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** progrssCallback: 変換途中の状況が返されるコールバック関数。
** addSourceMetadata: sourceId1とsourceId2の各図形要素に付随しているメタデータ(contentアトリビュートの値)を演算結果の該当する図形要素に結合して付加する。
** getResultAsGeoJsonCallback: 演算結果をgeoJsonで返却を受けたい場合にコールバック関数を指定する。第一引数に結果が返る
** getResultAsGeoJsonCallbackParam : 上記コールバック関数に送りたい引数(第二引数に入力される)
** options: その他のオプションを指定するオブジェクト(下記、メンバ変数)
*** uniteSource1: trueでsourceId1のジオメトリ群をuniteしてから演算する
*** uniteSource2: trueでsourceId2のジオメトリ群をuniteしてから演算する
*** areaCompare: trueで演算結果と元のジオメトリとの面積比をメタデータに付与
*** resultGroupId: 演算結果を生成するグループを指定
*** opacity: 透明度

======captureGeometries======
*captureGeometries( cbFunc , opt ) : svgMap.captureGISgeometriesの引用
====== coverageImageXY2LatLng======
* coverageImageXY2LatLng(pixWidth , pixHeight, px,py,targetCoverage) : ビットイメージカバレッジのピクセル座標から地理座標を算出する関数
** pixWidth, pixHeight : ビットイメージカバレッジのサイズ
** px,py : ビットイメージカバレッジのピクセル座標
** targetCoverage : getInRangePolygonParts で得られた返り値を設定する
====== drawGeoJson======
* drawGeoJson( geojson , targetSvgDocId, strokeColor, strokeWidth, fillColor, POIiconId, poiTitle, metadata, parentElm, metaDictionary) : geojsonのgeomerty を指定したレイヤーに描画する
** geojson : geojson データのgeopmetry
*** メタデータ : メタデータはgeojsonの本来のメタデータ仕様(type:Featureのオブジェクトにpropertiesを設置する)で設定可能
**** また、連想配列もしくは配列の形で、関数の呼び出し時のmetadataパラメータでデフォルトのメタデータを指定できる。
**** また、geoJSONの任意のデータ階層にmetadataプロパティとしても埋め込める。
**** 加えて、propertiesを同様に任意のデータ階層に設定できる(この場合、上の階層の値は下の階層の値で上書きされる)
*** スタイリング : メタデータ仕様を拡張した、geojsonの[https://github.com/mapbox/simplestyle-spec mapbox拡張仕様]に基づいて、描画スタイルを各Featureに設定可能　上記の拡張properties拡張により、デフォルト描画スタイルを設定することも可能。
**** marker-sizeは未実装。marker-symbolではsvgコンテンツのdefsで登録済みのアイコンのIDを指定する。
**** 参考: properties.で設定できる、スタイル属性名: <code>title, description, marker-size, marker-symbol, marker-color, stroke, stroke-opacity, stroke-width, fill, fill-opacity</code>
** targetSvgDocId : 描画先のレイヤーID
** strokeColor : 線の色
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** POIiconId :　Pointの場合のアイコンID(あらかじめ指定した描画先のレイヤーのコンテンツに該当IDのアイコンが定義されている必要がある)
** poiTitle : POIのタイトル
** metadata : POIのメタデータ（連想配列）
** parentElm : (Optional) 指定した要素の子要素として描画
** metaDictionary: (Optional) メタデータとして要素に埋め込みたい属性名のリストを配列で指定する（これ以外の属性は無視するようになる）

====== drawKml======
* drawKml( kml , targetSvgDocId, strokeColor, strokeWidth, fillColor, POIiconId, poiTitle, metadata, parentElm,styleData) : KMLを指定したレイヤーに描画する
** KML : KML 描画するKMLデータのXML DOM
** targetSvgDocId : 描画先のレイヤーID
** strokeColor : 線の色
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** POIiconId :　Pointの場合のアイコンID(あらかじめ指定した描画先のレイヤーのコンテンツに該当IDのアイコンが定義されている必要がある)
** poiTitle : POIのタイトル
** metadata : POIのメタデータ文字列
** parentElm : (Optional) 指定した要素の子要素として描画
** styleData : TBD

====== getBufferedPolygon ======
* getBufferedPolygon(geom,bufferLength) : 任意のジオメトリ(geom)に対して、指定のバッファ長[m]のポリゴンジオメトリを生成する。
** Note: [[#captureGISgeometries]]で取得したデータ等も演算対象にすることができる。

====== getColorString ======
* getColorString(r,g,b) : r,g,b値から、webColor文字列を生成する

======getExcludedPoints======
*getExcludedPoints(poiID, polyID, cbFunc, param , progrssCallback , pointOnly ) : 指定したpoiID検索対象レイヤーのうち、指定したpolyIDポリゴンコンテンツレイヤーのポリゴンに内包されないものを抽出する。
** パラメータはinverseを除きgetIncludedPointsと同じ。
====== getImage======
* getImage(sourceData, renderingOptions ) : メッシュデータからビットイメージ(mage/pngのdataURL)を生成
** sourceData : 以下のデータ構造を持つオブジェクト
*** width, height メッシュのピクセル数
*** rasterData[py][px] 以下のデータ構造を持つオブジェクト
**** color 以下のデータ構造を持つオブジェクト
***** r,g,b,a
**** inRange : boolean
** renderingOptions : 以下のデータ構造を持つオブジェクト
*** drawOutOfRange : boolean レンジ内ではなくレンジ外を描画する
*** fillColor : boolean 上記条件のピクセルを指定した色で描画する
*** useCoverageColor 上記条件のピクセルをカバレッジの色で描画する

====== getImagePixelData======
* getImagePixelData(capturedSvgMapGeometry, callBackFunction, param) : ラスタ画像のビットマップデータを取得する。
** capturedSvgMapGeometry : [[#captureGISgeometries|captureGISgeometries]]で取得したビットイメージカバレッジのジオメトリ情報をもとに取得する
** callBackFunction : 取得したビットイメージデータが引数に渡される
*** data : RGBA intArray ( CanvasのContext.getImageData(...).dataで得られる情報と同様のデータ)
*** width
*** height
*** param : getImagePixelDataの第三引数がそのまま渡される

====== getIncludedPoints======
* getIncludedPoints(poiID, polyID, cbFunc, param , progrssCallback , inverse , pointOnly ) : 指定したpoiID検索対象レイヤーのうち、指定したpolyIDポリゴンコンテンツレイヤーのポリゴンに内包されるものを抽出する。
** poiID : 検索対象コンテンツレイヤーのレイヤID
** polyID : ポリゴンコンテンツレイヤーのレイヤID
** cbFunc : 検索完了後の結果を返却するコールバック関数　第一引数にポイントがGeoJasonのGeometry形式で返却され、第二引数にその個数、第三引数に(あれば)下記paramが返却される
** param : cbFuncに渡す任意パラメータ(第三引数に入る)
** progrssCallback : 変換途中の状況が返されるコールバック関数。　変換中　時々呼び出され、変換状態[%]が第一引数に渡される。
** inverse : trueで getExcludedPoints
** pointOnly : trueの場合検索対象コンテンツレイヤーのジオメトリがPoint以外の物は無視、false(もしくは未設定)の場合はPolygonやMultiLineStringのデータの場合中心点をPointと見立てて検索なお、ポリゴンやポリラインのしっかりした処理を期待する場合は下記のbuildIntersectionを使用すべき。
====== getInRangePoints======
* getInRangePoints(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : 検索対象のPointジオメトリが、検索条件としてのラスターデータ(カバレッジ)の特定色域に入っているものを検索する（ラスターGIS機能）
** poiID_or_points : 検索対象のPointジオメトリのあるレイヤIDもしくは、geoJsonのPointジオメトリ自体
** coverIDラスターデータ(カバレッジ)のレイヤーID
** rangeData : 色域 .hue, .satulation, .value, .alphaをそれぞれ指定する
*** hue: 0..360
*** satulation, value, alpha : 0..100
*** .hue, .satulation, .value, .alphaそれぞれのレンジは<nowiki>[[range1Min,Max],[range2Min,Max],...[rangenMin,Max]]</nowiki>の形で指定する。
*** データがない場合のデフォルトは<nowiki>{hue:[[0,360]],satulation: [[10,100]],value:[[10,100]],alpha:[[10,100]]}</nowiki> : アルファが10以上の全ての色
*** .outOfBoundsColor : TBD {r:255,g:0,b:0} の形で色を指定するとその色のピクセルは領域外(存在しないもの)として評価をスキップする
** cbFunc : 検索完了後の結果を返却するコールバック関数　第一引数にポイントがGeoJasonのGeometry形式で返却され、第二引数にその個数、第三引数に(あれば)下記paramが返却される
** param : cbFuncに渡す任意パラメータ(第三引数に入る)
** progrssCallback : 変換途中の状況が返されるコールバック関数。　変換中　時々呼び出され、変換状態[%]が第一引数に渡される。
** preCapturedGeometry : svgMap.captureGISgeometries()であらかじめ取得したgeometryがある場合、それを投入するとそれを用いて処理する
** computingOptions : getInRangeGeometriesOnCoverageを参照
====== getInRangeLineParts======
* getInRangeLineParts(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : ラインストリングジオメトリ用のラスターGIS機能パラメータはgetInRangePoints()と同じ
====== getInRangePolygonParts======
* getInRangePolygonParts(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : ポリゴンジオメトリ用のラスターGIS機能パラメータはgetInRangePoints()と同じ

====== getInRangeGeometriesOnCoverage======
* getInRangeGeometriesOnCoverage(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry, computingOptions ) : getInRange*を包含する関数
** computingOptions.targetVectorTypeで以下を設定することでそれぞれの機能を動かすことができる
*** 0:point,1:polyline(multiLineString),2:polygon
** computingOptions:
*** overlappingCoverage : "or"
*** splitByCoverage : boolean カバレッジが複数のビットイメージ(タイル)で構成されている場合、タイルごとに分割した答えを返す
***
====== haltComputing======
* haltComputing() : getIncludedPoints, getExcludedPoints, buildIntersectionを中断する
====== imageUrlEncoder ======
* imageUrlEncoder : オリジナルのURLから、setImageProxyの設定を加味したURLを生成する関数
====== latLng2coverageImageXY======
* latLng2coverageImageXY(pixWidth , pixHeight, lng,lat,targetCoverage) : 地理座標からビットイメージカバレッジのピクセル座標を算出する関数
** pixWidth, pixHeight : ビットイメージカバレッジのサイズ
** lng,lat : 地理座標
** targetCoverage : getInRangePolygonParts で得られた返り値を設定する
====== latLng2GeoJsonPoint======
* latLng2GeoJsonPoint(lat , lng ) : 緯度経度をGeoJsonのPointジオメトリに変換する
====== renderImages ======
* renderImages(sourceDataArray, parentElment, crs, renderingOptions) : ビットイメージカバレッジ×ポリゴンGIS(getInRangePolygonParts)の結果を直接可視化する
**sourceDataArray : [[#getInRangePolygonParts]]の結果を設定
**parentElment: SVGMapコンテンツ内で描画する親要素を設定
**crs: 描画するSVGMapコンテンツのCRS matrix(a,b,c,d,e,f)を設定
**renderingOptions : [[#getImage]]を参照

====== setImageProxy======
* setImageProxy( url , directURLls , useAnonProxy): getInRangePointsは、canvasを使った処理のため、CORSの制約にかかる場合、proxyを設定して回避できる。
** url : encodeURIComponent()でエンコードしたカバレッジのレイヤーのビットイメージのURLを付加すると、proxyとしてimageを返却してくれるURL文字列を指定
** directURLls : proxyを使わず直接アクセスするコンテンツを判定するための文字列の配列（この文字列のどれかが含まれていたら直接アクセス）
** useAnonProxy : Image.crossOrigin = "anonymous"を指定してアクセスする

====== hsv2rgb ======
* hsv2rgb(h, s, v) : hsv値からrgb値の色情報変換
** h (hue): 0..360
** s (saturation): 0..100
** v (value): 0..100
** 帰り値 : {r,g,b}: いずれも0..255

====== rgb2hsv ======
*rgb2hsv(r, g, b): RGB値からHSV値の色情報変換
** rgb: いずれも0..255
** 帰り値:{h,s,v}
*** h:0..360
*** s,v: いずれも0..100

=====svgMapLayerUI.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_LayerUI2_r*.jsを用いた場合に使える。
======assignLayerSpecificUiElement======
* >r4
* assignLayerSpecificUiElement( targetElement , isInline , autoSizing) : レイヤ固有UIを出力する先のDOM要素を指定する
** この関数は、レイヤーUIの初期化前～[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]読み込み前に呼ばれる必要がある（すなわち、load時のみ有効）
** targetElement : 出力先要素：出力先はsvgMapオブジェクトを持つwindowでなくても良い
** isInline : boolean 指定した要素をインライン要素として扱い、UIが存在しえない場合は消える。レイヤ固有UIを消すボタンも付与される
** autoSizing : boolean 自動リサイズを有効化

======customEvents======
*customEvents() : サポートしているイベントを返却

======launchController======
* >r4
* launchController(layerID, cbf) : レイヤ固有UIを出現させる。ただしそのレイヤーがレイヤー固有UIを持っており、且つ表示状態になっている必要がある。
** [[#getLayerId|layerID]] : レイヤーのID
** cbf (optional) : レイヤー固有UIが生成されたとき、第一引数にレイヤー固有UIのwindowオブジェクトが返却される。

======layerSpecificUIhide======
* layerSpecificUIhide() : レイヤ固有UIを隠す

======setLayerListmessage======
* setLayerListmessage( head , foot ) : head 及び footで指定した文字列を　レイヤリストUIのトップのメッセージに設定する。[head]numberOfVisibleLayers[foot] : デフォルトはhead :"Layer List: ", foot :" layers visible"

=====svgMapPWA.で呼び出せるAPI=====
'''実験的機能段階''' :
; 以下のAPIは、SVGMapLv0.1_PWA_r*.jsを用いた場合に使える。
:- SVGMap.jsをPrpgressiveWebApps(PWA)として動作させ、オフラインでも利用できるウェブアプリを構築することができる。
:- Progressive Web Appsが機能するブラウザで有効。Chrome,Edge(PC,Android), Safari(Apple製品)
:- iOS SafariのPWAネイティブキャッシュの50MB制限を回避するIndexedDBによる実装がなされており、そのクォータが許す限りの(iOSでも数百MB以上の)オフライン地図コンテンツを利用できる
:- 同じく、iOS Safariが持たないsyncの一部を代替する機能(オンラインになったらポストする機能)が利用できる
:- zip圧縮されたオフラインコンテンツパッケージ読み込み機構を使う場合はzip.jsおよびそれが利用するArrayBufferReader.js,deflate.js,inflate.jsの読み込みが必要。
:- <code>serviceWorkerPath</code>グローバル変数で、専用のサービスワーカープログラムsvgMapServiceWorker_r*.jsのパスを指定する必要がある。
::- サービスワーカー～svgMapServiceWorker_r*.jsは、同jsと同じディレクトリにあるbaseResources.jsonを読み込み初期設定を行う
::- baseResources.json：　srcにサービスワーカーネイティブのキャッシュに読み込むべきリソースのリストを記載、mapCacheTargetに、SVGMapのコンテンツキャッシュを稼働させるターゲットとなるパスを記載
::-baseResources.jsonの例
<pre>
{
"src": [
"index.html",
"Container_mercator_org.svg",
"SVGMapLv0.1_PWA_r5.js",
"js/SVGMapLv0.1_r16.js",
"js/SVGMapLv0.1_LayerUI2_r3.js",
"js/SVGMapLv0.1_GIS_r2.js",
"js/SVGMapLv0.1_Authoring_r7.js",
"js/jsts.min.js",
"imgs/gps.png",
"imgs/gps_s.png",
"imgs/Xcursor.png",
"imgs/zoomdown.png",
"imgs/zoomdown_s.png",
"imgs/zoomup.png",
"imgs/zoomup_s.png",
"imgs/mappin.png"
],
"mapCacheTarget":"localMaps/"
}
</pre>

* autoPilotDownloader
*:エリアと縮尺を指定し、オートパイロットで地図画面をスクロールさせることで、オフラインキャッシュに地図を保存する動作を自動的に行う機能のオブジェクト。レイヤー固有UIでの利用などを想定しており、以下のメンバー関数を持つ
** halt()
**:オートパイロット動作を中断させる
** searchAll(initialViewBox, minScale, maxScale)
**:- initialViewBoxで指定したエリアを、minScale、maxScaleの間でオートパイロットをかけキャッシュに保存させる
**:- minScale, maxScaleは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の座標系におけるscale値(getRootScale()で取れるもの)
** setProgressCallBack(cbf)
**:オートパイロット動作中の進行状況をcbfの第一引数に返却する
* async clearOfflineContents()
*:SVGMapのオフラインコンテンツを全消去する。SVGMapのオフラインコンテンツはserviceWorkerのネイティブキャッシュ機構とは別の独自キャッシュ機構(indexedDBを使用した機構)として構築される
* clearCache()
*:（未実装）serviceWorkerのネイティブキャッシュを全消去する
* cacheDB
*:SVGMapのオフラインコンテンツデータベースのオブジェクト。IndexedDBをpromise化した簡略的APIをメンバ関数として持つ。
** clear()
**:データベースをクリア
** async connect()
**:データベースに接続
** async delete(path)
**:pathで指定したコンテンツを削除
** async get(path)
**:pathで指定したコンテンツ(blob)を取得
** async getAll()
**:全コンテンツを取得
** async getAllKeys()
**:全Key(コンテンツのpath)を取得
** async put({idCol:path,contentBlob:blobdata})
**:コンテンツ(blobdata)をpathをキーにして格納(上書き)
* deleteCachedLayerMeta()
* async disableCache()
*:serviceWorkerのネイティブのキャッシュ機構とSVGMapの独自キャッシュ機構を全て無効化する
* async enableCache()
*:serviceWorkerのネイティブのキャッシュ機構とSVGMapの独自キャッシュ機構を全て有効化する
* getCachedLayerMeta
* async getPostQueue()
*:postMessageWhenConnectedでポストをリクエストし、未完了のリクエストを取得する
* getRootScale()
*:svgMapの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]座標系における現在の表示のscaleを取得
* getScales()
*:読み込み済み文書全てのscaleを連想配列で返す(hashKeyはdocID)
* getVisibleLayers
* getStorageUsage
* async loadOfflineContents(contentUrlList, overwrite, progressCallBack)
*:-contentUrlListで指定したコンテンツをオフラインキャッシュに読み込む(自ドメイン内のコンテンツ限定)
*:-overwriteをtrueにすると上書きする。progressCallBackは指定した関数の第一引数に進捗状況を返却
* async loadZippedOfflineContents(zip_url,progressCallBack)
*:保存してあるディレクトリに対して、そのzipファイルの中のディレクトリ構造で、コンテンツがあるものと見做したURLもつキャッシュを形成する
* async postMessageWhenConnected(URL, postData, postCompleteCBF)
*:-postDataデータをURLにポストする　オンライン時は即座にポスト、オフライン時はいったんindexedDBにポストデータを格納後オンラインになったらポストする。
*:-postDataは、文字列(この場合form-data決め打ちのリクエスト)、もしくは .bodyメンバー変数を持ったオブジェクト
*:-この場合は .bodyはFormDataタイプのインスタンスもしくは任意のデータ、そしてfetchAPIに準じた.headers, .methodをメンバー変数に持たせることができる。(methodでGETを指定すればGETリクエストも可能)またserviceWorkerが管理する
* async setCachedLayerMeta
* setScaleTrim
* async updateCacheIndex()

=====svgMapCustomLayersManager.で呼び出せるAPI=====

'''実験的機能段階''' :

基本的なフレームワークで提供されているレジューム機能を更に強化し、レイヤーの表示非表示状態、初期表示エリア(viewPort)等をユースケースなどに応じて複数登録、切り替えを可能とする機能を提供します。更に[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]をさらに積極的に編集し、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルに無いレイヤーを追加したり、削除したりした、カスタマイズされた[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]を差分情報の形でlocalStorageに保存・利用する機能を提供します。

:- 以下のAPIは、SVGMapLv0.1_CustomLayersManager_r*.jsを用いた場合に使用できます。
:- SVGMapLv0.1_CustomLayersManager_r*.jsは、svgMapオブジェクトもつwindowで使用するとともに、svgMapオブジェクト用のカスタムレイヤーセットを構築するための別ページのwebAppsにおいても使用することができます。
:- 上記svgMapオブジェクト用のカスタムレイヤーセットを構築するためのwebApps用としてSVGMapCustomLayersManagerApp_r*.js、SVGMapCustomLayersManager.htmlが用意されています。

*registCustomLayer(customLayerObject, applyImmediately, customLayerMetadata)
*applyCustomLayers(customLayersObject, baseLayersPropertySet)
*getDetailedLayersPropertySet(rootContainerDoc, ignoreIid)
*getDetailedLayersPropertySetFromPath(rootContainerUrl, ignoreIid)
*getDif( edit, orig )
*originalLayersProperty
*deepCopy(obj)
*deleteAllCustomLayerSettings()
*deleteCustomLayerSetting( key )
*setCustomLayerSettingIndex(key)
*buildCustomLayersSetting(difObj, editedLayersProperty, originalLayersProperty)
*loadCustomLayerSettings()
*storeCustomLayerSettings( settings )
*getElementByAttr( XMLNode , searchId , atName )

*applyCustomLayersSettingsToCurrentMapView(lpEdit, svgMapWin)
*loadCustomGeoViewboxes()
*storeCustomGeoViewboxes(customViewBoxes)
*buildCustomGeoViewboxSettingObject(key, title, geoViewBoxX, geoViewBoxY, geoViewBoxWidth, geoViewBoxHeight)

====起動URLによるオプション指定====
svgMapフレームワークを導入したhtmlコンテンツは、URLの"#"以降であるフラグメント識別子によってフレームワークにいくつかの起動時オプションを提示することができます。
通常、これらのオプションは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]における記述で示されています。フラグメント識別子による指示はそれをオーバーライドします。
一般的な"&"による区切りで複数の複数のパラメータを指定できます。
=====表示範囲の指定=====
global座標系によって表示範囲を指示することができます。　標準のフラグメント記述に対してそれぞれ"global"文字列の追加が必要です。
なおglobal座標系におけるxは一般的に経度、yは一般的に緯度に対応することに留意してください。
*メディアフラグメントによる指定 : xywh=global:<xmin>,<ymin>,<width>,<height>
*svgViewフラグメントによる指定 : svgView(viewbox(global,<xmin>,<ymin>,<width>,<height>))

=====表示・非表示レイヤーの指定=====
* 表示すべきレイヤー: visibleLayer=<layer title>,<layer title>...
* 非表示すべきレイヤー: hiddenLayer=<layer title>,<layer title>...
* 個々のレイヤーに対するフラグメントの提示 : それぞれのレイヤーに対しては、さらにフラグメントを追加することができます。ただし"="は"%3D",&は"%26"でURLエンコードしてください。<layer title>#fragment1=val1&fragment2=val2　⇒<layer title>#fragment1%3Dval1%26fragment2%3Dval2　

===レイヤー固有のUI===
"[https://satakagi.github.io/mapsForWebWS2020-docs/De-centralizedWebMapping.html#:~:text=To%20achieve%20this,everything%20in%20detail. Layers as WebApps]"(ウェブアプリケーションとしてのレイヤー: webApp Layer)を実現する機構　（LaWA、レイヤーwebApp、webAppレイヤー、アプリレイヤー、レイヤーアプリなどと呼ぶこともある）（[[#レイヤー固有ユーザインターフェース|こちらも参照]]）

====概要====
[[#レイヤー|レイヤーsvgコンテンツ]](フレームワークが最初に読み込むコンテナsvgコンテンツの中で埋め込まれるsvgコンテンツ)に対して、[[#動的な地図レイヤー|動的な地図レイヤー]]の一種として、そのレイヤーに固有の処理ロジックや、可視化・描画ロジック　そしてユーザインターフェースも含むことができる　htmlによるウェブアプリを定義できる機能です。

javascriptを使った独自のロジックによる動的な可視化データの生成が実装可能です。

また、この機能はそのレイヤーの設定やインタラクティブ操作のための表示やユーザインターフェースを地図表現とは別に表示したい場合にも用いることができます。従来のアーキテクチャでは、もしもこのようなレイヤーに固有のUIが必要だった場合でも、地図アプリケーション全体の処理や表示を司るグローバルな空間(ルートhtmlコンテンツのwindowオブジェクト直下)に、サイドエフェクトを考慮しながらコードを組み込む必要があり、結果としてコードのスパゲッティ化が懸念されました。SVGMapのレイヤー固有UIは、レイヤーごとにUIとそのロジックをカプセル化可能にし、これを排除することが可能です。(カプセル化はiframeによって行われます。)さらに、レイヤー固有UIによるウェブアプリは自律分散的な配置にも対応し、UIを備えた地図レイヤーにまでハイパーレイヤリングアーキテクチャを拡張します。

なお、[[#動的な地図レイヤー]]は、htmlによるユーザーインターフェースを持つことができませんが、同種のウェブアプリケーションのカプセル化の効果があります。

このＵＩには主に二つの用途が考えられます。
;凡例
: 各レイヤーはその地図表現の意味を示すための固有の凡例を持つことがあります。その凡例を表示するために利用できます。
;ウェブアプリケーションによる動的な地図レイヤー
: 先述のように、ウェブアプリケーションによる動的な地図レイヤーは独自のロジックによってそのレイヤーの地図表現を動的に変化させる機能を備えることができます。この場合、例えばエンドユーザがFORMで入力したフィルター条件ををもとに表現を変更するようなケースも考えられます。
これらケースでは、そのフォームや凡例は、[[#フレームワークの呼び出し|ルートhtml文書]]に設置することは可能ですが、もしも多くのレイヤーを表示するアプリケーションであり、それらのレイヤーがそれぞれ固有のフィルタ条件を持つような場合、[[#フレームワークの呼び出し|ルートhtml文書]]は、それぞれのレイヤーをフィルタリングするためのFORMとそのフィルタリングロジックをすべて埋め込む必要があり、画面のデザイン、およびロジックのコーディングの双方がスパゲッティ化する可能性があります。さらに、もしもこのアプリケーションに後日さらにレイヤーが追加される場合、スパゲッティ化の問題はより深刻になるかもしれません。凡例の表示についても同様の問題が考えられます。本レイヤー固有ＵＩはこのような問題に対するソリューションを提供しています。

この機能は、ベースのフレームワークrev12以上　且つLayerUI2フレームワークを読み込み、[[#レイヤー固有のUI(後述)を設置するdiv要素|id="layerSpecificUI"のdiv要素]]が[[#フレームワークの呼び出し|ルートhtml文書]]に設置されているときに使用できます。

;サンプル
:[[チュートリアル#WebApp_Layer.E7.B7.A8|開発者向けチュートリアル]]でいくつかのサンプルを見ることができます。

====[[#レイヤー|レイヤーsvgコンテンツ]]での指定====
レイヤー固有UIの設置には、[[#レイヤー|レイヤーsvgコンテンツ]](のルート要素(svg要素))に、data-controller属性を与え、そこにそのレイヤー固有のUIのためのhtml文書のリンク(ただしsame origin)を設置します。またサブセットとして、data-controller属性にビットイメージ(.pngもしくは.jpg, .jpeg, .gif拡張子を持つビットイメージ)へのリンクを与えることでレイヤーの凡例情報の提示をすることもできます。

[[#レイヤー固有のUI(後述)を設置するdiv要素|レイヤー固有ＵＩの表示部位]]には、このように指定されたリソース(ビットイメージもしくはhtml)がレイヤーの選択の状況に応じて、切り替わり表示されます。レイヤーがONになっている間、それに紐付けられたレイヤー固有UI(htmkのwindowオブジェクト)が存在し続け、そのレイヤーのsvgDOMの操作やUIの提供が可能です。

なお、標準のフレームワークでは、表示中のレイヤーの中の選択された一つのUIのみが地図のメインのwindowに配置されたiframeで表示されます。表示中ではあっても選択されていないレイヤーのUI(iframe)は非表示状態で動作しています。

'''サンプル'''
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="9000.0 -9000.0 9000.0 9000.0" go:dataArea="9000.0 -9000.0 9000.0 9000.0"
'''data-controller="../Self-GS-POI_controller.html"'''>
.....

====レイヤー固有のUIのためのhtml文書(webApp)の構造・作法====
レイヤー固有のUIとなるhtml文書は、下記の通り、その初期化等を行うライブラリ <code>svgMapLayerLib.js</code> を読み込む必要があります。（現在のところ通常のjavascriptライブラリのみ提供されます）
CDNからライブラリを読む場合は、<code>https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/svgMapLayerLib.js</code>です。

'''サンプル'''
<!doctype html>
<html>
...
<script src="https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/svgMapLayerLib.js"></script>
...
</html>

====LaWAとS-LaWA（サンドボックス化LaWA）のアーキテクチャ====
SVGMapにおけるレイヤー固有UI（LaWA: Layers as Web Apps）には、セキュリティと用途に応じた2つの動作モードが存在します。2026年のアップデートにより、Web標準のセキュリティモデル（クロスオリジン制約）に準拠した'''S-LaWA（サンドボックス化LaWA）'''が導入されました。 (2026/4/16現在 dev2リリース段階)

'''T-LaWA (Tight-coupled LaWA / 従来の密結合モード)'''
* 親のSVGMapフレームワークと同じオリジン（ドメイン）で動作する、従来型のレイヤーWebAppです。
* iframeのJavaScriptコンテキストに、親フレームワークから直接APIオブジェクトが注入されます。
* 全ての[[#拡張API]]にアクセスでき、複雑なDOM操作や関数渡しが可能ですが、サードパーティ製のレイヤーを読み込む際にはセキュリティ上のリスク（XSS等）を伴います。

'''S-LaWA (Strict/Sandbox LaWA / 分離モード)'''
* 親のSVGMapフレームワークとは異なるオリジンで動作することを前提とした、セキュアなレイヤーWebAppです。
* iframeは完全に隔離（サンドボックス化）され、親フレームワークとの通信は全て非同期メッセージング（postMessage）を介して行われます。
* 悪意のあるスクリプトから親フレームワークを保護できるため、外部のサードパーティ製レイヤーを安全に統合できます。
* セキュリティの代償として、直接的なオブジェクト参照や関数の受け渡しが禁止されるため、[[#拡張API]]の利用に強い制限がかかります（前節の「S-LaWAでの制限」を参照）。

===== 動作モードの指定 (data-lawa-mode) =====
レイヤーがどちらのモードで起動するかは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]内でそのレイヤーを参照している '''<code>animation</code> 要素の <code>xlink:href</code> の値（URLのオリジン）'''、もしくは同要素に付与する '''<code>data-lawa-mode</code>''' 属性で制御できます。

<code>data-lawa-mode="auto"</code> (未指定時のデフォルト): レイヤー（コントローラ）のURLが親フレームワークと同一オリジンであれば '''T-LaWA''' として、クロスオリジンであれば自動的に '''S-LaWA''' として起動します。

<code>data-lawa-mode="isolated"</code>: 同一オリジンであっても、強制的に '''S-LaWA''' として完全に隔離して起動します（開発時のテスト等に有用です）。

<code>data-lawa-mode="tight"</code>: 強制的に '''T-LaWA''' として起動を試みます。（※クロスオリジン環境でこれを指定した場合は、適切なCORS設定やプロキシサーバーの利用が必須となります）

====詳細====

レイヤー固有UIは、SVGMapのグローバルなwindowに設置されたiframeの中で動作します。このiframeの性質と利用できるAPIは、前述の動作モード（T-LaWAかS-LaWAか）によって大きく異なります。

どのような環境・モードで起動された場合でも、レイヤー固有UI内でSVGMapの各種リソースへ安全にアクセスするためには、レイヤーのHTML内で提供される初期化ライブラリ（<code>svgMapLayerLib.js</code> 等）を読み込む必要があります。

'''【重要】''' 各種APIへのアクセスが可能になるのは、iframe自体の "load" イベントではなく、SVGMapフレームワークとの接続が完了した後に発行される '''<code>layerWebAppReady</code>''' イベント以降です。
* 初期化処理は以下のように記述することを強く推奨します。
* <code>window.addEventListener("layerWebAppReady", function(){ /* 初期化処理 */ });</code>

[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が設置されたSVGMapのグローバルなwindowと異なるドメインにレイヤーを設置し、そのレイヤーがレイヤー固有UIを持つこともできます。デフォルト（<code>data-lawa-mode="auto"</code>）では、これは自動的にセキュアなS-LaWAとして起動するため、特別なCORS設定は不要です。ただし前述の通りAPIには制限がかかります。

[[#レイヤー|レイヤーsvgコンテンツ]]のドキュメントルート要素へdata-controller属性を設定する代わりに、コンテナsvgコンテンツにおける[[#レイヤー|レイヤーsvgコンテンツ]]への参照要素にdata-controller属性を設定することもできます。

data-controller属性の代わりに、data-controller-src属性の値に、適切にエスケープすることで直接htmlを記述することもできます。（※この機能は主にT-LaWAでの利用を想定しています）

data-controller属性によって参照されるhtmlコンテンツでは、次節[[#拡張API]]で説明する値や関数が使用できます（※モードによる制限あり）。

data-controller属性のURLには以下のオプションをフラグメント識別子として指定することができます。
* #exec=appearOnLayerLoad||hiddenOnLayerLoad||onClick レイヤー固有UIの起動オプション
** appearOnLayerLoad : レイヤーを表示状態にすると即座にレイヤ固有UIが出現
** hiddenOnLayerLoad : レイヤーを表示状態にすると即座にレイヤ固有UIがhidden状態で起動(そのレイヤ固有UIに含まれるscriptが起動)
** onClick : レイヤー固有UI起動ボタン">"を押したときにレイヤ固有UIが出現(デフォルト)
* #requiredHeight=hhh&requiredWidth=www
** id="layerSpecificUI"のdiv要素のcss値に関わらず、requiredHeight、requiredWidthでiframeの表示を指示

====拡張API====
レイヤー固有UI(iframeのwindowオブジェクトのjavascriptコード)では以下のAPIが拡張されています。
'''【注意】S-LaWA（サンドボックス化LaWA）環境においては、セキュリティ上の理由から親フレームワークのオブジェクトに直接アクセスできません。代わりに <code>svgMapSandboxLayerLib.js</code> が提供する「モック（代替）オブジェクト」を介して非同期に操作が行われます。各項目の「S-LaWAでの仕様」を参照してください。'''

=====イベント=====
*layerWebAppReady : 初期化が完了しLaWAの実行が可能になった (LaWAでは、loadイベントではなくlayerWebAppReadyを使用することを強く推奨します)
*openFrame : そのiframeが、新たに生成された
*closeFrame : 同、消滅した
*hideFrame : 同、隠された
*appearFrame : 同、隠されていたのが再度現れた
*zoomPanMap : [[#.E6.8B.A1.E5.BC.B5.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88|SVGMapフレームワークと同じ]]
*zoomPanMapCompleted : 同上
*screenRefreshed : 同上

'''【S-LaWAでの仕様】''' すべてのイベントがサポートされています。親フレームワークで発生したイベントは、メッセージングを通じてS-LaWA内のwindowオブジェクトに中継・ディスパッチされます。

=====svgImageProps=====
このレイヤー固有UIに紐づいたレイヤーSVGの各種プロパティを参照できる（基本的に全て読み出しのみ） (参考:[[#svgImagesProps.5B.5D]])
*[[解説書#svgImagesProps.5B.5D|プロパティのリストはこちらを参照]]
*svgImageProps.scriptで、動的地図レイヤーのscript要素によって生成されたオブジェクトにもアクセスできます。
*svgMap.getSvgImagesProps(layerID) で得た値と同等。
*.hashは書き込みが有効(参考 [[#サブレイヤーパーマリンク]])

'''【S-LaWAでの仕様】''' 親フレームワークから非同期で同期された静的なコピーデータとして提供されます。<code>.hash</code> プロパティへの書き込みはS-LaWAでもサポートされており、裏側で自動的に親へ同期されます。ただし、<code>.script</code> による親の実行コンテキストへのアクセスはできません。

=====svgImage=====
このレイヤー固有UIに紐づいたレイヤーSVG文書(DOM Documentオブジェクト) (参考：[[#svgImages.5B.5D]])
*このドキュメントを操作することで、そのレイヤーの表示を動的に変化させることが可能です。
*特に、[[解説書#.E5.8B.95.E4.BD.9C.E3.81.AE.E5.88.B6.E9.99.90.E3.83.BB.E5.B7.AE.E7.95.B0|動作の制限に注意して実装してください]]
*svgMap.getSvgImages(layerID) で得た値と同等。

'''【S-LaWAでの仕様】''' S-LaWA環境内に展開された「ローカルXML DOM」が提供されます。このドキュメント（要素の追加・削除・属性変更・テキスト変更など）を操作して <code>svgMap.refreshScreen()</code> を呼び出すと、フレームワークの共通地図キャンバスに送信され更新します。

=====svgMap=====
svgMapフレームワークインスタンス

'''【S-LaWAでの仕様】''' 親のインスタンスの代わりに、S-LaWA用のモッククラス（<code>SandboxSvgMap</code>）が提供されます。以下のメソッドのみが利用可能です。
* <code>refreshScreen()</code>, <code>transform()</code>, <code>getGeoViewBox()</code>, <code>getSvgImageProps()</code>, <code>setShowPoiProperty()</code>, <code>showModal()</code>, <code>getCORSURL()</code>, <code>setCORSproxy()</code>, <code>parseEscapedCsvLine()</code>

=====layerID=====

svgMapフレームワークが管理しているSVG文書ハッシュリスト(svgMap.getSvgImages())における、このレイヤー固有UIに紐づいたレイヤーSVG文書のハッシュキー

[[#getLayerId]]参照

'''【S-LaWAでの仕様】''' 制限なく利用可能です。

=====svgMapGIStool=====
GIStoolsフレームワークを拡張した時、同インスタンス
*[[解説書#svgMapGIStool..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI|svgMapGIStoolが持つAPI]]

'''【S-LaWAでの仕様】''' '''現在のところ利用不可です。'''

=====svgMapAuthoringTool=====
svgMapAuthoringToolフレームワークを拡張した時、同インスタンス
*[[解説書#svgMapAuthoringTool..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI|svgMapAuthoringToolが持つAPI]]

'''【S-LaWAでの仕様】''' '''現在のところ利用不可です。'''

=====controllerSrc=====
レイヤー固有UIのiframeの起動に使われたsrc属性(レイヤー固有UIのパス・URL)が読み出せます。特にレイヤーが異なるドメインから配信されたものの場合、レイヤー固有UIのwindowのlocation属性(及びそれによるURL解決を行うAPI)からは適切な情報が得られません。これ代えてこの値が使用できるケースがあるでしょう。

'''【S-LaWAでの仕様】''' 参照できません。S-LaWAは自身のURLコンテキストで動作するため、自身の <code>location.href</code> などを参照してください。

=====putGlobalMessage(messageText)=====
messageTextを[[#グローバルメッセージ]]エリアに表示する　レイヤーが消滅したら自動でメッセージも消滅します。

'''【S-LaWAでの仕様】''' 現在のところ利用不可です。

=====preRenderFunction=====
この名前の関数を(レイヤー固有UIのwindowに)定義すると、そのレイヤーのSVG文書の再描画(画面更新)シーケンスの直前にこの関数の内容が実行される。詳細は[[解説書#setPreRenderController|setPreRenderControllerを参照]]

'''【S-LaWAでの仕様】''' '''利用可能です。''' S-LaWA内で <code>window.preRenderFunction</code> を定義しておくと、<code>svgMap.refreshScreen()</code> が呼ばれた際や、親からズーム・パンなどのイベントを受信した際に、S-LaWA内でローカルに実行されます。この関数内でローカルDOMを変更することで、描画前の状態更新をエミュレートできます。

=====customHitTester=====
この名前の関数を定義すると、そのレイヤーに固有のヒットテスト（マウスやタッチによって地図上をヒットしたときの振る舞い）機能を追加することができます。ヒットテストは通常のクリッカブルオブジェクト（ポイントやライン・ポリゴンなど）のそれと同等に扱われます。
* customHitTester( position )
** 第一引数に、ヒットされた座標(.screenX,Y:window上の座標、.lat,lng:地理座標、.isMapCenterHitTest:後述)が与えられます。（この値をもとに実際のヒットテスト処理を書く）　この関数の帰り値が'''null'''や'''undefined'''の場合はヒットしなかったこと、'''true'''もしくは文字列もしくはそのレイヤーの任意の図形要素、もしくはそれらの配列の場合はヒットしたことを示します。
*** isMapCenterHitTestが'''true'''の場合、そのヒットテストは伸縮スクロール時自動発生するケースで発生したものです。（もしこのケースでのテストを除外したいなど特別な処理をしたい場合に利用できます）
** ヒットテスト後の振る舞いも通常のクリッカブルオブジェクトと同等で、通常はデフォルトで備えるヒットされたグラフィックスオブジェクトの[[#metadata.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF|メタデータ]]表示パネルが呼び出されます。(帰り値が図形要素の場合）　もしこの振る舞いを変更したい場合は、[[#setShowPoiProperty|setShowPoiProperty]]を用いることが可能です。
** 帰り値がtrue、文字列、およびそれらの配列を返す場合は、[[#setShowPoiProperty|setShowPoiProperty]]を使用してカスタマイズされた処理を行う必要があります。この場合[[#setShowPoiProperty|setShowPoiProperty]]で設定された関数が受け取る引数は、そのSVG文書のドキュメントルート要素であり、その'''"data-hitTestIndex"'''属性に選択されたオブジェクトのインデックス(配列の場合。配列でない場合は常に0)が設定されます。

'''【S-LaWAでの仕様】''' <code>customHitTester</code> 自体は利用できません。（なお<code>svgMap.setShowPoiProperty(func)</code>は利用可能です。）

====サブレイヤーパーマリンク====
(2024/10のdev1ブランチから有効)
*[[#レイヤーsvgコンテンツ]]のURLが任意のフラグメント識別子を持つことができる。
*ただしフラグメント識別子はカンマ","、アンパサンド"&"を含めることはできない。
*[[#レイヤー固有のUI]]が以下を実装する場合、任意のレイヤーの設定をパーマリンク([[#getBasicPermanentLink]])に反映できる。
**[[#レイヤー固有のUI]]は起動時(onload)同フラグメント識別子の情報を解釈し適切な状態に変化させる機能
**[[#レイヤー固有のUI]]は、パーマリンクによる指定に対応した標示状態に表示が切り替わるタイミングで[[#レイヤーsvgコンテンツ]]のURLのフラグメント識別子の内容をそれに対応した値に変更する機能
*[[#レイヤーsvgコンテンツ]]のURLのフラグメント識別子は、[[#svgImageProps]].hashを設定することで変更できる ([[#svgImageProps|⇒仕様参照]])

===動的な地図レイヤー===
svgドキュメントにjavascriptを記述することでも、動的なデータ生成を実装可能としています。
本フレームワークでは、svgドキュメント中に<script>要素を一つだけ記述することができ、その要素の中にjavascriptコードを入れることができます。

DOMを操作し、動的に描画を変化させることが可能です。ただし、[[解説書#.E5.8B.95.E4.BD.9C.E3.81.AE.E5.88.B6.E9.99.90.E3.83.BB.E5.B7.AE.E7.95.B0|動作の制限に注意してください]]

====動的SVGMapコンテンツで利用可能な拡張API====
一般のjavascriptAPIに加えて、動的な地図レイヤーを実装するために以下のAPIが提供されます。（既存のものでも注記があるものも列挙）
*document: このsvgMapドキュメント自身
*READ ONLY変数
**CRS:このドキュメントのCRS : CRS.a....fに、地理座標からこのドキュメントのSVGユーザ座標への変換係数が提供される
**docId:このSVGドキュメントのdocId
**scale：倍率：このドキュメントの座標系と、画面の(px座標系)との間の倍率(この値は等倍が1.0だが、svgMapコンテンツのvisibleMin/MaxZoom値は%(等倍は100)なので注意)
**actualViewBox：このドキュメントの座標系でのviewBox
**geoViewBox：地理座標におけるviewBox
**geoViewport
**viewport
**this.location:相対パス
**(this.verIE)
*refreshScreen(): 描画の更新を明示: refreshScreenを用いていない場合、そのレイヤーのDOMを編集してもそれが即座に表示に反映(更新)するとは限りません。文書のロード、ズーム、スクロールのときが表示のDOMの内容を反映した画面の自動更新のタイミングです。それ以外、多くの場合反映されません（性能確保のための本フレームワークの現在の制限）。DOMO編集をそれ以外のタイミングで表示に反映したい場合、この関数の呼び出しを行うひつようがあります。一方不必要にこの関数を呼び出すとシステム全体の性能が低下するかもしれません。
*transform()
*getCanvasSize()
*linkedDocOp()
*isIntersect()
*drawGeoJson()
*childDocOp()
*onload:この関数を設定すると、ロードされると呼ばれる(ドキュメントロード後、描画前のタイミング。)
** この関数は、DOMトラバース前に同期処理される。
**したがってonloadで実行される処理はその中が非同期でない限り、refreshScreen()しなくてもonload時のDOM編集は直後の描画に反映される。
*onscroll:この関数を設定すると、スクロールされるとき呼ばれる（ほかにズーム以外で画面更新時も）(スクロール後の描画前のタイミング。)
**同上
*onzoom:この関数を設定すると、ズーミングが発生するとき呼ばれる(同上)

====拡張イベント====
*document -> zoomPanMap イベント addEventHandlerすると、ズームパンが起き(viewPortが変化したとき)地図システム全体の描画が完了(含タイムアウト)後に発行される。SVGMap*.jsが地図をウェブアプリ起動後、最初に描画完了した時にもこのイベントが発生する。（レイヤー追加時には発生しない）
**これをイベントリスナに設定した関数は、非同期に実行される。onscroll()と異なり、もしその関数でDOM編集を行った場合は、直後の描画にそれが反映される保証がない。refreshScren()による再描画が必要。
*document -> screenRefreshed イベント addEventHandlerすると、ズームパン以外で地図システム全体の描画が完了(含タイムアウト)後に発行される。主にrefreshScreen()など。このイベントをフックにして、SVGMapコンテンツのDOM操作・再描画（refreshScreen()）を行うと無限ループに陥るので使用方法に注意が必要。
*document -> zoomPanMapCompleted イベント SVGMaplayerUIが有効な時に発行される。　zoomPanMapイベントは伸縮スクロール完了時に発行されるが、その直後にレイヤー固有UIにおいて(XHRやfetchを用いた)非同期なデータ取得とレイヤー書き換えが生じるケースでは、その完了を検知しない。zoomPanMapCompleted イベントはこのような非同期通信の完了後に発行される。

===SVGMapの埋め込み(SVGMapFrame)===
'''実験的機能段階''' :

SVGMapフレームワークはwindow全体に地図コンテンツが占有される形で表示する設計です。ウェブページはwebAppsとしてカプセル化されたレイヤーをsvgMapオブジェクトに差し込む形でアプリケーションが構築されます。すなわち、基本的に[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]windowにはsvgMapオブジェクトだけが単独で存在し、その他のアプリケーションをwindow上に実装する場合は、その開発者がsvgMapオブジェクトとのグローバル空間でのスパゲッティ化に注意を払いながら開発していく必要があります。

それに対して、''SVGMapLv0.1_Frame*.js''が提供する機能は、window内の指定した領域にsvgMapによる地図を埋め込むことを可能にします。さらにこの埋め込まれたsvgMapオブジェクトを　外部からより簡単に操作できるようカプセル化されたインターフェースを提供します。

====ライブラリ====
SVGMapを埋め込むウェブページでは''SVGMapLv0.1_Frame*.js''を導入します。
<!doctype html>
<html>
<script type="text/javascript" src="SVGMapLv0.1_Frame_r4.js"></script>
</html>

====svg-map要素====

svg-mapカスタム要素を使用してsvgMapオブジェクトを任意の場所に埋め込むことができます。
<nowiki>
<!doctype html>
<html>
<script type="text/javascript" src="SVGMapLv0.1_Frame_r4.js"></script>
<body>
<table>
<tr>
<td>
説明用地図
</td>
<td>
<svg-map svgMapAppPage="SVGMapper_r16_layerUICustom.html" id="svgMapTag" latitude="37" longitude="135" zoom="4" layerui="#layerUIarea">
</svg-map>
</td>
</tr>
</table>
</body>
</html></nowiki>

=====属性=====
======svgMapAppPage======
必須属性: 起動するSVGMapLv0.1*.jsが組み込まれたhtmlを指定。
svg-map要素はshadow domとなっており、内部はひとつのiframeとして構成されます。このiframe内のwindowで通常のsvgMapオブジェクトが稼働する形となります。svgMapAppPage属性はこのiframe内で起動するsvgMapオブジェクトを持ったhtmlを指定するものです。

======latitude, longitude======
オプション: 表示領域を下記の属性と組み合わせて指定します。DOMを操作することによって動的に表示領域を変更することが可能です。
======zoom======
オプション: 表示位置の中心点を上の2属性で、ズームレベルをこの属性で指定します。ズームレベルの定義は[https://docs.microsoft.com/ja-jp/azure/azure-maps/zoom-levels-and-tile-grid webMercatorタイルピラミッドのレベル番号]（ただし小数点指定も可能）
======latitude2, longitude2======
オプション: latitude, longitudeと組み合わせて対角線を指定し表示領域を設定します。
======customjson======
オプション: 任意のJSON文字列を(エスケープしたうえで)与えることができます。 SVGMap.jsのあるiframeのwindow.rootMessage.customJsonに、JSON.parseされたうえでその値が反映されます。この値もDOM操作により動的に反映されます。window.rootMessage.customJsonの変化を監視できるようsetterを設けることで動的な変化に対応する実装が可能です。

var rootMessage={
set customJson(json){
...
}
}

======layerui======
オプション: レイヤーUIの出力要素をxlinkで指定します。　この値はmutationをobserveしていません（svg-mapオブジェクトが生成された、最初の一回のみ有効です）

<svg-map svgMapAppPage="SVGMapper_r16_layerUICustom.html" id="svgMapTag" latitude="37" longitude="135" zoom="4" layerui="#layerUIarea">

=====DOM API=====
======setCenter======
setCenter( longitude, latitude, zoom ) : 緯度経度ズームレベルで地図を表示させる
======addLayer======
addLayer(url,title,visibility) : URLで指定したリソースのレイヤーをtitleを付けて追加する

======svgMapObject======
getter svgMapObject : この要素に紐付いたsvgMapオブジェクトを得る

====layer要素====
svg-map要素の子要素として、任意の個数のlayer要素を設置できます。
=====属性=====
======title======
iframeで起動されるsvgMapオブジェクトの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルにある、レイヤー名(title)を指定し、そのレイヤーとlayer要素を紐付ける。該当するレイヤーが無く、且つ下記のsrcが指定されている場合は新しいレイヤーを追加する。なお、任意の属性や子ノードが与えられている場合は、下記の通りレイヤーの読み込み後にそれらの値が該当するレイヤーの[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|data-controller]]の window.rootMessageに設定される。

======src======
iframeで起動されるsvgMapオブジェクトの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルにある、レイヤーをURLを使って指定する
======visibility [TBD] ======
visible もしくは hiddenを設定すると、そのレイヤーの表示状態を制御できる。

======任意の属性======
任意の属性を設定できる。設定した属性名と属性値は、対応するレイヤーの[[#レイヤー固有ユーザインターフェース|data-controller]]で指定されたレイヤーのコントローラのwindowにおけるwindow.rootMessageの対応するメンバ変数に反映される。[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/set setter]を設定することで変化に応じて動作させることが可能になる。

======rootMessage.update()関数======
レイヤーのコントローラのwindow.rootMessage.update()関数(引数なし)が定義されている場合、上記の属性変更(最初の設定も含む)が検知される度にこの関数が呼び出される。

=====子ノード(TEXT CONTENTやXML要素)=====
任意のテキスト(textContent)や、XML要素(xmlContent)を子ノードに入れることができる。
入れられた情報は、同様に対応するレイヤーのdata-controllerの
window.rootMessage.textContent、もしくはwindow.rootMessage.xmlContentメンバ変数に反映される。
XMLに関しては任意の階層化がされていても良い。DOM操作による変化があれば更新されるので、同様にsetterを用いて変化を反映させることが可能。

=====DOMAPI=====
======layerId======
layerId : このレイヤーのレイヤーIDを得る
======svgImage======
svgImage : このレイヤーに紐付いたsvgMapコンテンツ(document)を得る
======svgImageProps======
svgImageProps : このレイヤーに紐づいたsvgMapコンテンツのsvgImagePropsオブジェクト(各種プロパティを格納したオブジェクト)を得る
======controllerWindow======
controllerWindow : (もしあれば)このレイヤーに紐づいたsvgMapコンテンツのレイヤー固有UIを得る

==第四章：内部機構解説==
[[内部機構解説|別ページを参照してください。]]

==第五章：付加機能==
===3D可視化機能===
:- SVGMap.jsはCesium.jsを利用してSVGMapで表示しているレイヤーを3D可視化することができます。
:- 3D可視化はSVGMap.jsの地図ウィンドと独立した別ウィンドで行われます。
:- すなわち、ここから呼び出されるCesiumベースの3D可視化ウェブアプリは、それ専用のwebApps([https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4_module.js cesiumWindow*.js]を読み込んだアプリ。：基本的な3D可視化ウェブアプリとして、[https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4.html cesiumWindow4.html]を用意)を持つ別のブラウジングコンテキストで起動されます。
:- この3D可視化ウェブアプリは、svgmapjsとメッセージングを行いsvgmapjsで表示されているレイヤーを3D可視化します。

====3Dビジュアライザ起動用ボタンの設置====
3D可視化機能を起動するためのUI(ボタン)は、[[#フレームワークの呼び出し|ルートhtml文書]]に設置した以下の要素によって構築されます。
<code><pre><img id="3DviewButton" data-app="cesiumWindow4.html" .../></pre></code>

* <code>id</code>が<code>3DviewButton</code>である必要があります。
* <code>data-app</code>属性で、3D可視化ウェブアプリのパスを指定することが可能です。
** もし指定されていない場合は、ルートhtml文書と同一ディレクトリの<code>cesiumWindow2.html</code>というファイルがデフォルトで指定されます。
** パスは同一オリジンである必要があります。
** 基本的な3D可視化ウェブアプリとして、[https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4.html cesiumWindow4.html]が[https://github.com/svgmap/svgmapjs/ svgmapjsリポジトリ]に用意されています。

解説書

2026-04-16T08:32:33Z

Admin: /* LaWAとS-LaWA（サンドボックス化LaWA）のアーキテクチャ */

=SVGMap.js (Level0.1フレームワーク)解説書=

2018年現在のSVGMapのデータ形式、およびそれを実装した初歩的なフレームワーク(SVGMap Level0.1 Revision*)の解説を行います。

==第一章：SVGMapの基本機構と、更新部分==

この章は、JIS化されたSVGMap ([http://kikakurui.com/x7/X7197-2012-01.html JIS X.7197])や、[https://www.w3.org/Submission/2011/04/ W3C Member Submission]に対する、近年の開発成果に基づいたSVGMapのアップデートを解説しています。

[http://kikakurui.com/x7/X7197-2012-01.html JIS X.7197]もしくは、[https://www.w3.org/Submission/2011/04/ W3C Member Submission]に記載されているように、SVGMapの基本機構は主に以下の機能を　[https://ja.wikipedia.org/wiki/Scalable_Vector_Graphics 汎用的なグラフィイクスデータ記述形式SVG]に拡張することです。
* [[#地理座標系の処理|地理座標処理]]
** SVGの座標系と地理座標系との間の関係を記述する globalCoordinateSystems要素
* タイルピラミッド（タイリングとLevel of Detail）
** コンテンツを埋め込む[[#要素|image要素、animation要素]]のx,y,width,height属性への追加の振る舞いと、visible-min-zoom, visible-max-zoom属性の追加
** 詳細は [https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html こちらの論文]を参照
* 拡張された[[#レイヤー|レイヤー]]
** [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]におけるimage, animation要素の扱い
** [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が埋め込むsvgコンテンツ([[#レイヤー|レイヤーsvgコンテンツ]])の処理

===地理座標系の処理===
SVG2では地理空間座標を記述するスペック(metadata geospatial coordinate systems)が削除されました。これは、W3C SVG仕様の範囲では単なるメタデータであり、ユーザエージェントの振る舞いに何ら影響を及ぼさないことが理由です。　また、JIS SVGMapにおいては、coordinateReferenceSystem 要素が定義され、それに基づくユーザエージェントの振る舞いが規定されていますが、これは一方でW3Cのスペックではないという課題を持ちます。

これを受けて、現在提案されているSVGMapのデータ仕様では、SVG1.1の段階ですでに標準化と実装が行われたスペックを注意深く活用することにより、JIS SVGMapで規定された地理座標系に関する機能のいくつか（すべてではない）を実現する方法を用いることとしています。（[https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/globalView globalView spec]）

なお、JIS SVGMapのcoordinateReferenceSystem要素もサポートしています。

====メルカトル図法を含む任意の図法の定義とその合成機能(＞rev16)====
従来のSVGMapでは、グローバル座標系に緯度経度座標を用いた場合、使用できる図法は[https://ja.wikipedia.org/wiki/%E6%AD%A3%E8%B7%9D%E5%86%86%E7%AD%92%E5%9B%B3%E6%B3%95 PlateCarreeや正距円筒図法]でした。

一方、rev16では[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]を含む任意のSVGMapコンテンツ([[#レイヤー|レイヤーsvgコンテンツ]]やサブレイヤー、タイルなど)のglobalCoordinateSystem 要素のtransform属性に、下記のように"mercator"を指定することで、そのコンテンツの座標系がメルカトル図法([https://en.wikipedia.org/wiki/Web_Mercator_projection web mercator])であることを宣言できます。

<pre><globalCoordinateSystem srsName="http://purl.org/crs/84" transform="mercator" /></pre>

この記述がされたコンテンツのSVGの座標空間はメルカトル図法上のものとなり、この座標系上でのx,y=0,0(左上)は西経180.0度,北緯85.051129度、x,y=1,1(右下)は東経180.0度,南緯85.051129度に対応します。

=====メルカトル図法での地図表示=====
[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]で先述の宣言を行うことで、SVGMap0.1.jsはメルカトル図法で画面上に地図を表示します。このとき、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が参照する各レイヤーはメルカトル図法であっても、それ以外であっても構いません。フレームワーク内でオンザフライの図法変換が実行されます。（逆に[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]がPlateCarreeでレイヤーがメルカトルでも同様）

=====メルカトル図法のドキュメントルート要素のviewBox属性=====
* [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]において、地図の初期表示状態を記述するドキュメントルート要素(<svg>要素)のviewBoxに記述する座標も先述のメルカトル座標系で記述する必要があります。
* 一方、緯度経度で初期表示領域を記述したい場合に対応する仕様が拡張されており、その記述例は下記のとおり、'''global'''を追加します。
<pre><svg viewBox="global,138,35,2,2"></pre>

=====プロキシの設定=====
オンザフライでの図法変換では、多くのケースで非線形の座標変換が必要となります。ビットイメージ（タイルを含む）に対して子の座標変換を実行するためにSVGMap.jsではビット委イメージのピクセルにアクセスしています。これを実現するにはビットイメージがSVGMap.jsと同一オリジンにある必要があります。この条件を満たせないケースに対してフレームワークにはプロキシを設定する機能があります。([[#setProxyURLFactory|setProxyURLFactory API]]を参照)

'''[[クロスオリジンアクセス|詳細な情報をこちらに掲載しました]]'''

=====多様な図法の定義と利用=====
[[#動的な地図レイヤー|javascriptコード]]に記載されたscript要素内に定義した関数の関数名をglobalCoordinateSystem要素のtransform属性に記述することで、その関数を図法変換に用いた図法定義が可能となります。(先述のmercator属性は、フレームワークに特別に組み込まれた関数です）

たとえば、日本の平面直角座標系の地図(固有の基準点を持つ横メルカトル図法)をPlateCarreeやメルカトル図法の地図として合成・表示するケースなどに有効でしょう。

ユーザが定義できるこの関数は引数を持たない関数であり、返り値として以下の３つの関数を返す必要があります。
* {x,y} transform({x,y}) : グローバル座標(WGS84経度緯度)から、そのコンテンツの図法の座標への変換関数入出力値は.x,.yメンバを持つオブジェクト。
* {x,y} inverse({x,y}) : 同、逆変換関数
* number get scale : グローバル座標系に対するコンテンツの図法の座標系の座標値のスケール（グローバル座標系で1変化すると、コンテンツの座標系でいくつ変化するのかを表す）
* 記述例
<code><pre>
<svg ...>
<script>
function azimuthalEquidistant(){
...
return{
transform:function(inp){
var xy = transform_int(inp.y, inp.x, ...);
return{ x:xy.x, y:xy.y}
},
inverse:function(inp){
var latLng = inverse_int(inp.x, inp.y, ...);
return{ x:latLng.lng, y:latLng.lat }
},
scale: 1.0
}
}
</script>
<globalCoordinateSystem srsName="http://purl.org/crs/84" transform="azimuthalEquidistant" />
...map contents in projected coordinate system...
</svg>
</pre></code>

===ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング===
SVG2(SVG1.1 2nd Edition)では、SVG単独によるユーザエージェントという実装想定は撤廃され、よく知られているウェブブラウザの機能の一部としてのSVGデータの描画機能、HTMLやCSSと一体化されたデータ・コンテンツ　へと変化しました。一方、近代のウェブブラウザにおけるコンテンツでは古典的なhtmlに基づくコンテンツデータに対して、javascriptとDOM APIによるプログラムでコンテンツをブラウザ上で動的に生成する（ウェブアプリケーション）機構を備えます。すなわちSVGを実装する現代のユーザエージェントは例外なくウェブアプリケーションの実行が可能となりました。

そこで、SVGMapでは静的なSVGによる地図コンテンツに加え javascriptで動的に生成されるコンテンツ(ウェブアプリケーション)も地図コンテンツ（地図のレイヤー）として扱えることとしました。それにもかかわらず SVGMapは依然として複数のウェブ上で分散する地図データを一つの画面上にレイヤリングする機能（ハイパーレイヤリング）を維持しています。すなわち、ウェブアプリケーションとしての地図レイヤーをレイヤリング（マッシュアップ）する機能が拡張されます。これは、SVGMapのマッシュアップ・ハイパーレイヤリングの概念を、単に地図画像データのレイヤリングから、地図上に表現された動的なオブジェクトのマッシュアップ・レイヤリングに広げています。SVGMapではこのコンセプトを[[リンク集#.E8.A7.A3.E8.AA.AC.E9.9F.B3.E5.A3.B0|"Layers as WebApps"(LaWA : ウェブアプリケーションとしてのレイヤー)]]と呼んでいます。

このようなウェブアプリケーションは、レイヤーごとにカプセル化されることになります。これにより、'''グローバル空間'''(コンテナsvgコンテンツとそれを起動する、svgMap.jsフレームワークを読み込んだウェブページ)のスパゲッティ化なしに、多様な機能を実装していくことが可能になります。

[https://satakagi.github.io/mapsForWebWS2020-docs/De-centralizedWebMapping.html こちらの論文]も参考にしてください。

ウェブアプリケーションによる地図レイヤーを構築するには二つの方法があります。
* svg要素の'''data-controller'''属性で参照されたhtml文書
** [[#レイヤー固有ユーザインターフェース]]と呼ばれる機構です。この方法を用いること推奨します。
* svg要素内の'''script'''子要素 (将来廃止予定)
** htmlによるUIを伴わない実装の場合はscript要素を用いることができます。ただしsrcは属性には非対応、直接コードを埋め込む必要があります。

この機能を用いるにはSVGMapLevel0.1フレームワークを使用する場合は、拡張フレームワーク(SVGMapLv0.1_LayerUI2_r*.js)を更にロードする必要があります。SVGMapLevel0.2フレームワークの場合はデフォルトで機能します。

====レイヤー固有ユーザインターフェース====
SVGMap.jsではさらに、個々の地図レイヤー(レイヤーSVGコンテンツ)がそれぞれのレイヤーに特化した固有の演算ロジックだけでなく、ユーザーインターフェースも備えた[[#レイヤーsvgコンテンツの設定|HTMLを紐づける]]ことができる機能が拡張されています。UIも備えたより完全なwebAppをレイヤーとして実装できるため、カプセル化がより効果的に実現されます。（Layers as Web Apps, LaWA)

たとえば気象情報のレイヤーに対して気象情報の時間変化を表示するアニメーションのコントローラ(スライダーバー)や、気象情報の種類を選択するプルダウンメニュー　などのUIやロジックを任意に構築できます。

レイヤー固有ユーザーインターフェースは、[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]](SVGMap.jsをロードしたhtml)のレイヤー選択UIを通してwindowに設置されたiframe中に呼び出されます。

詳細は[[#レイヤー固有のUI]] を参照してください。



　

====例====
以下に、いくつかのこのような動的な地図コンテンツの例を示しましょう。
;検索によって表示スタイルを変更する機能を持ったレイヤー
: 例えばコンビニエンスストアのＰＯＩレイヤーを表示したとして、そのメタデータを読み取り、検索条件に基づいて（例えば深夜営業している店舗）の表示スタイルを変更するような検索機能を実装したレイヤー　メタデータは書くレイヤーごとに独特の値を持つため、その検索ロジックはレイヤーに固有のものとなることがあります。このケースではそのような機能をレイヤーに組み込むことを可能にします。
;CSVデータなどのレガシーな非SVGデータをHXRで取得し、ブラウザ上でSVG DOMツリーを生成するようなSVG地図コンテンツ。
: このケースでは、サーバからクライアントに送信されるデータの実体はSVG形式の地図データではなく、CSVなどのレガシーなデータです。SVG地図コンテンツには、CSVデータをSVGとして描画するためのデータ読み込み・解読・SVG DOMツリー生成機構を備えたjavascriptコードが含まれます。また、これよりはモダンなgeoJsonやKML等のデータをSVG DOMに変換することも容易に可能でしょう。これをより簡単に実現するためのライブラリも[[#svgMapGIStool.で呼び出せるAPI|svgMapGIStool]]に準備されています。
;タイリングされた地図コンテンツ
: それは、たとえば[https://wiki.openstreetmap.org/wiki/Tiles OpenStreepMapのTile Server]や、[https://en.wikipedia.org/wiki/Tile_Map_ServiceTileMap Tile Map Service]のような、特定のロジックによる数列のような法則性を持ったピラミッド状の地図タイルリソースをタイリングする地図コンテンツのことです。
: 更新されたSVGMapでは、地図コンテンツに内蔵されたjavascriptによるアプリケーションロジックとしてそれらを取り扱うことができます。タイリング規則をそのままウェブアプリケーションとしてで書き下し、スケールやビューポートに応じて適切なタイリング(配置)を行うSVG DOMツリーを生成するSVG地図コンテンツが構築できます。

=====タイリングに関するノート=====
[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html svgMapにおけるタイリング]は従来の地図フレームワークより柔軟で汎用的な概念に基づいています。
openLayersやleafletなどの従来の地図フレームワークでは、このようなタイリング機能は特定の固定的なタイリングロジックとパラメータを伴った機能として地図フレームワーク本体にハードコードされて提供されてきました。さらには地図フレームワークがこれらのタイリングロジックに強く依存したアーキテクチャを持っていました。一方、これらのロジックにはさまざまなバリエーションや最適化のための調整パラメータが存在し、これまで長らくその互換性や相互運用、更には効率の問題を抱えてきました。次のリンクでその多くの議論や多様な提案を参照できるでしょう。[https://wiki.osgeo.org/wiki/Tile_Map_Service_Specification TMSspecs@osgeowiki], [https://wiki.osgeo.org/wiki/Category:Tiling tiling@osgeowiki]
ベクターデータのタイリングにおいては、これらの課題はさらに増幅され、いまだ手法は確立していないといっても良いでしょう。たとえば、我々の研究では、Quad Tree Composite Tiling([https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-in-english スライド]、、[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html ペーパー])のような用途によってはもっと優れたタイリングの手法も見いだされています。

一方、これらのロジックはその多様なバリエーションを含め、javascriptによるプログラムコードとしては容易に記述可能です。多くの場合わずか数十行のロジックで記述できるでしょう。この程度のコードで多くのタイリングの手法が包含できるのであれば、特定のタイリング手法をフレームワークのコアに内包する・さらにはこれら特定のタイリングの手法にコアが依存する必要はなく、先述のウェブアプリケーションによる動的な地図レイヤーとして実装すれば良いであろうというのがSVGMapにおけるタイリング扱いです。3DマップのフレームワークであるCesiumはこれに似たタイリングポリシーを持っているようです。

=====SVG以外のデータサポートに関するノート=====
前章に記載した方針と同様、他の地図表示フレームワークと異なりSVGMapではSVGとして規定されたコンテンツ(もちろんビットイメージの埋め込みは可能)以外のネイティブサポートは行いません。例えばgeoJsonやKML, WKTなど地図業界でしばしば用いられるデータをSVGMapで表示したい場合は、変換ルーチンを埋め込んだ動的な地図コンテンツ（webAppレイヤー）としてそれらを扱います。SVGMap.jsの拡張モジュールである[[#svgMapGIStool.で呼び出せるAPI|SVGMapGIS.js]]には、これらのデータをwebAppsで読み込みSVGに変換するためのAPIがあります。

===トポロジースイート(地理空間情報処理)===
Rev.13で拡張

SVGMapLevel0.1 Revision 13以降では、SVGMapコンテンツに対してトポロジー演算機能(地理空間情報処理機能)を適用する拡張フレームワークが提供されます。この機能を用いるにはSVGMapLevel0.1フレームワークに加えて、拡張フレームワーク(SVGMapLv0.1_GIS_r*.js)をロードする必要があります。このフレームワークでは、[[#svgMapGIStool.で呼び出せるAPI|拡張されたAPI]]が利用可能です。フレームワークに内蔵された基本的な演算機能に加え、geoJSONと整合するインターフェースを備え、[https://github.com/bjornharrtell/jsts jsts]を組み込み、より高度な機能を実装するための機構も持ちます。

この機能を用いると、特定のレイヤーに登録されているポリゴンの範囲に入っている、特定のレイヤーのポイントをフィルタリングして表示の色を変更する。といったことが可能です。ただし、これらはすべてすでにブラウザ上にロードされている限られた量のコンテンツの中での演算に限定されます。もしもサーバ上にしかないデータに対してこれらの演算を試みたい場合、従来通りサーバサイド技術によってそれは実現すべきです。

また、主題情報を含むウェブマップコンテンツの多くのレイヤーがラスタータイルによって提供されているという現状を考慮し、このスイートはラスターレイヤーをカバレッジとして扱った空間情報処理を行う機能の実装も進められています。現在のところ、カバレッジとポイントとの間での演算が可能です。また、そのために便利なカラーピッカー等の付加的な機能の実装も進められています。

===オーサリングシステム===
Rev.14で拡張

SVGMapLevel0.1 Revision 14以降では、SVGMapコンテンツを編集するツール機能が実装された拡張フレームワークが提供されます。[[#svgMapAuthoringTool.で呼び出せるAPI|フレームワークが提供するAPI]]を使って、オーサリング機能を持ったレイヤーを作ることが可能です。コンテンツは、SVG DOMとして構築されます。なお編集したオブジェクトを保存したり登録するためには別のサービスやアプリケーションの開発が必要です。

===3D可視化システム===
Rev.15で拡張

[https://cesiumjs.org/ Cesium.js]を用いて、SVGMap.jsが表示できるすべてのコンテンツを3D可視化するシステムです。詳細解説はTBD ([[#svgMapCesiumWrapper.で呼び出せるAPI|フレームワークが提供するAPI]])

===プログレッシブウェブアプリケーション===
Rev.16で拡張

[https://developer.mozilla.org/docs/Web/Progressive_web_apps Progressive Web Apps]をサポートしたブラウザにおいて、SVGMap.jsをオフラインでも利用可能にする拡張機能です。詳細解説はTBD ([[#svgMapPWA.で呼び出せるAPI|フレームワークが提供するAPI]])

===SVGMapコンテンツのバックエンドソフトウェア (参考)===
本解説書は主にコンテンツ形式とユーザーエージェント側のソフトウェアについて解説していますが、サーバ・バックエンド側についてもここで少し言及します。

shapefileやcsvなどから、静的なSVGMapコンテンツを生成するためのソフトウェアが[https://github.com/svgmap/svgMapTools オープンソース]で準備されています。これらのソフトウェアでは、[[#タイリングに関するノート|高度なタイリング手法]]を用いた地図タイルを生成することができます。使用方法などは同リポジトリに用意されているチュートリアルを参照してください。

一方、もちろんSVGMapの仕様に準拠すれば、これらのソフトウェアに頼らず、自由にバックエンドを構築することができます。例えばよく知られた地図タイルサービスを用いたり、古典的な[https://wiki.openstreetmap.org/wiki/Web_feature_service WFS ]や[https://wiki.openstreetmap.org/wiki/WMS WMS]のような動的地図・地理空間情報サービスをベースにして比較的容易にそれらを構築することもできます。[https://github.com/svgmap/svgMapLv0.1/tree/master/appLayers SVGMap.jsのリポジトリのappLayersディレクトリ]にはそのようなシステムを構築する際のフロントエンド側の動的レイヤーのサンプルが掲載されています。

==第二章：SVGMap Revsion 0.1フレームワーク==
SVGMapは究極的には既存のすべてのウェブブラウザがネイティブの機能としてそれを備えることを目標とし、既存のHTML,CSS,SVGなどのウェブブラウザの標準規格との整合性を備え、且つ既存のWeb Mappingの規格との整合性をも備えた仕様として検討と標準化を進めています。しかし今のところまだその標準化は完遂されていないため、その完全な実装がなされたウェブブラウザは存在しません。一方、既存のウェブブザでSVGMapの機能が実行可能となるような拡張をJavascriptによるフレームワークとして構築することが可能です。SVGMap Revision 0.1フレームワークは、このようなJavascriptによるSVGMapの仕様に基づいた初歩的な制限と拡張がされた実装です。その実装はオープンソースとして[https://github.com/svgmap/svgMapLv0.1 こちらのgitubリポジトリ]で公開されています。

そのアーキテクチャの特徴は、ブラウザネイティブのSVGレンダラーを使用せず、HTML,CSS,HTMLCanvas2DAPIを用いてSVGMapが実装されている点です。この特徴は主にこのフレームワークの開発が開始された時期に起因しています。当時のウェブブラウザの多くはSVGが実装されていませんでした。また実装されていたとしても、大規模なベクトルデータのレンダリング、および伸縮スクロール・インタラクティブな操作に対する性能面での処理制御に問題がありました。これらの問題のいくつかは現在のブラウザで解消されているものがあるかもしれません。またこれらの問題の解決とともに、SVGMapフレームワークはLevel番号を上げつつよりネイティブの機能に基づいた実装に移行するかもしれません。<font size="-2">参考までに、[http://svg2.mbsrv.net/devinfo/devkddi/lvl0.5/ 実験的なネイティブのレンダラを用いた実装(2010年)]があります。</font>

SVGのベクトル描画機能は[https://github.com/canvg/canvg canvg]のpathパーサなどを引用することで実装されています。一方、地図としてあまり用いられないと想定された多くの要素やプロパティ、アトリビュートの実装が省略されています。

===追加・拡張された機能：===
====フレームワークの呼び出し====
本フレームワークを用いる場合、SVGMapコンテンツをブラウザに直接読み込ませることはできません。フレームワークを動作させるjavascriptライブラリをロードしたhtmlコンテンツ(WebApps)を準備し、そこでSVGMapコンテンツを読み込み表示させます。利用者には、このhtmlコンテンツのURLを告知します。このhtmlコンテンツを以降'''ルートhtml文書'''と呼ぶことにします。

SVGMapのフレームワークはgithubリポジトリ：https://github.com/svgmap/svgmapjs　で公開されています。

htmlコンテンツの<body>要素直下に以下の要素を配置します。
=====フレームワークを実装したjavascriptライブラリを読み込むscript要素=====
これがSVGMap.jsのコアのフレームワークを構成します。

<nowiki><script type="module">
import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

上のスクリプトで必要なモジュールが読み込まれます。[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]のwindowのメンバには、svgMapオブジェクトを設定しています。

[https://svgmap.org/devinfo/devkddi/tutorials/tutorial5_esm/tutorial5.html 実働サンプル(tutorial5_esm)]

もしくは https://github.com/svgmap/svgmapjs の内容を独自のウェブホストにコピーしそれを用いることもできます。(下の例は[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]のhtmlに対して、svgmapサブディレクトリにjsを置いた場合)
<nowiki><script type="module">
import { svgMap } from './svgmapjs/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

===== GISモジュールを利用する場合 =====
svgMap.jsの地理空間演算機能(GISモジュール)では、jsts.jsを使用しています。そのためGISモジュールを機能させるにはjsts.jsの読み込みが必要です。下記のようになります。もちろん独自のウェブホストにjstsをコピーしてそれを利用することも可能です。

<nowiki><script type="text/javascript" src="https://unpkg.com/jsts@1.6.1/dist/jsts.min.js"></script>
<script type="module">
import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

======本解説書でAPIを説明している、現在利用可能な拡張フレームワーク======
ECMA Script Module対応の内容に現在更新中

* [[#svgMapCesiumWrapper.で呼び出せるAPI|SVGMapLv0.1_CesiumWrapper_r*.js]] (実験的)
** https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/experimental/Cesium3D/SVGMapLv0.1_CesiumWrapper_r3.js
* [[#svgMapPWA.で呼び出せるAPI|SVGMapLv0.1_PWA_r*.js]] (実験的)
** https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/experimental/PWA/SVGMapLv0.1_PWA_r5.js

まだ実験的なsvgMapCesiumWrapperは、[http://www.svgmap.org/devinfo/devkddi/lvl0.1/cesiumSvgMap/top.html svgMap cesium visualizer]ページを参照ください。
SVGMapPWA(ProgressiveWebApp)については、[https://svgmap.org/devinfo/devkddi/lvl0.1/svgMapPWA/ SVGMap PWA Test]ページを参照ください。

=====SVGMapコンテンツを配置するためのdiv要素=====
id属性に"mapcanvas"を設定し、data-src属性(もしくはtitle属性(to be obsoluted))には、地図フレームワークが最初に読み込む、SVGMap.jsが表示する地図コンテンツの起点となるSVGコンテンツ（以降'''コンテナsvgコンテンツ'''と呼びます）のパスを指定したdiv要素を設置します。

コンテナsvgコンテンツはまた、'''[[#レイヤー|ここで記述するレイヤー]]'''を持つことができる特別のコンテンツです。

（要確認：地図のサイズ・配置はこのdiv要素のサイズとなります。無指定の場合は全ウィンドサイズ）
<nowiki><div id="mapcanvas" title="Container.svg"></div></nowiki>

<nowiki><div id="mapcanvas" data-src="Container.svg"></div></nowiki>

======差分データの指定======
data-custom-layers-root属性でContainer.svgに対するレイヤーの差分情報のパスを指定することができます。
もしくは、data-custom-layers-root属性に、レイヤーの差分情報が保管されているディレクトリを記述した場合、URLハッシュで差分ファイルを指定することもできます。
差分データは、[https://github.com/svgmap/svgmapjs/blob/main/SVGMapCustomLayersManager_r3module.html カスタムレイヤーマネージャ]で作成することが可能。（データ形式は後述）
<nowiki><div id="mapcanvas" data-src="Container.svg" data-custom-layers-root="./containerDif/dif0.json"></div></nowiki>

=====地図中心の照準イメージ。=====
参照する画像はあらかじめ用意されたもの以外も利用できます。
<nowiki><img id="centerSight" style="opacity:0.5" src="Xcursor.png" width="15" height="15"/></nowiki>

====任意で設置できる要素：====
=====[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]](後述)を設置するdiv要素=====
<nowiki><div id="layerList" style="left :30px; top: 10px; width:300px;height:90%; position: absolute; "></div></nowiki>
: idが上記の通りである必要があります。
　 styleは任意だが、heightは[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]が展開された状態におけるサイズとなります。格納された状態のサイズは、この要素における文字の縦幅となります。各種オプションについては[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|詳細を参照ください]]
　

=====[[#レイヤー固有のUI|レイヤー固有のUI]](後述)を設置するdiv要素=====
[[#レイヤー固有のUI|レイヤー固有のUI]]を使用するために設置するdiv要素です。

<nowiki><div id="layerSpecificUI" style="right :10px; top: 40px; width:400px;height:400px; position: absolute; background-color: white;opacity:0.8;display:none;"></nowiki>
<nowiki></div></nowiki>
: idが上記の通りである必要があります。styleは任意だが、heightはレイヤリストUIが展開され得る最大のサイズとなります。
　
=====伸縮ボタン=====
<nowiki><img id="zoomupButton" style="left: 5px; top: 5px; position: absolute;" src="zoomup.png" onclick="svgMap.zoomup()" width="20" height="20" /></nowiki>
<nowiki><img id="zoomdownButton" style="left: 5px; top: 25px; position: absolute;" src="zoomdown.png" onclick="svgMap.zoomdown()" width="20" height="20" /></nowiki>
: img要素かつidが上記の値である必要があります。
　伸縮ボタンを一回押すたびに伸縮する比率は、別途svgMap.setZoomRatio(ratio)で設定可能。
　デフォルトの比率はsqrt(3)
　
=====測位ボタン=====
<nowiki><img id="gpsButton" style="left: 5px; top: 45px; position: absolute;" src="gps.png" onclick="svgMap.gps()" width="20" height="20" /></nowiki>
: img要素かつidが上記の値である必要があります。ボタン押下で測位し、測位点を中心にして地図を表示する機能。表示の範囲は測位制度に応じて適当に設置されます。

=====グローバルメッセージ=====
レイヤー固有UIが任意のメッセージを出力可能にするために設置するエリア　[[#レイヤー固有のUI]]のAPI '''putGlobalMessage''' 参照
<nowiki><span id="globalMessage" style="font-size:10px;left:5px;bottom:16px;position:absolute;"></span></nowiki>
: idが上記の値である必要があります。
　styleは任意

=====地図中心の緯度経度値表示=====
<nowiki><font id="centerPos" size="-2" color="brown" style="left: 50px; bottom: 5px; position: absolute;" ></font></nowiki>
: idが上記の値である必要があります。
　styleは任意

=====地図スケールの表示=====
<nowiki><font id="vScale" size="-2" color="black" style="left: 5px; bottom: 28px; position: absolute;">-</font></nowiki>
: idが上記の値である必要があります。
: styleは任意
: 縦50pxに対応したスケール[Km]を表示します
: 近傍に縦50pxのスケールイメージを設置するとわかりやすいでしょう

=====レジューム機能のためのチェックボックス=====
<nowiki><form style="right:10px;top:20px;position:absolute;opacity:0.8" ></nowiki>
<nowiki><input type="checkBox" id="resumeBox" onChange="svgMap.resumeToggle(event)" autocomplete="off"/></nowiki>
<nowiki><label for="resumeBox"/>Keep and Resume view</label></nowiki>
<nowiki></form></nowiki>
: checkboxタイプのform要素であり、idが上記の通りである必要があります。レジューム機能とは、(rev16以前ではcookie、rev17以降ではlocalStorage)を用いて、前回最後に表示された状態（レイヤーの表示非表示状態、表示領域（view port）を再現する機能です。スタイルおよびlabel要素は任意

===== [[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]のためのスタイル=====
<style>
body {
font-family: Meiryo;
}
#layerTable{
background:#ffE0E0;
border: 2px solid #bbb;
}
.layerItem{
background-color: white;
}
.noGroup{
background-color: #fff0f0;
}
#layerList{
background-color: #ffff80;opacity:0.8;
}
</style>
====== [[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]を用いる場合、例えば上記のようなスタイルの定義が必要です。======
* layerList：レイヤーリストUI全体に対するスタイル
* layerTable：レイヤーリストUIの中のテーブルに対するスタイル。
* layerItem：同テーブルに表示される個々のレイヤー表示に対するスタイル
* noGroup：同レイヤー表示のうち、グループに属さないレイヤーに対するスタイル
　

====レイヤー====
SVGMapは古典的な地図情報システムのようなレイヤーの概念を備えていません。一方その上位概念ともみなせる、任意のドキュメントをツリー状に埋め込む機能を備えています。しかしそれでは古典的なユースケースを平易に表現しているとはいえないため、それをラップする古典的なレイヤーの概念と、それに基づくレイヤーユーザインターフェースのフレームワークを持ちます。

フレームワークが最初に読み込む地図コンテンツの起点となる'''[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]'''の中で、animationもしくはiframeを用いて（準拠規格に依る）埋め込まれるsvgコンテンツが、自動的にレイヤーとみなされます。いうまでもなくレイヤーの上下順はSVGコンテンツのスクリプト中での埋め込みの順番の逆順になります。

また、このコンテナsvgコンテンツが参照し埋め込んでいる、各レイヤーのSVGコンテンツのことを、'''[[#レイヤー|レイヤーsvgコンテンツ]]'''と呼ぶこととします。ここで、各[[#レイヤー|レイヤーsvgコンテンツ]]はさらに別のsvgコンテンツを埋め込むことがあります。これらのコンテンツはよくサブレイヤーSVGコンテンツもしくは単にサブレイヤーと呼ばれることもあります。

なお、Rev12以降のSVGMapLv0.1フレームワークではレイヤーフレームワークは本体と独立した実装となり、拡張や切り離しが可能となりました。以下は、標準で提供されるレイヤーフレームワークのVer2 (SVGMapLv0.1_LayerUI2_r*.js)に関して解説します。

レイヤーUIフレームワークが提供するUIは、先述のレイヤーリストUIを設置するdiv要素によって提供されます。このUIは以下の機能を持ちます。
* 折り畳み可能なレイヤーの一覧を表示する機能
* 各レイヤーの表示非表示を切り替える機能
* グルーピングされたレイヤー(後述)をグループとして表現、折り畳み、一括表示非表示する機能。
* そのレイヤーに紐づけられた[[#レイヤー固有のUI]]を出現させる機能。
* 表示されているレイヤーの個数などの情報を表示する機能

===== コンテナsvgコンテンツの記述内容とレイヤーフレームワークの振る舞い =====
* animation要素：　レイヤーとみなされる
** title属性: レイヤーの名称となる。(必須属性) title属性値は他のレイヤーと重複してはならない(ID(このコンテンツ内でのレイヤーの識別子)として振る舞う)
** xlink:href属性: レイヤーsvgコンテンツへの参照
** visibility属性 : レイヤーの初期の表示状態。UIにより変更できる (hidden or visible)
** opacity属性 : レイヤーの透明度
** x,y,width,height属性の振る舞いは共通(viewportがこの属性の値とintersectしていただロードされる)
** class属性: スペース区切りで規定値(複数)と任意値(一つ)を記述できる
*** 詳細は後述の[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供]]を参照
** data-controller属性: (Optional) [[#レイヤー固有のUI]]　の　[[#詳細]]参照
* globalCoordinateSystem要素：(1個つだけ必須要素)
** (コンテナsvgコンテンツにおける)本要素が、このフレームワークによってUser Agentに表示される地図の図法を規定する。
*** なお、それ以外のSVGコンテンツのglobalCoordinateSystem要素は、コンテナsvgコンテンツの図法への変換のために用いられる
*** より詳細は[[#地理座標系の処理]]を参照
* svg要素: (documentRoot要素)
** viewBox属性: 初期の表示範囲を指定。
*** ここに記述する座標値は、SVGの仕様に準ずるが、　拡張記述形式も使用可能　参照：[[#メルカトル図法のドキュメントルート要素のviewBox属性]]

===== レイヤーsvgコンテンツ =====
レイヤーsvgコンテンツは、[[#レイヤー固有のUI|レイヤー固有のUI]]を紐づけることができます。

====クリッカブルオブジェクト====
グラフィックスオブジェクトをクリック（タブレットの場合は、タップもしくは照準アイコンに合わせたうえでタップ）することでそれに紐づけられたインタラクティブ動作を実行する。インタラクティブ動作はフレームワークが独自に提供する、metadataフレームワークに基づく、メタデータの表示機能を対象とします。

なお、image要素(useによって間接的に設置されたimage要素を含む)は、a要素によるハイパーリンクが加えて実装されています。metadaとa要素の双方が設定されているimage要素では、どちらのインタラクティビティを発動させるかをモーダルダイアログによるユーザへの問い合わせが行われます。

====class属性によるレイヤーのグルーピング・クリッカブル機能の提供====
コンテナsvgコンテンツが参照するレイヤー（[[#レイヤー|レイヤーsvgコンテンツ]]）へのリンクを記述する要素(animationもしくはiframe要素)は、class属性によって、各レイヤーに特性を与えることができます。classはスペース区切りで複数指定することができますが、グループ名は一つしか認識されません。
;グルーピング
: 以下の属性値以外の値を記述すると、グループ名として認識され、同じグループ名を持ったレイヤーたちをグルーピングすることができます。グルーピングの効果はレイヤーＵＩにおけるグループ表現と、下記のbatch,switch特性です。グループはレイヤーリストUI上の表現に反映されます。最初に現れたグループ名がこのUIの下に表示されます。ただし地図画面上の描画の順番はこれとは別、SVGの基本的な描画順([https://www.w3.org/TR/SVG11/render.html#PaintersModel Painter Model])に準じます。
;batch
: グルーピングとともに使用します。そのグループに属するレイヤーを一括で表示非表示するための機能がレイヤーＵＩに付加されます。
;switch
: グルーピングとともに使用します。そのグループに属するレイヤーは、どれか一つしか表示されません。batchとの併存はできません。（無視されます（要確認））
;clickable
: Pathなどのベクトル図形要素はデフォルトではインタラクティビティが提供されません。クラス値にclickableを指定することでこのレイヤー（子供のsvgコンテンツを含む）の図形要素においてのみ、インタラクティビティが提供されます。提供されるインタラクティビティは、マウスによって図形をクリックしたとき、そのグラフィックス要素がクリッカブルな要因を備えているかどうかを検索し、備えている場合それに対応するアクションを起こします。
　なお、image要素(useによって間接的に設置されたimage要素を含む)は、このクラスの設定に依らず、a要素によるハイパーリンク、およびmetadataフレームワークを用いたクリッカブルオブジェクトとして機能します。
;editable
: 当該レイヤの[[#レイヤー固有のUI|レイヤー固有UI]]に[[#svgMapAuthoringTool.で呼び出せるAPI|svgMapAuthoringTool]]の図形編集オブジェクトを設置する場合、それを有効に機能させるためにはこの属性が必要です。(なお再編集機能を有効にするにはclickableも必要)

====data-nocache====
コンテナsvgコンテンツが参照するレイヤー（[[#レイヤー|レイヤーsvgコンテンツ]]）へのリンクを記述する要素(animationもしくはiframe要素)に、data-nocache属性をつけることによって、クライアントのコンテンツキャッシュを無効にすることができます。なお、無効化手段はunix-timeクエリパートをそのレイヤー下のすべてのリソースへのアクセスに付加させることによります。

====metadataフレームワーク====
データ格納効率に優れたメタデータのフレームワークが提供されます。このメタデータは先述のクリッカブルオブジェクトとしてインタラクティビティの実装に用いられます。 svgドキュメントルート要素のproperty属性にメタデータの属性名をカンマ区切りで列挙。同文書の図形要素のproperty属性に同じ順序でメタデータの値を記述します。(なお、xlink:title属性でマウスオーバーで機能する吹き出しを設置できます)

ひとつの文書に対して一つのスキーマ（メタデータの属性名とその順番）しか与えられないという制約を持ちます。（その代わり格納効率が高い）クリックやタッチ等によってデフォルトの状態ではブラウザが備えるモーダルダイアログに属性名と属性値がそれぞれ列挙された形で表示されます。metadata表示機能の拡張/カスタマイズについては、ウェブアプリケーションの開発の章で別途解説する'''setShowPoiProperty()'''関数を参照してください。

データ自体にカンマが含まれる場合はエスケープが必要です。

=====例：=====
<svg '''property="id,type,latitude,longitude,title,address,spec"''' ... >
...
<use transform="ref(svg,14118.37511,-4524.39994)" x="0" y="0" xlink:href="#syl8"
'''content="RIS/RJER,地方管理,45.2439994,141.1837511,利尻空港,北海道利尻郡利尻富
士町,1800×45(07/25)"''' xlink:title="利尻空港"/>
...
</svg>

====レイヤーリストUIの詳細====
[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.28.E5.BE.8C.E8.BF.B0.29.E3.82.92.E8.A8.AD.E7.BD.AE.E3.81.99.E3.82.8Bdiv.E8.A6.81.E7.B4.A0|レイヤーリストUIが設置されるdiv要素]]には、以下のプロパティを設定することで、UIの動作を調整するパラメータを与えることができます
* data-customizer [https://github.com/svgmap/svgmapjs/blob/main/SVGMapCustomLayersManager_r3module.html カスタムレイヤーマネージャ]の起動ボタンを設置し、プロパティ値で同ウェブアプリのパスを指定します。
* data-layerstylecontroller 各レイヤーの表示スタイルを調整するUIを設置します(値不要)
* data-hiddenfilter 表示されていないレイヤーをレイヤーリストUI上でも非表示にする機能を稼働させます(値不要)
* data-opened svgMapウェブアプリが起動した直後にレイヤーリストが開かれた状態にします
* data-fixed レイヤーリストが開かれた状態且つ閉じるボタンを表示させません(data-openedと排他)

===動作の制限・差異===
====再描画の制限====
* ブラウザネイティブのSVG描画機能に対して注意すべき点として、このSVGDOMの描画は、基本的に伸縮スクロールのタイミングでしか行われない点です。（ネイティブのSVG描画機能は60fpsで再描画する努力を行っている) そのため、再描画タイミングを意識・明示([[#refreshScreen|refreshScreen]]関数を使用)したアプリケーションの構築が必要になるケースがあります。
*関連情報
**[[内部機構解説#Zoom.2FPan_Controller:]]
**[[解説書#refreshScreen|refreshScreen]]
**[[解説書#setPreRenderController|setPreRenderController]]
**[[解説書#.E6.8B.A1.E5.BC.B5API|preRenderFunction ]]
**[[解説書#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|動的な地図レイヤー]]
**[[解説書#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|レイヤー固有のUI]]
**[[解説書#.E6.8B.A1.E5.BC.B5.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88|拡張イベント]]

===実装されている機能===
多くの機能が実装されていないため、実装されている機能、および拡張された機能をここでは列挙することとします。
====要素====
*path
*globalCoordinateSystem
*circle
*text
*defs
*animation
** 別のsvgコンテンツを取得して埋め込みます。
** コンテナsvgコンテンツで使用した場合は埋め込んだコンテンツは「レイヤー」と見做されます。
** それ以外で使用した場合はタイルやサブレイヤーとして使用できます。
** x,y,width,height属性は、SVGの仕様に基づき埋め込むコンテンツのtransformに影響を与えるとともに、下記の通り動的なコンテンツの読み込み機構が制御されます。
*** この属性で示された領域がtransform後のviewportと交差・包含した場合、その埋め込みコンテンツは動的に取得され表示されます。lazy loadの機構に相当し、タイリングメカニズムを構成します。
*** ただし、visible-min-zoom およびvisible-max-zoom属性で示された拡大率による表示条件を満たしていない場合は取得されません。level of detailの機構に相当します。（x.y,width,height属性と組み合わせることで、タイルピラミッド（ラスター、ベクターを含む）機構を実現します。詳しくは[http://kikakurui.com/x7/X7197-2012-01.html JISX.7197]、[https://www.w3.org/Submission/2011/04/ Tiling and Layering Moduleサブミッション]、もしくは[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html こちらの論文]を参照
** commonQuery属性：[[#レイヤーsvgコンテンツ]]のanimation要素でこの属性を設置すると、そのレイヤーのコンテンツを取得するすべてのGETリクエストのクエリパートにこの属性で設定した値が共通付加されます。(もしKey=Valueの形のクエリを追加したい場合は文字列として"Key="の部分も含めてこの属性値に設定します。)
*iframe
** animationと同等
*image
** 別のビットイメージコンテンツを取得して埋め込みます。
** animation属性のx,y,width,height属性と同様の追加のlazy loadの振る舞いを持ちます。
** visible-min-zoom およびvisible-max-zoom属性の振る舞いも同等です。
** xlink:href属性はspatial fragment をサポートし、(xywhによっ参照されるimageの部分を埋め込む機能をサポートします。)。もしもアスペクト比が異なった場合（ＴＢＤ）
** style:filterプロパティによる画像処理をサポートします。
** data-mercator-tile="true"　属性が設定されている場合、そのビットイメージはメルカトル図法で描画されていることを示します。
** htmlのimg要素のcrossoriginに対応する属性を持つことができます（この場合ビットイメージの埋め込みに際しoriginヘッダが送信）
*view

====属性====
*<code>ref(svg,x,y)</code> ：SVG1.2Tの[https://www.w3.org/TR/SVGTiny12/single-page.html#coords-transform-ref TransformRef]属性により、non-scaling objectが設置できます。Pointフィーチャの可視化に効果的です。　

'''TBD'''
*fill
*stroke
*arrow
*dasharray
*viewvox
*opacity
*style
**image-rendering : pixelated / image要素
**fill
**stroke
**opacity
*meta
**http-equiv="refresh" : [[#レイヤー|レイヤーsvgコンテンツ]]のみ。contentに秒数を設定することで、そのレイヤーを指定秒数ごとに(再読み込み)更新する。script要素はonloadが再実行される。　注：ブラウザのキャッシュが効く可能性を考慮して実装する必要がある。

==第三章：ウェブアプリケーションの開発==
本章はSVGMap Revsion 0.1フレームワークを用いたウェブアプリケーションの開発について解説します。
本フレームワークによる開発部分は以下に分類されます。
*[[#フレームワークの呼び出し|ルートhtml文書]]によるウェブアプリケーション(SVGMapフレームワーク)
* 動的な地図レイヤー(Layers as WebApps) : SVGコンテンツに以下のいずれかの情報を設定する
** [[#レイヤー|レイヤーsvgコンテンツ]]のドキュメントルート要素のdata-controller属性　[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|レイヤー固有のUI]]
** svgドキュメントに設置されたscript要素 [[#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|script要素による動的な地図レイヤー]]

===SVGMapフレームワーク===
[[#フレームワークの呼び出し|ルートhtml文書]]によるウェブアプリケーションはSVGMapLv0.1フレームワークを用いたウェブアプリケーションの基本であり、そのhtml文書と底傘参照されたjavascriptライブラリを読み込んだwindowが持つ''''svgMap''''という名前のインスタンスを用いてフレームワークのための拡張機能を利用することができます。

====SVGMapが持つ基幹オブジェクト====
SVGMapLv0.1フレームワークのインスタンス''''svgMap''''が持つ基幹のオブジェクトを解説します。これらの基幹オブジェクトはそれぞれゲッター(getSvgImages, getSvgImagesProps)によって取得できます。
=====svgImages[]=====
[[#getSvgImages|getSvgImages()]]により取得できる。svgImages[hashID]は、現在ローディングされているSVGドキュメント(“XML” DOMツリー(SVG DOMツリーというよりむしろ))が蓄積されているハッシュテーブル
*ハッシュID：フレームワークが任意に付番した文書ID。ただし、最初にロードされるルートのドキュメントのハッシュキーは、”root”
*なお、[[#レイヤー固有のUI]]のwebAppでは、そのレイヤーに該当するSVGドキュメントが[[#svgImage|svgImage]]で取得できる。

=====svgImagesProps[]=====
[[#getSvgImagesProps|getSvgImagesProps()]]によって取得できる。
同、個々のSVGドキュメントが持つ、各種プロパティが蓄積されているハッシュテーブル。
注記がない限り全てReadonly
*ハッシュID： svgImages同様
*なお、[[#レイヤー固有のUI]]のwebAppでは、そのレイヤーに該当するSVGドキュメントが持つ、各種プロパティが[[#svgImageProps|svgImageProps]]で取得できる。
======プロパティリスト======
*.Path コンテンツのパス（webAppsのdocument(html) rootに対する相対パス。Originが違う場合は絶対パス(クエリパートやフラグメント(ハッシュ)も含む)
*.CRS 地理座標からSVG座標に変換するための変換パラメータ
*.script SVG文書がscript要素を持つとき、そのscriptへのインターフェースが登録される。同script要素で生成されるオブジェクトに暗黙に登録されるメンバー変数については、[[#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|script要素による動的な地図レイヤー]]の章を参照
*.editable 編集可能レイヤーを示す　[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供|レイヤーのclass = editableに対応]]
*.editing 編集可能レイヤーを編集中
*.isClickable クリッカブルなレイヤーを示す
** true:設定　[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供|レイヤーのclass = clickableに対応]]
** 以下をメンバーに持つオブジェクト:ハイライト時のスタイルを設定可能(rev18以降)
*** .hilightFillStyle : ポリゴンオブジェクトのハイライト時スタイル（以下のメンバーが無い場合はハイライトしない）
**** .color : 塗りの色 (CSS の color値として解釈される文字列)
**** .lineWidth : 線幅
*** .hilightStrokeStyle : 線オブジェクトのハイライト時スタイル（以下のメンバーが無い場合はハイライトしない）
**** .color : 線の色 (CSS の color値として解釈される文字列)
**** .widthIncrement : 線幅の増加値
*.parentDocId このSVG文書を埋め込んでいる、親のSVG文書のハッシュID
*.childImages[hashID] このSVG文書が読み込んでいる、子のSVG文書(複数)
*.refresh
**.loadScript
**.timeout
**.start
*.controller レイヤー固有のUIへの(web appsのdoc rootに対する)相対パス
*.isSVG2 その文書がSVG2タイプの文書であるかどうか(CRSとembedの仕方がちがう）
*.rootLayer そのSVG文書が属する「レイヤー」を示す文書
*.scale そのSVG文書の現在のスケール。スケールはそのSVG文書の座標系と画面の座標系との間の値（地理座標系ではない）。拡大するとスケール値は大きくなる
*.preRenderControllerFunction そのSVG文書の再描画(画面更新)シーケンスの直前に実行される関数
*.hash そのレイヤーのURLのフラグメント部（この値は、レイヤ固有WebAppで変更が有効）

====利用可能API====
【TBD】 APIのリストは下記の通りです。
=====SVGMap.で呼び出せるAPI=====
======Geo2SVG======
*Geo2SVG( lat , lng , crs ) : 指定された緯度(lat)・経度(lng)・CRSより、SVG座標を計算する
======POIviewSelection======
*POIviewSelection( poi ) : 指定されたPOIの属性・リンクの表示選択画面を表示する。また、選択したイベントに従い、属性の表示または、リンク先のページを表示する。
======SVG2Geo ======
*SVG2Geo ( svgX , svgY , crs , inv ) : 指定されたSVG座標(svgX , svgY)をCRSにより、GEO座標に変換する。または、invにより逆変換する
======addEvent======
*addEvent(elm,listener,fn) : 指定された要素(elm)にイベント属性(listener)時の呼び出す関数(fn)を設定する (addEventListenerが実装されていなかったブラウザサポートの名残です)
======callFunction======
*callFunction( fname ,p1,p2,p3,p4,p5) : 指定した関数(fname)を引数(p1,p2,p3,p4,p5)を渡してフレームワーク内の任意の関数を実行する。(フレームワークの内部関数も呼び出すことができる)
======captureGISgeometries======
*captureGISgeometries( cbFunc , prop1 , prop2 , prop3 , prop4 , prop5 , prop6 , prop7 ): 現在画面上に表示中の地図コンテンツに対応した、GeoJsonのGeometryデータ構造に準拠のGISgeomerry情報をがレイヤ単位でまとまった連想配列の形で取り出す。非同期処理で、cbFuncの最初の引数に返却される。
** 連想配列のハッシュ値：レイヤID
** geomeryには、src(そのジオメトリのもととなっているSVGの図形要素), href(ビットイメージの場合のリンク)が付加される
** geoJsonのgeometryに相当する情報が含まれる（座標は[経度,緯度]）
** display="none"の図形要素は表示されていないとみなされる。また画面外にある図形要素も表示されていないとみなされる。画面に部分的に表示されている要素は表示されているものとみなされるとともにクリッピングも行われない。
** [[#captureGISgeometriesOption|captureGISgeometriesOption]](true)を設定してから実行すると、ビットイメージもジオメトリとして取得する。（ただし実データは含まれないので必要に応じて[[#getImagePixelData|getImagePixelData]]で取得する）
*** type : Coverage
*** src : 画像情報のURL
*** coordinates : transformのb,c==0の場合、当該画像の南西、北東端が設定される
*** transform : b,c!=0の場合の、画像の座標(左上隅を0,0、右下隅が画像のw,h)から地理座標([経度,緯度])への一次座標変換情報(a,b,c,d,e,f)が設定される

======captureGISgeometriesOption======
*captureGISgeometriesOption(BitImageGeometriesCaptureFlg, TreatRectAsPolygonFlg, SkipVectorRenderingFlg, captureAlsoAsBitImage): captureGISgeometriesでキャプチャするデータの取得条件を設定する。
** BitImageGeometriesCaptureFlg: ビットイメージタイルをカバレッジとして取得するか(Default:false)。captureGISgeometriesを呼び出す前に使用する。
*** 2019.5.17アップデートで、transform matrix(非対角要素あり)を持つビットイメージタイルについても必要な情報を得られるようになった。
** TreatRectAsPolygonFlg: rect要素をポリゴンとして扱う(デフォルトは円もrectもPointとして扱われる)
** SkipVectorRenderingFlg: ベクトル図形の描画をスキップする
** captureAlsoAsBitImage: polygon/polylineの図形を描画したビットイメージをレイヤー単位でカバレッジデータとして取得
*captureGISgeometriesOption(captureGISgeometriesOptionObject) : オブジェクトでも設定できる(rev18以降)（以下そのメンバー変数：全て値はboolean）
** .BitImageGeometriesCaptureFlag, .TreatRectAsPolygonFlag, .SkipVectorRendering, .captureAlsoAsBitImage　上と同様

======checkSmartphone======
*checkSmartphone() : タッチに対応したスマホブラウザなのかどうかを判別
======childDocOp======
*childDocOp(func , docHash , param1, param2 , param3 , param4 , param5) : 指定した文書をルートにして、DOM操作をその子文書に対して実行する。なおこれはlinkedDocOpの直系の子供のみ適用版(自身も適用しない)
======dynamicLoad======
*dynamicLoad( docId , parentElem ) : 指定した文書ID(docId)以下の表示に必要な文書を読み込み、指定したdiv要素(parentElem)に表示する
======escape======
*escape(str) : 以下の文字をHTMLエスケープする(&:&amp,":&quot;,':&#039;,<:&lt;,>:&gt;)
======geo2Screen======
*geo2Screen( lat ,lng ) : 地理座標を指定すると、その画面上のキャンバスの座標(px)を返す
======getBBox======
*getBBox( x , y , width , height ) : 指定された値でviewBoxを作成する

======getBasicPermanentLink======
* getBasicPermanentLink(copyLinkTextToClipboard) : 現在の表示状態(レイヤーの表示非表示および表示領域)を反映した基本的なパーマリンクを生成する
** URLオブジェクトが返却される
** copyLinkTextToClipboardがtrue場合、クリップボードにもURLがコピーされる。
** 生成されるURLは、[[#起動URLによるオプション指定]]の仕様に基づく
** 参考：[[#サブレイヤーパーマリンク]]

======getCentralGeoCoorinates======
*getCentralGeoCoorinates() : グローバル変数 rootViewBox,rootCrsから画面中心地理座標を得る
======getConversionMatrixViaGCS======
*getConversionMatrixViaGCS( fromCrs , toCrs ) : 元座標変換行列(fromCrs)から先座標変換行列(toCrs)への変換行列を作成する

======getCORSURL======
* getCORSURL(originalURL, alsoCrossoriginParam) : クロスオリジンアクセス用URLを生成する。([[#setProxyURLFactory|setProxyURLFactory]]の第4,5引数が設定されている場合)
** alsoCrossoriginParam クロスオリジンアクセスに際してoriginヘッダが必要かを取得する(この引数がある場合は.url, .crossorigin メンバを持つオブヘクトが返却される)
** レイヤー固有UIのウェブアプリなどで独自にクロスオリジンアクセスを行ってデータを取得するような場合にプロキシ経由のURLを生成するのに利用できます。
** 参考：[[#.E3.83.97.E3.83.AD.E3.82.AD.E3.82.B7.E3.81.AE.E8.A8.AD.E5.AE.9A|クロスオリジンアクセスのためのプロキシ設定]]

======getDevicePixelRatio======
*getDevicePixelRatio( docId ) : setDevicePixelRatioで設定した値を取得できる。 docIdが指定されなかった場合は全ての値が得られる

======getElementByImageId======
*getElementByImageId( XMLNode , searchId ) : 指定されたSVG文書群ノード(XMLNode)以下の属性iidが指定されたID(searchId)と等しいノードを返す

======getLoadErrorStatistics======
*getLoadErrorStatistics() : 伸縮スクロール、refreshScreenごとの、リソースの読み込み状況を取得する。
**メンバー変数: timeoutBitImagesCount,timeoutSvgDocCount,otherBitImagesCount,otherSvgDocCount

======getGeoViewBox======
*getGeoViewBox() : コンテナsvgのviewBoxをgeo変換したgeoのviewBoxを取得
======getHashByDocPath ======
*getHashByDocPath ( docPath ) : ターゲットのレイヤーのハッシュをPath名(docPath)から探し出す
======getHyperLink======
*getHyperLink( svgNode ) : 指定されたsvg文書(svgNode)から、親文書をたどり最初に取得できたハイパーリンクを取得
======getInverseMatrix======
*getInverseMatrix(matrix) : 逆行列を求める(matrix.a..f)
======getLayer======
*getLayer(layerID_Numb_Title) : [[#getLayerId|layerID]],title,番号,href(URI)のいずれかで、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]SVGDOMにおけるレイヤーの(svg:animation or svg:iframe)要素を取得する。getLayersと似ているが、getLayersのほうは任意のsvg文書(オプションなしではroot container)に対して、内包されるレイヤーのリストを返却。こちらは[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]に対して検索キーに基づいてレイヤーを返却する

======getLayerId======
*getLayerId( layerKey ) : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]における"レイヤ"概念のレイヤidを検索する。検索に用いることができるのは、getLayerと同じtitle,url,もしくはルートレイヤの要素
* layerIDはレイヤー名とは異なる、フレームワークによって任意に附番された、そのSVGMapドキュメントを識別するための文字列。このlayerIDを基に動作するAPIが多くあります。
* [[#レイヤー固有のUI]]　の　[[#layerID]] も参照

======getLayers======
*getLayers( id ) : オプションなしの場合、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーに該当する要素をリストアップし、返却する。オプションアリの場合、そのidを持つ要素を返却
======getLinearTransformMatrix======
*getLinearTransformMatrix(x1i,y1i,x2i,y2i,x3i,y3i,x1o,y1o,x2o,y2o,x3o,y3o) : ３つの基準点の変換前後の座標を与えると、それに適合する1次変換行列が得られる。(*i:変換前の座標, *o:変換後の座標)
======getMapCanvas======
*getMapCanvas() : 地図キャンバスとなる、おおもとのdiv要素の取得
======getMapCanvasSize======
*getMapCanvasSize() : 地図キャンバスのサイズ(画面サイズ)を取得
======getMouseXY======
*getMouseXY( evt ) : 指定されたイベント時のマウスの画面上の座標(px)を返す
======getNonScalingOffset======
*getNonScalingOffset(svgPoiNode) : 拡大縮小しても伸縮しない図形要素のオフセット値を取得する
======getObject======
*getObject( oname ) : 指定されたオブジェクト(oname)を取得
======getPoiPos======
*getPoiPos( svgPoiNode ) : =getNonScalingOffset
======getRoot2Geo======
*getRoot2Geo() : コンテナsvgのCRSの逆変換CRS( rootのsvg - > geo )を取得
======getRootCrs======
*getRootCrs() : コンテナsvgのCRS ( geo->rootのsvg )を取得
======getRootLayersProps======
*getRootLayersProps() : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の(animetion||iframeで構成される)レイヤー情報を取得する。Arrayが返却、並び順はsvgの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]と同じ（最初のレイヤーが一番下。selectメニュー創るときはひっくり返して使うこと）レイヤー情報：名称、表示非常時状態、レイヤーグループ、グループのフィーチャ(バッチ||スイッチ||ふつう)、編集可、編集中、対応SVGドキュメント、個別ユーザインターフェース、個別凡例
======getRootViewBox======
*getRootViewBox() : aspectを加味し実際に開いているコンテナsvgのviewBoxを取得
======getSvgImages======
*getSvgImages() : svg文書群(XML)の連想配列を取得(ハッシュキーは[[#getLayerId|layerID]]("root"以外は"i"+連番))
* (参考:[[#svgImages.5B.5D|svgImages]])

======getSvgImagesProps======
*getSvgImagesProps() : svg文書群のプロパティ( .Path,.CRS,.script,.editable,.editing,.isClickable,.parentDocId,.childImages,.controller)の連想配列を取得(ハッシュキーは[[#getLayerId|layerID]]("root"以外は"i"+連番))
* (参考:[[#svgImagesProps.5B.5D|svgImagesProps]])

======getSvgTarget======
*getSvgTarget( htmlImg ) : html文書中のimg要素(POI)を入力すると、対応するSVG文書の文書番号とその要素(use)が出力される。対応するuse要素を持つsvg文書自体を取得したい場合は.ownerDocumentする。idからhtml文書のimg要素を取得するには、Document.gelElementById(id)
======getSwLayers ======
*getSwLayers ( cat ) : swLayers[クラス名]に、クラス名ごとのレイヤー(のSVG要素)の全リストを構築する。catがある場合は、catの名称を持つもののリストのみを構築する
======getSymbols======
*getSymbols(svgDoc) : POI編集のsymbol選択を可能にするとともに、defsは、useより前に無いといけないという制約を払った
======getTickerMetadata======
*getTickerMetadata() : 現在Tickerが表示されているグラフィックスオブジェクトのメタデータを取得する
======getTransformedBox ======
*getTransformedBox ( inBox , matrix ) : 指定されたviewBox(inBox)を変換行列にてサイズ変更と移動のみでの座標変換する。b=0、c=0の場合のみ利用可能。たとえば、matrixには、svgImagePropsのCRSを設定することで、そのSVGMapコンテンツのSVG座標系でのviewPortが計算できる。このときmatrixは線形変換の係数が含まれたオブジェクトでも良いし、[[#.E5.A4.9A.E6.A7.98.E3.81.AA.E5.9B.B3.E6.B3.95.E3.81.AE.E5.AE.9A.E7.BE.A9.E3.81.A8.E5.88.A9.E7.94.A8|非線形変換のための関数が含まれたオブジェクト]]でも良い。　svgMap.getTransformedBox(svgMap.getGeoViewBox(),svgImageProps.CRS)

======getUaProp======
*getUaProp() : ブラウザの種類(isIE：IEかどうか、isSP：スマートフォンかどうか)を取得する
======getVerticalScreenScale======
*getVerticalScreenScale(screenLength) : 垂直(緯度)方向のscreenLengthに対する長さを取得する(input: px, return : Km)
======getViewBox======
*getViewBox( svgDoc ) : 指定したSVG文書のviewBoxを取得
======gps======
*gps() : ブラウザの測位APIによって測位しその点を中心に表示、表示縮尺は測位精度を元に適当に決定
======gpsCallback======
*gpsCallback(position) : GPS測位が成功した後に実行されるコールバック関数で、positionを中心とした場所を表示させる
======handleResult======
*handleResult( docId , docPath , parentElem , httpRes , parentSvgDocId ) : SVG文書を(docPathから)svg文書群とそのプロパティをHTTPXMLRequest(httpRes)から親文書(parentSvgDocId)の子文書(docId)として読込み、指定されたHTML要素(parentElem)に貼り付ける
======ignoreMapAspect======
*ignoreMapAspect() : 地図のアスペクト比を、rootSVGのviewBox( or hashのviewBox)そのものに設定する
======initLoad======
*initLoad() : load時に"一回だけ"呼ばれる初期化関数
======isIntersect======
*isIntersect( rect1, rect2 ): rect1(x,y,width,height)とrect2が交差(包含も含む)しているかどうかを返却
======linkedDocOp======
*linkedDocOp( func , docHash , param1, param2 , param3 , param4 , param5 ) : 再帰実行のルートになる文書のハッシュ(docHash)以下の子・孫・・・文書に対して、同じ処理(func( docHash , param1, param2 , param3 , param4 , param5 ))を再帰実行する関数
======loadSVG======
*loadSVG( path , id , parentElem , parentSvgDocId) : SVG文書を(pathから)svg文書群とそのプロパティを親文書(parentSvgDocId)の子文書(id)として読込み、指定されたHTML要素(parentElem)に貼り付ける
======matMul======
*matMul( m1 , m2 ) : 行列の積 x',y' = m2(m1(x,y)) = m(x,y) となる変換行列を構築
======numberFormat======
*numberFormat( number , digits ) : 指定された数値(number)を小数点以下第digit+1位を四捨五入した値を取得
======override======
*[OBSOLUTEWD] override( mname , mval ) : グローバルオブジェクトの関数プロパティでmnameという変数にmvalの値を代入する

======panMap======
* panMap( x, y, options ) : 地図をスムースにスクロールさせる
** x,y : パン量デフォルトはpx
** option.unit でパン量のコンテキストを変化できる
*** "%"||"percent"||"ratio" : 地図キャンバスに対する相対値で指定 (%,percentはパーセント, ratioは比率)
*** "canvas" : 地図キャンバス上の指定した座標を地図中心に
*** Note: 地理座標でパンする場所を変えたい場合は[[#geo2Screen]]を併用すると良い

======parseEscapedCsvLine======
*parseEscapedCsvLine(csv) : CSV 1行分文字列データ(csv)をエスケープを考慮して配列にパースする。
======refreshScreen======
*refreshScreen() : 画面の再描画を実行する（[[解説書#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90|参考情報]]）

======registLayerUiSetter======
*registLayerUiSetter( layerUIinitFunc, layerUIupdateFunc ) : レイヤー選択UI初期化関数と更新用関数を設定する
======reLoadLayer======
*reLoadLayer(layerID_Numb_Title) : 指定したレイヤー([[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーのみ。小孫レイヤーはNG)をリロードする
======resumeToggle======
*resumeToggle(evt) : 引数のイベント(evt)ターゲットのチェックボックスのチェック状態により、setResumeを実行する
======screen2Geo======
*screen2Geo( screenX , screenY ) : 画面上の座標(px)を指定すると、その地理座標を返す
======setCenterHitTest======
*setCenterHitTest(enable) : 自動中心ヒットテストの設定を変更するデフォルト:true

======setCursorCenterZooming======
*setCursorCenterZooming(enable) : (カーソル|ピンチ)位置中心ズーム機能を設定するデフォルト:false

======setCustomModal======
*setCustomModal( messageHTML , buttonMessages , callback,callbackParam) : モーダル画面を出現させ、指定されたメッセージ(messageHTML(String)もしくはdomオブジェクト(Object))、指定されたボタン(buttonMessages(Array))を表示する。ボタンが押された場合、コールバック関数(callback)を引数(クリックしたボタンのインデックス, callbackParam)を渡し呼び出す。
messageにHTML Stringだけではなく、DOM objectが使える点、ボタンに対するcallbackを設定できる点。ただしモーダルダイアログになる点が[[#showModal]]と異なる。

======setDefaultHilightStyle======
*setDefaultHilightStyle( style ) : ヒットテストなどによるオブジェクトのハイライト時のスタイルを設定する
* style : {stroke:{color,widthIncrement}, fill:{color,lineWidth,lineColor}}
** stroke : 線オブジェクトに対してハイライト時の色(color)と線幅増分(widthIncrement)
** fill : 塗りつぶしオブジェクトに対してハイライト時の色(color)、輪郭線幅(lineWidth)、輪郭線色(lineColor)

======setDevicePixelRatio======
*setDevicePixelRatio( dpr (, layerId) ) : zoom計算時に用いる(たとえば２にするとzoom値が本来の２分の１になる)変数を指定値(dpr)に設定する。ズームに応じた表示制御(visible*zoom属性等のLevel of Detail機能)に影響を与える。オプションの[[#getLayerId|layerId]]を指定すると、指定したlayerに対して別個の値を設定する。dprにnullを与えると初期値(1)にクリア。

======setGeoCenter======
*setGeoCenter( lat , lng , radius) : 中心地理座標を指定して地図を移動 (radiusは緯度方向の度1≒110Km) lat,lng:必須 radius:オプション(今の縮尺のまま移動)
======setGeoViewPort======
*setGeoViewPort( lat, lng, latSpan , lngSpan , norefresh) : 地理(グローバル)座標系で指定したエリアを包含する最小のviewportを設定する
======setLayerVisibility======
*setLayerVisibility([[#getLayerId|layerID]]_Numb_Title, visivility, [options]) : 指定した[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーの表示非表示を設定し、layerListUIのアップデートも行う
** layerID : String: [[#getLayerId|layerID]]のの文字列
** visivility : Boolean
** options : Object　以下のメンバー変数でオプションの指定が可能
*** .exec : String : 指定したレイヤーがレイヤー固有UIを持つ場合、その起動を指定できます。与えることができる文字列は[[#.E8.A9.B3.E7.B4.B0|data-controllerの起動オプション]]と同じ。
*** .hash : 指定したレイヤーを表示するときにハッシュ値を設定する

======setMapCanvas : ======
*setMapCanvas : ( mc ) : 地図キャンバスとなる、おおもとのdiv要素を指定した要素(mc)に設定
======setMapCanvasCSS======
*setMapCanvasCSS(mc) : マップキャンバスのCSS(postion、overflow、top、left、width、height)を設定
======setMapCanvasSize======
*setMapCanvasSize( mcs ) : 地図キャンバスのサイズを指定したサイズ(mcs)に設定
======setPreRenderController======
*setPreRenderController( layerID, cntFunc ) : 再描画(画面更新)シーケンスの直前に実行する関数(cntFunc)を設定する。　[[#getLayerId|layerID]]が指定されていると、そのIDをもつSVG文書に対して設定する。指定されていない場合は、全てのSVG文書に対して指定した関数が描画前に実行される。cnfFuncが無い場合は設定を解除する。また、cntFuncには再描画前制御の際に必要になるかもしれないいくつかの変数が第一引数にオブジェクトの形で渡される。(docId,scale,actualViewBox,geoViewBox,viewChanged(zoom|scroll|false) なお、SVGMapLayerUI.jsが有効化されている場合、[[#.E6.8B.A1.E5.BC.B5API|レイヤ固有UIのhtml文書中のscript内にpreRenderFunctionという関数]]がある場合、そのレイヤーを指定したsetPreRenderControllerでの関数設定と同じ振る舞いをする。なお、この処理内容は、動的レイヤー(<script>を持つSVGコンテンツ)のonload関数と同じタイミングで呼び出される関数をレイヤ固有UI等に設置できるものと考えると良い。

======setResume======
*setResume( stat ) : レジュームを実行するかどうかを引数(stat)によって設定し、cookieにレイヤー情報を保存する
======setRootLayersProps======
*setRootLayersProps(layerID_Numb_Title, visible , editing , hashOption , removeLayer , execOption ) : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の(animetion||iframeで構成される)レイヤー情報を設定する。[[#getLayerId|layerID]]_Numb_Titleは、レイヤー番号(root svg container内での順番)、[[#getLayerId|layerID]](svg文書のiid = htmlのid = selectのvalue)、タイトル名(不確実-同じ名前があるかもしれない。最初に当たったものを選択)。変化があるとtrueが返却される。
*visible , editingはtrue,false,nullのいずれか。nullの場合、その値を変化させないという意味。もしくは不合理の場合はfalseが返却される。この時classで設定されているレイヤーグループの特性(switch)に基づいた制御がかかる
*hashOption 指定したレイヤーを表示するとき、ハッシュを指定して表示する
*removeLayer 指定したレイヤーを消去する
*execOption レイヤ固有UIを持つレイヤーを表示する場合の起動方法を指定："hiddenOnLayerLoad", "onClick", "appearOnLayerLoad"のいずれか。[[#.E8.A9.B3.E7.B4.B0|詳細はこちらを参照]]

*setLayerVisibilityと異なり、アップデート(refreshScreen())は別途行う必要がある

======setRootViewBox ======
*setRootViewBox ( rvb ) : aspectを加味し実際に開いているコンテナsvgのviewBoxを指定したコンテナsvgのviewBox(rvg)に設定*setShowPoiProperty( func , docId ) : 特定のレイヤー・svg文書(docId)もしくは、全体に対して別のprop.表示関数(func)を指定する。funcが未指定の場合、設定された関数をクリアする。指定した関数は、帰り値がfalseだった場合、デフォルトprop.表示関数を再度呼び出す
======setShowPoiProperty======
*setShowPoiProperty(func , docId ): 特定のレイヤー・svg文書(いずれもdocIDで指定)もしくは、全体に対してPOIをクリックした時の表示関数をセットする
**セットされていないときは内蔵のデフォルト関数が使用される
**docId: セットされていないときはすべてのレイヤの docIdがルートレイヤに対応するものの場合はそのレイヤー下の子孫文書に対しても
**func: コールバック関数
*** funcがセットされいていないときはクリアする
*** funcの第一引数にはクリックされた要素が入る

======setSmoothZoomInterval======
*setSmoothZoomInterval(zoomInterval) : ズームアニメーションの設定(ズームイン／アウト後のタイル読み込み開始タイマー(ms))(Default:20ms)
======setSmoothZoomTransitionTime======
*setSmoothZoomTransitionTime(zoomTransitionTime) : ズームアップ[[#zoomup]]／ダウン[[#zoomdown]]／パン[[#panMap]]時の遷移時間(Default:300ms)

======setSummarizeCanvas======
*setSummarizeCanvas( val ) : 2Dベクトル図形描画用に統合キャンバス(レイヤー単位でのキャンバス統合)の使用有無を設定する。デフォルトは統合する
======setUpdateCenterPos======
*setUpdateCenterPos(func) : 中心座標書き換え関数を指定した関数に設定(デフォルト:id="centerPos"要素の文字列を適当に書き換える)
======setProxyURLFactory======
*setProxyURLFactory( documentURLviaProxyFunction, imageURLviaProxyFunction, imageCrossOriginAnonymous, imageURLviaProxyFunctionForNonlinearTransformation, imageCrossOriginAnonymousForNonlinearTransformation, LaWAfetchviaProxyFunction ): コンテンツの取得をプロキシ経由等にするために、URL(文字列)を書き換える関数を指定する。
** documentURLviaProxyFunction : svgドキュメント用のプロキシ経由のURLを生成する関数をここに設定する。<code>URLviaProxy = documentURLviaProxyFunction(URL)</code>
** imageURLviaProxyFunction : 同ビットイメージ用
** imageCrossOriginAnonymous : ビットイメージのコンテンツ取得に際しcrossorigin = "anonymous"を設定
** imageURLviaProxyFunctionForNonlinearTransformation: ビットイメージへの非線形図法変換専用のプロキシ経由URL生成関数を設定する。
** imageCrossOriginAnonymousForNonlinearTransformation : 同上のコンテンツ取得に際しcrossorigin = "anonymous"を設定
** LaWAfetchviaProxyFunction : [[#レイヤー固有ユーザインターフェース|LaWA]]内のFetch/XHRに対してプロキシ経由URL生成関数を設定する。
** 参考：[[#.E3.83.97.E3.83.AD.E3.82.AD.E3.82.B7.E3.81.AE.E8.A8.AD.E5.AE.9A|クロスオリジンアクセスのためのプロキシ設定]]

======setZoomRatio ======
*setZoomRatio ( ratio ) : zoomUp、zoomDownボタン押下時のズームレシオを指定した値(ratio)に設定する
======showModal======
*showModal( htm , maxW, maxH) : ダイアログ表示フレームワークを呼び出し、指定したhtm文字列を最大maxW,H値の中で表示する。closeボタンはフレームワークで設置される（参考[[#setCustomModal]]）（API名に反して、この関数はモーダルダイアログではない、ダイアログボックスの挙動を取る）
** htm：ダイアログ内に表示するhtmlのソース文字列、もしくはHTML DOM Elementオブジェクト
** maxW, maxH : Optional: ダイアログのサイズ（もしウィンドサイズに収まらない場合は、このサイズを下回ることがある。指定されていない場合はhtmの内容をベースにサイズが変化する


======showPage======
*showPage( hyperLink ) : 指定されたハイパーリンク先のページを表示する。ハッシュだけの場合は viewPort変化をさせる
======showUseProperty======
*showUseProperty( target ) : 指定されたPOI( target )の属性情報を表示する
======transform ======
*transform ( x , y , mat , calcSize , nonScaling) : 指定された座標を変換する。
======updateLayerListUI======
*updateLayerListUI() : レイヤーリストのUIの表示を更新したりレイヤー固有UIを設定したりする
** '''[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のsvgmap文書をDOMで直接編集したり、setRootLayersPropsで操作した場合、この関数を呼ばないとレイヤ固有UIが正しく設定されないなど多くの処理が破綻するので、必ず呼ぶ必要がある。(近い将来refreshScreenで自動的に反映されるようにする予定)'''

======zoomdown======
*zoomdown( ratio ) : 地図をスムースにズームダウン
** ratioはオプション(デフォルトは1.732)

======zoomup======
*zoomup( ratio ) : 地図をスムースにズームアップ
** ratioはオプション(デフォルトは1.732) (デフォルトは[[#setZoomRatio]]で変更可)

=====svgMapAuthoringTool.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_Authoring_r*.jsを用いた場合に使える
======cancelPointingPoiRegister======
* cancelPointingPoiRegister: initPOIregistToolで設置したUIの地図クリック・タッチでの座標入力イベント(click, touchend)をキャンセルする
======clearTools======
*clearTools: オーサリングツールを除去する。
======initGenericTool======
*initGenericTool(targetDiv,poiDocId,cbFunc,cbFuncParam,options): 点、線、多角形（オプションでそれらのバッファ付き）の総合オーサリングツールを初期化する。
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** options: {withBufferedTools,editingStyle,shapeStyle}　その他オプションをオブジェクトで指定(Optional)
*** withBufferedTools: boolean: trueでバッファ付きツールを追加
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルをブジェクトで指定
*** editingStyle: {opacity,strokeWidth,stroke,fill}：編集中の表示スタイルをブジェクトで指定
*** useXlinkTitle: trueでタイトル編集欄付きツール (Pointツールには影響しない)
*** styleEditor: trueでスタイル編集UI追加

======initPOItools======
*initPOItools(targetDiv,poiDocId,cbFunc,cbFuncParam,getPointOnly,returnSvgElement,options)　: 複数のPOIを編集するツールを初期化する (このツールは一個しか設置できない)
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** getPointOnly : ポイントを取得するのみで、その点にuse要素を設置することはしない(Optional)
** returnSvgElement : trueで編集したSVG要素などがコールバック関数に構造化され返却される(Optional)
** options : {bufferOption,editingStyle,shapeStyle}: その他のオプションをオブジェクトで指定(Optional)
*** bufferOption : trueでバッファ付きツール
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルを指定 (buffer指定時に有効)
*** styleEditor: trueでスタイル編集UI追加

======initPOIregistTool======
*initPOIregistTool(targetDiv,poiDocId,poiId,iconId,title,metaData,cbFunc,cbFuncParam,getPointOnly,returnSvgElement): 一個のPOINTオブジェクトの登録ツール・座標入力ツールを初期化する
** initPOItoolsと異なりこちらのツールは複数個設置できる
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** poiId : 登録するPOIのIDを指定
** iconId : 対象文書内のアイコンのIDを指定
** title : アイコンのタイトルを指定
** metaData : アイコンのメタデータ文字列を指定
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** getPointOnly : ポイントを取得するのみで、その点にuse要素を設置することはしない(Optional)
** returnSvgElement : trueで編集したSVG要素などがコールバック関数に構造化され返却される(Optional)
======initPolygonTools======
*initPolygonTools(targetDiv,poiDocId,cbFunc,cbFuncParam,isPolylineMode,options): POLYGONオブジェクトの"編集"ツール新規追加、削除、変更などが可能　ただし一個しか設置できない
** コンテナsvgコンテンツでclickable及びeditableを設定したレイヤーで再編集可能
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
*** 第一引数に成否、第二引数にcbFuncParam が入る。作成したPOIの情報は、SVGDOMから得るか、指定したdiv内に生成されているフォームから得る（少し使いづらいので、今後もう少し便利にするかもしれません）
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** isPolylineMode : ポリゴンではなくポリラインの編集ツールとする
** options : {bufferOption,editingStyle,shapeStyle}: その他のオプションをオブジェクトで指定(Optional)
*** bufferOption : trueでバッファ付きツール
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルを指定
*** editingStyle: {opacity,strokeWidth,stroke,fill}：編集中の表示スタイルを指定
*** useXlinkTitle: trueでタイトル編集欄付きツール
*** styleEditor: trueでスタイル編集UI追加

======setTargetObject======
*setTargetObject: TBD プログラムから編集対象オブジェクトを指示する（ただし編集中レイヤのオブジェクトに限る）
======isEditingGraphicsElement======
*isEditingGraphicsElement: 編集中のオブジェクトがあるかどうかを確認する

=====svgMapGIStool.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_GIS_r*.jsを用いた場合に使える。なお本機能拡張はJSTS([https://unpkg.com/jsts@1.6.1/dist/jsts.min.js jsts.min.js])の読み込みがさらに必要。

====== 参考：JSTS ======
[https://github.com/bjornharrtell/jsts/ JSTS](JavaScript Topology Suite)は、[https://github.com/locationtech/jts JTS](Java Topology Suite)をjavaScriptに移植した地理空間情報処理ライブラリです。地理空間情報の標準に準拠したAPIを備えています。
* [https://github.com/bjornharrtell/jsts JSTSのプロジェクトページ]
* [http://locationtech.github.io/jts/javadoc/ API](JTS用、JSTSもこれに準ずる)
* [https://www.tsusiatsoftware.net/jts/files/JTS_Library_for_Geometry_2011.pdf JTSの機能概要スライド]

====== buildDifference======
* buildDifference( sourceId1, sourceId2, targetId , strokeColor, strokeWidth, fillColor, progrssCallback, getResultAsGeoJsonCallback,getResultAsGeoJsonCallbackParam)
** JSTSのDifferenceを実行
** 引数はbuildIntersectionの該当引数に対応

======buildIntersection======
*buildIntersection( sourceId1, sourceId2, targetId , strokeColor, strokeWidth, fillColor, progrssCallback, addSourceMetadata, getResultAsGeoJsonCallback, getResultAsGeoJsonCallbackParam, options )
** sourceId1とsourceId2のレイヤーに対してJSTSのIntersectionを実行し、結果をtargetIdレイヤーにコンテンツとして出力する。性能はgetIncludedPointsより低いことが多い intersection処理の振る舞いは[https://bjornharrtell.github.io/jsts/ JSTSを参照]
** sourceId1: sourceId1レイヤーのレイヤーID
** sourceId2: sourceId2レイヤーのレイヤーID
** targetId : targetId レイヤーのレイヤーID
** strokeColor : 線の色 (なお、strokeColor, strokeWidth, fillColor のいずれも指定ない場合は描画しない(getResultAsGeoJsonCallbackがあればそこに結果を変換するのみ))
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** progrssCallback: 変換途中の状況が返されるコールバック関数。
** addSourceMetadata: sourceId1とsourceId2の各図形要素に付随しているメタデータ(contentアトリビュートの値)を演算結果の該当する図形要素に結合して付加する。
** getResultAsGeoJsonCallback: 演算結果をgeoJsonで返却を受けたい場合にコールバック関数を指定する。第一引数に結果が返る
** getResultAsGeoJsonCallbackParam : 上記コールバック関数に送りたい引数(第二引数に入力される)
** options: その他のオプションを指定するオブジェクト(下記、メンバ変数)
*** uniteSource1: trueでsourceId1のジオメトリ群をuniteしてから演算する
*** uniteSource2: trueでsourceId2のジオメトリ群をuniteしてから演算する
*** areaCompare: trueで演算結果と元のジオメトリとの面積比をメタデータに付与
*** resultGroupId: 演算結果を生成するグループを指定
*** opacity: 透明度

======captureGeometries======
*captureGeometries( cbFunc , opt ) : svgMap.captureGISgeometriesの引用
====== coverageImageXY2LatLng======
* coverageImageXY2LatLng(pixWidth , pixHeight, px,py,targetCoverage) : ビットイメージカバレッジのピクセル座標から地理座標を算出する関数
** pixWidth, pixHeight : ビットイメージカバレッジのサイズ
** px,py : ビットイメージカバレッジのピクセル座標
** targetCoverage : getInRangePolygonParts で得られた返り値を設定する
====== drawGeoJson======
* drawGeoJson( geojson , targetSvgDocId, strokeColor, strokeWidth, fillColor, POIiconId, poiTitle, metadata, parentElm, metaDictionary) : geojsonのgeomerty を指定したレイヤーに描画する
** geojson : geojson データのgeopmetry
*** メタデータ : メタデータはgeojsonの本来のメタデータ仕様(type:Featureのオブジェクトにpropertiesを設置する)で設定可能
**** また、連想配列もしくは配列の形で、関数の呼び出し時のmetadataパラメータでデフォルトのメタデータを指定できる。
**** また、geoJSONの任意のデータ階層にmetadataプロパティとしても埋め込める。
**** 加えて、propertiesを同様に任意のデータ階層に設定できる(この場合、上の階層の値は下の階層の値で上書きされる)
*** スタイリング : メタデータ仕様を拡張した、geojsonの[https://github.com/mapbox/simplestyle-spec mapbox拡張仕様]に基づいて、描画スタイルを各Featureに設定可能　上記の拡張properties拡張により、デフォルト描画スタイルを設定することも可能。
**** marker-sizeは未実装。marker-symbolではsvgコンテンツのdefsで登録済みのアイコンのIDを指定する。
**** 参考: properties.で設定できる、スタイル属性名: <code>title, description, marker-size, marker-symbol, marker-color, stroke, stroke-opacity, stroke-width, fill, fill-opacity</code>
** targetSvgDocId : 描画先のレイヤーID
** strokeColor : 線の色
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** POIiconId :　Pointの場合のアイコンID(あらかじめ指定した描画先のレイヤーのコンテンツに該当IDのアイコンが定義されている必要がある)
** poiTitle : POIのタイトル
** metadata : POIのメタデータ（連想配列）
** parentElm : (Optional) 指定した要素の子要素として描画
** metaDictionary: (Optional) メタデータとして要素に埋め込みたい属性名のリストを配列で指定する（これ以外の属性は無視するようになる）

====== drawKml======
* drawKml( kml , targetSvgDocId, strokeColor, strokeWidth, fillColor, POIiconId, poiTitle, metadata, parentElm,styleData) : KMLを指定したレイヤーに描画する
** KML : KML 描画するKMLデータのXML DOM
** targetSvgDocId : 描画先のレイヤーID
** strokeColor : 線の色
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** POIiconId :　Pointの場合のアイコンID(あらかじめ指定した描画先のレイヤーのコンテンツに該当IDのアイコンが定義されている必要がある)
** poiTitle : POIのタイトル
** metadata : POIのメタデータ文字列
** parentElm : (Optional) 指定した要素の子要素として描画
** styleData : TBD

====== getBufferedPolygon ======
* getBufferedPolygon(geom,bufferLength) : 任意のジオメトリ(geom)に対して、指定のバッファ長[m]のポリゴンジオメトリを生成する。
** Note: [[#captureGISgeometries]]で取得したデータ等も演算対象にすることができる。

====== getColorString ======
* getColorString(r,g,b) : r,g,b値から、webColor文字列を生成する

======getExcludedPoints======
*getExcludedPoints(poiID, polyID, cbFunc, param , progrssCallback , pointOnly ) : 指定したpoiID検索対象レイヤーのうち、指定したpolyIDポリゴンコンテンツレイヤーのポリゴンに内包されないものを抽出する。
** パラメータはinverseを除きgetIncludedPointsと同じ。
====== getImage======
* getImage(sourceData, renderingOptions ) : メッシュデータからビットイメージ(mage/pngのdataURL)を生成
** sourceData : 以下のデータ構造を持つオブジェクト
*** width, height メッシュのピクセル数
*** rasterData[py][px] 以下のデータ構造を持つオブジェクト
**** color 以下のデータ構造を持つオブジェクト
***** r,g,b,a
**** inRange : boolean
** renderingOptions : 以下のデータ構造を持つオブジェクト
*** drawOutOfRange : boolean レンジ内ではなくレンジ外を描画する
*** fillColor : boolean 上記条件のピクセルを指定した色で描画する
*** useCoverageColor 上記条件のピクセルをカバレッジの色で描画する

====== getImagePixelData======
* getImagePixelData(capturedSvgMapGeometry, callBackFunction, param) : ラスタ画像のビットマップデータを取得する。
** capturedSvgMapGeometry : [[#captureGISgeometries|captureGISgeometries]]で取得したビットイメージカバレッジのジオメトリ情報をもとに取得する
** callBackFunction : 取得したビットイメージデータが引数に渡される
*** data : RGBA intArray ( CanvasのContext.getImageData(...).dataで得られる情報と同様のデータ)
*** width
*** height
*** param : getImagePixelDataの第三引数がそのまま渡される

====== getIncludedPoints======
* getIncludedPoints(poiID, polyID, cbFunc, param , progrssCallback , inverse , pointOnly ) : 指定したpoiID検索対象レイヤーのうち、指定したpolyIDポリゴンコンテンツレイヤーのポリゴンに内包されるものを抽出する。
** poiID : 検索対象コンテンツレイヤーのレイヤID
** polyID : ポリゴンコンテンツレイヤーのレイヤID
** cbFunc : 検索完了後の結果を返却するコールバック関数　第一引数にポイントがGeoJasonのGeometry形式で返却され、第二引数にその個数、第三引数に(あれば)下記paramが返却される
** param : cbFuncに渡す任意パラメータ(第三引数に入る)
** progrssCallback : 変換途中の状況が返されるコールバック関数。　変換中　時々呼び出され、変換状態[%]が第一引数に渡される。
** inverse : trueで getExcludedPoints
** pointOnly : trueの場合検索対象コンテンツレイヤーのジオメトリがPoint以外の物は無視、false(もしくは未設定)の場合はPolygonやMultiLineStringのデータの場合中心点をPointと見立てて検索なお、ポリゴンやポリラインのしっかりした処理を期待する場合は下記のbuildIntersectionを使用すべき。
====== getInRangePoints======
* getInRangePoints(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : 検索対象のPointジオメトリが、検索条件としてのラスターデータ(カバレッジ)の特定色域に入っているものを検索する（ラスターGIS機能）
** poiID_or_points : 検索対象のPointジオメトリのあるレイヤIDもしくは、geoJsonのPointジオメトリ自体
** coverIDラスターデータ(カバレッジ)のレイヤーID
** rangeData : 色域 .hue, .satulation, .value, .alphaをそれぞれ指定する
*** hue: 0..360
*** satulation, value, alpha : 0..100
*** .hue, .satulation, .value, .alphaそれぞれのレンジは<nowiki>[[range1Min,Max],[range2Min,Max],...[rangenMin,Max]]</nowiki>の形で指定する。
*** データがない場合のデフォルトは<nowiki>{hue:[[0,360]],satulation: [[10,100]],value:[[10,100]],alpha:[[10,100]]}</nowiki> : アルファが10以上の全ての色
*** .outOfBoundsColor : TBD {r:255,g:0,b:0} の形で色を指定するとその色のピクセルは領域外(存在しないもの)として評価をスキップする
** cbFunc : 検索完了後の結果を返却するコールバック関数　第一引数にポイントがGeoJasonのGeometry形式で返却され、第二引数にその個数、第三引数に(あれば)下記paramが返却される
** param : cbFuncに渡す任意パラメータ(第三引数に入る)
** progrssCallback : 変換途中の状況が返されるコールバック関数。　変換中　時々呼び出され、変換状態[%]が第一引数に渡される。
** preCapturedGeometry : svgMap.captureGISgeometries()であらかじめ取得したgeometryがある場合、それを投入するとそれを用いて処理する
** computingOptions : getInRangeGeometriesOnCoverageを参照
====== getInRangeLineParts======
* getInRangeLineParts(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : ラインストリングジオメトリ用のラスターGIS機能パラメータはgetInRangePoints()と同じ
====== getInRangePolygonParts======
* getInRangePolygonParts(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : ポリゴンジオメトリ用のラスターGIS機能パラメータはgetInRangePoints()と同じ

====== getInRangeGeometriesOnCoverage======
* getInRangeGeometriesOnCoverage(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry, computingOptions ) : getInRange*を包含する関数
** computingOptions.targetVectorTypeで以下を設定することでそれぞれの機能を動かすことができる
*** 0:point,1:polyline(multiLineString),2:polygon
** computingOptions:
*** overlappingCoverage : "or"
*** splitByCoverage : boolean カバレッジが複数のビットイメージ(タイル)で構成されている場合、タイルごとに分割した答えを返す
***
====== haltComputing======
* haltComputing() : getIncludedPoints, getExcludedPoints, buildIntersectionを中断する
====== imageUrlEncoder ======
* imageUrlEncoder : オリジナルのURLから、setImageProxyの設定を加味したURLを生成する関数
====== latLng2coverageImageXY======
* latLng2coverageImageXY(pixWidth , pixHeight, lng,lat,targetCoverage) : 地理座標からビットイメージカバレッジのピクセル座標を算出する関数
** pixWidth, pixHeight : ビットイメージカバレッジのサイズ
** lng,lat : 地理座標
** targetCoverage : getInRangePolygonParts で得られた返り値を設定する
====== latLng2GeoJsonPoint======
* latLng2GeoJsonPoint(lat , lng ) : 緯度経度をGeoJsonのPointジオメトリに変換する
====== renderImages ======
* renderImages(sourceDataArray, parentElment, crs, renderingOptions) : ビットイメージカバレッジ×ポリゴンGIS(getInRangePolygonParts)の結果を直接可視化する
**sourceDataArray : [[#getInRangePolygonParts]]の結果を設定
**parentElment: SVGMapコンテンツ内で描画する親要素を設定
**crs: 描画するSVGMapコンテンツのCRS matrix(a,b,c,d,e,f)を設定
**renderingOptions : [[#getImage]]を参照

====== setImageProxy======
* setImageProxy( url , directURLls , useAnonProxy): getInRangePointsは、canvasを使った処理のため、CORSの制約にかかる場合、proxyを設定して回避できる。
** url : encodeURIComponent()でエンコードしたカバレッジのレイヤーのビットイメージのURLを付加すると、proxyとしてimageを返却してくれるURL文字列を指定
** directURLls : proxyを使わず直接アクセスするコンテンツを判定するための文字列の配列（この文字列のどれかが含まれていたら直接アクセス）
** useAnonProxy : Image.crossOrigin = "anonymous"を指定してアクセスする

====== hsv2rgb ======
* hsv2rgb(h, s, v) : hsv値からrgb値の色情報変換
** h (hue): 0..360
** s (saturation): 0..100
** v (value): 0..100
** 帰り値 : {r,g,b}: いずれも0..255

====== rgb2hsv ======
*rgb2hsv(r, g, b): RGB値からHSV値の色情報変換
** rgb: いずれも0..255
** 帰り値:{h,s,v}
*** h:0..360
*** s,v: いずれも0..100

=====svgMapLayerUI.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_LayerUI2_r*.jsを用いた場合に使える。
======assignLayerSpecificUiElement======
* >r4
* assignLayerSpecificUiElement( targetElement , isInline , autoSizing) : レイヤ固有UIを出力する先のDOM要素を指定する
** この関数は、レイヤーUIの初期化前～[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]読み込み前に呼ばれる必要がある（すなわち、load時のみ有効）
** targetElement : 出力先要素：出力先はsvgMapオブジェクトを持つwindowでなくても良い
** isInline : boolean 指定した要素をインライン要素として扱い、UIが存在しえない場合は消える。レイヤ固有UIを消すボタンも付与される
** autoSizing : boolean 自動リサイズを有効化

======customEvents======
*customEvents() : サポートしているイベントを返却

======launchController======
* >r4
* launchController(layerID, cbf) : レイヤ固有UIを出現させる。ただしそのレイヤーがレイヤー固有UIを持っており、且つ表示状態になっている必要がある。
** [[#getLayerId|layerID]] : レイヤーのID
** cbf (optional) : レイヤー固有UIが生成されたとき、第一引数にレイヤー固有UIのwindowオブジェクトが返却される。

======layerSpecificUIhide======
* layerSpecificUIhide() : レイヤ固有UIを隠す

======setLayerListmessage======
* setLayerListmessage( head , foot ) : head 及び footで指定した文字列を　レイヤリストUIのトップのメッセージに設定する。[head]numberOfVisibleLayers[foot] : デフォルトはhead :"Layer List: ", foot :" layers visible"

=====svgMapPWA.で呼び出せるAPI=====
'''実験的機能段階''' :
; 以下のAPIは、SVGMapLv0.1_PWA_r*.jsを用いた場合に使える。
:- SVGMap.jsをPrpgressiveWebApps(PWA)として動作させ、オフラインでも利用できるウェブアプリを構築することができる。
:- Progressive Web Appsが機能するブラウザで有効。Chrome,Edge(PC,Android), Safari(Apple製品)
:- iOS SafariのPWAネイティブキャッシュの50MB制限を回避するIndexedDBによる実装がなされており、そのクォータが許す限りの(iOSでも数百MB以上の)オフライン地図コンテンツを利用できる
:- 同じく、iOS Safariが持たないsyncの一部を代替する機能(オンラインになったらポストする機能)が利用できる
:- zip圧縮されたオフラインコンテンツパッケージ読み込み機構を使う場合はzip.jsおよびそれが利用するArrayBufferReader.js,deflate.js,inflate.jsの読み込みが必要。
:- <code>serviceWorkerPath</code>グローバル変数で、専用のサービスワーカープログラムsvgMapServiceWorker_r*.jsのパスを指定する必要がある。
::- サービスワーカー～svgMapServiceWorker_r*.jsは、同jsと同じディレクトリにあるbaseResources.jsonを読み込み初期設定を行う
::- baseResources.json：　srcにサービスワーカーネイティブのキャッシュに読み込むべきリソースのリストを記載、mapCacheTargetに、SVGMapのコンテンツキャッシュを稼働させるターゲットとなるパスを記載
::-baseResources.jsonの例
<pre>
{
"src": [
"index.html",
"Container_mercator_org.svg",
"SVGMapLv0.1_PWA_r5.js",
"js/SVGMapLv0.1_r16.js",
"js/SVGMapLv0.1_LayerUI2_r3.js",
"js/SVGMapLv0.1_GIS_r2.js",
"js/SVGMapLv0.1_Authoring_r7.js",
"js/jsts.min.js",
"imgs/gps.png",
"imgs/gps_s.png",
"imgs/Xcursor.png",
"imgs/zoomdown.png",
"imgs/zoomdown_s.png",
"imgs/zoomup.png",
"imgs/zoomup_s.png",
"imgs/mappin.png"
],
"mapCacheTarget":"localMaps/"
}
</pre>

* autoPilotDownloader
*:エリアと縮尺を指定し、オートパイロットで地図画面をスクロールさせることで、オフラインキャッシュに地図を保存する動作を自動的に行う機能のオブジェクト。レイヤー固有UIでの利用などを想定しており、以下のメンバー関数を持つ
** halt()
**:オートパイロット動作を中断させる
** searchAll(initialViewBox, minScale, maxScale)
**:- initialViewBoxで指定したエリアを、minScale、maxScaleの間でオートパイロットをかけキャッシュに保存させる
**:- minScale, maxScaleは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の座標系におけるscale値(getRootScale()で取れるもの)
** setProgressCallBack(cbf)
**:オートパイロット動作中の進行状況をcbfの第一引数に返却する
* async clearOfflineContents()
*:SVGMapのオフラインコンテンツを全消去する。SVGMapのオフラインコンテンツはserviceWorkerのネイティブキャッシュ機構とは別の独自キャッシュ機構(indexedDBを使用した機構)として構築される
* clearCache()
*:（未実装）serviceWorkerのネイティブキャッシュを全消去する
* cacheDB
*:SVGMapのオフラインコンテンツデータベースのオブジェクト。IndexedDBをpromise化した簡略的APIをメンバ関数として持つ。
** clear()
**:データベースをクリア
** async connect()
**:データベースに接続
** async delete(path)
**:pathで指定したコンテンツを削除
** async get(path)
**:pathで指定したコンテンツ(blob)を取得
** async getAll()
**:全コンテンツを取得
** async getAllKeys()
**:全Key(コンテンツのpath)を取得
** async put({idCol:path,contentBlob:blobdata})
**:コンテンツ(blobdata)をpathをキーにして格納(上書き)
* deleteCachedLayerMeta()
* async disableCache()
*:serviceWorkerのネイティブのキャッシュ機構とSVGMapの独自キャッシュ機構を全て無効化する
* async enableCache()
*:serviceWorkerのネイティブのキャッシュ機構とSVGMapの独自キャッシュ機構を全て有効化する
* getCachedLayerMeta
* async getPostQueue()
*:postMessageWhenConnectedでポストをリクエストし、未完了のリクエストを取得する
* getRootScale()
*:svgMapの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]座標系における現在の表示のscaleを取得
* getScales()
*:読み込み済み文書全てのscaleを連想配列で返す(hashKeyはdocID)
* getVisibleLayers
* getStorageUsage
* async loadOfflineContents(contentUrlList, overwrite, progressCallBack)
*:-contentUrlListで指定したコンテンツをオフラインキャッシュに読み込む(自ドメイン内のコンテンツ限定)
*:-overwriteをtrueにすると上書きする。progressCallBackは指定した関数の第一引数に進捗状況を返却
* async loadZippedOfflineContents(zip_url,progressCallBack)
*:保存してあるディレクトリに対して、そのzipファイルの中のディレクトリ構造で、コンテンツがあるものと見做したURLもつキャッシュを形成する
* async postMessageWhenConnected(URL, postData, postCompleteCBF)
*:-postDataデータをURLにポストする　オンライン時は即座にポスト、オフライン時はいったんindexedDBにポストデータを格納後オンラインになったらポストする。
*:-postDataは、文字列(この場合form-data決め打ちのリクエスト)、もしくは .bodyメンバー変数を持ったオブジェクト
*:-この場合は .bodyはFormDataタイプのインスタンスもしくは任意のデータ、そしてfetchAPIに準じた.headers, .methodをメンバー変数に持たせることができる。(methodでGETを指定すればGETリクエストも可能)またserviceWorkerが管理する
* async setCachedLayerMeta
* setScaleTrim
* async updateCacheIndex()

=====svgMapCustomLayersManager.で呼び出せるAPI=====

'''実験的機能段階''' :

基本的なフレームワークで提供されているレジューム機能を更に強化し、レイヤーの表示非表示状態、初期表示エリア(viewPort)等をユースケースなどに応じて複数登録、切り替えを可能とする機能を提供します。更に[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]をさらに積極的に編集し、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルに無いレイヤーを追加したり、削除したりした、カスタマイズされた[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]を差分情報の形でlocalStorageに保存・利用する機能を提供します。

:- 以下のAPIは、SVGMapLv0.1_CustomLayersManager_r*.jsを用いた場合に使用できます。
:- SVGMapLv0.1_CustomLayersManager_r*.jsは、svgMapオブジェクトもつwindowで使用するとともに、svgMapオブジェクト用のカスタムレイヤーセットを構築するための別ページのwebAppsにおいても使用することができます。
:- 上記svgMapオブジェクト用のカスタムレイヤーセットを構築するためのwebApps用としてSVGMapCustomLayersManagerApp_r*.js、SVGMapCustomLayersManager.htmlが用意されています。

*registCustomLayer(customLayerObject, applyImmediately, customLayerMetadata)
*applyCustomLayers(customLayersObject, baseLayersPropertySet)
*getDetailedLayersPropertySet(rootContainerDoc, ignoreIid)
*getDetailedLayersPropertySetFromPath(rootContainerUrl, ignoreIid)
*getDif( edit, orig )
*originalLayersProperty
*deepCopy(obj)
*deleteAllCustomLayerSettings()
*deleteCustomLayerSetting( key )
*setCustomLayerSettingIndex(key)
*buildCustomLayersSetting(difObj, editedLayersProperty, originalLayersProperty)
*loadCustomLayerSettings()
*storeCustomLayerSettings( settings )
*getElementByAttr( XMLNode , searchId , atName )

*applyCustomLayersSettingsToCurrentMapView(lpEdit, svgMapWin)
*loadCustomGeoViewboxes()
*storeCustomGeoViewboxes(customViewBoxes)
*buildCustomGeoViewboxSettingObject(key, title, geoViewBoxX, geoViewBoxY, geoViewBoxWidth, geoViewBoxHeight)

====起動URLによるオプション指定====
svgMapフレームワークを導入したhtmlコンテンツは、URLの"#"以降であるフラグメント識別子によってフレームワークにいくつかの起動時オプションを提示することができます。
通常、これらのオプションは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]における記述で示されています。フラグメント識別子による指示はそれをオーバーライドします。
一般的な"&"による区切りで複数の複数のパラメータを指定できます。
=====表示範囲の指定=====
global座標系によって表示範囲を指示することができます。　標準のフラグメント記述に対してそれぞれ"global"文字列の追加が必要です。
なおglobal座標系におけるxは一般的に経度、yは一般的に緯度に対応することに留意してください。
*メディアフラグメントによる指定 : xywh=global:<xmin>,<ymin>,<width>,<height>
*svgViewフラグメントによる指定 : svgView(viewbox(global,<xmin>,<ymin>,<width>,<height>))

=====表示・非表示レイヤーの指定=====
* 表示すべきレイヤー: visibleLayer=<layer title>,<layer title>...
* 非表示すべきレイヤー: hiddenLayer=<layer title>,<layer title>...
* 個々のレイヤーに対するフラグメントの提示 : それぞれのレイヤーに対しては、さらにフラグメントを追加することができます。ただし"="は"%3D",&は"%26"でURLエンコードしてください。<layer title>#fragment1=val1&fragment2=val2　⇒<layer title>#fragment1%3Dval1%26fragment2%3Dval2　

===レイヤー固有のUI===
"[https://satakagi.github.io/mapsForWebWS2020-docs/De-centralizedWebMapping.html#:~:text=To%20achieve%20this,everything%20in%20detail. Layers as WebApps]"(ウェブアプリケーションとしてのレイヤー: webApp Layer)を実現する機構　（LaWA、レイヤーwebApp、webAppレイヤー、アプリレイヤー、レイヤーアプリなどと呼ぶこともある）（[[#レイヤー固有ユーザインターフェース|こちらも参照]]）

====概要====
[[#レイヤー|レイヤーsvgコンテンツ]](フレームワークが最初に読み込むコンテナsvgコンテンツの中で埋め込まれるsvgコンテンツ)に対して、[[#動的な地図レイヤー|動的な地図レイヤー]]の一種として、そのレイヤーに固有の処理ロジックや、可視化・描画ロジック　そしてユーザインターフェースも含むことができる　htmlによるウェブアプリを定義できる機能です。

javascriptを使った独自のロジックによる動的な可視化データの生成が実装可能です。

また、この機能はそのレイヤーの設定やインタラクティブ操作のための表示やユーザインターフェースを地図表現とは別に表示したい場合にも用いることができます。従来のアーキテクチャでは、もしもこのようなレイヤーに固有のUIが必要だった場合でも、地図アプリケーション全体の処理や表示を司るグローバルな空間(ルートhtmlコンテンツのwindowオブジェクト直下)に、サイドエフェクトを考慮しながらコードを組み込む必要があり、結果としてコードのスパゲッティ化が懸念されました。SVGMapのレイヤー固有UIは、レイヤーごとにUIとそのロジックをカプセル化可能にし、これを排除することが可能です。(カプセル化はiframeによって行われます。)さらに、レイヤー固有UIによるウェブアプリは自律分散的な配置にも対応し、UIを備えた地図レイヤーにまでハイパーレイヤリングアーキテクチャを拡張します。

なお、[[#動的な地図レイヤー]]は、htmlによるユーザーインターフェースを持つことができませんが、同種のウェブアプリケーションのカプセル化の効果があります。

このＵＩには主に二つの用途が考えられます。
;凡例
: 各レイヤーはその地図表現の意味を示すための固有の凡例を持つことがあります。その凡例を表示するために利用できます。
;ウェブアプリケーションによる動的な地図レイヤー
: 先述のように、ウェブアプリケーションによる動的な地図レイヤーは独自のロジックによってそのレイヤーの地図表現を動的に変化させる機能を備えることができます。この場合、例えばエンドユーザがFORMで入力したフィルター条件ををもとに表現を変更するようなケースも考えられます。
これらケースでは、そのフォームや凡例は、[[#フレームワークの呼び出し|ルートhtml文書]]に設置することは可能ですが、もしも多くのレイヤーを表示するアプリケーションであり、それらのレイヤーがそれぞれ固有のフィルタ条件を持つような場合、[[#フレームワークの呼び出し|ルートhtml文書]]は、それぞれのレイヤーをフィルタリングするためのFORMとそのフィルタリングロジックをすべて埋め込む必要があり、画面のデザイン、およびロジックのコーディングの双方がスパゲッティ化する可能性があります。さらに、もしもこのアプリケーションに後日さらにレイヤーが追加される場合、スパゲッティ化の問題はより深刻になるかもしれません。凡例の表示についても同様の問題が考えられます。本レイヤー固有ＵＩはこのような問題に対するソリューションを提供しています。

この機能は、ベースのフレームワークrev12以上　且つLayerUI2フレームワークを読み込み、[[#レイヤー固有のUI(後述)を設置するdiv要素|id="layerSpecificUI"のdiv要素]]が[[#フレームワークの呼び出し|ルートhtml文書]]に設置されているときに使用できます。

;サンプル
:[[チュートリアル#WebApp_Layer.E7.B7.A8|開発者向けチュートリアル]]でいくつかのサンプルを見ることができます。

====[[#レイヤー|レイヤーsvgコンテンツ]]での指定====
レイヤー固有UIの設置には、[[#レイヤー|レイヤーsvgコンテンツ]](のルート要素(svg要素))に、data-controller属性を与え、そこにそのレイヤー固有のUIのためのhtml文書のリンク(ただしsame origin)を設置します。またサブセットとして、data-controller属性にビットイメージ(.pngもしくは.jpg, .jpeg, .gif拡張子を持つビットイメージ)へのリンクを与えることでレイヤーの凡例情報の提示をすることもできます。

[[#レイヤー固有のUI(後述)を設置するdiv要素|レイヤー固有ＵＩの表示部位]]には、このように指定されたリソース(ビットイメージもしくはhtml)がレイヤーの選択の状況に応じて、切り替わり表示されます。レイヤーがONになっている間、それに紐付けられたレイヤー固有UI(htmkのwindowオブジェクト)が存在し続け、そのレイヤーのsvgDOMの操作やUIの提供が可能です。

なお、標準のフレームワークでは、表示中のレイヤーの中の選択された一つのUIのみが地図のメインのwindowに配置されたiframeで表示されます。表示中ではあっても選択されていないレイヤーのUI(iframe)は非表示状態で動作しています。

'''サンプル'''
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="9000.0 -9000.0 9000.0 9000.0" go:dataArea="9000.0 -9000.0 9000.0 9000.0"
'''data-controller="../Self-GS-POI_controller.html"'''>
.....

====レイヤー固有のUIのためのhtml文書(webApp)の構造・作法====
レイヤー固有のUIとなるhtml文書は、下記の通り、その初期化等を行うライブラリ <code>svgMapLayerLib.js</code> を読み込む必要があります。（現在のところ通常のjavascriptライブラリのみ提供されます）
CDNからライブラリを読む場合は、<code>https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/svgMapLayerLib.js</code>です。

'''サンプル'''
<!doctype html>
<html>
...
<script src="https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/svgMapLayerLib.js"></script>
...
</html>

====LaWAとS-LaWA（サンドボックス化LaWA）のアーキテクチャ====
SVGMapにおけるレイヤー固有UI（LaWA: Layers as Web Apps）には、セキュリティと用途に応じた2つの動作モードが存在します。2026年のアップデートにより、Web標準のセキュリティモデル（クロスオリジン制約）に完全準拠した'''S-LaWA（サンドボックス化LaWA）'''が導入されました。 (2026/4/16現在 dev2リリース段階)

'''T-LaWA (Tight-coupled LaWA / 従来の密結合モード)'''
* 親のSVGMapフレームワークと同じオリジン（ドメイン）で動作する、従来型のレイヤーWebAppです。
* iframeのJavaScriptコンテキストに、親フレームワークから直接APIオブジェクトが注入されます。
* 全ての[[#拡張API]]にアクセスでき、複雑なDOM操作や関数渡しが可能ですが、サードパーティ製のレイヤーを読み込む際にはセキュリティ上のリスク（XSS等）を伴います。

'''S-LaWA (Strict/Sandbox LaWA / 分離モード)'''
* 親のSVGMapフレームワークとは異なるオリジンで動作することを前提とした、セキュアなレイヤーWebAppです。
* iframeは完全に隔離（サンドボックス化）され、親フレームワークとの通信は全て非同期メッセージング（postMessage）を介して行われます。
* 悪意のあるスクリプトから親フレームワークを保護できるため、外部のサードパーティ製レイヤーを安全に統合できます。
* セキュリティの代償として、直接的なオブジェクト参照や関数の受け渡しが禁止されるため、[[#拡張API]]の利用に強い制限がかかります（前節の「S-LaWAでの制限」を参照）。

===== 動作モードの指定 (data-lawa-mode) =====
レイヤーがどちらのモードで起動するかは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]内でそのレイヤーを参照している '''<code>animation</code> 要素の <code>xlink:href</code> の値（URLのオリジン）'''、もしくは同要素に付与する '''<code>data-lawa-mode</code>''' 属性で制御できます。

<code>data-lawa-mode="auto"</code> (未指定時のデフォルト): レイヤー（コントローラ）のURLが親フレームワークと同一オリジンであれば '''T-LaWA''' として、クロスオリジンであれば自動的に '''S-LaWA''' として起動します。

<code>data-lawa-mode="isolated"</code>: 同一オリジンであっても、強制的に '''S-LaWA''' として完全に隔離して起動します（開発時のテスト等に有用です）。

<code>data-lawa-mode="tight"</code>: 強制的に '''T-LaWA''' として起動を試みます。（※クロスオリジン環境でこれを指定した場合は、適切なCORS設定やプロキシサーバーの利用が必須となります）

====詳細====

レイヤー固有UIは、SVGMapのグローバルなwindowに設置されたiframeの中で動作します。このiframeの性質と利用できるAPIは、前述の動作モード（T-LaWAかS-LaWAか）によって大きく異なります。

どのような環境・モードで起動された場合でも、レイヤー固有UI内でSVGMapの各種リソースへ安全にアクセスするためには、レイヤーのHTML内で提供される初期化ライブラリ（<code>svgMapLayerLib.js</code> 等）を読み込む必要があります。

'''【重要】''' 各種APIへのアクセスが可能になるのは、iframe自体の "load" イベントではなく、SVGMapフレームワークとの接続が完了した後に発行される '''<code>layerWebAppReady</code>''' イベント以降です。
* 初期化処理は以下のように記述することを強く推奨します。
* <code>window.addEventListener("layerWebAppReady", function(){ /* 初期化処理 */ });</code>

[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が設置されたSVGMapのグローバルなwindowと異なるドメインにレイヤーを設置し、そのレイヤーがレイヤー固有UIを持つこともできます。デフォルト（<code>data-lawa-mode="auto"</code>）では、これは自動的にセキュアなS-LaWAとして起動するため、特別なCORS設定は不要です。ただし前述の通りAPIには制限がかかります。

[[#レイヤー|レイヤーsvgコンテンツ]]のドキュメントルート要素へdata-controller属性を設定する代わりに、コンテナsvgコンテンツにおける[[#レイヤー|レイヤーsvgコンテンツ]]への参照要素にdata-controller属性を設定することもできます。

data-controller属性の代わりに、data-controller-src属性の値に、適切にエスケープすることで直接htmlを記述することもできます。（※この機能は主にT-LaWAでの利用を想定しています）

data-controller属性によって参照されるhtmlコンテンツでは、次節[[#拡張API]]で説明する値や関数が使用できます（※モードによる制限あり）。

data-controller属性のURLには以下のオプションをフラグメント識別子として指定することができます。
* #exec=appearOnLayerLoad||hiddenOnLayerLoad||onClick レイヤー固有UIの起動オプション
** appearOnLayerLoad : レイヤーを表示状態にすると即座にレイヤ固有UIが出現
** hiddenOnLayerLoad : レイヤーを表示状態にすると即座にレイヤ固有UIがhidden状態で起動(そのレイヤ固有UIに含まれるscriptが起動)
** onClick : レイヤー固有UI起動ボタン">"を押したときにレイヤ固有UIが出現(デフォルト)
* #requiredHeight=hhh&requiredWidth=www
** id="layerSpecificUI"のdiv要素のcss値に関わらず、requiredHeight、requiredWidthでiframeの表示を指示

====拡張API====
レイヤー固有UI(iframeのwindowオブジェクトのjavascriptコード)では以下のAPIが拡張されています。
'''【注意】S-LaWA（サンドボックス化LaWA）環境においては、セキュリティ上の理由から親フレームワークのオブジェクトに直接アクセスできません。代わりに <code>svgMapSandboxLayerLib.js</code> が提供する「モック（代替）オブジェクト」を介して非同期に操作が行われます。各項目の「S-LaWAでの仕様」を参照してください。'''

=====イベント=====
*layerWebAppReady : 初期化が完了しLaWAの実行が可能になった (LaWAでは、loadイベントではなくlayerWebAppReadyを使用することを強く推奨します)
*openFrame : そのiframeが、新たに生成された
*closeFrame : 同、消滅した
*hideFrame : 同、隠された
*appearFrame : 同、隠されていたのが再度現れた
*zoomPanMap : [[#.E6.8B.A1.E5.BC.B5.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88|SVGMapフレームワークと同じ]]
*zoomPanMapCompleted : 同上
*screenRefreshed : 同上

'''【S-LaWAでの仕様】''' すべてのイベントがサポートされています。親フレームワークで発生したイベントは、メッセージングを通じてS-LaWA内のwindowオブジェクトに中継・ディスパッチされます。

=====svgImageProps=====
このレイヤー固有UIに紐づいたレイヤーSVGの各種プロパティを参照できる（基本的に全て読み出しのみ） (参考:[[#svgImagesProps.5B.5D]])
*[[解説書#svgImagesProps.5B.5D|プロパティのリストはこちらを参照]]
*svgImageProps.scriptで、動的地図レイヤーのscript要素によって生成されたオブジェクトにもアクセスできます。
*svgMap.getSvgImagesProps(layerID) で得た値と同等。
*.hashは書き込みが有効(参考 [[#サブレイヤーパーマリンク]])

'''【S-LaWAでの仕様】''' 親フレームワークから非同期で同期された静的なコピーデータとして提供されます。<code>.hash</code> プロパティへの書き込みはS-LaWAでもサポートされており、裏側で自動的に親へ同期されます。ただし、<code>.script</code> による親の実行コンテキストへのアクセスはできません。

=====svgImage=====
このレイヤー固有UIに紐づいたレイヤーSVG文書(DOM Documentオブジェクト) (参考：[[#svgImages.5B.5D]])
*このドキュメントを操作することで、そのレイヤーの表示を動的に変化させることが可能です。
*特に、[[解説書#.E5.8B.95.E4.BD.9C.E3.81.AE.E5.88.B6.E9.99.90.E3.83.BB.E5.B7.AE.E7.95.B0|動作の制限に注意して実装してください]]
*svgMap.getSvgImages(layerID) で得た値と同等。

'''【S-LaWAでの仕様】''' S-LaWA環境内に展開された「ローカルXML DOM」が提供されます。このドキュメント（要素の追加・削除・属性変更・テキスト変更など）を操作して <code>svgMap.refreshScreen()</code> を呼び出すと、フレームワークの共通地図キャンバスに送信され更新します。

=====svgMap=====
svgMapフレームワークインスタンス

'''【S-LaWAでの仕様】''' 親のインスタンスの代わりに、S-LaWA用のモッククラス（<code>SandboxSvgMap</code>）が提供されます。以下のメソッドのみが利用可能です。
* <code>refreshScreen()</code>, <code>transform()</code>, <code>getGeoViewBox()</code>, <code>getSvgImageProps()</code>, <code>setShowPoiProperty()</code>, <code>showModal()</code>, <code>getCORSURL()</code>, <code>setCORSproxy()</code>, <code>parseEscapedCsvLine()</code>

=====layerID=====

svgMapフレームワークが管理しているSVG文書ハッシュリスト(svgMap.getSvgImages())における、このレイヤー固有UIに紐づいたレイヤーSVG文書のハッシュキー

[[#getLayerId]]参照

'''【S-LaWAでの仕様】''' 制限なく利用可能です。

=====svgMapGIStool=====
GIStoolsフレームワークを拡張した時、同インスタンス
*[[解説書#svgMapGIStool..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI|svgMapGIStoolが持つAPI]]

'''【S-LaWAでの仕様】''' '''現在のところ利用不可です。'''

=====svgMapAuthoringTool=====
svgMapAuthoringToolフレームワークを拡張した時、同インスタンス
*[[解説書#svgMapAuthoringTool..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI|svgMapAuthoringToolが持つAPI]]

'''【S-LaWAでの仕様】''' '''現在のところ利用不可です。'''

=====controllerSrc=====
レイヤー固有UIのiframeの起動に使われたsrc属性(レイヤー固有UIのパス・URL)が読み出せます。特にレイヤーが異なるドメインから配信されたものの場合、レイヤー固有UIのwindowのlocation属性(及びそれによるURL解決を行うAPI)からは適切な情報が得られません。これ代えてこの値が使用できるケースがあるでしょう。

'''【S-LaWAでの仕様】''' 参照できません。S-LaWAは自身のURLコンテキストで動作するため、自身の <code>location.href</code> などを参照してください。

=====putGlobalMessage(messageText)=====
messageTextを[[#グローバルメッセージ]]エリアに表示する　レイヤーが消滅したら自動でメッセージも消滅します。

'''【S-LaWAでの仕様】''' 現在のところ利用不可です。

=====preRenderFunction=====
この名前の関数を(レイヤー固有UIのwindowに)定義すると、そのレイヤーのSVG文書の再描画(画面更新)シーケンスの直前にこの関数の内容が実行される。詳細は[[解説書#setPreRenderController|setPreRenderControllerを参照]]

'''【S-LaWAでの仕様】''' '''利用可能です。''' S-LaWA内で <code>window.preRenderFunction</code> を定義しておくと、<code>svgMap.refreshScreen()</code> が呼ばれた際や、親からズーム・パンなどのイベントを受信した際に、S-LaWA内でローカルに実行されます。この関数内でローカルDOMを変更することで、描画前の状態更新をエミュレートできます。

=====customHitTester=====
この名前の関数を定義すると、そのレイヤーに固有のヒットテスト（マウスやタッチによって地図上をヒットしたときの振る舞い）機能を追加することができます。ヒットテストは通常のクリッカブルオブジェクト（ポイントやライン・ポリゴンなど）のそれと同等に扱われます。
* customHitTester( position )
** 第一引数に、ヒットされた座標(.screenX,Y:window上の座標、.lat,lng:地理座標、.isMapCenterHitTest:後述)が与えられます。（この値をもとに実際のヒットテスト処理を書く）　この関数の帰り値が'''null'''や'''undefined'''の場合はヒットしなかったこと、'''true'''もしくは文字列もしくはそのレイヤーの任意の図形要素、もしくはそれらの配列の場合はヒットしたことを示します。
*** isMapCenterHitTestが'''true'''の場合、そのヒットテストは伸縮スクロール時自動発生するケースで発生したものです。（もしこのケースでのテストを除外したいなど特別な処理をしたい場合に利用できます）
** ヒットテスト後の振る舞いも通常のクリッカブルオブジェクトと同等で、通常はデフォルトで備えるヒットされたグラフィックスオブジェクトの[[#metadata.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF|メタデータ]]表示パネルが呼び出されます。(帰り値が図形要素の場合）　もしこの振る舞いを変更したい場合は、[[#setShowPoiProperty|setShowPoiProperty]]を用いることが可能です。
** 帰り値がtrue、文字列、およびそれらの配列を返す場合は、[[#setShowPoiProperty|setShowPoiProperty]]を使用してカスタマイズされた処理を行う必要があります。この場合[[#setShowPoiProperty|setShowPoiProperty]]で設定された関数が受け取る引数は、そのSVG文書のドキュメントルート要素であり、その'''"data-hitTestIndex"'''属性に選択されたオブジェクトのインデックス(配列の場合。配列でない場合は常に0)が設定されます。

'''【S-LaWAでの仕様】''' <code>customHitTester</code> 自体は利用できません。（なお<code>svgMap.setShowPoiProperty(func)</code>は利用可能です。）

====サブレイヤーパーマリンク====
(2024/10のdev1ブランチから有効)
*[[#レイヤーsvgコンテンツ]]のURLが任意のフラグメント識別子を持つことができる。
*ただしフラグメント識別子はカンマ","、アンパサンド"&"を含めることはできない。
*[[#レイヤー固有のUI]]が以下を実装する場合、任意のレイヤーの設定をパーマリンク([[#getBasicPermanentLink]])に反映できる。
**[[#レイヤー固有のUI]]は起動時(onload)同フラグメント識別子の情報を解釈し適切な状態に変化させる機能
**[[#レイヤー固有のUI]]は、パーマリンクによる指定に対応した標示状態に表示が切り替わるタイミングで[[#レイヤーsvgコンテンツ]]のURLのフラグメント識別子の内容をそれに対応した値に変更する機能
*[[#レイヤーsvgコンテンツ]]のURLのフラグメント識別子は、[[#svgImageProps]].hashを設定することで変更できる ([[#svgImageProps|⇒仕様参照]])

===動的な地図レイヤー===
svgドキュメントにjavascriptを記述することでも、動的なデータ生成を実装可能としています。
本フレームワークでは、svgドキュメント中に<script>要素を一つだけ記述することができ、その要素の中にjavascriptコードを入れることができます。

DOMを操作し、動的に描画を変化させることが可能です。ただし、[[解説書#.E5.8B.95.E4.BD.9C.E3.81.AE.E5.88.B6.E9.99.90.E3.83.BB.E5.B7.AE.E7.95.B0|動作の制限に注意してください]]

====動的SVGMapコンテンツで利用可能な拡張API====
一般のjavascriptAPIに加えて、動的な地図レイヤーを実装するために以下のAPIが提供されます。（既存のものでも注記があるものも列挙）
*document: このsvgMapドキュメント自身
*READ ONLY変数
**CRS:このドキュメントのCRS : CRS.a....fに、地理座標からこのドキュメントのSVGユーザ座標への変換係数が提供される
**docId:このSVGドキュメントのdocId
**scale：倍率：このドキュメントの座標系と、画面の(px座標系)との間の倍率(この値は等倍が1.0だが、svgMapコンテンツのvisibleMin/MaxZoom値は%(等倍は100)なので注意)
**actualViewBox：このドキュメントの座標系でのviewBox
**geoViewBox：地理座標におけるviewBox
**geoViewport
**viewport
**this.location:相対パス
**(this.verIE)
*refreshScreen(): 描画の更新を明示: refreshScreenを用いていない場合、そのレイヤーのDOMを編集してもそれが即座に表示に反映(更新)するとは限りません。文書のロード、ズーム、スクロールのときが表示のDOMの内容を反映した画面の自動更新のタイミングです。それ以外、多くの場合反映されません（性能確保のための本フレームワークの現在の制限）。DOMO編集をそれ以外のタイミングで表示に反映したい場合、この関数の呼び出しを行うひつようがあります。一方不必要にこの関数を呼び出すとシステム全体の性能が低下するかもしれません。
*transform()
*getCanvasSize()
*linkedDocOp()
*isIntersect()
*drawGeoJson()
*childDocOp()
*onload:この関数を設定すると、ロードされると呼ばれる(ドキュメントロード後、描画前のタイミング。)
** この関数は、DOMトラバース前に同期処理される。
**したがってonloadで実行される処理はその中が非同期でない限り、refreshScreen()しなくてもonload時のDOM編集は直後の描画に反映される。
*onscroll:この関数を設定すると、スクロールされるとき呼ばれる（ほかにズーム以外で画面更新時も）(スクロール後の描画前のタイミング。)
**同上
*onzoom:この関数を設定すると、ズーミングが発生するとき呼ばれる(同上)

====拡張イベント====
*document -> zoomPanMap イベント addEventHandlerすると、ズームパンが起き(viewPortが変化したとき)地図システム全体の描画が完了(含タイムアウト)後に発行される。SVGMap*.jsが地図をウェブアプリ起動後、最初に描画完了した時にもこのイベントが発生する。（レイヤー追加時には発生しない）
**これをイベントリスナに設定した関数は、非同期に実行される。onscroll()と異なり、もしその関数でDOM編集を行った場合は、直後の描画にそれが反映される保証がない。refreshScren()による再描画が必要。
*document -> screenRefreshed イベント addEventHandlerすると、ズームパン以外で地図システム全体の描画が完了(含タイムアウト)後に発行される。主にrefreshScreen()など。このイベントをフックにして、SVGMapコンテンツのDOM操作・再描画（refreshScreen()）を行うと無限ループに陥るので使用方法に注意が必要。
*document -> zoomPanMapCompleted イベント SVGMaplayerUIが有効な時に発行される。　zoomPanMapイベントは伸縮スクロール完了時に発行されるが、その直後にレイヤー固有UIにおいて(XHRやfetchを用いた)非同期なデータ取得とレイヤー書き換えが生じるケースでは、その完了を検知しない。zoomPanMapCompleted イベントはこのような非同期通信の完了後に発行される。

===SVGMapの埋め込み(SVGMapFrame)===
'''実験的機能段階''' :

SVGMapフレームワークはwindow全体に地図コンテンツが占有される形で表示する設計です。ウェブページはwebAppsとしてカプセル化されたレイヤーをsvgMapオブジェクトに差し込む形でアプリケーションが構築されます。すなわち、基本的に[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]windowにはsvgMapオブジェクトだけが単独で存在し、その他のアプリケーションをwindow上に実装する場合は、その開発者がsvgMapオブジェクトとのグローバル空間でのスパゲッティ化に注意を払いながら開発していく必要があります。

それに対して、''SVGMapLv0.1_Frame*.js''が提供する機能は、window内の指定した領域にsvgMapによる地図を埋め込むことを可能にします。さらにこの埋め込まれたsvgMapオブジェクトを　外部からより簡単に操作できるようカプセル化されたインターフェースを提供します。

====ライブラリ====
SVGMapを埋め込むウェブページでは''SVGMapLv0.1_Frame*.js''を導入します。
<!doctype html>
<html>
<script type="text/javascript" src="SVGMapLv0.1_Frame_r4.js"></script>
</html>

====svg-map要素====

svg-mapカスタム要素を使用してsvgMapオブジェクトを任意の場所に埋め込むことができます。
<nowiki>
<!doctype html>
<html>
<script type="text/javascript" src="SVGMapLv0.1_Frame_r4.js"></script>
<body>
<table>
<tr>
<td>
説明用地図
</td>
<td>
<svg-map svgMapAppPage="SVGMapper_r16_layerUICustom.html" id="svgMapTag" latitude="37" longitude="135" zoom="4" layerui="#layerUIarea">
</svg-map>
</td>
</tr>
</table>
</body>
</html></nowiki>

=====属性=====
======svgMapAppPage======
必須属性: 起動するSVGMapLv0.1*.jsが組み込まれたhtmlを指定。
svg-map要素はshadow domとなっており、内部はひとつのiframeとして構成されます。このiframe内のwindowで通常のsvgMapオブジェクトが稼働する形となります。svgMapAppPage属性はこのiframe内で起動するsvgMapオブジェクトを持ったhtmlを指定するものです。

======latitude, longitude======
オプション: 表示領域を下記の属性と組み合わせて指定します。DOMを操作することによって動的に表示領域を変更することが可能です。
======zoom======
オプション: 表示位置の中心点を上の2属性で、ズームレベルをこの属性で指定します。ズームレベルの定義は[https://docs.microsoft.com/ja-jp/azure/azure-maps/zoom-levels-and-tile-grid webMercatorタイルピラミッドのレベル番号]（ただし小数点指定も可能）
======latitude2, longitude2======
オプション: latitude, longitudeと組み合わせて対角線を指定し表示領域を設定します。
======customjson======
オプション: 任意のJSON文字列を(エスケープしたうえで)与えることができます。 SVGMap.jsのあるiframeのwindow.rootMessage.customJsonに、JSON.parseされたうえでその値が反映されます。この値もDOM操作により動的に反映されます。window.rootMessage.customJsonの変化を監視できるようsetterを設けることで動的な変化に対応する実装が可能です。

var rootMessage={
set customJson(json){
...
}
}

======layerui======
オプション: レイヤーUIの出力要素をxlinkで指定します。　この値はmutationをobserveしていません（svg-mapオブジェクトが生成された、最初の一回のみ有効です）

<svg-map svgMapAppPage="SVGMapper_r16_layerUICustom.html" id="svgMapTag" latitude="37" longitude="135" zoom="4" layerui="#layerUIarea">

=====DOM API=====
======setCenter======
setCenter( longitude, latitude, zoom ) : 緯度経度ズームレベルで地図を表示させる
======addLayer======
addLayer(url,title,visibility) : URLで指定したリソースのレイヤーをtitleを付けて追加する

======svgMapObject======
getter svgMapObject : この要素に紐付いたsvgMapオブジェクトを得る

====layer要素====
svg-map要素の子要素として、任意の個数のlayer要素を設置できます。
=====属性=====
======title======
iframeで起動されるsvgMapオブジェクトの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルにある、レイヤー名(title)を指定し、そのレイヤーとlayer要素を紐付ける。該当するレイヤーが無く、且つ下記のsrcが指定されている場合は新しいレイヤーを追加する。なお、任意の属性や子ノードが与えられている場合は、下記の通りレイヤーの読み込み後にそれらの値が該当するレイヤーの[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|data-controller]]の window.rootMessageに設定される。

======src======
iframeで起動されるsvgMapオブジェクトの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルにある、レイヤーをURLを使って指定する
======visibility [TBD] ======
visible もしくは hiddenを設定すると、そのレイヤーの表示状態を制御できる。

======任意の属性======
任意の属性を設定できる。設定した属性名と属性値は、対応するレイヤーの[[#レイヤー固有ユーザインターフェース|data-controller]]で指定されたレイヤーのコントローラのwindowにおけるwindow.rootMessageの対応するメンバ変数に反映される。[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/set setter]を設定することで変化に応じて動作させることが可能になる。

======rootMessage.update()関数======
レイヤーのコントローラのwindow.rootMessage.update()関数(引数なし)が定義されている場合、上記の属性変更(最初の設定も含む)が検知される度にこの関数が呼び出される。

=====子ノード(TEXT CONTENTやXML要素)=====
任意のテキスト(textContent)や、XML要素(xmlContent)を子ノードに入れることができる。
入れられた情報は、同様に対応するレイヤーのdata-controllerの
window.rootMessage.textContent、もしくはwindow.rootMessage.xmlContentメンバ変数に反映される。
XMLに関しては任意の階層化がされていても良い。DOM操作による変化があれば更新されるので、同様にsetterを用いて変化を反映させることが可能。

=====DOMAPI=====
======layerId======
layerId : このレイヤーのレイヤーIDを得る
======svgImage======
svgImage : このレイヤーに紐付いたsvgMapコンテンツ(document)を得る
======svgImageProps======
svgImageProps : このレイヤーに紐づいたsvgMapコンテンツのsvgImagePropsオブジェクト(各種プロパティを格納したオブジェクト)を得る
======controllerWindow======
controllerWindow : (もしあれば)このレイヤーに紐づいたsvgMapコンテンツのレイヤー固有UIを得る

==第四章：内部機構解説==
[[内部機構解説|別ページを参照してください。]]

==第五章：付加機能==
===3D可視化機能===
:- SVGMap.jsはCesium.jsを利用してSVGMapで表示しているレイヤーを3D可視化することができます。
:- 3D可視化はSVGMap.jsの地図ウィンドと独立した別ウィンドで行われます。
:- すなわち、ここから呼び出されるCesiumベースの3D可視化ウェブアプリは、それ専用のwebApps([https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4_module.js cesiumWindow*.js]を読み込んだアプリ。：基本的な3D可視化ウェブアプリとして、[https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4.html cesiumWindow4.html]を用意)を持つ別のブラウジングコンテキストで起動されます。
:- この3D可視化ウェブアプリは、svgmapjsとメッセージングを行いsvgmapjsで表示されているレイヤーを3D可視化します。

====3Dビジュアライザ起動用ボタンの設置====
3D可視化機能を起動するためのUI(ボタン)は、[[#フレームワークの呼び出し|ルートhtml文書]]に設置した以下の要素によって構築されます。
<code><pre><img id="3DviewButton" data-app="cesiumWindow4.html" .../></pre></code>

* <code>id</code>が<code>3DviewButton</code>である必要があります。
* <code>data-app</code>属性で、3D可視化ウェブアプリのパスを指定することが可能です。
** もし指定されていない場合は、ルートhtml文書と同一ディレクトリの<code>cesiumWindow2.html</code>というファイルがデフォルトで指定されます。
** パスは同一オリジンである必要があります。
** 基本的な3D可視化ウェブアプリとして、[https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4.html cesiumWindow4.html]が[https://github.com/svgmap/svgmapjs/ svgmapjsリポジトリ]に用意されています。

解説書

2026-04-16T08:29:45Z

Admin: /* LaWAとS-LaWA（サンドボックス化LaWA）のアーキテクチャ */

=SVGMap.js (Level0.1フレームワーク)解説書=

2018年現在のSVGMapのデータ形式、およびそれを実装した初歩的なフレームワーク(SVGMap Level0.1 Revision*)の解説を行います。

==第一章：SVGMapの基本機構と、更新部分==

この章は、JIS化されたSVGMap ([http://kikakurui.com/x7/X7197-2012-01.html JIS X.7197])や、[https://www.w3.org/Submission/2011/04/ W3C Member Submission]に対する、近年の開発成果に基づいたSVGMapのアップデートを解説しています。

[http://kikakurui.com/x7/X7197-2012-01.html JIS X.7197]もしくは、[https://www.w3.org/Submission/2011/04/ W3C Member Submission]に記載されているように、SVGMapの基本機構は主に以下の機能を　[https://ja.wikipedia.org/wiki/Scalable_Vector_Graphics 汎用的なグラフィイクスデータ記述形式SVG]に拡張することです。
* [[#地理座標系の処理|地理座標処理]]
** SVGの座標系と地理座標系との間の関係を記述する globalCoordinateSystems要素
* タイルピラミッド（タイリングとLevel of Detail）
** コンテンツを埋め込む[[#要素|image要素、animation要素]]のx,y,width,height属性への追加の振る舞いと、visible-min-zoom, visible-max-zoom属性の追加
** 詳細は [https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html こちらの論文]を参照
* 拡張された[[#レイヤー|レイヤー]]
** [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]におけるimage, animation要素の扱い
** [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が埋め込むsvgコンテンツ([[#レイヤー|レイヤーsvgコンテンツ]])の処理

===地理座標系の処理===
SVG2では地理空間座標を記述するスペック(metadata geospatial coordinate systems)が削除されました。これは、W3C SVG仕様の範囲では単なるメタデータであり、ユーザエージェントの振る舞いに何ら影響を及ぼさないことが理由です。　また、JIS SVGMapにおいては、coordinateReferenceSystem 要素が定義され、それに基づくユーザエージェントの振る舞いが規定されていますが、これは一方でW3Cのスペックではないという課題を持ちます。

これを受けて、現在提案されているSVGMapのデータ仕様では、SVG1.1の段階ですでに標準化と実装が行われたスペックを注意深く活用することにより、JIS SVGMapで規定された地理座標系に関する機能のいくつか（すべてではない）を実現する方法を用いることとしています。（[https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/globalView globalView spec]）

なお、JIS SVGMapのcoordinateReferenceSystem要素もサポートしています。

====メルカトル図法を含む任意の図法の定義とその合成機能(＞rev16)====
従来のSVGMapでは、グローバル座標系に緯度経度座標を用いた場合、使用できる図法は[https://ja.wikipedia.org/wiki/%E6%AD%A3%E8%B7%9D%E5%86%86%E7%AD%92%E5%9B%B3%E6%B3%95 PlateCarreeや正距円筒図法]でした。

一方、rev16では[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]を含む任意のSVGMapコンテンツ([[#レイヤー|レイヤーsvgコンテンツ]]やサブレイヤー、タイルなど)のglobalCoordinateSystem 要素のtransform属性に、下記のように"mercator"を指定することで、そのコンテンツの座標系がメルカトル図法([https://en.wikipedia.org/wiki/Web_Mercator_projection web mercator])であることを宣言できます。

<pre><globalCoordinateSystem srsName="http://purl.org/crs/84" transform="mercator" /></pre>

この記述がされたコンテンツのSVGの座標空間はメルカトル図法上のものとなり、この座標系上でのx,y=0,0(左上)は西経180.0度,北緯85.051129度、x,y=1,1(右下)は東経180.0度,南緯85.051129度に対応します。

=====メルカトル図法での地図表示=====
[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]で先述の宣言を行うことで、SVGMap0.1.jsはメルカトル図法で画面上に地図を表示します。このとき、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が参照する各レイヤーはメルカトル図法であっても、それ以外であっても構いません。フレームワーク内でオンザフライの図法変換が実行されます。（逆に[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]がPlateCarreeでレイヤーがメルカトルでも同様）

=====メルカトル図法のドキュメントルート要素のviewBox属性=====
* [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]において、地図の初期表示状態を記述するドキュメントルート要素(<svg>要素)のviewBoxに記述する座標も先述のメルカトル座標系で記述する必要があります。
* 一方、緯度経度で初期表示領域を記述したい場合に対応する仕様が拡張されており、その記述例は下記のとおり、'''global'''を追加します。
<pre><svg viewBox="global,138,35,2,2"></pre>

=====プロキシの設定=====
オンザフライでの図法変換では、多くのケースで非線形の座標変換が必要となります。ビットイメージ（タイルを含む）に対して子の座標変換を実行するためにSVGMap.jsではビット委イメージのピクセルにアクセスしています。これを実現するにはビットイメージがSVGMap.jsと同一オリジンにある必要があります。この条件を満たせないケースに対してフレームワークにはプロキシを設定する機能があります。([[#setProxyURLFactory|setProxyURLFactory API]]を参照)

'''[[クロスオリジンアクセス|詳細な情報をこちらに掲載しました]]'''

=====多様な図法の定義と利用=====
[[#動的な地図レイヤー|javascriptコード]]に記載されたscript要素内に定義した関数の関数名をglobalCoordinateSystem要素のtransform属性に記述することで、その関数を図法変換に用いた図法定義が可能となります。(先述のmercator属性は、フレームワークに特別に組み込まれた関数です）

たとえば、日本の平面直角座標系の地図(固有の基準点を持つ横メルカトル図法)をPlateCarreeやメルカトル図法の地図として合成・表示するケースなどに有効でしょう。

ユーザが定義できるこの関数は引数を持たない関数であり、返り値として以下の３つの関数を返す必要があります。
* {x,y} transform({x,y}) : グローバル座標(WGS84経度緯度)から、そのコンテンツの図法の座標への変換関数入出力値は.x,.yメンバを持つオブジェクト。
* {x,y} inverse({x,y}) : 同、逆変換関数
* number get scale : グローバル座標系に対するコンテンツの図法の座標系の座標値のスケール（グローバル座標系で1変化すると、コンテンツの座標系でいくつ変化するのかを表す）
* 記述例
<code><pre>
<svg ...>
<script>
function azimuthalEquidistant(){
...
return{
transform:function(inp){
var xy = transform_int(inp.y, inp.x, ...);
return{ x:xy.x, y:xy.y}
},
inverse:function(inp){
var latLng = inverse_int(inp.x, inp.y, ...);
return{ x:latLng.lng, y:latLng.lat }
},
scale: 1.0
}
}
</script>
<globalCoordinateSystem srsName="http://purl.org/crs/84" transform="azimuthalEquidistant" />
...map contents in projected coordinate system...
</svg>
</pre></code>

===ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング===
SVG2(SVG1.1 2nd Edition)では、SVG単独によるユーザエージェントという実装想定は撤廃され、よく知られているウェブブラウザの機能の一部としてのSVGデータの描画機能、HTMLやCSSと一体化されたデータ・コンテンツ　へと変化しました。一方、近代のウェブブラウザにおけるコンテンツでは古典的なhtmlに基づくコンテンツデータに対して、javascriptとDOM APIによるプログラムでコンテンツをブラウザ上で動的に生成する（ウェブアプリケーション）機構を備えます。すなわちSVGを実装する現代のユーザエージェントは例外なくウェブアプリケーションの実行が可能となりました。

そこで、SVGMapでは静的なSVGによる地図コンテンツに加え javascriptで動的に生成されるコンテンツ(ウェブアプリケーション)も地図コンテンツ（地図のレイヤー）として扱えることとしました。それにもかかわらず SVGMapは依然として複数のウェブ上で分散する地図データを一つの画面上にレイヤリングする機能（ハイパーレイヤリング）を維持しています。すなわち、ウェブアプリケーションとしての地図レイヤーをレイヤリング（マッシュアップ）する機能が拡張されます。これは、SVGMapのマッシュアップ・ハイパーレイヤリングの概念を、単に地図画像データのレイヤリングから、地図上に表現された動的なオブジェクトのマッシュアップ・レイヤリングに広げています。SVGMapではこのコンセプトを[[リンク集#.E8.A7.A3.E8.AA.AC.E9.9F.B3.E5.A3.B0|"Layers as WebApps"(LaWA : ウェブアプリケーションとしてのレイヤー)]]と呼んでいます。

このようなウェブアプリケーションは、レイヤーごとにカプセル化されることになります。これにより、'''グローバル空間'''(コンテナsvgコンテンツとそれを起動する、svgMap.jsフレームワークを読み込んだウェブページ)のスパゲッティ化なしに、多様な機能を実装していくことが可能になります。

[https://satakagi.github.io/mapsForWebWS2020-docs/De-centralizedWebMapping.html こちらの論文]も参考にしてください。

ウェブアプリケーションによる地図レイヤーを構築するには二つの方法があります。
* svg要素の'''data-controller'''属性で参照されたhtml文書
** [[#レイヤー固有ユーザインターフェース]]と呼ばれる機構です。この方法を用いること推奨します。
* svg要素内の'''script'''子要素 (将来廃止予定)
** htmlによるUIを伴わない実装の場合はscript要素を用いることができます。ただしsrcは属性には非対応、直接コードを埋め込む必要があります。

この機能を用いるにはSVGMapLevel0.1フレームワークを使用する場合は、拡張フレームワーク(SVGMapLv0.1_LayerUI2_r*.js)を更にロードする必要があります。SVGMapLevel0.2フレームワークの場合はデフォルトで機能します。

====レイヤー固有ユーザインターフェース====
SVGMap.jsではさらに、個々の地図レイヤー(レイヤーSVGコンテンツ)がそれぞれのレイヤーに特化した固有の演算ロジックだけでなく、ユーザーインターフェースも備えた[[#レイヤーsvgコンテンツの設定|HTMLを紐づける]]ことができる機能が拡張されています。UIも備えたより完全なwebAppをレイヤーとして実装できるため、カプセル化がより効果的に実現されます。（Layers as Web Apps, LaWA)

たとえば気象情報のレイヤーに対して気象情報の時間変化を表示するアニメーションのコントローラ(スライダーバー)や、気象情報の種類を選択するプルダウンメニュー　などのUIやロジックを任意に構築できます。

レイヤー固有ユーザーインターフェースは、[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]](SVGMap.jsをロードしたhtml)のレイヤー選択UIを通してwindowに設置されたiframe中に呼び出されます。

詳細は[[#レイヤー固有のUI]] を参照してください。



　

====例====
以下に、いくつかのこのような動的な地図コンテンツの例を示しましょう。
;検索によって表示スタイルを変更する機能を持ったレイヤー
: 例えばコンビニエンスストアのＰＯＩレイヤーを表示したとして、そのメタデータを読み取り、検索条件に基づいて（例えば深夜営業している店舗）の表示スタイルを変更するような検索機能を実装したレイヤー　メタデータは書くレイヤーごとに独特の値を持つため、その検索ロジックはレイヤーに固有のものとなることがあります。このケースではそのような機能をレイヤーに組み込むことを可能にします。
;CSVデータなどのレガシーな非SVGデータをHXRで取得し、ブラウザ上でSVG DOMツリーを生成するようなSVG地図コンテンツ。
: このケースでは、サーバからクライアントに送信されるデータの実体はSVG形式の地図データではなく、CSVなどのレガシーなデータです。SVG地図コンテンツには、CSVデータをSVGとして描画するためのデータ読み込み・解読・SVG DOMツリー生成機構を備えたjavascriptコードが含まれます。また、これよりはモダンなgeoJsonやKML等のデータをSVG DOMに変換することも容易に可能でしょう。これをより簡単に実現するためのライブラリも[[#svgMapGIStool.で呼び出せるAPI|svgMapGIStool]]に準備されています。
;タイリングされた地図コンテンツ
: それは、たとえば[https://wiki.openstreetmap.org/wiki/Tiles OpenStreepMapのTile Server]や、[https://en.wikipedia.org/wiki/Tile_Map_ServiceTileMap Tile Map Service]のような、特定のロジックによる数列のような法則性を持ったピラミッド状の地図タイルリソースをタイリングする地図コンテンツのことです。
: 更新されたSVGMapでは、地図コンテンツに内蔵されたjavascriptによるアプリケーションロジックとしてそれらを取り扱うことができます。タイリング規則をそのままウェブアプリケーションとしてで書き下し、スケールやビューポートに応じて適切なタイリング(配置)を行うSVG DOMツリーを生成するSVG地図コンテンツが構築できます。

=====タイリングに関するノート=====
[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html svgMapにおけるタイリング]は従来の地図フレームワークより柔軟で汎用的な概念に基づいています。
openLayersやleafletなどの従来の地図フレームワークでは、このようなタイリング機能は特定の固定的なタイリングロジックとパラメータを伴った機能として地図フレームワーク本体にハードコードされて提供されてきました。さらには地図フレームワークがこれらのタイリングロジックに強く依存したアーキテクチャを持っていました。一方、これらのロジックにはさまざまなバリエーションや最適化のための調整パラメータが存在し、これまで長らくその互換性や相互運用、更には効率の問題を抱えてきました。次のリンクでその多くの議論や多様な提案を参照できるでしょう。[https://wiki.osgeo.org/wiki/Tile_Map_Service_Specification TMSspecs@osgeowiki], [https://wiki.osgeo.org/wiki/Category:Tiling tiling@osgeowiki]
ベクターデータのタイリングにおいては、これらの課題はさらに増幅され、いまだ手法は確立していないといっても良いでしょう。たとえば、我々の研究では、Quad Tree Composite Tiling([https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-in-english スライド]、、[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html ペーパー])のような用途によってはもっと優れたタイリングの手法も見いだされています。

一方、これらのロジックはその多様なバリエーションを含め、javascriptによるプログラムコードとしては容易に記述可能です。多くの場合わずか数十行のロジックで記述できるでしょう。この程度のコードで多くのタイリングの手法が包含できるのであれば、特定のタイリング手法をフレームワークのコアに内包する・さらにはこれら特定のタイリングの手法にコアが依存する必要はなく、先述のウェブアプリケーションによる動的な地図レイヤーとして実装すれば良いであろうというのがSVGMapにおけるタイリング扱いです。3DマップのフレームワークであるCesiumはこれに似たタイリングポリシーを持っているようです。

=====SVG以外のデータサポートに関するノート=====
前章に記載した方針と同様、他の地図表示フレームワークと異なりSVGMapではSVGとして規定されたコンテンツ(もちろんビットイメージの埋め込みは可能)以外のネイティブサポートは行いません。例えばgeoJsonやKML, WKTなど地図業界でしばしば用いられるデータをSVGMapで表示したい場合は、変換ルーチンを埋め込んだ動的な地図コンテンツ（webAppレイヤー）としてそれらを扱います。SVGMap.jsの拡張モジュールである[[#svgMapGIStool.で呼び出せるAPI|SVGMapGIS.js]]には、これらのデータをwebAppsで読み込みSVGに変換するためのAPIがあります。

===トポロジースイート(地理空間情報処理)===
Rev.13で拡張

SVGMapLevel0.1 Revision 13以降では、SVGMapコンテンツに対してトポロジー演算機能(地理空間情報処理機能)を適用する拡張フレームワークが提供されます。この機能を用いるにはSVGMapLevel0.1フレームワークに加えて、拡張フレームワーク(SVGMapLv0.1_GIS_r*.js)をロードする必要があります。このフレームワークでは、[[#svgMapGIStool.で呼び出せるAPI|拡張されたAPI]]が利用可能です。フレームワークに内蔵された基本的な演算機能に加え、geoJSONと整合するインターフェースを備え、[https://github.com/bjornharrtell/jsts jsts]を組み込み、より高度な機能を実装するための機構も持ちます。

この機能を用いると、特定のレイヤーに登録されているポリゴンの範囲に入っている、特定のレイヤーのポイントをフィルタリングして表示の色を変更する。といったことが可能です。ただし、これらはすべてすでにブラウザ上にロードされている限られた量のコンテンツの中での演算に限定されます。もしもサーバ上にしかないデータに対してこれらの演算を試みたい場合、従来通りサーバサイド技術によってそれは実現すべきです。

また、主題情報を含むウェブマップコンテンツの多くのレイヤーがラスタータイルによって提供されているという現状を考慮し、このスイートはラスターレイヤーをカバレッジとして扱った空間情報処理を行う機能の実装も進められています。現在のところ、カバレッジとポイントとの間での演算が可能です。また、そのために便利なカラーピッカー等の付加的な機能の実装も進められています。

===オーサリングシステム===
Rev.14で拡張

SVGMapLevel0.1 Revision 14以降では、SVGMapコンテンツを編集するツール機能が実装された拡張フレームワークが提供されます。[[#svgMapAuthoringTool.で呼び出せるAPI|フレームワークが提供するAPI]]を使って、オーサリング機能を持ったレイヤーを作ることが可能です。コンテンツは、SVG DOMとして構築されます。なお編集したオブジェクトを保存したり登録するためには別のサービスやアプリケーションの開発が必要です。

===3D可視化システム===
Rev.15で拡張

[https://cesiumjs.org/ Cesium.js]を用いて、SVGMap.jsが表示できるすべてのコンテンツを3D可視化するシステムです。詳細解説はTBD ([[#svgMapCesiumWrapper.で呼び出せるAPI|フレームワークが提供するAPI]])

===プログレッシブウェブアプリケーション===
Rev.16で拡張

[https://developer.mozilla.org/docs/Web/Progressive_web_apps Progressive Web Apps]をサポートしたブラウザにおいて、SVGMap.jsをオフラインでも利用可能にする拡張機能です。詳細解説はTBD ([[#svgMapPWA.で呼び出せるAPI|フレームワークが提供するAPI]])

===SVGMapコンテンツのバックエンドソフトウェア (参考)===
本解説書は主にコンテンツ形式とユーザーエージェント側のソフトウェアについて解説していますが、サーバ・バックエンド側についてもここで少し言及します。

shapefileやcsvなどから、静的なSVGMapコンテンツを生成するためのソフトウェアが[https://github.com/svgmap/svgMapTools オープンソース]で準備されています。これらのソフトウェアでは、[[#タイリングに関するノート|高度なタイリング手法]]を用いた地図タイルを生成することができます。使用方法などは同リポジトリに用意されているチュートリアルを参照してください。

一方、もちろんSVGMapの仕様に準拠すれば、これらのソフトウェアに頼らず、自由にバックエンドを構築することができます。例えばよく知られた地図タイルサービスを用いたり、古典的な[https://wiki.openstreetmap.org/wiki/Web_feature_service WFS ]や[https://wiki.openstreetmap.org/wiki/WMS WMS]のような動的地図・地理空間情報サービスをベースにして比較的容易にそれらを構築することもできます。[https://github.com/svgmap/svgMapLv0.1/tree/master/appLayers SVGMap.jsのリポジトリのappLayersディレクトリ]にはそのようなシステムを構築する際のフロントエンド側の動的レイヤーのサンプルが掲載されています。

==第二章：SVGMap Revsion 0.1フレームワーク==
SVGMapは究極的には既存のすべてのウェブブラウザがネイティブの機能としてそれを備えることを目標とし、既存のHTML,CSS,SVGなどのウェブブラウザの標準規格との整合性を備え、且つ既存のWeb Mappingの規格との整合性をも備えた仕様として検討と標準化を進めています。しかし今のところまだその標準化は完遂されていないため、その完全な実装がなされたウェブブラウザは存在しません。一方、既存のウェブブザでSVGMapの機能が実行可能となるような拡張をJavascriptによるフレームワークとして構築することが可能です。SVGMap Revision 0.1フレームワークは、このようなJavascriptによるSVGMapの仕様に基づいた初歩的な制限と拡張がされた実装です。その実装はオープンソースとして[https://github.com/svgmap/svgMapLv0.1 こちらのgitubリポジトリ]で公開されています。

そのアーキテクチャの特徴は、ブラウザネイティブのSVGレンダラーを使用せず、HTML,CSS,HTMLCanvas2DAPIを用いてSVGMapが実装されている点です。この特徴は主にこのフレームワークの開発が開始された時期に起因しています。当時のウェブブラウザの多くはSVGが実装されていませんでした。また実装されていたとしても、大規模なベクトルデータのレンダリング、および伸縮スクロール・インタラクティブな操作に対する性能面での処理制御に問題がありました。これらの問題のいくつかは現在のブラウザで解消されているものがあるかもしれません。またこれらの問題の解決とともに、SVGMapフレームワークはLevel番号を上げつつよりネイティブの機能に基づいた実装に移行するかもしれません。<font size="-2">参考までに、[http://svg2.mbsrv.net/devinfo/devkddi/lvl0.5/ 実験的なネイティブのレンダラを用いた実装(2010年)]があります。</font>

SVGのベクトル描画機能は[https://github.com/canvg/canvg canvg]のpathパーサなどを引用することで実装されています。一方、地図としてあまり用いられないと想定された多くの要素やプロパティ、アトリビュートの実装が省略されています。

===追加・拡張された機能：===
====フレームワークの呼び出し====
本フレームワークを用いる場合、SVGMapコンテンツをブラウザに直接読み込ませることはできません。フレームワークを動作させるjavascriptライブラリをロードしたhtmlコンテンツ(WebApps)を準備し、そこでSVGMapコンテンツを読み込み表示させます。利用者には、このhtmlコンテンツのURLを告知します。このhtmlコンテンツを以降'''ルートhtml文書'''と呼ぶことにします。

SVGMapのフレームワークはgithubリポジトリ：https://github.com/svgmap/svgmapjs　で公開されています。

htmlコンテンツの<body>要素直下に以下の要素を配置します。
=====フレームワークを実装したjavascriptライブラリを読み込むscript要素=====
これがSVGMap.jsのコアのフレームワークを構成します。

<nowiki><script type="module">
import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

上のスクリプトで必要なモジュールが読み込まれます。[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]のwindowのメンバには、svgMapオブジェクトを設定しています。

[https://svgmap.org/devinfo/devkddi/tutorials/tutorial5_esm/tutorial5.html 実働サンプル(tutorial5_esm)]

もしくは https://github.com/svgmap/svgmapjs の内容を独自のウェブホストにコピーしそれを用いることもできます。(下の例は[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]のhtmlに対して、svgmapサブディレクトリにjsを置いた場合)
<nowiki><script type="module">
import { svgMap } from './svgmapjs/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

===== GISモジュールを利用する場合 =====
svgMap.jsの地理空間演算機能(GISモジュール)では、jsts.jsを使用しています。そのためGISモジュールを機能させるにはjsts.jsの読み込みが必要です。下記のようになります。もちろん独自のウェブホストにjstsをコピーしてそれを利用することも可能です。

<nowiki><script type="text/javascript" src="https://unpkg.com/jsts@1.6.1/dist/jsts.min.js"></script>
<script type="module">
import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

======本解説書でAPIを説明している、現在利用可能な拡張フレームワーク======
ECMA Script Module対応の内容に現在更新中

* [[#svgMapCesiumWrapper.で呼び出せるAPI|SVGMapLv0.1_CesiumWrapper_r*.js]] (実験的)
** https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/experimental/Cesium3D/SVGMapLv0.1_CesiumWrapper_r3.js
* [[#svgMapPWA.で呼び出せるAPI|SVGMapLv0.1_PWA_r*.js]] (実験的)
** https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/experimental/PWA/SVGMapLv0.1_PWA_r5.js

まだ実験的なsvgMapCesiumWrapperは、[http://www.svgmap.org/devinfo/devkddi/lvl0.1/cesiumSvgMap/top.html svgMap cesium visualizer]ページを参照ください。
SVGMapPWA(ProgressiveWebApp)については、[https://svgmap.org/devinfo/devkddi/lvl0.1/svgMapPWA/ SVGMap PWA Test]ページを参照ください。

=====SVGMapコンテンツを配置するためのdiv要素=====
id属性に"mapcanvas"を設定し、data-src属性(もしくはtitle属性(to be obsoluted))には、地図フレームワークが最初に読み込む、SVGMap.jsが表示する地図コンテンツの起点となるSVGコンテンツ（以降'''コンテナsvgコンテンツ'''と呼びます）のパスを指定したdiv要素を設置します。

コンテナsvgコンテンツはまた、'''[[#レイヤー|ここで記述するレイヤー]]'''を持つことができる特別のコンテンツです。

（要確認：地図のサイズ・配置はこのdiv要素のサイズとなります。無指定の場合は全ウィンドサイズ）
<nowiki><div id="mapcanvas" title="Container.svg"></div></nowiki>

<nowiki><div id="mapcanvas" data-src="Container.svg"></div></nowiki>

======差分データの指定======
data-custom-layers-root属性でContainer.svgに対するレイヤーの差分情報のパスを指定することができます。
もしくは、data-custom-layers-root属性に、レイヤーの差分情報が保管されているディレクトリを記述した場合、URLハッシュで差分ファイルを指定することもできます。
差分データは、[https://github.com/svgmap/svgmapjs/blob/main/SVGMapCustomLayersManager_r3module.html カスタムレイヤーマネージャ]で作成することが可能。（データ形式は後述）
<nowiki><div id="mapcanvas" data-src="Container.svg" data-custom-layers-root="./containerDif/dif0.json"></div></nowiki>

=====地図中心の照準イメージ。=====
参照する画像はあらかじめ用意されたもの以外も利用できます。
<nowiki><img id="centerSight" style="opacity:0.5" src="Xcursor.png" width="15" height="15"/></nowiki>

====任意で設置できる要素：====
=====[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]](後述)を設置するdiv要素=====
<nowiki><div id="layerList" style="left :30px; top: 10px; width:300px;height:90%; position: absolute; "></div></nowiki>
: idが上記の通りである必要があります。
　 styleは任意だが、heightは[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]が展開された状態におけるサイズとなります。格納された状態のサイズは、この要素における文字の縦幅となります。各種オプションについては[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|詳細を参照ください]]
　

=====[[#レイヤー固有のUI|レイヤー固有のUI]](後述)を設置するdiv要素=====
[[#レイヤー固有のUI|レイヤー固有のUI]]を使用するために設置するdiv要素です。

<nowiki><div id="layerSpecificUI" style="right :10px; top: 40px; width:400px;height:400px; position: absolute; background-color: white;opacity:0.8;display:none;"></nowiki>
<nowiki></div></nowiki>
: idが上記の通りである必要があります。styleは任意だが、heightはレイヤリストUIが展開され得る最大のサイズとなります。
　
=====伸縮ボタン=====
<nowiki><img id="zoomupButton" style="left: 5px; top: 5px; position: absolute;" src="zoomup.png" onclick="svgMap.zoomup()" width="20" height="20" /></nowiki>
<nowiki><img id="zoomdownButton" style="left: 5px; top: 25px; position: absolute;" src="zoomdown.png" onclick="svgMap.zoomdown()" width="20" height="20" /></nowiki>
: img要素かつidが上記の値である必要があります。
　伸縮ボタンを一回押すたびに伸縮する比率は、別途svgMap.setZoomRatio(ratio)で設定可能。
　デフォルトの比率はsqrt(3)
　
=====測位ボタン=====
<nowiki><img id="gpsButton" style="left: 5px; top: 45px; position: absolute;" src="gps.png" onclick="svgMap.gps()" width="20" height="20" /></nowiki>
: img要素かつidが上記の値である必要があります。ボタン押下で測位し、測位点を中心にして地図を表示する機能。表示の範囲は測位制度に応じて適当に設置されます。

=====グローバルメッセージ=====
レイヤー固有UIが任意のメッセージを出力可能にするために設置するエリア　[[#レイヤー固有のUI]]のAPI '''putGlobalMessage''' 参照
<nowiki><span id="globalMessage" style="font-size:10px;left:5px;bottom:16px;position:absolute;"></span></nowiki>
: idが上記の値である必要があります。
　styleは任意

=====地図中心の緯度経度値表示=====
<nowiki><font id="centerPos" size="-2" color="brown" style="left: 50px; bottom: 5px; position: absolute;" ></font></nowiki>
: idが上記の値である必要があります。
　styleは任意

=====地図スケールの表示=====
<nowiki><font id="vScale" size="-2" color="black" style="left: 5px; bottom: 28px; position: absolute;">-</font></nowiki>
: idが上記の値である必要があります。
: styleは任意
: 縦50pxに対応したスケール[Km]を表示します
: 近傍に縦50pxのスケールイメージを設置するとわかりやすいでしょう

=====レジューム機能のためのチェックボックス=====
<nowiki><form style="right:10px;top:20px;position:absolute;opacity:0.8" ></nowiki>
<nowiki><input type="checkBox" id="resumeBox" onChange="svgMap.resumeToggle(event)" autocomplete="off"/></nowiki>
<nowiki><label for="resumeBox"/>Keep and Resume view</label></nowiki>
<nowiki></form></nowiki>
: checkboxタイプのform要素であり、idが上記の通りである必要があります。レジューム機能とは、(rev16以前ではcookie、rev17以降ではlocalStorage)を用いて、前回最後に表示された状態（レイヤーの表示非表示状態、表示領域（view port）を再現する機能です。スタイルおよびlabel要素は任意

===== [[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]のためのスタイル=====
<style>
body {
font-family: Meiryo;
}
#layerTable{
background:#ffE0E0;
border: 2px solid #bbb;
}
.layerItem{
background-color: white;
}
.noGroup{
background-color: #fff0f0;
}
#layerList{
background-color: #ffff80;opacity:0.8;
}
</style>
====== [[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]を用いる場合、例えば上記のようなスタイルの定義が必要です。======
* layerList：レイヤーリストUI全体に対するスタイル
* layerTable：レイヤーリストUIの中のテーブルに対するスタイル。
* layerItem：同テーブルに表示される個々のレイヤー表示に対するスタイル
* noGroup：同レイヤー表示のうち、グループに属さないレイヤーに対するスタイル
　

====レイヤー====
SVGMapは古典的な地図情報システムのようなレイヤーの概念を備えていません。一方その上位概念ともみなせる、任意のドキュメントをツリー状に埋め込む機能を備えています。しかしそれでは古典的なユースケースを平易に表現しているとはいえないため、それをラップする古典的なレイヤーの概念と、それに基づくレイヤーユーザインターフェースのフレームワークを持ちます。

フレームワークが最初に読み込む地図コンテンツの起点となる'''[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]'''の中で、animationもしくはiframeを用いて（準拠規格に依る）埋め込まれるsvgコンテンツが、自動的にレイヤーとみなされます。いうまでもなくレイヤーの上下順はSVGコンテンツのスクリプト中での埋め込みの順番の逆順になります。

また、このコンテナsvgコンテンツが参照し埋め込んでいる、各レイヤーのSVGコンテンツのことを、'''[[#レイヤー|レイヤーsvgコンテンツ]]'''と呼ぶこととします。ここで、各[[#レイヤー|レイヤーsvgコンテンツ]]はさらに別のsvgコンテンツを埋め込むことがあります。これらのコンテンツはよくサブレイヤーSVGコンテンツもしくは単にサブレイヤーと呼ばれることもあります。

なお、Rev12以降のSVGMapLv0.1フレームワークではレイヤーフレームワークは本体と独立した実装となり、拡張や切り離しが可能となりました。以下は、標準で提供されるレイヤーフレームワークのVer2 (SVGMapLv0.1_LayerUI2_r*.js)に関して解説します。

レイヤーUIフレームワークが提供するUIは、先述のレイヤーリストUIを設置するdiv要素によって提供されます。このUIは以下の機能を持ちます。
* 折り畳み可能なレイヤーの一覧を表示する機能
* 各レイヤーの表示非表示を切り替える機能
* グルーピングされたレイヤー(後述)をグループとして表現、折り畳み、一括表示非表示する機能。
* そのレイヤーに紐づけられた[[#レイヤー固有のUI]]を出現させる機能。
* 表示されているレイヤーの個数などの情報を表示する機能

===== コンテナsvgコンテンツの記述内容とレイヤーフレームワークの振る舞い =====
* animation要素：　レイヤーとみなされる
** title属性: レイヤーの名称となる。(必須属性) title属性値は他のレイヤーと重複してはならない(ID(このコンテンツ内でのレイヤーの識別子)として振る舞う)
** xlink:href属性: レイヤーsvgコンテンツへの参照
** visibility属性 : レイヤーの初期の表示状態。UIにより変更できる (hidden or visible)
** opacity属性 : レイヤーの透明度
** x,y,width,height属性の振る舞いは共通(viewportがこの属性の値とintersectしていただロードされる)
** class属性: スペース区切りで規定値(複数)と任意値(一つ)を記述できる
*** 詳細は後述の[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供]]を参照
** data-controller属性: (Optional) [[#レイヤー固有のUI]]　の　[[#詳細]]参照
* globalCoordinateSystem要素：(1個つだけ必須要素)
** (コンテナsvgコンテンツにおける)本要素が、このフレームワークによってUser Agentに表示される地図の図法を規定する。
*** なお、それ以外のSVGコンテンツのglobalCoordinateSystem要素は、コンテナsvgコンテンツの図法への変換のために用いられる
*** より詳細は[[#地理座標系の処理]]を参照
* svg要素: (documentRoot要素)
** viewBox属性: 初期の表示範囲を指定。
*** ここに記述する座標値は、SVGの仕様に準ずるが、　拡張記述形式も使用可能　参照：[[#メルカトル図法のドキュメントルート要素のviewBox属性]]

===== レイヤーsvgコンテンツ =====
レイヤーsvgコンテンツは、[[#レイヤー固有のUI|レイヤー固有のUI]]を紐づけることができます。

====クリッカブルオブジェクト====
グラフィックスオブジェクトをクリック（タブレットの場合は、タップもしくは照準アイコンに合わせたうえでタップ）することでそれに紐づけられたインタラクティブ動作を実行する。インタラクティブ動作はフレームワークが独自に提供する、metadataフレームワークに基づく、メタデータの表示機能を対象とします。

なお、image要素(useによって間接的に設置されたimage要素を含む)は、a要素によるハイパーリンクが加えて実装されています。metadaとa要素の双方が設定されているimage要素では、どちらのインタラクティビティを発動させるかをモーダルダイアログによるユーザへの問い合わせが行われます。

====class属性によるレイヤーのグルーピング・クリッカブル機能の提供====
コンテナsvgコンテンツが参照するレイヤー（[[#レイヤー|レイヤーsvgコンテンツ]]）へのリンクを記述する要素(animationもしくはiframe要素)は、class属性によって、各レイヤーに特性を与えることができます。classはスペース区切りで複数指定することができますが、グループ名は一つしか認識されません。
;グルーピング
: 以下の属性値以外の値を記述すると、グループ名として認識され、同じグループ名を持ったレイヤーたちをグルーピングすることができます。グルーピングの効果はレイヤーＵＩにおけるグループ表現と、下記のbatch,switch特性です。グループはレイヤーリストUI上の表現に反映されます。最初に現れたグループ名がこのUIの下に表示されます。ただし地図画面上の描画の順番はこれとは別、SVGの基本的な描画順([https://www.w3.org/TR/SVG11/render.html#PaintersModel Painter Model])に準じます。
;batch
: グルーピングとともに使用します。そのグループに属するレイヤーを一括で表示非表示するための機能がレイヤーＵＩに付加されます。
;switch
: グルーピングとともに使用します。そのグループに属するレイヤーは、どれか一つしか表示されません。batchとの併存はできません。（無視されます（要確認））
;clickable
: Pathなどのベクトル図形要素はデフォルトではインタラクティビティが提供されません。クラス値にclickableを指定することでこのレイヤー（子供のsvgコンテンツを含む）の図形要素においてのみ、インタラクティビティが提供されます。提供されるインタラクティビティは、マウスによって図形をクリックしたとき、そのグラフィックス要素がクリッカブルな要因を備えているかどうかを検索し、備えている場合それに対応するアクションを起こします。
　なお、image要素(useによって間接的に設置されたimage要素を含む)は、このクラスの設定に依らず、a要素によるハイパーリンク、およびmetadataフレームワークを用いたクリッカブルオブジェクトとして機能します。
;editable
: 当該レイヤの[[#レイヤー固有のUI|レイヤー固有UI]]に[[#svgMapAuthoringTool.で呼び出せるAPI|svgMapAuthoringTool]]の図形編集オブジェクトを設置する場合、それを有効に機能させるためにはこの属性が必要です。(なお再編集機能を有効にするにはclickableも必要)

====data-nocache====
コンテナsvgコンテンツが参照するレイヤー（[[#レイヤー|レイヤーsvgコンテンツ]]）へのリンクを記述する要素(animationもしくはiframe要素)に、data-nocache属性をつけることによって、クライアントのコンテンツキャッシュを無効にすることができます。なお、無効化手段はunix-timeクエリパートをそのレイヤー下のすべてのリソースへのアクセスに付加させることによります。

====metadataフレームワーク====
データ格納効率に優れたメタデータのフレームワークが提供されます。このメタデータは先述のクリッカブルオブジェクトとしてインタラクティビティの実装に用いられます。 svgドキュメントルート要素のproperty属性にメタデータの属性名をカンマ区切りで列挙。同文書の図形要素のproperty属性に同じ順序でメタデータの値を記述します。(なお、xlink:title属性でマウスオーバーで機能する吹き出しを設置できます)

ひとつの文書に対して一つのスキーマ（メタデータの属性名とその順番）しか与えられないという制約を持ちます。（その代わり格納効率が高い）クリックやタッチ等によってデフォルトの状態ではブラウザが備えるモーダルダイアログに属性名と属性値がそれぞれ列挙された形で表示されます。metadata表示機能の拡張/カスタマイズについては、ウェブアプリケーションの開発の章で別途解説する'''setShowPoiProperty()'''関数を参照してください。

データ自体にカンマが含まれる場合はエスケープが必要です。

=====例：=====
<svg '''property="id,type,latitude,longitude,title,address,spec"''' ... >
...
<use transform="ref(svg,14118.37511,-4524.39994)" x="0" y="0" xlink:href="#syl8"
'''content="RIS/RJER,地方管理,45.2439994,141.1837511,利尻空港,北海道利尻郡利尻富
士町,1800×45(07/25)"''' xlink:title="利尻空港"/>
...
</svg>

====レイヤーリストUIの詳細====
[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.28.E5.BE.8C.E8.BF.B0.29.E3.82.92.E8.A8.AD.E7.BD.AE.E3.81.99.E3.82.8Bdiv.E8.A6.81.E7.B4.A0|レイヤーリストUIが設置されるdiv要素]]には、以下のプロパティを設定することで、UIの動作を調整するパラメータを与えることができます
* data-customizer [https://github.com/svgmap/svgmapjs/blob/main/SVGMapCustomLayersManager_r3module.html カスタムレイヤーマネージャ]の起動ボタンを設置し、プロパティ値で同ウェブアプリのパスを指定します。
* data-layerstylecontroller 各レイヤーの表示スタイルを調整するUIを設置します(値不要)
* data-hiddenfilter 表示されていないレイヤーをレイヤーリストUI上でも非表示にする機能を稼働させます(値不要)
* data-opened svgMapウェブアプリが起動した直後にレイヤーリストが開かれた状態にします
* data-fixed レイヤーリストが開かれた状態且つ閉じるボタンを表示させません(data-openedと排他)

===動作の制限・差異===
====再描画の制限====
* ブラウザネイティブのSVG描画機能に対して注意すべき点として、このSVGDOMの描画は、基本的に伸縮スクロールのタイミングでしか行われない点です。（ネイティブのSVG描画機能は60fpsで再描画する努力を行っている) そのため、再描画タイミングを意識・明示([[#refreshScreen|refreshScreen]]関数を使用)したアプリケーションの構築が必要になるケースがあります。
*関連情報
**[[内部機構解説#Zoom.2FPan_Controller:]]
**[[解説書#refreshScreen|refreshScreen]]
**[[解説書#setPreRenderController|setPreRenderController]]
**[[解説書#.E6.8B.A1.E5.BC.B5API|preRenderFunction ]]
**[[解説書#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|動的な地図レイヤー]]
**[[解説書#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|レイヤー固有のUI]]
**[[解説書#.E6.8B.A1.E5.BC.B5.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88|拡張イベント]]

===実装されている機能===
多くの機能が実装されていないため、実装されている機能、および拡張された機能をここでは列挙することとします。
====要素====
*path
*globalCoordinateSystem
*circle
*text
*defs
*animation
** 別のsvgコンテンツを取得して埋め込みます。
** コンテナsvgコンテンツで使用した場合は埋め込んだコンテンツは「レイヤー」と見做されます。
** それ以外で使用した場合はタイルやサブレイヤーとして使用できます。
** x,y,width,height属性は、SVGの仕様に基づき埋め込むコンテンツのtransformに影響を与えるとともに、下記の通り動的なコンテンツの読み込み機構が制御されます。
*** この属性で示された領域がtransform後のviewportと交差・包含した場合、その埋め込みコンテンツは動的に取得され表示されます。lazy loadの機構に相当し、タイリングメカニズムを構成します。
*** ただし、visible-min-zoom およびvisible-max-zoom属性で示された拡大率による表示条件を満たしていない場合は取得されません。level of detailの機構に相当します。（x.y,width,height属性と組み合わせることで、タイルピラミッド（ラスター、ベクターを含む）機構を実現します。詳しくは[http://kikakurui.com/x7/X7197-2012-01.html JISX.7197]、[https://www.w3.org/Submission/2011/04/ Tiling and Layering Moduleサブミッション]、もしくは[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html こちらの論文]を参照
** commonQuery属性：[[#レイヤーsvgコンテンツ]]のanimation要素でこの属性を設置すると、そのレイヤーのコンテンツを取得するすべてのGETリクエストのクエリパートにこの属性で設定した値が共通付加されます。(もしKey=Valueの形のクエリを追加したい場合は文字列として"Key="の部分も含めてこの属性値に設定します。)
*iframe
** animationと同等
*image
** 別のビットイメージコンテンツを取得して埋め込みます。
** animation属性のx,y,width,height属性と同様の追加のlazy loadの振る舞いを持ちます。
** visible-min-zoom およびvisible-max-zoom属性の振る舞いも同等です。
** xlink:href属性はspatial fragment をサポートし、(xywhによっ参照されるimageの部分を埋め込む機能をサポートします。)。もしもアスペクト比が異なった場合（ＴＢＤ）
** style:filterプロパティによる画像処理をサポートします。
** data-mercator-tile="true"　属性が設定されている場合、そのビットイメージはメルカトル図法で描画されていることを示します。
** htmlのimg要素のcrossoriginに対応する属性を持つことができます（この場合ビットイメージの埋め込みに際しoriginヘッダが送信）
*view

====属性====
*<code>ref(svg,x,y)</code> ：SVG1.2Tの[https://www.w3.org/TR/SVGTiny12/single-page.html#coords-transform-ref TransformRef]属性により、non-scaling objectが設置できます。Pointフィーチャの可視化に効果的です。　

'''TBD'''
*fill
*stroke
*arrow
*dasharray
*viewvox
*opacity
*style
**image-rendering : pixelated / image要素
**fill
**stroke
**opacity
*meta
**http-equiv="refresh" : [[#レイヤー|レイヤーsvgコンテンツ]]のみ。contentに秒数を設定することで、そのレイヤーを指定秒数ごとに(再読み込み)更新する。script要素はonloadが再実行される。　注：ブラウザのキャッシュが効く可能性を考慮して実装する必要がある。

==第三章：ウェブアプリケーションの開発==
本章はSVGMap Revsion 0.1フレームワークを用いたウェブアプリケーションの開発について解説します。
本フレームワークによる開発部分は以下に分類されます。
*[[#フレームワークの呼び出し|ルートhtml文書]]によるウェブアプリケーション(SVGMapフレームワーク)
* 動的な地図レイヤー(Layers as WebApps) : SVGコンテンツに以下のいずれかの情報を設定する
** [[#レイヤー|レイヤーsvgコンテンツ]]のドキュメントルート要素のdata-controller属性　[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|レイヤー固有のUI]]
** svgドキュメントに設置されたscript要素 [[#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|script要素による動的な地図レイヤー]]

===SVGMapフレームワーク===
[[#フレームワークの呼び出し|ルートhtml文書]]によるウェブアプリケーションはSVGMapLv0.1フレームワークを用いたウェブアプリケーションの基本であり、そのhtml文書と底傘参照されたjavascriptライブラリを読み込んだwindowが持つ''''svgMap''''という名前のインスタンスを用いてフレームワークのための拡張機能を利用することができます。

====SVGMapが持つ基幹オブジェクト====
SVGMapLv0.1フレームワークのインスタンス''''svgMap''''が持つ基幹のオブジェクトを解説します。これらの基幹オブジェクトはそれぞれゲッター(getSvgImages, getSvgImagesProps)によって取得できます。
=====svgImages[]=====
[[#getSvgImages|getSvgImages()]]により取得できる。svgImages[hashID]は、現在ローディングされているSVGドキュメント(“XML” DOMツリー(SVG DOMツリーというよりむしろ))が蓄積されているハッシュテーブル
*ハッシュID：フレームワークが任意に付番した文書ID。ただし、最初にロードされるルートのドキュメントのハッシュキーは、”root”
*なお、[[#レイヤー固有のUI]]のwebAppでは、そのレイヤーに該当するSVGドキュメントが[[#svgImage|svgImage]]で取得できる。

=====svgImagesProps[]=====
[[#getSvgImagesProps|getSvgImagesProps()]]によって取得できる。
同、個々のSVGドキュメントが持つ、各種プロパティが蓄積されているハッシュテーブル。
注記がない限り全てReadonly
*ハッシュID： svgImages同様
*なお、[[#レイヤー固有のUI]]のwebAppでは、そのレイヤーに該当するSVGドキュメントが持つ、各種プロパティが[[#svgImageProps|svgImageProps]]で取得できる。
======プロパティリスト======
*.Path コンテンツのパス（webAppsのdocument(html) rootに対する相対パス。Originが違う場合は絶対パス(クエリパートやフラグメント(ハッシュ)も含む)
*.CRS 地理座標からSVG座標に変換するための変換パラメータ
*.script SVG文書がscript要素を持つとき、そのscriptへのインターフェースが登録される。同script要素で生成されるオブジェクトに暗黙に登録されるメンバー変数については、[[#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|script要素による動的な地図レイヤー]]の章を参照
*.editable 編集可能レイヤーを示す　[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供|レイヤーのclass = editableに対応]]
*.editing 編集可能レイヤーを編集中
*.isClickable クリッカブルなレイヤーを示す
** true:設定　[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供|レイヤーのclass = clickableに対応]]
** 以下をメンバーに持つオブジェクト:ハイライト時のスタイルを設定可能(rev18以降)
*** .hilightFillStyle : ポリゴンオブジェクトのハイライト時スタイル（以下のメンバーが無い場合はハイライトしない）
**** .color : 塗りの色 (CSS の color値として解釈される文字列)
**** .lineWidth : 線幅
*** .hilightStrokeStyle : 線オブジェクトのハイライト時スタイル（以下のメンバーが無い場合はハイライトしない）
**** .color : 線の色 (CSS の color値として解釈される文字列)
**** .widthIncrement : 線幅の増加値
*.parentDocId このSVG文書を埋め込んでいる、親のSVG文書のハッシュID
*.childImages[hashID] このSVG文書が読み込んでいる、子のSVG文書(複数)
*.refresh
**.loadScript
**.timeout
**.start
*.controller レイヤー固有のUIへの(web appsのdoc rootに対する)相対パス
*.isSVG2 その文書がSVG2タイプの文書であるかどうか(CRSとembedの仕方がちがう）
*.rootLayer そのSVG文書が属する「レイヤー」を示す文書
*.scale そのSVG文書の現在のスケール。スケールはそのSVG文書の座標系と画面の座標系との間の値（地理座標系ではない）。拡大するとスケール値は大きくなる
*.preRenderControllerFunction そのSVG文書の再描画(画面更新)シーケンスの直前に実行される関数
*.hash そのレイヤーのURLのフラグメント部（この値は、レイヤ固有WebAppで変更が有効）

====利用可能API====
【TBD】 APIのリストは下記の通りです。
=====SVGMap.で呼び出せるAPI=====
======Geo2SVG======
*Geo2SVG( lat , lng , crs ) : 指定された緯度(lat)・経度(lng)・CRSより、SVG座標を計算する
======POIviewSelection======
*POIviewSelection( poi ) : 指定されたPOIの属性・リンクの表示選択画面を表示する。また、選択したイベントに従い、属性の表示または、リンク先のページを表示する。
======SVG2Geo ======
*SVG2Geo ( svgX , svgY , crs , inv ) : 指定されたSVG座標(svgX , svgY)をCRSにより、GEO座標に変換する。または、invにより逆変換する
======addEvent======
*addEvent(elm,listener,fn) : 指定された要素(elm)にイベント属性(listener)時の呼び出す関数(fn)を設定する (addEventListenerが実装されていなかったブラウザサポートの名残です)
======callFunction======
*callFunction( fname ,p1,p2,p3,p4,p5) : 指定した関数(fname)を引数(p1,p2,p3,p4,p5)を渡してフレームワーク内の任意の関数を実行する。(フレームワークの内部関数も呼び出すことができる)
======captureGISgeometries======
*captureGISgeometries( cbFunc , prop1 , prop2 , prop3 , prop4 , prop5 , prop6 , prop7 ): 現在画面上に表示中の地図コンテンツに対応した、GeoJsonのGeometryデータ構造に準拠のGISgeomerry情報をがレイヤ単位でまとまった連想配列の形で取り出す。非同期処理で、cbFuncの最初の引数に返却される。
** 連想配列のハッシュ値：レイヤID
** geomeryには、src(そのジオメトリのもととなっているSVGの図形要素), href(ビットイメージの場合のリンク)が付加される
** geoJsonのgeometryに相当する情報が含まれる（座標は[経度,緯度]）
** display="none"の図形要素は表示されていないとみなされる。また画面外にある図形要素も表示されていないとみなされる。画面に部分的に表示されている要素は表示されているものとみなされるとともにクリッピングも行われない。
** [[#captureGISgeometriesOption|captureGISgeometriesOption]](true)を設定してから実行すると、ビットイメージもジオメトリとして取得する。（ただし実データは含まれないので必要に応じて[[#getImagePixelData|getImagePixelData]]で取得する）
*** type : Coverage
*** src : 画像情報のURL
*** coordinates : transformのb,c==0の場合、当該画像の南西、北東端が設定される
*** transform : b,c!=0の場合の、画像の座標(左上隅を0,0、右下隅が画像のw,h)から地理座標([経度,緯度])への一次座標変換情報(a,b,c,d,e,f)が設定される

======captureGISgeometriesOption======
*captureGISgeometriesOption(BitImageGeometriesCaptureFlg, TreatRectAsPolygonFlg, SkipVectorRenderingFlg, captureAlsoAsBitImage): captureGISgeometriesでキャプチャするデータの取得条件を設定する。
** BitImageGeometriesCaptureFlg: ビットイメージタイルをカバレッジとして取得するか(Default:false)。captureGISgeometriesを呼び出す前に使用する。
*** 2019.5.17アップデートで、transform matrix(非対角要素あり)を持つビットイメージタイルについても必要な情報を得られるようになった。
** TreatRectAsPolygonFlg: rect要素をポリゴンとして扱う(デフォルトは円もrectもPointとして扱われる)
** SkipVectorRenderingFlg: ベクトル図形の描画をスキップする
** captureAlsoAsBitImage: polygon/polylineの図形を描画したビットイメージをレイヤー単位でカバレッジデータとして取得
*captureGISgeometriesOption(captureGISgeometriesOptionObject) : オブジェクトでも設定できる(rev18以降)（以下そのメンバー変数：全て値はboolean）
** .BitImageGeometriesCaptureFlag, .TreatRectAsPolygonFlag, .SkipVectorRendering, .captureAlsoAsBitImage　上と同様

======checkSmartphone======
*checkSmartphone() : タッチに対応したスマホブラウザなのかどうかを判別
======childDocOp======
*childDocOp(func , docHash , param1, param2 , param3 , param4 , param5) : 指定した文書をルートにして、DOM操作をその子文書に対して実行する。なおこれはlinkedDocOpの直系の子供のみ適用版(自身も適用しない)
======dynamicLoad======
*dynamicLoad( docId , parentElem ) : 指定した文書ID(docId)以下の表示に必要な文書を読み込み、指定したdiv要素(parentElem)に表示する
======escape======
*escape(str) : 以下の文字をHTMLエスケープする(&:&amp,":&quot;,':&#039;,<:&lt;,>:&gt;)
======geo2Screen======
*geo2Screen( lat ,lng ) : 地理座標を指定すると、その画面上のキャンバスの座標(px)を返す
======getBBox======
*getBBox( x , y , width , height ) : 指定された値でviewBoxを作成する

======getBasicPermanentLink======
* getBasicPermanentLink(copyLinkTextToClipboard) : 現在の表示状態(レイヤーの表示非表示および表示領域)を反映した基本的なパーマリンクを生成する
** URLオブジェクトが返却される
** copyLinkTextToClipboardがtrue場合、クリップボードにもURLがコピーされる。
** 生成されるURLは、[[#起動URLによるオプション指定]]の仕様に基づく
** 参考：[[#サブレイヤーパーマリンク]]

======getCentralGeoCoorinates======
*getCentralGeoCoorinates() : グローバル変数 rootViewBox,rootCrsから画面中心地理座標を得る
======getConversionMatrixViaGCS======
*getConversionMatrixViaGCS( fromCrs , toCrs ) : 元座標変換行列(fromCrs)から先座標変換行列(toCrs)への変換行列を作成する

======getCORSURL======
* getCORSURL(originalURL, alsoCrossoriginParam) : クロスオリジンアクセス用URLを生成する。([[#setProxyURLFactory|setProxyURLFactory]]の第4,5引数が設定されている場合)
** alsoCrossoriginParam クロスオリジンアクセスに際してoriginヘッダが必要かを取得する(この引数がある場合は.url, .crossorigin メンバを持つオブヘクトが返却される)
** レイヤー固有UIのウェブアプリなどで独自にクロスオリジンアクセスを行ってデータを取得するような場合にプロキシ経由のURLを生成するのに利用できます。
** 参考：[[#.E3.83.97.E3.83.AD.E3.82.AD.E3.82.B7.E3.81.AE.E8.A8.AD.E5.AE.9A|クロスオリジンアクセスのためのプロキシ設定]]

======getDevicePixelRatio======
*getDevicePixelRatio( docId ) : setDevicePixelRatioで設定した値を取得できる。 docIdが指定されなかった場合は全ての値が得られる

======getElementByImageId======
*getElementByImageId( XMLNode , searchId ) : 指定されたSVG文書群ノード(XMLNode)以下の属性iidが指定されたID(searchId)と等しいノードを返す

======getLoadErrorStatistics======
*getLoadErrorStatistics() : 伸縮スクロール、refreshScreenごとの、リソースの読み込み状況を取得する。
**メンバー変数: timeoutBitImagesCount,timeoutSvgDocCount,otherBitImagesCount,otherSvgDocCount

======getGeoViewBox======
*getGeoViewBox() : コンテナsvgのviewBoxをgeo変換したgeoのviewBoxを取得
======getHashByDocPath ======
*getHashByDocPath ( docPath ) : ターゲットのレイヤーのハッシュをPath名(docPath)から探し出す
======getHyperLink======
*getHyperLink( svgNode ) : 指定されたsvg文書(svgNode)から、親文書をたどり最初に取得できたハイパーリンクを取得
======getInverseMatrix======
*getInverseMatrix(matrix) : 逆行列を求める(matrix.a..f)
======getLayer======
*getLayer(layerID_Numb_Title) : [[#getLayerId|layerID]],title,番号,href(URI)のいずれかで、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]SVGDOMにおけるレイヤーの(svg:animation or svg:iframe)要素を取得する。getLayersと似ているが、getLayersのほうは任意のsvg文書(オプションなしではroot container)に対して、内包されるレイヤーのリストを返却。こちらは[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]に対して検索キーに基づいてレイヤーを返却する

======getLayerId======
*getLayerId( layerKey ) : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]における"レイヤ"概念のレイヤidを検索する。検索に用いることができるのは、getLayerと同じtitle,url,もしくはルートレイヤの要素
* layerIDはレイヤー名とは異なる、フレームワークによって任意に附番された、そのSVGMapドキュメントを識別するための文字列。このlayerIDを基に動作するAPIが多くあります。
* [[#レイヤー固有のUI]]　の　[[#layerID]] も参照

======getLayers======
*getLayers( id ) : オプションなしの場合、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーに該当する要素をリストアップし、返却する。オプションアリの場合、そのidを持つ要素を返却
======getLinearTransformMatrix======
*getLinearTransformMatrix(x1i,y1i,x2i,y2i,x3i,y3i,x1o,y1o,x2o,y2o,x3o,y3o) : ３つの基準点の変換前後の座標を与えると、それに適合する1次変換行列が得られる。(*i:変換前の座標, *o:変換後の座標)
======getMapCanvas======
*getMapCanvas() : 地図キャンバスとなる、おおもとのdiv要素の取得
======getMapCanvasSize======
*getMapCanvasSize() : 地図キャンバスのサイズ(画面サイズ)を取得
======getMouseXY======
*getMouseXY( evt ) : 指定されたイベント時のマウスの画面上の座標(px)を返す
======getNonScalingOffset======
*getNonScalingOffset(svgPoiNode) : 拡大縮小しても伸縮しない図形要素のオフセット値を取得する
======getObject======
*getObject( oname ) : 指定されたオブジェクト(oname)を取得
======getPoiPos======
*getPoiPos( svgPoiNode ) : =getNonScalingOffset
======getRoot2Geo======
*getRoot2Geo() : コンテナsvgのCRSの逆変換CRS( rootのsvg - > geo )を取得
======getRootCrs======
*getRootCrs() : コンテナsvgのCRS ( geo->rootのsvg )を取得
======getRootLayersProps======
*getRootLayersProps() : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の(animetion||iframeで構成される)レイヤー情報を取得する。Arrayが返却、並び順はsvgの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]と同じ（最初のレイヤーが一番下。selectメニュー創るときはひっくり返して使うこと）レイヤー情報：名称、表示非常時状態、レイヤーグループ、グループのフィーチャ(バッチ||スイッチ||ふつう)、編集可、編集中、対応SVGドキュメント、個別ユーザインターフェース、個別凡例
======getRootViewBox======
*getRootViewBox() : aspectを加味し実際に開いているコンテナsvgのviewBoxを取得
======getSvgImages======
*getSvgImages() : svg文書群(XML)の連想配列を取得(ハッシュキーは[[#getLayerId|layerID]]("root"以外は"i"+連番))
* (参考:[[#svgImages.5B.5D|svgImages]])

======getSvgImagesProps======
*getSvgImagesProps() : svg文書群のプロパティ( .Path,.CRS,.script,.editable,.editing,.isClickable,.parentDocId,.childImages,.controller)の連想配列を取得(ハッシュキーは[[#getLayerId|layerID]]("root"以外は"i"+連番))
* (参考:[[#svgImagesProps.5B.5D|svgImagesProps]])

======getSvgTarget======
*getSvgTarget( htmlImg ) : html文書中のimg要素(POI)を入力すると、対応するSVG文書の文書番号とその要素(use)が出力される。対応するuse要素を持つsvg文書自体を取得したい場合は.ownerDocumentする。idからhtml文書のimg要素を取得するには、Document.gelElementById(id)
======getSwLayers ======
*getSwLayers ( cat ) : swLayers[クラス名]に、クラス名ごとのレイヤー(のSVG要素)の全リストを構築する。catがある場合は、catの名称を持つもののリストのみを構築する
======getSymbols======
*getSymbols(svgDoc) : POI編集のsymbol選択を可能にするとともに、defsは、useより前に無いといけないという制約を払った
======getTickerMetadata======
*getTickerMetadata() : 現在Tickerが表示されているグラフィックスオブジェクトのメタデータを取得する
======getTransformedBox ======
*getTransformedBox ( inBox , matrix ) : 指定されたviewBox(inBox)を変換行列にてサイズ変更と移動のみでの座標変換する。b=0、c=0の場合のみ利用可能。たとえば、matrixには、svgImagePropsのCRSを設定することで、そのSVGMapコンテンツのSVG座標系でのviewPortが計算できる。このときmatrixは線形変換の係数が含まれたオブジェクトでも良いし、[[#.E5.A4.9A.E6.A7.98.E3.81.AA.E5.9B.B3.E6.B3.95.E3.81.AE.E5.AE.9A.E7.BE.A9.E3.81.A8.E5.88.A9.E7.94.A8|非線形変換のための関数が含まれたオブジェクト]]でも良い。　svgMap.getTransformedBox(svgMap.getGeoViewBox(),svgImageProps.CRS)

======getUaProp======
*getUaProp() : ブラウザの種類(isIE：IEかどうか、isSP：スマートフォンかどうか)を取得する
======getVerticalScreenScale======
*getVerticalScreenScale(screenLength) : 垂直(緯度)方向のscreenLengthに対する長さを取得する(input: px, return : Km)
======getViewBox======
*getViewBox( svgDoc ) : 指定したSVG文書のviewBoxを取得
======gps======
*gps() : ブラウザの測位APIによって測位しその点を中心に表示、表示縮尺は測位精度を元に適当に決定
======gpsCallback======
*gpsCallback(position) : GPS測位が成功した後に実行されるコールバック関数で、positionを中心とした場所を表示させる
======handleResult======
*handleResult( docId , docPath , parentElem , httpRes , parentSvgDocId ) : SVG文書を(docPathから)svg文書群とそのプロパティをHTTPXMLRequest(httpRes)から親文書(parentSvgDocId)の子文書(docId)として読込み、指定されたHTML要素(parentElem)に貼り付ける
======ignoreMapAspect======
*ignoreMapAspect() : 地図のアスペクト比を、rootSVGのviewBox( or hashのviewBox)そのものに設定する
======initLoad======
*initLoad() : load時に"一回だけ"呼ばれる初期化関数
======isIntersect======
*isIntersect( rect1, rect2 ): rect1(x,y,width,height)とrect2が交差(包含も含む)しているかどうかを返却
======linkedDocOp======
*linkedDocOp( func , docHash , param1, param2 , param3 , param4 , param5 ) : 再帰実行のルートになる文書のハッシュ(docHash)以下の子・孫・・・文書に対して、同じ処理(func( docHash , param1, param2 , param3 , param4 , param5 ))を再帰実行する関数
======loadSVG======
*loadSVG( path , id , parentElem , parentSvgDocId) : SVG文書を(pathから)svg文書群とそのプロパティを親文書(parentSvgDocId)の子文書(id)として読込み、指定されたHTML要素(parentElem)に貼り付ける
======matMul======
*matMul( m1 , m2 ) : 行列の積 x',y' = m2(m1(x,y)) = m(x,y) となる変換行列を構築
======numberFormat======
*numberFormat( number , digits ) : 指定された数値(number)を小数点以下第digit+1位を四捨五入した値を取得
======override======
*[OBSOLUTEWD] override( mname , mval ) : グローバルオブジェクトの関数プロパティでmnameという変数にmvalの値を代入する

======panMap======
* panMap( x, y, options ) : 地図をスムースにスクロールさせる
** x,y : パン量デフォルトはpx
** option.unit でパン量のコンテキストを変化できる
*** "%"||"percent"||"ratio" : 地図キャンバスに対する相対値で指定 (%,percentはパーセント, ratioは比率)
*** "canvas" : 地図キャンバス上の指定した座標を地図中心に
*** Note: 地理座標でパンする場所を変えたい場合は[[#geo2Screen]]を併用すると良い

======parseEscapedCsvLine======
*parseEscapedCsvLine(csv) : CSV 1行分文字列データ(csv)をエスケープを考慮して配列にパースする。
======refreshScreen======
*refreshScreen() : 画面の再描画を実行する（[[解説書#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90|参考情報]]）

======registLayerUiSetter======
*registLayerUiSetter( layerUIinitFunc, layerUIupdateFunc ) : レイヤー選択UI初期化関数と更新用関数を設定する
======reLoadLayer======
*reLoadLayer(layerID_Numb_Title) : 指定したレイヤー([[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーのみ。小孫レイヤーはNG)をリロードする
======resumeToggle======
*resumeToggle(evt) : 引数のイベント(evt)ターゲットのチェックボックスのチェック状態により、setResumeを実行する
======screen2Geo======
*screen2Geo( screenX , screenY ) : 画面上の座標(px)を指定すると、その地理座標を返す
======setCenterHitTest======
*setCenterHitTest(enable) : 自動中心ヒットテストの設定を変更するデフォルト:true

======setCursorCenterZooming======
*setCursorCenterZooming(enable) : (カーソル|ピンチ)位置中心ズーム機能を設定するデフォルト:false

======setCustomModal======
*setCustomModal( messageHTML , buttonMessages , callback,callbackParam) : モーダル画面を出現させ、指定されたメッセージ(messageHTML(String)もしくはdomオブジェクト(Object))、指定されたボタン(buttonMessages(Array))を表示する。ボタンが押された場合、コールバック関数(callback)を引数(クリックしたボタンのインデックス, callbackParam)を渡し呼び出す。
messageにHTML Stringだけではなく、DOM objectが使える点、ボタンに対するcallbackを設定できる点。ただしモーダルダイアログになる点が[[#showModal]]と異なる。

======setDefaultHilightStyle======
*setDefaultHilightStyle( style ) : ヒットテストなどによるオブジェクトのハイライト時のスタイルを設定する
* style : {stroke:{color,widthIncrement}, fill:{color,lineWidth,lineColor}}
** stroke : 線オブジェクトに対してハイライト時の色(color)と線幅増分(widthIncrement)
** fill : 塗りつぶしオブジェクトに対してハイライト時の色(color)、輪郭線幅(lineWidth)、輪郭線色(lineColor)

======setDevicePixelRatio======
*setDevicePixelRatio( dpr (, layerId) ) : zoom計算時に用いる(たとえば２にするとzoom値が本来の２分の１になる)変数を指定値(dpr)に設定する。ズームに応じた表示制御(visible*zoom属性等のLevel of Detail機能)に影響を与える。オプションの[[#getLayerId|layerId]]を指定すると、指定したlayerに対して別個の値を設定する。dprにnullを与えると初期値(1)にクリア。

======setGeoCenter======
*setGeoCenter( lat , lng , radius) : 中心地理座標を指定して地図を移動 (radiusは緯度方向の度1≒110Km) lat,lng:必須 radius:オプション(今の縮尺のまま移動)
======setGeoViewPort======
*setGeoViewPort( lat, lng, latSpan , lngSpan , norefresh) : 地理(グローバル)座標系で指定したエリアを包含する最小のviewportを設定する
======setLayerVisibility======
*setLayerVisibility([[#getLayerId|layerID]]_Numb_Title, visivility, [options]) : 指定した[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーの表示非表示を設定し、layerListUIのアップデートも行う
** layerID : String: [[#getLayerId|layerID]]のの文字列
** visivility : Boolean
** options : Object　以下のメンバー変数でオプションの指定が可能
*** .exec : String : 指定したレイヤーがレイヤー固有UIを持つ場合、その起動を指定できます。与えることができる文字列は[[#.E8.A9.B3.E7.B4.B0|data-controllerの起動オプション]]と同じ。
*** .hash : 指定したレイヤーを表示するときにハッシュ値を設定する

======setMapCanvas : ======
*setMapCanvas : ( mc ) : 地図キャンバスとなる、おおもとのdiv要素を指定した要素(mc)に設定
======setMapCanvasCSS======
*setMapCanvasCSS(mc) : マップキャンバスのCSS(postion、overflow、top、left、width、height)を設定
======setMapCanvasSize======
*setMapCanvasSize( mcs ) : 地図キャンバスのサイズを指定したサイズ(mcs)に設定
======setPreRenderController======
*setPreRenderController( layerID, cntFunc ) : 再描画(画面更新)シーケンスの直前に実行する関数(cntFunc)を設定する。　[[#getLayerId|layerID]]が指定されていると、そのIDをもつSVG文書に対して設定する。指定されていない場合は、全てのSVG文書に対して指定した関数が描画前に実行される。cnfFuncが無い場合は設定を解除する。また、cntFuncには再描画前制御の際に必要になるかもしれないいくつかの変数が第一引数にオブジェクトの形で渡される。(docId,scale,actualViewBox,geoViewBox,viewChanged(zoom|scroll|false) なお、SVGMapLayerUI.jsが有効化されている場合、[[#.E6.8B.A1.E5.BC.B5API|レイヤ固有UIのhtml文書中のscript内にpreRenderFunctionという関数]]がある場合、そのレイヤーを指定したsetPreRenderControllerでの関数設定と同じ振る舞いをする。なお、この処理内容は、動的レイヤー(<script>を持つSVGコンテンツ)のonload関数と同じタイミングで呼び出される関数をレイヤ固有UI等に設置できるものと考えると良い。

======setResume======
*setResume( stat ) : レジュームを実行するかどうかを引数(stat)によって設定し、cookieにレイヤー情報を保存する
======setRootLayersProps======
*setRootLayersProps(layerID_Numb_Title, visible , editing , hashOption , removeLayer , execOption ) : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の(animetion||iframeで構成される)レイヤー情報を設定する。[[#getLayerId|layerID]]_Numb_Titleは、レイヤー番号(root svg container内での順番)、[[#getLayerId|layerID]](svg文書のiid = htmlのid = selectのvalue)、タイトル名(不確実-同じ名前があるかもしれない。最初に当たったものを選択)。変化があるとtrueが返却される。
*visible , editingはtrue,false,nullのいずれか。nullの場合、その値を変化させないという意味。もしくは不合理の場合はfalseが返却される。この時classで設定されているレイヤーグループの特性(switch)に基づいた制御がかかる
*hashOption 指定したレイヤーを表示するとき、ハッシュを指定して表示する
*removeLayer 指定したレイヤーを消去する
*execOption レイヤ固有UIを持つレイヤーを表示する場合の起動方法を指定："hiddenOnLayerLoad", "onClick", "appearOnLayerLoad"のいずれか。[[#.E8.A9.B3.E7.B4.B0|詳細はこちらを参照]]

*setLayerVisibilityと異なり、アップデート(refreshScreen())は別途行う必要がある

======setRootViewBox ======
*setRootViewBox ( rvb ) : aspectを加味し実際に開いているコンテナsvgのviewBoxを指定したコンテナsvgのviewBox(rvg)に設定*setShowPoiProperty( func , docId ) : 特定のレイヤー・svg文書(docId)もしくは、全体に対して別のprop.表示関数(func)を指定する。funcが未指定の場合、設定された関数をクリアする。指定した関数は、帰り値がfalseだった場合、デフォルトprop.表示関数を再度呼び出す
======setShowPoiProperty======
*setShowPoiProperty(func , docId ): 特定のレイヤー・svg文書(いずれもdocIDで指定)もしくは、全体に対してPOIをクリックした時の表示関数をセットする
**セットされていないときは内蔵のデフォルト関数が使用される
**docId: セットされていないときはすべてのレイヤの docIdがルートレイヤに対応するものの場合はそのレイヤー下の子孫文書に対しても
**func: コールバック関数
*** funcがセットされいていないときはクリアする
*** funcの第一引数にはクリックされた要素が入る

======setSmoothZoomInterval======
*setSmoothZoomInterval(zoomInterval) : ズームアニメーションの設定(ズームイン／アウト後のタイル読み込み開始タイマー(ms))(Default:20ms)
======setSmoothZoomTransitionTime======
*setSmoothZoomTransitionTime(zoomTransitionTime) : ズームアップ[[#zoomup]]／ダウン[[#zoomdown]]／パン[[#panMap]]時の遷移時間(Default:300ms)

======setSummarizeCanvas======
*setSummarizeCanvas( val ) : 2Dベクトル図形描画用に統合キャンバス(レイヤー単位でのキャンバス統合)の使用有無を設定する。デフォルトは統合する
======setUpdateCenterPos======
*setUpdateCenterPos(func) : 中心座標書き換え関数を指定した関数に設定(デフォルト:id="centerPos"要素の文字列を適当に書き換える)
======setProxyURLFactory======
*setProxyURLFactory( documentURLviaProxyFunction, imageURLviaProxyFunction, imageCrossOriginAnonymous, imageURLviaProxyFunctionForNonlinearTransformation, imageCrossOriginAnonymousForNonlinearTransformation, LaWAfetchviaProxyFunction ): コンテンツの取得をプロキシ経由等にするために、URL(文字列)を書き換える関数を指定する。
** documentURLviaProxyFunction : svgドキュメント用のプロキシ経由のURLを生成する関数をここに設定する。<code>URLviaProxy = documentURLviaProxyFunction(URL)</code>
** imageURLviaProxyFunction : 同ビットイメージ用
** imageCrossOriginAnonymous : ビットイメージのコンテンツ取得に際しcrossorigin = "anonymous"を設定
** imageURLviaProxyFunctionForNonlinearTransformation: ビットイメージへの非線形図法変換専用のプロキシ経由URL生成関数を設定する。
** imageCrossOriginAnonymousForNonlinearTransformation : 同上のコンテンツ取得に際しcrossorigin = "anonymous"を設定
** LaWAfetchviaProxyFunction : [[#レイヤー固有ユーザインターフェース|LaWA]]内のFetch/XHRに対してプロキシ経由URL生成関数を設定する。
** 参考：[[#.E3.83.97.E3.83.AD.E3.82.AD.E3.82.B7.E3.81.AE.E8.A8.AD.E5.AE.9A|クロスオリジンアクセスのためのプロキシ設定]]

======setZoomRatio ======
*setZoomRatio ( ratio ) : zoomUp、zoomDownボタン押下時のズームレシオを指定した値(ratio)に設定する
======showModal======
*showModal( htm , maxW, maxH) : ダイアログ表示フレームワークを呼び出し、指定したhtm文字列を最大maxW,H値の中で表示する。closeボタンはフレームワークで設置される（参考[[#setCustomModal]]）（API名に反して、この関数はモーダルダイアログではない、ダイアログボックスの挙動を取る）
** htm：ダイアログ内に表示するhtmlのソース文字列、もしくはHTML DOM Elementオブジェクト
** maxW, maxH : Optional: ダイアログのサイズ（もしウィンドサイズに収まらない場合は、このサイズを下回ることがある。指定されていない場合はhtmの内容をベースにサイズが変化する


======showPage======
*showPage( hyperLink ) : 指定されたハイパーリンク先のページを表示する。ハッシュだけの場合は viewPort変化をさせる
======showUseProperty======
*showUseProperty( target ) : 指定されたPOI( target )の属性情報を表示する
======transform ======
*transform ( x , y , mat , calcSize , nonScaling) : 指定された座標を変換する。
======updateLayerListUI======
*updateLayerListUI() : レイヤーリストのUIの表示を更新したりレイヤー固有UIを設定したりする
** '''[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のsvgmap文書をDOMで直接編集したり、setRootLayersPropsで操作した場合、この関数を呼ばないとレイヤ固有UIが正しく設定されないなど多くの処理が破綻するので、必ず呼ぶ必要がある。(近い将来refreshScreenで自動的に反映されるようにする予定)'''

======zoomdown======
*zoomdown( ratio ) : 地図をスムースにズームダウン
** ratioはオプション(デフォルトは1.732)

======zoomup======
*zoomup( ratio ) : 地図をスムースにズームアップ
** ratioはオプション(デフォルトは1.732) (デフォルトは[[#setZoomRatio]]で変更可)

=====svgMapAuthoringTool.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_Authoring_r*.jsを用いた場合に使える
======cancelPointingPoiRegister======
* cancelPointingPoiRegister: initPOIregistToolで設置したUIの地図クリック・タッチでの座標入力イベント(click, touchend)をキャンセルする
======clearTools======
*clearTools: オーサリングツールを除去する。
======initGenericTool======
*initGenericTool(targetDiv,poiDocId,cbFunc,cbFuncParam,options): 点、線、多角形（オプションでそれらのバッファ付き）の総合オーサリングツールを初期化する。
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** options: {withBufferedTools,editingStyle,shapeStyle}　その他オプションをオブジェクトで指定(Optional)
*** withBufferedTools: boolean: trueでバッファ付きツールを追加
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルをブジェクトで指定
*** editingStyle: {opacity,strokeWidth,stroke,fill}：編集中の表示スタイルをブジェクトで指定
*** useXlinkTitle: trueでタイトル編集欄付きツール (Pointツールには影響しない)
*** styleEditor: trueでスタイル編集UI追加

======initPOItools======
*initPOItools(targetDiv,poiDocId,cbFunc,cbFuncParam,getPointOnly,returnSvgElement,options)　: 複数のPOIを編集するツールを初期化する (このツールは一個しか設置できない)
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** getPointOnly : ポイントを取得するのみで、その点にuse要素を設置することはしない(Optional)
** returnSvgElement : trueで編集したSVG要素などがコールバック関数に構造化され返却される(Optional)
** options : {bufferOption,editingStyle,shapeStyle}: その他のオプションをオブジェクトで指定(Optional)
*** bufferOption : trueでバッファ付きツール
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルを指定 (buffer指定時に有効)
*** styleEditor: trueでスタイル編集UI追加

======initPOIregistTool======
*initPOIregistTool(targetDiv,poiDocId,poiId,iconId,title,metaData,cbFunc,cbFuncParam,getPointOnly,returnSvgElement): 一個のPOINTオブジェクトの登録ツール・座標入力ツールを初期化する
** initPOItoolsと異なりこちらのツールは複数個設置できる
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** poiId : 登録するPOIのIDを指定
** iconId : 対象文書内のアイコンのIDを指定
** title : アイコンのタイトルを指定
** metaData : アイコンのメタデータ文字列を指定
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** getPointOnly : ポイントを取得するのみで、その点にuse要素を設置することはしない(Optional)
** returnSvgElement : trueで編集したSVG要素などがコールバック関数に構造化され返却される(Optional)
======initPolygonTools======
*initPolygonTools(targetDiv,poiDocId,cbFunc,cbFuncParam,isPolylineMode,options): POLYGONオブジェクトの"編集"ツール新規追加、削除、変更などが可能　ただし一個しか設置できない
** コンテナsvgコンテンツでclickable及びeditableを設定したレイヤーで再編集可能
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
*** 第一引数に成否、第二引数にcbFuncParam が入る。作成したPOIの情報は、SVGDOMから得るか、指定したdiv内に生成されているフォームから得る（少し使いづらいので、今後もう少し便利にするかもしれません）
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** isPolylineMode : ポリゴンではなくポリラインの編集ツールとする
** options : {bufferOption,editingStyle,shapeStyle}: その他のオプションをオブジェクトで指定(Optional)
*** bufferOption : trueでバッファ付きツール
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルを指定
*** editingStyle: {opacity,strokeWidth,stroke,fill}：編集中の表示スタイルを指定
*** useXlinkTitle: trueでタイトル編集欄付きツール
*** styleEditor: trueでスタイル編集UI追加

======setTargetObject======
*setTargetObject: TBD プログラムから編集対象オブジェクトを指示する（ただし編集中レイヤのオブジェクトに限る）
======isEditingGraphicsElement======
*isEditingGraphicsElement: 編集中のオブジェクトがあるかどうかを確認する

=====svgMapGIStool.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_GIS_r*.jsを用いた場合に使える。なお本機能拡張はJSTS([https://unpkg.com/jsts@1.6.1/dist/jsts.min.js jsts.min.js])の読み込みがさらに必要。

====== 参考：JSTS ======
[https://github.com/bjornharrtell/jsts/ JSTS](JavaScript Topology Suite)は、[https://github.com/locationtech/jts JTS](Java Topology Suite)をjavaScriptに移植した地理空間情報処理ライブラリです。地理空間情報の標準に準拠したAPIを備えています。
* [https://github.com/bjornharrtell/jsts JSTSのプロジェクトページ]
* [http://locationtech.github.io/jts/javadoc/ API](JTS用、JSTSもこれに準ずる)
* [https://www.tsusiatsoftware.net/jts/files/JTS_Library_for_Geometry_2011.pdf JTSの機能概要スライド]

====== buildDifference======
* buildDifference( sourceId1, sourceId2, targetId , strokeColor, strokeWidth, fillColor, progrssCallback, getResultAsGeoJsonCallback,getResultAsGeoJsonCallbackParam)
** JSTSのDifferenceを実行
** 引数はbuildIntersectionの該当引数に対応

======buildIntersection======
*buildIntersection( sourceId1, sourceId2, targetId , strokeColor, strokeWidth, fillColor, progrssCallback, addSourceMetadata, getResultAsGeoJsonCallback, getResultAsGeoJsonCallbackParam, options )
** sourceId1とsourceId2のレイヤーに対してJSTSのIntersectionを実行し、結果をtargetIdレイヤーにコンテンツとして出力する。性能はgetIncludedPointsより低いことが多い intersection処理の振る舞いは[https://bjornharrtell.github.io/jsts/ JSTSを参照]
** sourceId1: sourceId1レイヤーのレイヤーID
** sourceId2: sourceId2レイヤーのレイヤーID
** targetId : targetId レイヤーのレイヤーID
** strokeColor : 線の色 (なお、strokeColor, strokeWidth, fillColor のいずれも指定ない場合は描画しない(getResultAsGeoJsonCallbackがあればそこに結果を変換するのみ))
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** progrssCallback: 変換途中の状況が返されるコールバック関数。
** addSourceMetadata: sourceId1とsourceId2の各図形要素に付随しているメタデータ(contentアトリビュートの値)を演算結果の該当する図形要素に結合して付加する。
** getResultAsGeoJsonCallback: 演算結果をgeoJsonで返却を受けたい場合にコールバック関数を指定する。第一引数に結果が返る
** getResultAsGeoJsonCallbackParam : 上記コールバック関数に送りたい引数(第二引数に入力される)
** options: その他のオプションを指定するオブジェクト(下記、メンバ変数)
*** uniteSource1: trueでsourceId1のジオメトリ群をuniteしてから演算する
*** uniteSource2: trueでsourceId2のジオメトリ群をuniteしてから演算する
*** areaCompare: trueで演算結果と元のジオメトリとの面積比をメタデータに付与
*** resultGroupId: 演算結果を生成するグループを指定
*** opacity: 透明度

======captureGeometries======
*captureGeometries( cbFunc , opt ) : svgMap.captureGISgeometriesの引用
====== coverageImageXY2LatLng======
* coverageImageXY2LatLng(pixWidth , pixHeight, px,py,targetCoverage) : ビットイメージカバレッジのピクセル座標から地理座標を算出する関数
** pixWidth, pixHeight : ビットイメージカバレッジのサイズ
** px,py : ビットイメージカバレッジのピクセル座標
** targetCoverage : getInRangePolygonParts で得られた返り値を設定する
====== drawGeoJson======
* drawGeoJson( geojson , targetSvgDocId, strokeColor, strokeWidth, fillColor, POIiconId, poiTitle, metadata, parentElm, metaDictionary) : geojsonのgeomerty を指定したレイヤーに描画する
** geojson : geojson データのgeopmetry
*** メタデータ : メタデータはgeojsonの本来のメタデータ仕様(type:Featureのオブジェクトにpropertiesを設置する)で設定可能
**** また、連想配列もしくは配列の形で、関数の呼び出し時のmetadataパラメータでデフォルトのメタデータを指定できる。
**** また、geoJSONの任意のデータ階層にmetadataプロパティとしても埋め込める。
**** 加えて、propertiesを同様に任意のデータ階層に設定できる(この場合、上の階層の値は下の階層の値で上書きされる)
*** スタイリング : メタデータ仕様を拡張した、geojsonの[https://github.com/mapbox/simplestyle-spec mapbox拡張仕様]に基づいて、描画スタイルを各Featureに設定可能　上記の拡張properties拡張により、デフォルト描画スタイルを設定することも可能。
**** marker-sizeは未実装。marker-symbolではsvgコンテンツのdefsで登録済みのアイコンのIDを指定する。
**** 参考: properties.で設定できる、スタイル属性名: <code>title, description, marker-size, marker-symbol, marker-color, stroke, stroke-opacity, stroke-width, fill, fill-opacity</code>
** targetSvgDocId : 描画先のレイヤーID
** strokeColor : 線の色
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** POIiconId :　Pointの場合のアイコンID(あらかじめ指定した描画先のレイヤーのコンテンツに該当IDのアイコンが定義されている必要がある)
** poiTitle : POIのタイトル
** metadata : POIのメタデータ（連想配列）
** parentElm : (Optional) 指定した要素の子要素として描画
** metaDictionary: (Optional) メタデータとして要素に埋め込みたい属性名のリストを配列で指定する（これ以外の属性は無視するようになる）

====== drawKml======
* drawKml( kml , targetSvgDocId, strokeColor, strokeWidth, fillColor, POIiconId, poiTitle, metadata, parentElm,styleData) : KMLを指定したレイヤーに描画する
** KML : KML 描画するKMLデータのXML DOM
** targetSvgDocId : 描画先のレイヤーID
** strokeColor : 線の色
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** POIiconId :　Pointの場合のアイコンID(あらかじめ指定した描画先のレイヤーのコンテンツに該当IDのアイコンが定義されている必要がある)
** poiTitle : POIのタイトル
** metadata : POIのメタデータ文字列
** parentElm : (Optional) 指定した要素の子要素として描画
** styleData : TBD

====== getBufferedPolygon ======
* getBufferedPolygon(geom,bufferLength) : 任意のジオメトリ(geom)に対して、指定のバッファ長[m]のポリゴンジオメトリを生成する。
** Note: [[#captureGISgeometries]]で取得したデータ等も演算対象にすることができる。

====== getColorString ======
* getColorString(r,g,b) : r,g,b値から、webColor文字列を生成する

======getExcludedPoints======
*getExcludedPoints(poiID, polyID, cbFunc, param , progrssCallback , pointOnly ) : 指定したpoiID検索対象レイヤーのうち、指定したpolyIDポリゴンコンテンツレイヤーのポリゴンに内包されないものを抽出する。
** パラメータはinverseを除きgetIncludedPointsと同じ。
====== getImage======
* getImage(sourceData, renderingOptions ) : メッシュデータからビットイメージ(mage/pngのdataURL)を生成
** sourceData : 以下のデータ構造を持つオブジェクト
*** width, height メッシュのピクセル数
*** rasterData[py][px] 以下のデータ構造を持つオブジェクト
**** color 以下のデータ構造を持つオブジェクト
***** r,g,b,a
**** inRange : boolean
** renderingOptions : 以下のデータ構造を持つオブジェクト
*** drawOutOfRange : boolean レンジ内ではなくレンジ外を描画する
*** fillColor : boolean 上記条件のピクセルを指定した色で描画する
*** useCoverageColor 上記条件のピクセルをカバレッジの色で描画する

====== getImagePixelData======
* getImagePixelData(capturedSvgMapGeometry, callBackFunction, param) : ラスタ画像のビットマップデータを取得する。
** capturedSvgMapGeometry : [[#captureGISgeometries|captureGISgeometries]]で取得したビットイメージカバレッジのジオメトリ情報をもとに取得する
** callBackFunction : 取得したビットイメージデータが引数に渡される
*** data : RGBA intArray ( CanvasのContext.getImageData(...).dataで得られる情報と同様のデータ)
*** width
*** height
*** param : getImagePixelDataの第三引数がそのまま渡される

====== getIncludedPoints======
* getIncludedPoints(poiID, polyID, cbFunc, param , progrssCallback , inverse , pointOnly ) : 指定したpoiID検索対象レイヤーのうち、指定したpolyIDポリゴンコンテンツレイヤーのポリゴンに内包されるものを抽出する。
** poiID : 検索対象コンテンツレイヤーのレイヤID
** polyID : ポリゴンコンテンツレイヤーのレイヤID
** cbFunc : 検索完了後の結果を返却するコールバック関数　第一引数にポイントがGeoJasonのGeometry形式で返却され、第二引数にその個数、第三引数に(あれば)下記paramが返却される
** param : cbFuncに渡す任意パラメータ(第三引数に入る)
** progrssCallback : 変換途中の状況が返されるコールバック関数。　変換中　時々呼び出され、変換状態[%]が第一引数に渡される。
** inverse : trueで getExcludedPoints
** pointOnly : trueの場合検索対象コンテンツレイヤーのジオメトリがPoint以外の物は無視、false(もしくは未設定)の場合はPolygonやMultiLineStringのデータの場合中心点をPointと見立てて検索なお、ポリゴンやポリラインのしっかりした処理を期待する場合は下記のbuildIntersectionを使用すべき。
====== getInRangePoints======
* getInRangePoints(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : 検索対象のPointジオメトリが、検索条件としてのラスターデータ(カバレッジ)の特定色域に入っているものを検索する（ラスターGIS機能）
** poiID_or_points : 検索対象のPointジオメトリのあるレイヤIDもしくは、geoJsonのPointジオメトリ自体
** coverIDラスターデータ(カバレッジ)のレイヤーID
** rangeData : 色域 .hue, .satulation, .value, .alphaをそれぞれ指定する
*** hue: 0..360
*** satulation, value, alpha : 0..100
*** .hue, .satulation, .value, .alphaそれぞれのレンジは<nowiki>[[range1Min,Max],[range2Min,Max],...[rangenMin,Max]]</nowiki>の形で指定する。
*** データがない場合のデフォルトは<nowiki>{hue:[[0,360]],satulation: [[10,100]],value:[[10,100]],alpha:[[10,100]]}</nowiki> : アルファが10以上の全ての色
*** .outOfBoundsColor : TBD {r:255,g:0,b:0} の形で色を指定するとその色のピクセルは領域外(存在しないもの)として評価をスキップする
** cbFunc : 検索完了後の結果を返却するコールバック関数　第一引数にポイントがGeoJasonのGeometry形式で返却され、第二引数にその個数、第三引数に(あれば)下記paramが返却される
** param : cbFuncに渡す任意パラメータ(第三引数に入る)
** progrssCallback : 変換途中の状況が返されるコールバック関数。　変換中　時々呼び出され、変換状態[%]が第一引数に渡される。
** preCapturedGeometry : svgMap.captureGISgeometries()であらかじめ取得したgeometryがある場合、それを投入するとそれを用いて処理する
** computingOptions : getInRangeGeometriesOnCoverageを参照
====== getInRangeLineParts======
* getInRangeLineParts(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : ラインストリングジオメトリ用のラスターGIS機能パラメータはgetInRangePoints()と同じ
====== getInRangePolygonParts======
* getInRangePolygonParts(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : ポリゴンジオメトリ用のラスターGIS機能パラメータはgetInRangePoints()と同じ

====== getInRangeGeometriesOnCoverage======
* getInRangeGeometriesOnCoverage(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry, computingOptions ) : getInRange*を包含する関数
** computingOptions.targetVectorTypeで以下を設定することでそれぞれの機能を動かすことができる
*** 0:point,1:polyline(multiLineString),2:polygon
** computingOptions:
*** overlappingCoverage : "or"
*** splitByCoverage : boolean カバレッジが複数のビットイメージ(タイル)で構成されている場合、タイルごとに分割した答えを返す
***
====== haltComputing======
* haltComputing() : getIncludedPoints, getExcludedPoints, buildIntersectionを中断する
====== imageUrlEncoder ======
* imageUrlEncoder : オリジナルのURLから、setImageProxyの設定を加味したURLを生成する関数
====== latLng2coverageImageXY======
* latLng2coverageImageXY(pixWidth , pixHeight, lng,lat,targetCoverage) : 地理座標からビットイメージカバレッジのピクセル座標を算出する関数
** pixWidth, pixHeight : ビットイメージカバレッジのサイズ
** lng,lat : 地理座標
** targetCoverage : getInRangePolygonParts で得られた返り値を設定する
====== latLng2GeoJsonPoint======
* latLng2GeoJsonPoint(lat , lng ) : 緯度経度をGeoJsonのPointジオメトリに変換する
====== renderImages ======
* renderImages(sourceDataArray, parentElment, crs, renderingOptions) : ビットイメージカバレッジ×ポリゴンGIS(getInRangePolygonParts)の結果を直接可視化する
**sourceDataArray : [[#getInRangePolygonParts]]の結果を設定
**parentElment: SVGMapコンテンツ内で描画する親要素を設定
**crs: 描画するSVGMapコンテンツのCRS matrix(a,b,c,d,e,f)を設定
**renderingOptions : [[#getImage]]を参照

====== setImageProxy======
* setImageProxy( url , directURLls , useAnonProxy): getInRangePointsは、canvasを使った処理のため、CORSの制約にかかる場合、proxyを設定して回避できる。
** url : encodeURIComponent()でエンコードしたカバレッジのレイヤーのビットイメージのURLを付加すると、proxyとしてimageを返却してくれるURL文字列を指定
** directURLls : proxyを使わず直接アクセスするコンテンツを判定するための文字列の配列（この文字列のどれかが含まれていたら直接アクセス）
** useAnonProxy : Image.crossOrigin = "anonymous"を指定してアクセスする

====== hsv2rgb ======
* hsv2rgb(h, s, v) : hsv値からrgb値の色情報変換
** h (hue): 0..360
** s (saturation): 0..100
** v (value): 0..100
** 帰り値 : {r,g,b}: いずれも0..255

====== rgb2hsv ======
*rgb2hsv(r, g, b): RGB値からHSV値の色情報変換
** rgb: いずれも0..255
** 帰り値:{h,s,v}
*** h:0..360
*** s,v: いずれも0..100

=====svgMapLayerUI.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_LayerUI2_r*.jsを用いた場合に使える。
======assignLayerSpecificUiElement======
* >r4
* assignLayerSpecificUiElement( targetElement , isInline , autoSizing) : レイヤ固有UIを出力する先のDOM要素を指定する
** この関数は、レイヤーUIの初期化前～[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]読み込み前に呼ばれる必要がある（すなわち、load時のみ有効）
** targetElement : 出力先要素：出力先はsvgMapオブジェクトを持つwindowでなくても良い
** isInline : boolean 指定した要素をインライン要素として扱い、UIが存在しえない場合は消える。レイヤ固有UIを消すボタンも付与される
** autoSizing : boolean 自動リサイズを有効化

======customEvents======
*customEvents() : サポートしているイベントを返却

======launchController======
* >r4
* launchController(layerID, cbf) : レイヤ固有UIを出現させる。ただしそのレイヤーがレイヤー固有UIを持っており、且つ表示状態になっている必要がある。
** [[#getLayerId|layerID]] : レイヤーのID
** cbf (optional) : レイヤー固有UIが生成されたとき、第一引数にレイヤー固有UIのwindowオブジェクトが返却される。

======layerSpecificUIhide======
* layerSpecificUIhide() : レイヤ固有UIを隠す

======setLayerListmessage======
* setLayerListmessage( head , foot ) : head 及び footで指定した文字列を　レイヤリストUIのトップのメッセージに設定する。[head]numberOfVisibleLayers[foot] : デフォルトはhead :"Layer List: ", foot :" layers visible"

=====svgMapPWA.で呼び出せるAPI=====
'''実験的機能段階''' :
; 以下のAPIは、SVGMapLv0.1_PWA_r*.jsを用いた場合に使える。
:- SVGMap.jsをPrpgressiveWebApps(PWA)として動作させ、オフラインでも利用できるウェブアプリを構築することができる。
:- Progressive Web Appsが機能するブラウザで有効。Chrome,Edge(PC,Android), Safari(Apple製品)
:- iOS SafariのPWAネイティブキャッシュの50MB制限を回避するIndexedDBによる実装がなされており、そのクォータが許す限りの(iOSでも数百MB以上の)オフライン地図コンテンツを利用できる
:- 同じく、iOS Safariが持たないsyncの一部を代替する機能(オンラインになったらポストする機能)が利用できる
:- zip圧縮されたオフラインコンテンツパッケージ読み込み機構を使う場合はzip.jsおよびそれが利用するArrayBufferReader.js,deflate.js,inflate.jsの読み込みが必要。
:- <code>serviceWorkerPath</code>グローバル変数で、専用のサービスワーカープログラムsvgMapServiceWorker_r*.jsのパスを指定する必要がある。
::- サービスワーカー～svgMapServiceWorker_r*.jsは、同jsと同じディレクトリにあるbaseResources.jsonを読み込み初期設定を行う
::- baseResources.json：　srcにサービスワーカーネイティブのキャッシュに読み込むべきリソースのリストを記載、mapCacheTargetに、SVGMapのコンテンツキャッシュを稼働させるターゲットとなるパスを記載
::-baseResources.jsonの例
<pre>
{
"src": [
"index.html",
"Container_mercator_org.svg",
"SVGMapLv0.1_PWA_r5.js",
"js/SVGMapLv0.1_r16.js",
"js/SVGMapLv0.1_LayerUI2_r3.js",
"js/SVGMapLv0.1_GIS_r2.js",
"js/SVGMapLv0.1_Authoring_r7.js",
"js/jsts.min.js",
"imgs/gps.png",
"imgs/gps_s.png",
"imgs/Xcursor.png",
"imgs/zoomdown.png",
"imgs/zoomdown_s.png",
"imgs/zoomup.png",
"imgs/zoomup_s.png",
"imgs/mappin.png"
],
"mapCacheTarget":"localMaps/"
}
</pre>

* autoPilotDownloader
*:エリアと縮尺を指定し、オートパイロットで地図画面をスクロールさせることで、オフラインキャッシュに地図を保存する動作を自動的に行う機能のオブジェクト。レイヤー固有UIでの利用などを想定しており、以下のメンバー関数を持つ
** halt()
**:オートパイロット動作を中断させる
** searchAll(initialViewBox, minScale, maxScale)
**:- initialViewBoxで指定したエリアを、minScale、maxScaleの間でオートパイロットをかけキャッシュに保存させる
**:- minScale, maxScaleは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の座標系におけるscale値(getRootScale()で取れるもの)
** setProgressCallBack(cbf)
**:オートパイロット動作中の進行状況をcbfの第一引数に返却する
* async clearOfflineContents()
*:SVGMapのオフラインコンテンツを全消去する。SVGMapのオフラインコンテンツはserviceWorkerのネイティブキャッシュ機構とは別の独自キャッシュ機構(indexedDBを使用した機構)として構築される
* clearCache()
*:（未実装）serviceWorkerのネイティブキャッシュを全消去する
* cacheDB
*:SVGMapのオフラインコンテンツデータベースのオブジェクト。IndexedDBをpromise化した簡略的APIをメンバ関数として持つ。
** clear()
**:データベースをクリア
** async connect()
**:データベースに接続
** async delete(path)
**:pathで指定したコンテンツを削除
** async get(path)
**:pathで指定したコンテンツ(blob)を取得
** async getAll()
**:全コンテンツを取得
** async getAllKeys()
**:全Key(コンテンツのpath)を取得
** async put({idCol:path,contentBlob:blobdata})
**:コンテンツ(blobdata)をpathをキーにして格納(上書き)
* deleteCachedLayerMeta()
* async disableCache()
*:serviceWorkerのネイティブのキャッシュ機構とSVGMapの独自キャッシュ機構を全て無効化する
* async enableCache()
*:serviceWorkerのネイティブのキャッシュ機構とSVGMapの独自キャッシュ機構を全て有効化する
* getCachedLayerMeta
* async getPostQueue()
*:postMessageWhenConnectedでポストをリクエストし、未完了のリクエストを取得する
* getRootScale()
*:svgMapの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]座標系における現在の表示のscaleを取得
* getScales()
*:読み込み済み文書全てのscaleを連想配列で返す(hashKeyはdocID)
* getVisibleLayers
* getStorageUsage
* async loadOfflineContents(contentUrlList, overwrite, progressCallBack)
*:-contentUrlListで指定したコンテンツをオフラインキャッシュに読み込む(自ドメイン内のコンテンツ限定)
*:-overwriteをtrueにすると上書きする。progressCallBackは指定した関数の第一引数に進捗状況を返却
* async loadZippedOfflineContents(zip_url,progressCallBack)
*:保存してあるディレクトリに対して、そのzipファイルの中のディレクトリ構造で、コンテンツがあるものと見做したURLもつキャッシュを形成する
* async postMessageWhenConnected(URL, postData, postCompleteCBF)
*:-postDataデータをURLにポストする　オンライン時は即座にポスト、オフライン時はいったんindexedDBにポストデータを格納後オンラインになったらポストする。
*:-postDataは、文字列(この場合form-data決め打ちのリクエスト)、もしくは .bodyメンバー変数を持ったオブジェクト
*:-この場合は .bodyはFormDataタイプのインスタンスもしくは任意のデータ、そしてfetchAPIに準じた.headers, .methodをメンバー変数に持たせることができる。(methodでGETを指定すればGETリクエストも可能)またserviceWorkerが管理する
* async setCachedLayerMeta
* setScaleTrim
* async updateCacheIndex()

=====svgMapCustomLayersManager.で呼び出せるAPI=====

'''実験的機能段階''' :

基本的なフレームワークで提供されているレジューム機能を更に強化し、レイヤーの表示非表示状態、初期表示エリア(viewPort)等をユースケースなどに応じて複数登録、切り替えを可能とする機能を提供します。更に[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]をさらに積極的に編集し、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルに無いレイヤーを追加したり、削除したりした、カスタマイズされた[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]を差分情報の形でlocalStorageに保存・利用する機能を提供します。

:- 以下のAPIは、SVGMapLv0.1_CustomLayersManager_r*.jsを用いた場合に使用できます。
:- SVGMapLv0.1_CustomLayersManager_r*.jsは、svgMapオブジェクトもつwindowで使用するとともに、svgMapオブジェクト用のカスタムレイヤーセットを構築するための別ページのwebAppsにおいても使用することができます。
:- 上記svgMapオブジェクト用のカスタムレイヤーセットを構築するためのwebApps用としてSVGMapCustomLayersManagerApp_r*.js、SVGMapCustomLayersManager.htmlが用意されています。

*registCustomLayer(customLayerObject, applyImmediately, customLayerMetadata)
*applyCustomLayers(customLayersObject, baseLayersPropertySet)
*getDetailedLayersPropertySet(rootContainerDoc, ignoreIid)
*getDetailedLayersPropertySetFromPath(rootContainerUrl, ignoreIid)
*getDif( edit, orig )
*originalLayersProperty
*deepCopy(obj)
*deleteAllCustomLayerSettings()
*deleteCustomLayerSetting( key )
*setCustomLayerSettingIndex(key)
*buildCustomLayersSetting(difObj, editedLayersProperty, originalLayersProperty)
*loadCustomLayerSettings()
*storeCustomLayerSettings( settings )
*getElementByAttr( XMLNode , searchId , atName )

*applyCustomLayersSettingsToCurrentMapView(lpEdit, svgMapWin)
*loadCustomGeoViewboxes()
*storeCustomGeoViewboxes(customViewBoxes)
*buildCustomGeoViewboxSettingObject(key, title, geoViewBoxX, geoViewBoxY, geoViewBoxWidth, geoViewBoxHeight)

====起動URLによるオプション指定====
svgMapフレームワークを導入したhtmlコンテンツは、URLの"#"以降であるフラグメント識別子によってフレームワークにいくつかの起動時オプションを提示することができます。
通常、これらのオプションは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]における記述で示されています。フラグメント識別子による指示はそれをオーバーライドします。
一般的な"&"による区切りで複数の複数のパラメータを指定できます。
=====表示範囲の指定=====
global座標系によって表示範囲を指示することができます。　標準のフラグメント記述に対してそれぞれ"global"文字列の追加が必要です。
なおglobal座標系におけるxは一般的に経度、yは一般的に緯度に対応することに留意してください。
*メディアフラグメントによる指定 : xywh=global:<xmin>,<ymin>,<width>,<height>
*svgViewフラグメントによる指定 : svgView(viewbox(global,<xmin>,<ymin>,<width>,<height>))

=====表示・非表示レイヤーの指定=====
* 表示すべきレイヤー: visibleLayer=<layer title>,<layer title>...
* 非表示すべきレイヤー: hiddenLayer=<layer title>,<layer title>...
* 個々のレイヤーに対するフラグメントの提示 : それぞれのレイヤーに対しては、さらにフラグメントを追加することができます。ただし"="は"%3D",&は"%26"でURLエンコードしてください。<layer title>#fragment1=val1&fragment2=val2　⇒<layer title>#fragment1%3Dval1%26fragment2%3Dval2　

===レイヤー固有のUI===
"[https://satakagi.github.io/mapsForWebWS2020-docs/De-centralizedWebMapping.html#:~:text=To%20achieve%20this,everything%20in%20detail. Layers as WebApps]"(ウェブアプリケーションとしてのレイヤー: webApp Layer)を実現する機構　（LaWA、レイヤーwebApp、webAppレイヤー、アプリレイヤー、レイヤーアプリなどと呼ぶこともある）（[[#レイヤー固有ユーザインターフェース|こちらも参照]]）

====概要====
[[#レイヤー|レイヤーsvgコンテンツ]](フレームワークが最初に読み込むコンテナsvgコンテンツの中で埋め込まれるsvgコンテンツ)に対して、[[#動的な地図レイヤー|動的な地図レイヤー]]の一種として、そのレイヤーに固有の処理ロジックや、可視化・描画ロジック　そしてユーザインターフェースも含むことができる　htmlによるウェブアプリを定義できる機能です。

javascriptを使った独自のロジックによる動的な可視化データの生成が実装可能です。

また、この機能はそのレイヤーの設定やインタラクティブ操作のための表示やユーザインターフェースを地図表現とは別に表示したい場合にも用いることができます。従来のアーキテクチャでは、もしもこのようなレイヤーに固有のUIが必要だった場合でも、地図アプリケーション全体の処理や表示を司るグローバルな空間(ルートhtmlコンテンツのwindowオブジェクト直下)に、サイドエフェクトを考慮しながらコードを組み込む必要があり、結果としてコードのスパゲッティ化が懸念されました。SVGMapのレイヤー固有UIは、レイヤーごとにUIとそのロジックをカプセル化可能にし、これを排除することが可能です。(カプセル化はiframeによって行われます。)さらに、レイヤー固有UIによるウェブアプリは自律分散的な配置にも対応し、UIを備えた地図レイヤーにまでハイパーレイヤリングアーキテクチャを拡張します。

なお、[[#動的な地図レイヤー]]は、htmlによるユーザーインターフェースを持つことができませんが、同種のウェブアプリケーションのカプセル化の効果があります。

このＵＩには主に二つの用途が考えられます。
;凡例
: 各レイヤーはその地図表現の意味を示すための固有の凡例を持つことがあります。その凡例を表示するために利用できます。
;ウェブアプリケーションによる動的な地図レイヤー
: 先述のように、ウェブアプリケーションによる動的な地図レイヤーは独自のロジックによってそのレイヤーの地図表現を動的に変化させる機能を備えることができます。この場合、例えばエンドユーザがFORMで入力したフィルター条件ををもとに表現を変更するようなケースも考えられます。
これらケースでは、そのフォームや凡例は、[[#フレームワークの呼び出し|ルートhtml文書]]に設置することは可能ですが、もしも多くのレイヤーを表示するアプリケーションであり、それらのレイヤーがそれぞれ固有のフィルタ条件を持つような場合、[[#フレームワークの呼び出し|ルートhtml文書]]は、それぞれのレイヤーをフィルタリングするためのFORMとそのフィルタリングロジックをすべて埋め込む必要があり、画面のデザイン、およびロジックのコーディングの双方がスパゲッティ化する可能性があります。さらに、もしもこのアプリケーションに後日さらにレイヤーが追加される場合、スパゲッティ化の問題はより深刻になるかもしれません。凡例の表示についても同様の問題が考えられます。本レイヤー固有ＵＩはこのような問題に対するソリューションを提供しています。

この機能は、ベースのフレームワークrev12以上　且つLayerUI2フレームワークを読み込み、[[#レイヤー固有のUI(後述)を設置するdiv要素|id="layerSpecificUI"のdiv要素]]が[[#フレームワークの呼び出し|ルートhtml文書]]に設置されているときに使用できます。

;サンプル
:[[チュートリアル#WebApp_Layer.E7.B7.A8|開発者向けチュートリアル]]でいくつかのサンプルを見ることができます。

====[[#レイヤー|レイヤーsvgコンテンツ]]での指定====
レイヤー固有UIの設置には、[[#レイヤー|レイヤーsvgコンテンツ]](のルート要素(svg要素))に、data-controller属性を与え、そこにそのレイヤー固有のUIのためのhtml文書のリンク(ただしsame origin)を設置します。またサブセットとして、data-controller属性にビットイメージ(.pngもしくは.jpg, .jpeg, .gif拡張子を持つビットイメージ)へのリンクを与えることでレイヤーの凡例情報の提示をすることもできます。

[[#レイヤー固有のUI(後述)を設置するdiv要素|レイヤー固有ＵＩの表示部位]]には、このように指定されたリソース(ビットイメージもしくはhtml)がレイヤーの選択の状況に応じて、切り替わり表示されます。レイヤーがONになっている間、それに紐付けられたレイヤー固有UI(htmkのwindowオブジェクト)が存在し続け、そのレイヤーのsvgDOMの操作やUIの提供が可能です。

なお、標準のフレームワークでは、表示中のレイヤーの中の選択された一つのUIのみが地図のメインのwindowに配置されたiframeで表示されます。表示中ではあっても選択されていないレイヤーのUI(iframe)は非表示状態で動作しています。

'''サンプル'''
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="9000.0 -9000.0 9000.0 9000.0" go:dataArea="9000.0 -9000.0 9000.0 9000.0"
'''data-controller="../Self-GS-POI_controller.html"'''>
.....

====レイヤー固有のUIのためのhtml文書(webApp)の構造・作法====
レイヤー固有のUIとなるhtml文書は、下記の通り、その初期化等を行うライブラリ <code>svgMapLayerLib.js</code> を読み込む必要があります。（現在のところ通常のjavascriptライブラリのみ提供されます）
CDNからライブラリを読む場合は、<code>https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/svgMapLayerLib.js</code>です。

'''サンプル'''
<!doctype html>
<html>
...
<script src="https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/svgMapLayerLib.js"></script>
...
</html>

====LaWAとS-LaWA（サンドボックス化LaWA）のアーキテクチャ====
SVGMapにおけるレイヤー固有UI（LaWA: Localized active Web App）には、セキュリティと用途に応じた2つの動作モードが存在します。2026年のアップデートにより、Web標準のセキュリティモデル（クロスオリジン制約）に完全準拠した'''S-LaWA（サンドボックス化LaWA）'''が導入されました。 (2026/4/16現在 dev2リリース段階)

'''T-LaWA (Tight-coupled LaWA / 従来の密結合モード)'''
* 親のSVGMapフレームワークと同じオリジン（ドメイン）で動作する、従来型のレイヤーWebAppです。
* iframeのJavaScriptコンテキストに、親フレームワークから直接APIオブジェクトが注入されます。
* 全ての[[#拡張API]]にアクセスでき、複雑なDOM操作や関数渡しが可能ですが、サードパーティ製のレイヤーを読み込む際にはセキュリティ上のリスク（XSS等）を伴います。

'''S-LaWA (Strict/Sandbox LaWA / 分離モード)'''
* 親のSVGMapフレームワークとは異なるオリジンで動作することを前提とした、セキュアなレイヤーWebAppです。
* iframeは完全に隔離（サンドボックス化）され、親フレームワークとの通信は全て非同期メッセージング（postMessage）を介して行われます。
* 悪意のあるスクリプトから親フレームワークを保護できるため、外部のサードパーティ製レイヤーを安全に統合できます。
* セキュリティの代償として、直接的なオブジェクト参照や関数の受け渡しが禁止されるため、[[#拡張API]]の利用に強い制限がかかります（前節の「S-LaWAでの制限」を参照）。

===== 動作モードの指定 (data-lawa-mode) =====
レイヤーがどちらのモードで起動するかは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]内でそのレイヤーを参照している '''<code>animation</code> 要素の <code>xlink:href</code> の値（URLのオリジン）'''、もしくは同要素に付与する '''<code>data-lawa-mode</code>''' 属性で制御できます。

<code>data-lawa-mode="auto"</code> (未指定時のデフォルト): レイヤー（コントローラ）のURLが親フレームワークと同一オリジンであれば '''T-LaWA''' として、クロスオリジンであれば自動的に '''S-LaWA''' として起動します。

<code>data-lawa-mode="isolated"</code>: 同一オリジンであっても、強制的に '''S-LaWA''' として完全に隔離して起動します（開発時のテスト等に有用です）。

<code>data-lawa-mode="tight"</code>: 強制的に '''T-LaWA''' として起動を試みます。（※クロスオリジン環境でこれを指定した場合は、適切なCORS設定やプロキシサーバーの利用が必須となります）

====詳細====

レイヤー固有UIは、SVGMapのグローバルなwindowに設置されたiframeの中で動作します。このiframeの性質と利用できるAPIは、前述の動作モード（T-LaWAかS-LaWAか）によって大きく異なります。

どのような環境・モードで起動された場合でも、レイヤー固有UI内でSVGMapの各種リソースへ安全にアクセスするためには、レイヤーのHTML内で提供される初期化ライブラリ（<code>svgMapLayerLib.js</code> 等）を読み込む必要があります。

'''【重要】''' 各種APIへのアクセスが可能になるのは、iframe自体の "load" イベントではなく、SVGMapフレームワークとの接続が完了した後に発行される '''<code>layerWebAppReady</code>''' イベント以降です。
* 初期化処理は以下のように記述することを強く推奨します。
* <code>window.addEventListener("layerWebAppReady", function(){ /* 初期化処理 */ });</code>

[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が設置されたSVGMapのグローバルなwindowと異なるドメインにレイヤーを設置し、そのレイヤーがレイヤー固有UIを持つこともできます。デフォルト（<code>data-lawa-mode="auto"</code>）では、これは自動的にセキュアなS-LaWAとして起動するため、特別なCORS設定は不要です。ただし前述の通りAPIには制限がかかります。

[[#レイヤー|レイヤーsvgコンテンツ]]のドキュメントルート要素へdata-controller属性を設定する代わりに、コンテナsvgコンテンツにおける[[#レイヤー|レイヤーsvgコンテンツ]]への参照要素にdata-controller属性を設定することもできます。

data-controller属性の代わりに、data-controller-src属性の値に、適切にエスケープすることで直接htmlを記述することもできます。（※この機能は主にT-LaWAでの利用を想定しています）

data-controller属性によって参照されるhtmlコンテンツでは、次節[[#拡張API]]で説明する値や関数が使用できます（※モードによる制限あり）。

data-controller属性のURLには以下のオプションをフラグメント識別子として指定することができます。
* #exec=appearOnLayerLoad||hiddenOnLayerLoad||onClick レイヤー固有UIの起動オプション
** appearOnLayerLoad : レイヤーを表示状態にすると即座にレイヤ固有UIが出現
** hiddenOnLayerLoad : レイヤーを表示状態にすると即座にレイヤ固有UIがhidden状態で起動(そのレイヤ固有UIに含まれるscriptが起動)
** onClick : レイヤー固有UI起動ボタン">"を押したときにレイヤ固有UIが出現(デフォルト)
* #requiredHeight=hhh&requiredWidth=www
** id="layerSpecificUI"のdiv要素のcss値に関わらず、requiredHeight、requiredWidthでiframeの表示を指示

====拡張API====
レイヤー固有UI(iframeのwindowオブジェクトのjavascriptコード)では以下のAPIが拡張されています。
'''【注意】S-LaWA（サンドボックス化LaWA）環境においては、セキュリティ上の理由から親フレームワークのオブジェクトに直接アクセスできません。代わりに <code>svgMapSandboxLayerLib.js</code> が提供する「モック（代替）オブジェクト」を介して非同期に操作が行われます。各項目の「S-LaWAでの仕様」を参照してください。'''

=====イベント=====
*layerWebAppReady : 初期化が完了しLaWAの実行が可能になった (LaWAでは、loadイベントではなくlayerWebAppReadyを使用することを強く推奨します)
*openFrame : そのiframeが、新たに生成された
*closeFrame : 同、消滅した
*hideFrame : 同、隠された
*appearFrame : 同、隠されていたのが再度現れた
*zoomPanMap : [[#.E6.8B.A1.E5.BC.B5.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88|SVGMapフレームワークと同じ]]
*zoomPanMapCompleted : 同上
*screenRefreshed : 同上

'''【S-LaWAでの仕様】''' すべてのイベントがサポートされています。親フレームワークで発生したイベントは、メッセージングを通じてS-LaWA内のwindowオブジェクトに中継・ディスパッチされます。

=====svgImageProps=====
このレイヤー固有UIに紐づいたレイヤーSVGの各種プロパティを参照できる（基本的に全て読み出しのみ） (参考:[[#svgImagesProps.5B.5D]])
*[[解説書#svgImagesProps.5B.5D|プロパティのリストはこちらを参照]]
*svgImageProps.scriptで、動的地図レイヤーのscript要素によって生成されたオブジェクトにもアクセスできます。
*svgMap.getSvgImagesProps(layerID) で得た値と同等。
*.hashは書き込みが有効(参考 [[#サブレイヤーパーマリンク]])

'''【S-LaWAでの仕様】''' 親フレームワークから非同期で同期された静的なコピーデータとして提供されます。<code>.hash</code> プロパティへの書き込みはS-LaWAでもサポートされており、裏側で自動的に親へ同期されます。ただし、<code>.script</code> による親の実行コンテキストへのアクセスはできません。

=====svgImage=====
このレイヤー固有UIに紐づいたレイヤーSVG文書(DOM Documentオブジェクト) (参考：[[#svgImages.5B.5D]])
*このドキュメントを操作することで、そのレイヤーの表示を動的に変化させることが可能です。
*特に、[[解説書#.E5.8B.95.E4.BD.9C.E3.81.AE.E5.88.B6.E9.99.90.E3.83.BB.E5.B7.AE.E7.95.B0|動作の制限に注意して実装してください]]
*svgMap.getSvgImages(layerID) で得た値と同等。

'''【S-LaWAでの仕様】''' S-LaWA環境内に展開された「ローカルXML DOM」が提供されます。このドキュメント（要素の追加・削除・属性変更・テキスト変更など）を操作して <code>svgMap.refreshScreen()</code> を呼び出すと、フレームワークの共通地図キャンバスに送信され更新します。

=====svgMap=====
svgMapフレームワークインスタンス

'''【S-LaWAでの仕様】''' 親のインスタンスの代わりに、S-LaWA用のモッククラス（<code>SandboxSvgMap</code>）が提供されます。以下のメソッドのみが利用可能です。
* <code>refreshScreen()</code>, <code>transform()</code>, <code>getGeoViewBox()</code>, <code>getSvgImageProps()</code>, <code>setShowPoiProperty()</code>, <code>showModal()</code>, <code>getCORSURL()</code>, <code>setCORSproxy()</code>, <code>parseEscapedCsvLine()</code>

=====layerID=====

svgMapフレームワークが管理しているSVG文書ハッシュリスト(svgMap.getSvgImages())における、このレイヤー固有UIに紐づいたレイヤーSVG文書のハッシュキー

[[#getLayerId]]参照

'''【S-LaWAでの仕様】''' 制限なく利用可能です。

=====svgMapGIStool=====
GIStoolsフレームワークを拡張した時、同インスタンス
*[[解説書#svgMapGIStool..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI|svgMapGIStoolが持つAPI]]

'''【S-LaWAでの仕様】''' '''現在のところ利用不可です。'''

=====svgMapAuthoringTool=====
svgMapAuthoringToolフレームワークを拡張した時、同インスタンス
*[[解説書#svgMapAuthoringTool..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI|svgMapAuthoringToolが持つAPI]]

'''【S-LaWAでの仕様】''' '''現在のところ利用不可です。'''

=====controllerSrc=====
レイヤー固有UIのiframeの起動に使われたsrc属性(レイヤー固有UIのパス・URL)が読み出せます。特にレイヤーが異なるドメインから配信されたものの場合、レイヤー固有UIのwindowのlocation属性(及びそれによるURL解決を行うAPI)からは適切な情報が得られません。これ代えてこの値が使用できるケースがあるでしょう。

'''【S-LaWAでの仕様】''' 参照できません。S-LaWAは自身のURLコンテキストで動作するため、自身の <code>location.href</code> などを参照してください。

=====putGlobalMessage(messageText)=====
messageTextを[[#グローバルメッセージ]]エリアに表示する　レイヤーが消滅したら自動でメッセージも消滅します。

'''【S-LaWAでの仕様】''' 現在のところ利用不可です。

=====preRenderFunction=====
この名前の関数を(レイヤー固有UIのwindowに)定義すると、そのレイヤーのSVG文書の再描画(画面更新)シーケンスの直前にこの関数の内容が実行される。詳細は[[解説書#setPreRenderController|setPreRenderControllerを参照]]

'''【S-LaWAでの仕様】''' '''利用可能です。''' S-LaWA内で <code>window.preRenderFunction</code> を定義しておくと、<code>svgMap.refreshScreen()</code> が呼ばれた際や、親からズーム・パンなどのイベントを受信した際に、S-LaWA内でローカルに実行されます。この関数内でローカルDOMを変更することで、描画前の状態更新をエミュレートできます。

=====customHitTester=====
この名前の関数を定義すると、そのレイヤーに固有のヒットテスト（マウスやタッチによって地図上をヒットしたときの振る舞い）機能を追加することができます。ヒットテストは通常のクリッカブルオブジェクト（ポイントやライン・ポリゴンなど）のそれと同等に扱われます。
* customHitTester( position )
** 第一引数に、ヒットされた座標(.screenX,Y:window上の座標、.lat,lng:地理座標、.isMapCenterHitTest:後述)が与えられます。（この値をもとに実際のヒットテスト処理を書く）　この関数の帰り値が'''null'''や'''undefined'''の場合はヒットしなかったこと、'''true'''もしくは文字列もしくはそのレイヤーの任意の図形要素、もしくはそれらの配列の場合はヒットしたことを示します。
*** isMapCenterHitTestが'''true'''の場合、そのヒットテストは伸縮スクロール時自動発生するケースで発生したものです。（もしこのケースでのテストを除外したいなど特別な処理をしたい場合に利用できます）
** ヒットテスト後の振る舞いも通常のクリッカブルオブジェクトと同等で、通常はデフォルトで備えるヒットされたグラフィックスオブジェクトの[[#metadata.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF|メタデータ]]表示パネルが呼び出されます。(帰り値が図形要素の場合）　もしこの振る舞いを変更したい場合は、[[#setShowPoiProperty|setShowPoiProperty]]を用いることが可能です。
** 帰り値がtrue、文字列、およびそれらの配列を返す場合は、[[#setShowPoiProperty|setShowPoiProperty]]を使用してカスタマイズされた処理を行う必要があります。この場合[[#setShowPoiProperty|setShowPoiProperty]]で設定された関数が受け取る引数は、そのSVG文書のドキュメントルート要素であり、その'''"data-hitTestIndex"'''属性に選択されたオブジェクトのインデックス(配列の場合。配列でない場合は常に0)が設定されます。

'''【S-LaWAでの仕様】''' <code>customHitTester</code> 自体は利用できません。（なお<code>svgMap.setShowPoiProperty(func)</code>は利用可能です。）

====サブレイヤーパーマリンク====
(2024/10のdev1ブランチから有効)
*[[#レイヤーsvgコンテンツ]]のURLが任意のフラグメント識別子を持つことができる。
*ただしフラグメント識別子はカンマ","、アンパサンド"&"を含めることはできない。
*[[#レイヤー固有のUI]]が以下を実装する場合、任意のレイヤーの設定をパーマリンク([[#getBasicPermanentLink]])に反映できる。
**[[#レイヤー固有のUI]]は起動時(onload)同フラグメント識別子の情報を解釈し適切な状態に変化させる機能
**[[#レイヤー固有のUI]]は、パーマリンクによる指定に対応した標示状態に表示が切り替わるタイミングで[[#レイヤーsvgコンテンツ]]のURLのフラグメント識別子の内容をそれに対応した値に変更する機能
*[[#レイヤーsvgコンテンツ]]のURLのフラグメント識別子は、[[#svgImageProps]].hashを設定することで変更できる ([[#svgImageProps|⇒仕様参照]])

===動的な地図レイヤー===
svgドキュメントにjavascriptを記述することでも、動的なデータ生成を実装可能としています。
本フレームワークでは、svgドキュメント中に<script>要素を一つだけ記述することができ、その要素の中にjavascriptコードを入れることができます。

DOMを操作し、動的に描画を変化させることが可能です。ただし、[[解説書#.E5.8B.95.E4.BD.9C.E3.81.AE.E5.88.B6.E9.99.90.E3.83.BB.E5.B7.AE.E7.95.B0|動作の制限に注意してください]]

====動的SVGMapコンテンツで利用可能な拡張API====
一般のjavascriptAPIに加えて、動的な地図レイヤーを実装するために以下のAPIが提供されます。（既存のものでも注記があるものも列挙）
*document: このsvgMapドキュメント自身
*READ ONLY変数
**CRS:このドキュメントのCRS : CRS.a....fに、地理座標からこのドキュメントのSVGユーザ座標への変換係数が提供される
**docId:このSVGドキュメントのdocId
**scale：倍率：このドキュメントの座標系と、画面の(px座標系)との間の倍率(この値は等倍が1.0だが、svgMapコンテンツのvisibleMin/MaxZoom値は%(等倍は100)なので注意)
**actualViewBox：このドキュメントの座標系でのviewBox
**geoViewBox：地理座標におけるviewBox
**geoViewport
**viewport
**this.location:相対パス
**(this.verIE)
*refreshScreen(): 描画の更新を明示: refreshScreenを用いていない場合、そのレイヤーのDOMを編集してもそれが即座に表示に反映(更新)するとは限りません。文書のロード、ズーム、スクロールのときが表示のDOMの内容を反映した画面の自動更新のタイミングです。それ以外、多くの場合反映されません（性能確保のための本フレームワークの現在の制限）。DOMO編集をそれ以外のタイミングで表示に反映したい場合、この関数の呼び出しを行うひつようがあります。一方不必要にこの関数を呼び出すとシステム全体の性能が低下するかもしれません。
*transform()
*getCanvasSize()
*linkedDocOp()
*isIntersect()
*drawGeoJson()
*childDocOp()
*onload:この関数を設定すると、ロードされると呼ばれる(ドキュメントロード後、描画前のタイミング。)
** この関数は、DOMトラバース前に同期処理される。
**したがってonloadで実行される処理はその中が非同期でない限り、refreshScreen()しなくてもonload時のDOM編集は直後の描画に反映される。
*onscroll:この関数を設定すると、スクロールされるとき呼ばれる（ほかにズーム以外で画面更新時も）(スクロール後の描画前のタイミング。)
**同上
*onzoom:この関数を設定すると、ズーミングが発生するとき呼ばれる(同上)

====拡張イベント====
*document -> zoomPanMap イベント addEventHandlerすると、ズームパンが起き(viewPortが変化したとき)地図システム全体の描画が完了(含タイムアウト)後に発行される。SVGMap*.jsが地図をウェブアプリ起動後、最初に描画完了した時にもこのイベントが発生する。（レイヤー追加時には発生しない）
**これをイベントリスナに設定した関数は、非同期に実行される。onscroll()と異なり、もしその関数でDOM編集を行った場合は、直後の描画にそれが反映される保証がない。refreshScren()による再描画が必要。
*document -> screenRefreshed イベント addEventHandlerすると、ズームパン以外で地図システム全体の描画が完了(含タイムアウト)後に発行される。主にrefreshScreen()など。このイベントをフックにして、SVGMapコンテンツのDOM操作・再描画（refreshScreen()）を行うと無限ループに陥るので使用方法に注意が必要。
*document -> zoomPanMapCompleted イベント SVGMaplayerUIが有効な時に発行される。　zoomPanMapイベントは伸縮スクロール完了時に発行されるが、その直後にレイヤー固有UIにおいて(XHRやfetchを用いた)非同期なデータ取得とレイヤー書き換えが生じるケースでは、その完了を検知しない。zoomPanMapCompleted イベントはこのような非同期通信の完了後に発行される。

===SVGMapの埋め込み(SVGMapFrame)===
'''実験的機能段階''' :

SVGMapフレームワークはwindow全体に地図コンテンツが占有される形で表示する設計です。ウェブページはwebAppsとしてカプセル化されたレイヤーをsvgMapオブジェクトに差し込む形でアプリケーションが構築されます。すなわち、基本的に[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]windowにはsvgMapオブジェクトだけが単独で存在し、その他のアプリケーションをwindow上に実装する場合は、その開発者がsvgMapオブジェクトとのグローバル空間でのスパゲッティ化に注意を払いながら開発していく必要があります。

それに対して、''SVGMapLv0.1_Frame*.js''が提供する機能は、window内の指定した領域にsvgMapによる地図を埋め込むことを可能にします。さらにこの埋め込まれたsvgMapオブジェクトを　外部からより簡単に操作できるようカプセル化されたインターフェースを提供します。

====ライブラリ====
SVGMapを埋め込むウェブページでは''SVGMapLv0.1_Frame*.js''を導入します。
<!doctype html>
<html>
<script type="text/javascript" src="SVGMapLv0.1_Frame_r4.js"></script>
</html>

====svg-map要素====

svg-mapカスタム要素を使用してsvgMapオブジェクトを任意の場所に埋め込むことができます。
<nowiki>
<!doctype html>
<html>
<script type="text/javascript" src="SVGMapLv0.1_Frame_r4.js"></script>
<body>
<table>
<tr>
<td>
説明用地図
</td>
<td>
<svg-map svgMapAppPage="SVGMapper_r16_layerUICustom.html" id="svgMapTag" latitude="37" longitude="135" zoom="4" layerui="#layerUIarea">
</svg-map>
</td>
</tr>
</table>
</body>
</html></nowiki>

=====属性=====
======svgMapAppPage======
必須属性: 起動するSVGMapLv0.1*.jsが組み込まれたhtmlを指定。
svg-map要素はshadow domとなっており、内部はひとつのiframeとして構成されます。このiframe内のwindowで通常のsvgMapオブジェクトが稼働する形となります。svgMapAppPage属性はこのiframe内で起動するsvgMapオブジェクトを持ったhtmlを指定するものです。

======latitude, longitude======
オプション: 表示領域を下記の属性と組み合わせて指定します。DOMを操作することによって動的に表示領域を変更することが可能です。
======zoom======
オプション: 表示位置の中心点を上の2属性で、ズームレベルをこの属性で指定します。ズームレベルの定義は[https://docs.microsoft.com/ja-jp/azure/azure-maps/zoom-levels-and-tile-grid webMercatorタイルピラミッドのレベル番号]（ただし小数点指定も可能）
======latitude2, longitude2======
オプション: latitude, longitudeと組み合わせて対角線を指定し表示領域を設定します。
======customjson======
オプション: 任意のJSON文字列を(エスケープしたうえで)与えることができます。 SVGMap.jsのあるiframeのwindow.rootMessage.customJsonに、JSON.parseされたうえでその値が反映されます。この値もDOM操作により動的に反映されます。window.rootMessage.customJsonの変化を監視できるようsetterを設けることで動的な変化に対応する実装が可能です。

var rootMessage={
set customJson(json){
...
}
}

======layerui======
オプション: レイヤーUIの出力要素をxlinkで指定します。　この値はmutationをobserveしていません（svg-mapオブジェクトが生成された、最初の一回のみ有効です）

<svg-map svgMapAppPage="SVGMapper_r16_layerUICustom.html" id="svgMapTag" latitude="37" longitude="135" zoom="4" layerui="#layerUIarea">

=====DOM API=====
======setCenter======
setCenter( longitude, latitude, zoom ) : 緯度経度ズームレベルで地図を表示させる
======addLayer======
addLayer(url,title,visibility) : URLで指定したリソースのレイヤーをtitleを付けて追加する

======svgMapObject======
getter svgMapObject : この要素に紐付いたsvgMapオブジェクトを得る

====layer要素====
svg-map要素の子要素として、任意の個数のlayer要素を設置できます。
=====属性=====
======title======
iframeで起動されるsvgMapオブジェクトの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルにある、レイヤー名(title)を指定し、そのレイヤーとlayer要素を紐付ける。該当するレイヤーが無く、且つ下記のsrcが指定されている場合は新しいレイヤーを追加する。なお、任意の属性や子ノードが与えられている場合は、下記の通りレイヤーの読み込み後にそれらの値が該当するレイヤーの[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|data-controller]]の window.rootMessageに設定される。

======src======
iframeで起動されるsvgMapオブジェクトの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルにある、レイヤーをURLを使って指定する
======visibility [TBD] ======
visible もしくは hiddenを設定すると、そのレイヤーの表示状態を制御できる。

======任意の属性======
任意の属性を設定できる。設定した属性名と属性値は、対応するレイヤーの[[#レイヤー固有ユーザインターフェース|data-controller]]で指定されたレイヤーのコントローラのwindowにおけるwindow.rootMessageの対応するメンバ変数に反映される。[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/set setter]を設定することで変化に応じて動作させることが可能になる。

======rootMessage.update()関数======
レイヤーのコントローラのwindow.rootMessage.update()関数(引数なし)が定義されている場合、上記の属性変更(最初の設定も含む)が検知される度にこの関数が呼び出される。

=====子ノード(TEXT CONTENTやXML要素)=====
任意のテキスト(textContent)や、XML要素(xmlContent)を子ノードに入れることができる。
入れられた情報は、同様に対応するレイヤーのdata-controllerの
window.rootMessage.textContent、もしくはwindow.rootMessage.xmlContentメンバ変数に反映される。
XMLに関しては任意の階層化がされていても良い。DOM操作による変化があれば更新されるので、同様にsetterを用いて変化を反映させることが可能。

=====DOMAPI=====
======layerId======
layerId : このレイヤーのレイヤーIDを得る
======svgImage======
svgImage : このレイヤーに紐付いたsvgMapコンテンツ(document)を得る
======svgImageProps======
svgImageProps : このレイヤーに紐づいたsvgMapコンテンツのsvgImagePropsオブジェクト(各種プロパティを格納したオブジェクト)を得る
======controllerWindow======
controllerWindow : (もしあれば)このレイヤーに紐づいたsvgMapコンテンツのレイヤー固有UIを得る

==第四章：内部機構解説==
[[内部機構解説|別ページを参照してください。]]

==第五章：付加機能==
===3D可視化機能===
:- SVGMap.jsはCesium.jsを利用してSVGMapで表示しているレイヤーを3D可視化することができます。
:- 3D可視化はSVGMap.jsの地図ウィンドと独立した別ウィンドで行われます。
:- すなわち、ここから呼び出されるCesiumベースの3D可視化ウェブアプリは、それ専用のwebApps([https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4_module.js cesiumWindow*.js]を読み込んだアプリ。：基本的な3D可視化ウェブアプリとして、[https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4.html cesiumWindow4.html]を用意)を持つ別のブラウジングコンテキストで起動されます。
:- この3D可視化ウェブアプリは、svgmapjsとメッセージングを行いsvgmapjsで表示されているレイヤーを3D可視化します。

====3Dビジュアライザ起動用ボタンの設置====
3D可視化機能を起動するためのUI(ボタン)は、[[#フレームワークの呼び出し|ルートhtml文書]]に設置した以下の要素によって構築されます。
<code><pre><img id="3DviewButton" data-app="cesiumWindow4.html" .../></pre></code>

* <code>id</code>が<code>3DviewButton</code>である必要があります。
* <code>data-app</code>属性で、3D可視化ウェブアプリのパスを指定することが可能です。
** もし指定されていない場合は、ルートhtml文書と同一ディレクトリの<code>cesiumWindow2.html</code>というファイルがデフォルトで指定されます。
** パスは同一オリジンである必要があります。
** 基本的な3D可視化ウェブアプリとして、[https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4.html cesiumWindow4.html]が[https://github.com/svgmap/svgmapjs/ svgmapjsリポジトリ]に用意されています。

解説書

2026-04-16T08:28:53Z

Admin: /* 拡張API */

=SVGMap.js (Level0.1フレームワーク)解説書=

2018年現在のSVGMapのデータ形式、およびそれを実装した初歩的なフレームワーク(SVGMap Level0.1 Revision*)の解説を行います。

==第一章：SVGMapの基本機構と、更新部分==

この章は、JIS化されたSVGMap ([http://kikakurui.com/x7/X7197-2012-01.html JIS X.7197])や、[https://www.w3.org/Submission/2011/04/ W3C Member Submission]に対する、近年の開発成果に基づいたSVGMapのアップデートを解説しています。

[http://kikakurui.com/x7/X7197-2012-01.html JIS X.7197]もしくは、[https://www.w3.org/Submission/2011/04/ W3C Member Submission]に記載されているように、SVGMapの基本機構は主に以下の機能を　[https://ja.wikipedia.org/wiki/Scalable_Vector_Graphics 汎用的なグラフィイクスデータ記述形式SVG]に拡張することです。
* [[#地理座標系の処理|地理座標処理]]
** SVGの座標系と地理座標系との間の関係を記述する globalCoordinateSystems要素
* タイルピラミッド（タイリングとLevel of Detail）
** コンテンツを埋め込む[[#要素|image要素、animation要素]]のx,y,width,height属性への追加の振る舞いと、visible-min-zoom, visible-max-zoom属性の追加
** 詳細は [https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html こちらの論文]を参照
* 拡張された[[#レイヤー|レイヤー]]
** [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]におけるimage, animation要素の扱い
** [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が埋め込むsvgコンテンツ([[#レイヤー|レイヤーsvgコンテンツ]])の処理

===地理座標系の処理===
SVG2では地理空間座標を記述するスペック(metadata geospatial coordinate systems)が削除されました。これは、W3C SVG仕様の範囲では単なるメタデータであり、ユーザエージェントの振る舞いに何ら影響を及ぼさないことが理由です。　また、JIS SVGMapにおいては、coordinateReferenceSystem 要素が定義され、それに基づくユーザエージェントの振る舞いが規定されていますが、これは一方でW3Cのスペックではないという課題を持ちます。

これを受けて、現在提案されているSVGMapのデータ仕様では、SVG1.1の段階ですでに標準化と実装が行われたスペックを注意深く活用することにより、JIS SVGMapで規定された地理座標系に関する機能のいくつか（すべてではない）を実現する方法を用いることとしています。（[https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/globalView globalView spec]）

なお、JIS SVGMapのcoordinateReferenceSystem要素もサポートしています。

====メルカトル図法を含む任意の図法の定義とその合成機能(＞rev16)====
従来のSVGMapでは、グローバル座標系に緯度経度座標を用いた場合、使用できる図法は[https://ja.wikipedia.org/wiki/%E6%AD%A3%E8%B7%9D%E5%86%86%E7%AD%92%E5%9B%B3%E6%B3%95 PlateCarreeや正距円筒図法]でした。

一方、rev16では[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]を含む任意のSVGMapコンテンツ([[#レイヤー|レイヤーsvgコンテンツ]]やサブレイヤー、タイルなど)のglobalCoordinateSystem 要素のtransform属性に、下記のように"mercator"を指定することで、そのコンテンツの座標系がメルカトル図法([https://en.wikipedia.org/wiki/Web_Mercator_projection web mercator])であることを宣言できます。

<pre><globalCoordinateSystem srsName="http://purl.org/crs/84" transform="mercator" /></pre>

この記述がされたコンテンツのSVGの座標空間はメルカトル図法上のものとなり、この座標系上でのx,y=0,0(左上)は西経180.0度,北緯85.051129度、x,y=1,1(右下)は東経180.0度,南緯85.051129度に対応します。

=====メルカトル図法での地図表示=====
[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]で先述の宣言を行うことで、SVGMap0.1.jsはメルカトル図法で画面上に地図を表示します。このとき、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が参照する各レイヤーはメルカトル図法であっても、それ以外であっても構いません。フレームワーク内でオンザフライの図法変換が実行されます。（逆に[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]がPlateCarreeでレイヤーがメルカトルでも同様）

=====メルカトル図法のドキュメントルート要素のviewBox属性=====
* [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]において、地図の初期表示状態を記述するドキュメントルート要素(<svg>要素)のviewBoxに記述する座標も先述のメルカトル座標系で記述する必要があります。
* 一方、緯度経度で初期表示領域を記述したい場合に対応する仕様が拡張されており、その記述例は下記のとおり、'''global'''を追加します。
<pre><svg viewBox="global,138,35,2,2"></pre>

=====プロキシの設定=====
オンザフライでの図法変換では、多くのケースで非線形の座標変換が必要となります。ビットイメージ（タイルを含む）に対して子の座標変換を実行するためにSVGMap.jsではビット委イメージのピクセルにアクセスしています。これを実現するにはビットイメージがSVGMap.jsと同一オリジンにある必要があります。この条件を満たせないケースに対してフレームワークにはプロキシを設定する機能があります。([[#setProxyURLFactory|setProxyURLFactory API]]を参照)

'''[[クロスオリジンアクセス|詳細な情報をこちらに掲載しました]]'''

=====多様な図法の定義と利用=====
[[#動的な地図レイヤー|javascriptコード]]に記載されたscript要素内に定義した関数の関数名をglobalCoordinateSystem要素のtransform属性に記述することで、その関数を図法変換に用いた図法定義が可能となります。(先述のmercator属性は、フレームワークに特別に組み込まれた関数です）

たとえば、日本の平面直角座標系の地図(固有の基準点を持つ横メルカトル図法)をPlateCarreeやメルカトル図法の地図として合成・表示するケースなどに有効でしょう。

ユーザが定義できるこの関数は引数を持たない関数であり、返り値として以下の３つの関数を返す必要があります。
* {x,y} transform({x,y}) : グローバル座標(WGS84経度緯度)から、そのコンテンツの図法の座標への変換関数入出力値は.x,.yメンバを持つオブジェクト。
* {x,y} inverse({x,y}) : 同、逆変換関数
* number get scale : グローバル座標系に対するコンテンツの図法の座標系の座標値のスケール（グローバル座標系で1変化すると、コンテンツの座標系でいくつ変化するのかを表す）
* 記述例
<code><pre>
<svg ...>
<script>
function azimuthalEquidistant(){
...
return{
transform:function(inp){
var xy = transform_int(inp.y, inp.x, ...);
return{ x:xy.x, y:xy.y}
},
inverse:function(inp){
var latLng = inverse_int(inp.x, inp.y, ...);
return{ x:latLng.lng, y:latLng.lat }
},
scale: 1.0
}
}
</script>
<globalCoordinateSystem srsName="http://purl.org/crs/84" transform="azimuthalEquidistant" />
...map contents in projected coordinate system...
</svg>
</pre></code>

===ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング===
SVG2(SVG1.1 2nd Edition)では、SVG単独によるユーザエージェントという実装想定は撤廃され、よく知られているウェブブラウザの機能の一部としてのSVGデータの描画機能、HTMLやCSSと一体化されたデータ・コンテンツ　へと変化しました。一方、近代のウェブブラウザにおけるコンテンツでは古典的なhtmlに基づくコンテンツデータに対して、javascriptとDOM APIによるプログラムでコンテンツをブラウザ上で動的に生成する（ウェブアプリケーション）機構を備えます。すなわちSVGを実装する現代のユーザエージェントは例外なくウェブアプリケーションの実行が可能となりました。

そこで、SVGMapでは静的なSVGによる地図コンテンツに加え javascriptで動的に生成されるコンテンツ(ウェブアプリケーション)も地図コンテンツ（地図のレイヤー）として扱えることとしました。それにもかかわらず SVGMapは依然として複数のウェブ上で分散する地図データを一つの画面上にレイヤリングする機能（ハイパーレイヤリング）を維持しています。すなわち、ウェブアプリケーションとしての地図レイヤーをレイヤリング（マッシュアップ）する機能が拡張されます。これは、SVGMapのマッシュアップ・ハイパーレイヤリングの概念を、単に地図画像データのレイヤリングから、地図上に表現された動的なオブジェクトのマッシュアップ・レイヤリングに広げています。SVGMapではこのコンセプトを[[リンク集#.E8.A7.A3.E8.AA.AC.E9.9F.B3.E5.A3.B0|"Layers as WebApps"(LaWA : ウェブアプリケーションとしてのレイヤー)]]と呼んでいます。

このようなウェブアプリケーションは、レイヤーごとにカプセル化されることになります。これにより、'''グローバル空間'''(コンテナsvgコンテンツとそれを起動する、svgMap.jsフレームワークを読み込んだウェブページ)のスパゲッティ化なしに、多様な機能を実装していくことが可能になります。

[https://satakagi.github.io/mapsForWebWS2020-docs/De-centralizedWebMapping.html こちらの論文]も参考にしてください。

ウェブアプリケーションによる地図レイヤーを構築するには二つの方法があります。
* svg要素の'''data-controller'''属性で参照されたhtml文書
** [[#レイヤー固有ユーザインターフェース]]と呼ばれる機構です。この方法を用いること推奨します。
* svg要素内の'''script'''子要素 (将来廃止予定)
** htmlによるUIを伴わない実装の場合はscript要素を用いることができます。ただしsrcは属性には非対応、直接コードを埋め込む必要があります。

この機能を用いるにはSVGMapLevel0.1フレームワークを使用する場合は、拡張フレームワーク(SVGMapLv0.1_LayerUI2_r*.js)を更にロードする必要があります。SVGMapLevel0.2フレームワークの場合はデフォルトで機能します。

====レイヤー固有ユーザインターフェース====
SVGMap.jsではさらに、個々の地図レイヤー(レイヤーSVGコンテンツ)がそれぞれのレイヤーに特化した固有の演算ロジックだけでなく、ユーザーインターフェースも備えた[[#レイヤーsvgコンテンツの設定|HTMLを紐づける]]ことができる機能が拡張されています。UIも備えたより完全なwebAppをレイヤーとして実装できるため、カプセル化がより効果的に実現されます。（Layers as Web Apps, LaWA)

たとえば気象情報のレイヤーに対して気象情報の時間変化を表示するアニメーションのコントローラ(スライダーバー)や、気象情報の種類を選択するプルダウンメニュー　などのUIやロジックを任意に構築できます。

レイヤー固有ユーザーインターフェースは、[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]](SVGMap.jsをロードしたhtml)のレイヤー選択UIを通してwindowに設置されたiframe中に呼び出されます。

詳細は[[#レイヤー固有のUI]] を参照してください。



　

====例====
以下に、いくつかのこのような動的な地図コンテンツの例を示しましょう。
;検索によって表示スタイルを変更する機能を持ったレイヤー
: 例えばコンビニエンスストアのＰＯＩレイヤーを表示したとして、そのメタデータを読み取り、検索条件に基づいて（例えば深夜営業している店舗）の表示スタイルを変更するような検索機能を実装したレイヤー　メタデータは書くレイヤーごとに独特の値を持つため、その検索ロジックはレイヤーに固有のものとなることがあります。このケースではそのような機能をレイヤーに組み込むことを可能にします。
;CSVデータなどのレガシーな非SVGデータをHXRで取得し、ブラウザ上でSVG DOMツリーを生成するようなSVG地図コンテンツ。
: このケースでは、サーバからクライアントに送信されるデータの実体はSVG形式の地図データではなく、CSVなどのレガシーなデータです。SVG地図コンテンツには、CSVデータをSVGとして描画するためのデータ読み込み・解読・SVG DOMツリー生成機構を備えたjavascriptコードが含まれます。また、これよりはモダンなgeoJsonやKML等のデータをSVG DOMに変換することも容易に可能でしょう。これをより簡単に実現するためのライブラリも[[#svgMapGIStool.で呼び出せるAPI|svgMapGIStool]]に準備されています。
;タイリングされた地図コンテンツ
: それは、たとえば[https://wiki.openstreetmap.org/wiki/Tiles OpenStreepMapのTile Server]や、[https://en.wikipedia.org/wiki/Tile_Map_ServiceTileMap Tile Map Service]のような、特定のロジックによる数列のような法則性を持ったピラミッド状の地図タイルリソースをタイリングする地図コンテンツのことです。
: 更新されたSVGMapでは、地図コンテンツに内蔵されたjavascriptによるアプリケーションロジックとしてそれらを取り扱うことができます。タイリング規則をそのままウェブアプリケーションとしてで書き下し、スケールやビューポートに応じて適切なタイリング(配置)を行うSVG DOMツリーを生成するSVG地図コンテンツが構築できます。

=====タイリングに関するノート=====
[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html svgMapにおけるタイリング]は従来の地図フレームワークより柔軟で汎用的な概念に基づいています。
openLayersやleafletなどの従来の地図フレームワークでは、このようなタイリング機能は特定の固定的なタイリングロジックとパラメータを伴った機能として地図フレームワーク本体にハードコードされて提供されてきました。さらには地図フレームワークがこれらのタイリングロジックに強く依存したアーキテクチャを持っていました。一方、これらのロジックにはさまざまなバリエーションや最適化のための調整パラメータが存在し、これまで長らくその互換性や相互運用、更には効率の問題を抱えてきました。次のリンクでその多くの議論や多様な提案を参照できるでしょう。[https://wiki.osgeo.org/wiki/Tile_Map_Service_Specification TMSspecs@osgeowiki], [https://wiki.osgeo.org/wiki/Category:Tiling tiling@osgeowiki]
ベクターデータのタイリングにおいては、これらの課題はさらに増幅され、いまだ手法は確立していないといっても良いでしょう。たとえば、我々の研究では、Quad Tree Composite Tiling([https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-in-english スライド]、、[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html ペーパー])のような用途によってはもっと優れたタイリングの手法も見いだされています。

一方、これらのロジックはその多様なバリエーションを含め、javascriptによるプログラムコードとしては容易に記述可能です。多くの場合わずか数十行のロジックで記述できるでしょう。この程度のコードで多くのタイリングの手法が包含できるのであれば、特定のタイリング手法をフレームワークのコアに内包する・さらにはこれら特定のタイリングの手法にコアが依存する必要はなく、先述のウェブアプリケーションによる動的な地図レイヤーとして実装すれば良いであろうというのがSVGMapにおけるタイリング扱いです。3DマップのフレームワークであるCesiumはこれに似たタイリングポリシーを持っているようです。

=====SVG以外のデータサポートに関するノート=====
前章に記載した方針と同様、他の地図表示フレームワークと異なりSVGMapではSVGとして規定されたコンテンツ(もちろんビットイメージの埋め込みは可能)以外のネイティブサポートは行いません。例えばgeoJsonやKML, WKTなど地図業界でしばしば用いられるデータをSVGMapで表示したい場合は、変換ルーチンを埋め込んだ動的な地図コンテンツ（webAppレイヤー）としてそれらを扱います。SVGMap.jsの拡張モジュールである[[#svgMapGIStool.で呼び出せるAPI|SVGMapGIS.js]]には、これらのデータをwebAppsで読み込みSVGに変換するためのAPIがあります。

===トポロジースイート(地理空間情報処理)===
Rev.13で拡張

SVGMapLevel0.1 Revision 13以降では、SVGMapコンテンツに対してトポロジー演算機能(地理空間情報処理機能)を適用する拡張フレームワークが提供されます。この機能を用いるにはSVGMapLevel0.1フレームワークに加えて、拡張フレームワーク(SVGMapLv0.1_GIS_r*.js)をロードする必要があります。このフレームワークでは、[[#svgMapGIStool.で呼び出せるAPI|拡張されたAPI]]が利用可能です。フレームワークに内蔵された基本的な演算機能に加え、geoJSONと整合するインターフェースを備え、[https://github.com/bjornharrtell/jsts jsts]を組み込み、より高度な機能を実装するための機構も持ちます。

この機能を用いると、特定のレイヤーに登録されているポリゴンの範囲に入っている、特定のレイヤーのポイントをフィルタリングして表示の色を変更する。といったことが可能です。ただし、これらはすべてすでにブラウザ上にロードされている限られた量のコンテンツの中での演算に限定されます。もしもサーバ上にしかないデータに対してこれらの演算を試みたい場合、従来通りサーバサイド技術によってそれは実現すべきです。

また、主題情報を含むウェブマップコンテンツの多くのレイヤーがラスタータイルによって提供されているという現状を考慮し、このスイートはラスターレイヤーをカバレッジとして扱った空間情報処理を行う機能の実装も進められています。現在のところ、カバレッジとポイントとの間での演算が可能です。また、そのために便利なカラーピッカー等の付加的な機能の実装も進められています。

===オーサリングシステム===
Rev.14で拡張

SVGMapLevel0.1 Revision 14以降では、SVGMapコンテンツを編集するツール機能が実装された拡張フレームワークが提供されます。[[#svgMapAuthoringTool.で呼び出せるAPI|フレームワークが提供するAPI]]を使って、オーサリング機能を持ったレイヤーを作ることが可能です。コンテンツは、SVG DOMとして構築されます。なお編集したオブジェクトを保存したり登録するためには別のサービスやアプリケーションの開発が必要です。

===3D可視化システム===
Rev.15で拡張

[https://cesiumjs.org/ Cesium.js]を用いて、SVGMap.jsが表示できるすべてのコンテンツを3D可視化するシステムです。詳細解説はTBD ([[#svgMapCesiumWrapper.で呼び出せるAPI|フレームワークが提供するAPI]])

===プログレッシブウェブアプリケーション===
Rev.16で拡張

[https://developer.mozilla.org/docs/Web/Progressive_web_apps Progressive Web Apps]をサポートしたブラウザにおいて、SVGMap.jsをオフラインでも利用可能にする拡張機能です。詳細解説はTBD ([[#svgMapPWA.で呼び出せるAPI|フレームワークが提供するAPI]])

===SVGMapコンテンツのバックエンドソフトウェア (参考)===
本解説書は主にコンテンツ形式とユーザーエージェント側のソフトウェアについて解説していますが、サーバ・バックエンド側についてもここで少し言及します。

shapefileやcsvなどから、静的なSVGMapコンテンツを生成するためのソフトウェアが[https://github.com/svgmap/svgMapTools オープンソース]で準備されています。これらのソフトウェアでは、[[#タイリングに関するノート|高度なタイリング手法]]を用いた地図タイルを生成することができます。使用方法などは同リポジトリに用意されているチュートリアルを参照してください。

一方、もちろんSVGMapの仕様に準拠すれば、これらのソフトウェアに頼らず、自由にバックエンドを構築することができます。例えばよく知られた地図タイルサービスを用いたり、古典的な[https://wiki.openstreetmap.org/wiki/Web_feature_service WFS ]や[https://wiki.openstreetmap.org/wiki/WMS WMS]のような動的地図・地理空間情報サービスをベースにして比較的容易にそれらを構築することもできます。[https://github.com/svgmap/svgMapLv0.1/tree/master/appLayers SVGMap.jsのリポジトリのappLayersディレクトリ]にはそのようなシステムを構築する際のフロントエンド側の動的レイヤーのサンプルが掲載されています。

==第二章：SVGMap Revsion 0.1フレームワーク==
SVGMapは究極的には既存のすべてのウェブブラウザがネイティブの機能としてそれを備えることを目標とし、既存のHTML,CSS,SVGなどのウェブブラウザの標準規格との整合性を備え、且つ既存のWeb Mappingの規格との整合性をも備えた仕様として検討と標準化を進めています。しかし今のところまだその標準化は完遂されていないため、その完全な実装がなされたウェブブラウザは存在しません。一方、既存のウェブブザでSVGMapの機能が実行可能となるような拡張をJavascriptによるフレームワークとして構築することが可能です。SVGMap Revision 0.1フレームワークは、このようなJavascriptによるSVGMapの仕様に基づいた初歩的な制限と拡張がされた実装です。その実装はオープンソースとして[https://github.com/svgmap/svgMapLv0.1 こちらのgitubリポジトリ]で公開されています。

そのアーキテクチャの特徴は、ブラウザネイティブのSVGレンダラーを使用せず、HTML,CSS,HTMLCanvas2DAPIを用いてSVGMapが実装されている点です。この特徴は主にこのフレームワークの開発が開始された時期に起因しています。当時のウェブブラウザの多くはSVGが実装されていませんでした。また実装されていたとしても、大規模なベクトルデータのレンダリング、および伸縮スクロール・インタラクティブな操作に対する性能面での処理制御に問題がありました。これらの問題のいくつかは現在のブラウザで解消されているものがあるかもしれません。またこれらの問題の解決とともに、SVGMapフレームワークはLevel番号を上げつつよりネイティブの機能に基づいた実装に移行するかもしれません。<font size="-2">参考までに、[http://svg2.mbsrv.net/devinfo/devkddi/lvl0.5/ 実験的なネイティブのレンダラを用いた実装(2010年)]があります。</font>

SVGのベクトル描画機能は[https://github.com/canvg/canvg canvg]のpathパーサなどを引用することで実装されています。一方、地図としてあまり用いられないと想定された多くの要素やプロパティ、アトリビュートの実装が省略されています。

===追加・拡張された機能：===
====フレームワークの呼び出し====
本フレームワークを用いる場合、SVGMapコンテンツをブラウザに直接読み込ませることはできません。フレームワークを動作させるjavascriptライブラリをロードしたhtmlコンテンツ(WebApps)を準備し、そこでSVGMapコンテンツを読み込み表示させます。利用者には、このhtmlコンテンツのURLを告知します。このhtmlコンテンツを以降'''ルートhtml文書'''と呼ぶことにします。

SVGMapのフレームワークはgithubリポジトリ：https://github.com/svgmap/svgmapjs　で公開されています。

htmlコンテンツの<body>要素直下に以下の要素を配置します。
=====フレームワークを実装したjavascriptライブラリを読み込むscript要素=====
これがSVGMap.jsのコアのフレームワークを構成します。

<nowiki><script type="module">
import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

上のスクリプトで必要なモジュールが読み込まれます。[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]のwindowのメンバには、svgMapオブジェクトを設定しています。

[https://svgmap.org/devinfo/devkddi/tutorials/tutorial5_esm/tutorial5.html 実働サンプル(tutorial5_esm)]

もしくは https://github.com/svgmap/svgmapjs の内容を独自のウェブホストにコピーしそれを用いることもできます。(下の例は[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]のhtmlに対して、svgmapサブディレクトリにjsを置いた場合)
<nowiki><script type="module">
import { svgMap } from './svgmapjs/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

===== GISモジュールを利用する場合 =====
svgMap.jsの地理空間演算機能(GISモジュール)では、jsts.jsを使用しています。そのためGISモジュールを機能させるにはjsts.jsの読み込みが必要です。下記のようになります。もちろん独自のウェブホストにjstsをコピーしてそれを利用することも可能です。

<nowiki><script type="text/javascript" src="https://unpkg.com/jsts@1.6.1/dist/jsts.min.js"></script>
<script type="module">
import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
</script></nowiki>

======本解説書でAPIを説明している、現在利用可能な拡張フレームワーク======
ECMA Script Module対応の内容に現在更新中

* [[#svgMapCesiumWrapper.で呼び出せるAPI|SVGMapLv0.1_CesiumWrapper_r*.js]] (実験的)
** https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/experimental/Cesium3D/SVGMapLv0.1_CesiumWrapper_r3.js
* [[#svgMapPWA.で呼び出せるAPI|SVGMapLv0.1_PWA_r*.js]] (実験的)
** https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/experimental/PWA/SVGMapLv0.1_PWA_r5.js

まだ実験的なsvgMapCesiumWrapperは、[http://www.svgmap.org/devinfo/devkddi/lvl0.1/cesiumSvgMap/top.html svgMap cesium visualizer]ページを参照ください。
SVGMapPWA(ProgressiveWebApp)については、[https://svgmap.org/devinfo/devkddi/lvl0.1/svgMapPWA/ SVGMap PWA Test]ページを参照ください。

=====SVGMapコンテンツを配置するためのdiv要素=====
id属性に"mapcanvas"を設定し、data-src属性(もしくはtitle属性(to be obsoluted))には、地図フレームワークが最初に読み込む、SVGMap.jsが表示する地図コンテンツの起点となるSVGコンテンツ（以降'''コンテナsvgコンテンツ'''と呼びます）のパスを指定したdiv要素を設置します。

コンテナsvgコンテンツはまた、'''[[#レイヤー|ここで記述するレイヤー]]'''を持つことができる特別のコンテンツです。

（要確認：地図のサイズ・配置はこのdiv要素のサイズとなります。無指定の場合は全ウィンドサイズ）
<nowiki><div id="mapcanvas" title="Container.svg"></div></nowiki>

<nowiki><div id="mapcanvas" data-src="Container.svg"></div></nowiki>

======差分データの指定======
data-custom-layers-root属性でContainer.svgに対するレイヤーの差分情報のパスを指定することができます。
もしくは、data-custom-layers-root属性に、レイヤーの差分情報が保管されているディレクトリを記述した場合、URLハッシュで差分ファイルを指定することもできます。
差分データは、[https://github.com/svgmap/svgmapjs/blob/main/SVGMapCustomLayersManager_r3module.html カスタムレイヤーマネージャ]で作成することが可能。（データ形式は後述）
<nowiki><div id="mapcanvas" data-src="Container.svg" data-custom-layers-root="./containerDif/dif0.json"></div></nowiki>

=====地図中心の照準イメージ。=====
参照する画像はあらかじめ用意されたもの以外も利用できます。
<nowiki><img id="centerSight" style="opacity:0.5" src="Xcursor.png" width="15" height="15"/></nowiki>

====任意で設置できる要素：====
=====[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]](後述)を設置するdiv要素=====
<nowiki><div id="layerList" style="left :30px; top: 10px; width:300px;height:90%; position: absolute; "></div></nowiki>
: idが上記の通りである必要があります。
　 styleは任意だが、heightは[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]が展開された状態におけるサイズとなります。格納された状態のサイズは、この要素における文字の縦幅となります。各種オプションについては[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|詳細を参照ください]]
　

=====[[#レイヤー固有のUI|レイヤー固有のUI]](後述)を設置するdiv要素=====
[[#レイヤー固有のUI|レイヤー固有のUI]]を使用するために設置するdiv要素です。

<nowiki><div id="layerSpecificUI" style="right :10px; top: 40px; width:400px;height:400px; position: absolute; background-color: white;opacity:0.8;display:none;"></nowiki>
<nowiki></div></nowiki>
: idが上記の通りである必要があります。styleは任意だが、heightはレイヤリストUIが展開され得る最大のサイズとなります。
　
=====伸縮ボタン=====
<nowiki><img id="zoomupButton" style="left: 5px; top: 5px; position: absolute;" src="zoomup.png" onclick="svgMap.zoomup()" width="20" height="20" /></nowiki>
<nowiki><img id="zoomdownButton" style="left: 5px; top: 25px; position: absolute;" src="zoomdown.png" onclick="svgMap.zoomdown()" width="20" height="20" /></nowiki>
: img要素かつidが上記の値である必要があります。
　伸縮ボタンを一回押すたびに伸縮する比率は、別途svgMap.setZoomRatio(ratio)で設定可能。
　デフォルトの比率はsqrt(3)
　
=====測位ボタン=====
<nowiki><img id="gpsButton" style="left: 5px; top: 45px; position: absolute;" src="gps.png" onclick="svgMap.gps()" width="20" height="20" /></nowiki>
: img要素かつidが上記の値である必要があります。ボタン押下で測位し、測位点を中心にして地図を表示する機能。表示の範囲は測位制度に応じて適当に設置されます。

=====グローバルメッセージ=====
レイヤー固有UIが任意のメッセージを出力可能にするために設置するエリア　[[#レイヤー固有のUI]]のAPI '''putGlobalMessage''' 参照
<nowiki><span id="globalMessage" style="font-size:10px;left:5px;bottom:16px;position:absolute;"></span></nowiki>
: idが上記の値である必要があります。
　styleは任意

=====地図中心の緯度経度値表示=====
<nowiki><font id="centerPos" size="-2" color="brown" style="left: 50px; bottom: 5px; position: absolute;" ></font></nowiki>
: idが上記の値である必要があります。
　styleは任意

=====地図スケールの表示=====
<nowiki><font id="vScale" size="-2" color="black" style="left: 5px; bottom: 28px; position: absolute;">-</font></nowiki>
: idが上記の値である必要があります。
: styleは任意
: 縦50pxに対応したスケール[Km]を表示します
: 近傍に縦50pxのスケールイメージを設置するとわかりやすいでしょう

=====レジューム機能のためのチェックボックス=====
<nowiki><form style="right:10px;top:20px;position:absolute;opacity:0.8" ></nowiki>
<nowiki><input type="checkBox" id="resumeBox" onChange="svgMap.resumeToggle(event)" autocomplete="off"/></nowiki>
<nowiki><label for="resumeBox"/>Keep and Resume view</label></nowiki>
<nowiki></form></nowiki>
: checkboxタイプのform要素であり、idが上記の通りである必要があります。レジューム機能とは、(rev16以前ではcookie、rev17以降ではlocalStorage)を用いて、前回最後に表示された状態（レイヤーの表示非表示状態、表示領域（view port）を再現する機能です。スタイルおよびlabel要素は任意

===== [[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]のためのスタイル=====
<style>
body {
font-family: Meiryo;
}
#layerTable{
background:#ffE0E0;
border: 2px solid #bbb;
}
.layerItem{
background-color: white;
}
.noGroup{
background-color: #fff0f0;
}
#layerList{
background-color: #ffff80;opacity:0.8;
}
</style>
====== [[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.E3.81.AE.E8.A9.B3.E7.B4.B0|レイヤーリストUI]]を用いる場合、例えば上記のようなスタイルの定義が必要です。======
* layerList：レイヤーリストUI全体に対するスタイル
* layerTable：レイヤーリストUIの中のテーブルに対するスタイル。
* layerItem：同テーブルに表示される個々のレイヤー表示に対するスタイル
* noGroup：同レイヤー表示のうち、グループに属さないレイヤーに対するスタイル
　

====レイヤー====
SVGMapは古典的な地図情報システムのようなレイヤーの概念を備えていません。一方その上位概念ともみなせる、任意のドキュメントをツリー状に埋め込む機能を備えています。しかしそれでは古典的なユースケースを平易に表現しているとはいえないため、それをラップする古典的なレイヤーの概念と、それに基づくレイヤーユーザインターフェースのフレームワークを持ちます。

フレームワークが最初に読み込む地図コンテンツの起点となる'''[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]'''の中で、animationもしくはiframeを用いて（準拠規格に依る）埋め込まれるsvgコンテンツが、自動的にレイヤーとみなされます。いうまでもなくレイヤーの上下順はSVGコンテンツのスクリプト中での埋め込みの順番の逆順になります。

また、このコンテナsvgコンテンツが参照し埋め込んでいる、各レイヤーのSVGコンテンツのことを、'''[[#レイヤー|レイヤーsvgコンテンツ]]'''と呼ぶこととします。ここで、各[[#レイヤー|レイヤーsvgコンテンツ]]はさらに別のsvgコンテンツを埋め込むことがあります。これらのコンテンツはよくサブレイヤーSVGコンテンツもしくは単にサブレイヤーと呼ばれることもあります。

なお、Rev12以降のSVGMapLv0.1フレームワークではレイヤーフレームワークは本体と独立した実装となり、拡張や切り離しが可能となりました。以下は、標準で提供されるレイヤーフレームワークのVer2 (SVGMapLv0.1_LayerUI2_r*.js)に関して解説します。

レイヤーUIフレームワークが提供するUIは、先述のレイヤーリストUIを設置するdiv要素によって提供されます。このUIは以下の機能を持ちます。
* 折り畳み可能なレイヤーの一覧を表示する機能
* 各レイヤーの表示非表示を切り替える機能
* グルーピングされたレイヤー(後述)をグループとして表現、折り畳み、一括表示非表示する機能。
* そのレイヤーに紐づけられた[[#レイヤー固有のUI]]を出現させる機能。
* 表示されているレイヤーの個数などの情報を表示する機能

===== コンテナsvgコンテンツの記述内容とレイヤーフレームワークの振る舞い =====
* animation要素：　レイヤーとみなされる
** title属性: レイヤーの名称となる。(必須属性) title属性値は他のレイヤーと重複してはならない(ID(このコンテンツ内でのレイヤーの識別子)として振る舞う)
** xlink:href属性: レイヤーsvgコンテンツへの参照
** visibility属性 : レイヤーの初期の表示状態。UIにより変更できる (hidden or visible)
** opacity属性 : レイヤーの透明度
** x,y,width,height属性の振る舞いは共通(viewportがこの属性の値とintersectしていただロードされる)
** class属性: スペース区切りで規定値(複数)と任意値(一つ)を記述できる
*** 詳細は後述の[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供]]を参照
** data-controller属性: (Optional) [[#レイヤー固有のUI]]　の　[[#詳細]]参照
* globalCoordinateSystem要素：(1個つだけ必須要素)
** (コンテナsvgコンテンツにおける)本要素が、このフレームワークによってUser Agentに表示される地図の図法を規定する。
*** なお、それ以外のSVGコンテンツのglobalCoordinateSystem要素は、コンテナsvgコンテンツの図法への変換のために用いられる
*** より詳細は[[#地理座標系の処理]]を参照
* svg要素: (documentRoot要素)
** viewBox属性: 初期の表示範囲を指定。
*** ここに記述する座標値は、SVGの仕様に準ずるが、　拡張記述形式も使用可能　参照：[[#メルカトル図法のドキュメントルート要素のviewBox属性]]

===== レイヤーsvgコンテンツ =====
レイヤーsvgコンテンツは、[[#レイヤー固有のUI|レイヤー固有のUI]]を紐づけることができます。

====クリッカブルオブジェクト====
グラフィックスオブジェクトをクリック（タブレットの場合は、タップもしくは照準アイコンに合わせたうえでタップ）することでそれに紐づけられたインタラクティブ動作を実行する。インタラクティブ動作はフレームワークが独自に提供する、metadataフレームワークに基づく、メタデータの表示機能を対象とします。

なお、image要素(useによって間接的に設置されたimage要素を含む)は、a要素によるハイパーリンクが加えて実装されています。metadaとa要素の双方が設定されているimage要素では、どちらのインタラクティビティを発動させるかをモーダルダイアログによるユーザへの問い合わせが行われます。

====class属性によるレイヤーのグルーピング・クリッカブル機能の提供====
コンテナsvgコンテンツが参照するレイヤー（[[#レイヤー|レイヤーsvgコンテンツ]]）へのリンクを記述する要素(animationもしくはiframe要素)は、class属性によって、各レイヤーに特性を与えることができます。classはスペース区切りで複数指定することができますが、グループ名は一つしか認識されません。
;グルーピング
: 以下の属性値以外の値を記述すると、グループ名として認識され、同じグループ名を持ったレイヤーたちをグルーピングすることができます。グルーピングの効果はレイヤーＵＩにおけるグループ表現と、下記のbatch,switch特性です。グループはレイヤーリストUI上の表現に反映されます。最初に現れたグループ名がこのUIの下に表示されます。ただし地図画面上の描画の順番はこれとは別、SVGの基本的な描画順([https://www.w3.org/TR/SVG11/render.html#PaintersModel Painter Model])に準じます。
;batch
: グルーピングとともに使用します。そのグループに属するレイヤーを一括で表示非表示するための機能がレイヤーＵＩに付加されます。
;switch
: グルーピングとともに使用します。そのグループに属するレイヤーは、どれか一つしか表示されません。batchとの併存はできません。（無視されます（要確認））
;clickable
: Pathなどのベクトル図形要素はデフォルトではインタラクティビティが提供されません。クラス値にclickableを指定することでこのレイヤー（子供のsvgコンテンツを含む）の図形要素においてのみ、インタラクティビティが提供されます。提供されるインタラクティビティは、マウスによって図形をクリックしたとき、そのグラフィックス要素がクリッカブルな要因を備えているかどうかを検索し、備えている場合それに対応するアクションを起こします。
　なお、image要素(useによって間接的に設置されたimage要素を含む)は、このクラスの設定に依らず、a要素によるハイパーリンク、およびmetadataフレームワークを用いたクリッカブルオブジェクトとして機能します。
;editable
: 当該レイヤの[[#レイヤー固有のUI|レイヤー固有UI]]に[[#svgMapAuthoringTool.で呼び出せるAPI|svgMapAuthoringTool]]の図形編集オブジェクトを設置する場合、それを有効に機能させるためにはこの属性が必要です。(なお再編集機能を有効にするにはclickableも必要)

====data-nocache====
コンテナsvgコンテンツが参照するレイヤー（[[#レイヤー|レイヤーsvgコンテンツ]]）へのリンクを記述する要素(animationもしくはiframe要素)に、data-nocache属性をつけることによって、クライアントのコンテンツキャッシュを無効にすることができます。なお、無効化手段はunix-timeクエリパートをそのレイヤー下のすべてのリソースへのアクセスに付加させることによります。

====metadataフレームワーク====
データ格納効率に優れたメタデータのフレームワークが提供されます。このメタデータは先述のクリッカブルオブジェクトとしてインタラクティビティの実装に用いられます。 svgドキュメントルート要素のproperty属性にメタデータの属性名をカンマ区切りで列挙。同文書の図形要素のproperty属性に同じ順序でメタデータの値を記述します。(なお、xlink:title属性でマウスオーバーで機能する吹き出しを設置できます)

ひとつの文書に対して一つのスキーマ（メタデータの属性名とその順番）しか与えられないという制約を持ちます。（その代わり格納効率が高い）クリックやタッチ等によってデフォルトの状態ではブラウザが備えるモーダルダイアログに属性名と属性値がそれぞれ列挙された形で表示されます。metadata表示機能の拡張/カスタマイズについては、ウェブアプリケーションの開発の章で別途解説する'''setShowPoiProperty()'''関数を参照してください。

データ自体にカンマが含まれる場合はエスケープが必要です。

=====例：=====
<svg '''property="id,type,latitude,longitude,title,address,spec"''' ... >
...
<use transform="ref(svg,14118.37511,-4524.39994)" x="0" y="0" xlink:href="#syl8"
'''content="RIS/RJER,地方管理,45.2439994,141.1837511,利尻空港,北海道利尻郡利尻富
士町,1800×45(07/25)"''' xlink:title="利尻空港"/>
...
</svg>

====レイヤーリストUIの詳細====
[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.83.AA.E3.82.B9.E3.83.88UI.28.E5.BE.8C.E8.BF.B0.29.E3.82.92.E8.A8.AD.E7.BD.AE.E3.81.99.E3.82.8Bdiv.E8.A6.81.E7.B4.A0|レイヤーリストUIが設置されるdiv要素]]には、以下のプロパティを設定することで、UIの動作を調整するパラメータを与えることができます
* data-customizer [https://github.com/svgmap/svgmapjs/blob/main/SVGMapCustomLayersManager_r3module.html カスタムレイヤーマネージャ]の起動ボタンを設置し、プロパティ値で同ウェブアプリのパスを指定します。
* data-layerstylecontroller 各レイヤーの表示スタイルを調整するUIを設置します(値不要)
* data-hiddenfilter 表示されていないレイヤーをレイヤーリストUI上でも非表示にする機能を稼働させます(値不要)
* data-opened svgMapウェブアプリが起動した直後にレイヤーリストが開かれた状態にします
* data-fixed レイヤーリストが開かれた状態且つ閉じるボタンを表示させません(data-openedと排他)

===動作の制限・差異===
====再描画の制限====
* ブラウザネイティブのSVG描画機能に対して注意すべき点として、このSVGDOMの描画は、基本的に伸縮スクロールのタイミングでしか行われない点です。（ネイティブのSVG描画機能は60fpsで再描画する努力を行っている) そのため、再描画タイミングを意識・明示([[#refreshScreen|refreshScreen]]関数を使用)したアプリケーションの構築が必要になるケースがあります。
*関連情報
**[[内部機構解説#Zoom.2FPan_Controller:]]
**[[解説書#refreshScreen|refreshScreen]]
**[[解説書#setPreRenderController|setPreRenderController]]
**[[解説書#.E6.8B.A1.E5.BC.B5API|preRenderFunction ]]
**[[解説書#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|動的な地図レイヤー]]
**[[解説書#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|レイヤー固有のUI]]
**[[解説書#.E6.8B.A1.E5.BC.B5.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88|拡張イベント]]

===実装されている機能===
多くの機能が実装されていないため、実装されている機能、および拡張された機能をここでは列挙することとします。
====要素====
*path
*globalCoordinateSystem
*circle
*text
*defs
*animation
** 別のsvgコンテンツを取得して埋め込みます。
** コンテナsvgコンテンツで使用した場合は埋め込んだコンテンツは「レイヤー」と見做されます。
** それ以外で使用した場合はタイルやサブレイヤーとして使用できます。
** x,y,width,height属性は、SVGの仕様に基づき埋め込むコンテンツのtransformに影響を与えるとともに、下記の通り動的なコンテンツの読み込み機構が制御されます。
*** この属性で示された領域がtransform後のviewportと交差・包含した場合、その埋め込みコンテンツは動的に取得され表示されます。lazy loadの機構に相当し、タイリングメカニズムを構成します。
*** ただし、visible-min-zoom およびvisible-max-zoom属性で示された拡大率による表示条件を満たしていない場合は取得されません。level of detailの機構に相当します。（x.y,width,height属性と組み合わせることで、タイルピラミッド（ラスター、ベクターを含む）機構を実現します。詳しくは[http://kikakurui.com/x7/X7197-2012-01.html JISX.7197]、[https://www.w3.org/Submission/2011/04/ Tiling and Layering Moduleサブミッション]、もしくは[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html こちらの論文]を参照
** commonQuery属性：[[#レイヤーsvgコンテンツ]]のanimation要素でこの属性を設置すると、そのレイヤーのコンテンツを取得するすべてのGETリクエストのクエリパートにこの属性で設定した値が共通付加されます。(もしKey=Valueの形のクエリを追加したい場合は文字列として"Key="の部分も含めてこの属性値に設定します。)
*iframe
** animationと同等
*image
** 別のビットイメージコンテンツを取得して埋め込みます。
** animation属性のx,y,width,height属性と同様の追加のlazy loadの振る舞いを持ちます。
** visible-min-zoom およびvisible-max-zoom属性の振る舞いも同等です。
** xlink:href属性はspatial fragment をサポートし、(xywhによっ参照されるimageの部分を埋め込む機能をサポートします。)。もしもアスペクト比が異なった場合（ＴＢＤ）
** style:filterプロパティによる画像処理をサポートします。
** data-mercator-tile="true"　属性が設定されている場合、そのビットイメージはメルカトル図法で描画されていることを示します。
** htmlのimg要素のcrossoriginに対応する属性を持つことができます（この場合ビットイメージの埋め込みに際しoriginヘッダが送信）
*view

====属性====
*<code>ref(svg,x,y)</code> ：SVG1.2Tの[https://www.w3.org/TR/SVGTiny12/single-page.html#coords-transform-ref TransformRef]属性により、non-scaling objectが設置できます。Pointフィーチャの可視化に効果的です。　

'''TBD'''
*fill
*stroke
*arrow
*dasharray
*viewvox
*opacity
*style
**image-rendering : pixelated / image要素
**fill
**stroke
**opacity
*meta
**http-equiv="refresh" : [[#レイヤー|レイヤーsvgコンテンツ]]のみ。contentに秒数を設定することで、そのレイヤーを指定秒数ごとに(再読み込み)更新する。script要素はonloadが再実行される。　注：ブラウザのキャッシュが効く可能性を考慮して実装する必要がある。

==第三章：ウェブアプリケーションの開発==
本章はSVGMap Revsion 0.1フレームワークを用いたウェブアプリケーションの開発について解説します。
本フレームワークによる開発部分は以下に分類されます。
*[[#フレームワークの呼び出し|ルートhtml文書]]によるウェブアプリケーション(SVGMapフレームワーク)
* 動的な地図レイヤー(Layers as WebApps) : SVGコンテンツに以下のいずれかの情報を設定する
** [[#レイヤー|レイヤーsvgコンテンツ]]のドキュメントルート要素のdata-controller属性　[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|レイヤー固有のUI]]
** svgドキュメントに設置されたscript要素 [[#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|script要素による動的な地図レイヤー]]

===SVGMapフレームワーク===
[[#フレームワークの呼び出し|ルートhtml文書]]によるウェブアプリケーションはSVGMapLv0.1フレームワークを用いたウェブアプリケーションの基本であり、そのhtml文書と底傘参照されたjavascriptライブラリを読み込んだwindowが持つ''''svgMap''''という名前のインスタンスを用いてフレームワークのための拡張機能を利用することができます。

====SVGMapが持つ基幹オブジェクト====
SVGMapLv0.1フレームワークのインスタンス''''svgMap''''が持つ基幹のオブジェクトを解説します。これらの基幹オブジェクトはそれぞれゲッター(getSvgImages, getSvgImagesProps)によって取得できます。
=====svgImages[]=====
[[#getSvgImages|getSvgImages()]]により取得できる。svgImages[hashID]は、現在ローディングされているSVGドキュメント(“XML” DOMツリー(SVG DOMツリーというよりむしろ))が蓄積されているハッシュテーブル
*ハッシュID：フレームワークが任意に付番した文書ID。ただし、最初にロードされるルートのドキュメントのハッシュキーは、”root”
*なお、[[#レイヤー固有のUI]]のwebAppでは、そのレイヤーに該当するSVGドキュメントが[[#svgImage|svgImage]]で取得できる。

=====svgImagesProps[]=====
[[#getSvgImagesProps|getSvgImagesProps()]]によって取得できる。
同、個々のSVGドキュメントが持つ、各種プロパティが蓄積されているハッシュテーブル。
注記がない限り全てReadonly
*ハッシュID： svgImages同様
*なお、[[#レイヤー固有のUI]]のwebAppでは、そのレイヤーに該当するSVGドキュメントが持つ、各種プロパティが[[#svgImageProps|svgImageProps]]で取得できる。
======プロパティリスト======
*.Path コンテンツのパス（webAppsのdocument(html) rootに対する相対パス。Originが違う場合は絶対パス(クエリパートやフラグメント(ハッシュ)も含む)
*.CRS 地理座標からSVG座標に変換するための変換パラメータ
*.script SVG文書がscript要素を持つとき、そのscriptへのインターフェースが登録される。同script要素で生成されるオブジェクトに暗黙に登録されるメンバー変数については、[[#.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC|script要素による動的な地図レイヤー]]の章を参照
*.editable 編集可能レイヤーを示す　[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供|レイヤーのclass = editableに対応]]
*.editing 編集可能レイヤーを編集中
*.isClickable クリッカブルなレイヤーを示す
** true:設定　[[#class属性によるレイヤーのグルーピング・クリッカブル機能の提供|レイヤーのclass = clickableに対応]]
** 以下をメンバーに持つオブジェクト:ハイライト時のスタイルを設定可能(rev18以降)
*** .hilightFillStyle : ポリゴンオブジェクトのハイライト時スタイル（以下のメンバーが無い場合はハイライトしない）
**** .color : 塗りの色 (CSS の color値として解釈される文字列)
**** .lineWidth : 線幅
*** .hilightStrokeStyle : 線オブジェクトのハイライト時スタイル（以下のメンバーが無い場合はハイライトしない）
**** .color : 線の色 (CSS の color値として解釈される文字列)
**** .widthIncrement : 線幅の増加値
*.parentDocId このSVG文書を埋め込んでいる、親のSVG文書のハッシュID
*.childImages[hashID] このSVG文書が読み込んでいる、子のSVG文書(複数)
*.refresh
**.loadScript
**.timeout
**.start
*.controller レイヤー固有のUIへの(web appsのdoc rootに対する)相対パス
*.isSVG2 その文書がSVG2タイプの文書であるかどうか(CRSとembedの仕方がちがう）
*.rootLayer そのSVG文書が属する「レイヤー」を示す文書
*.scale そのSVG文書の現在のスケール。スケールはそのSVG文書の座標系と画面の座標系との間の値（地理座標系ではない）。拡大するとスケール値は大きくなる
*.preRenderControllerFunction そのSVG文書の再描画(画面更新)シーケンスの直前に実行される関数
*.hash そのレイヤーのURLのフラグメント部（この値は、レイヤ固有WebAppで変更が有効）

====利用可能API====
【TBD】 APIのリストは下記の通りです。
=====SVGMap.で呼び出せるAPI=====
======Geo2SVG======
*Geo2SVG( lat , lng , crs ) : 指定された緯度(lat)・経度(lng)・CRSより、SVG座標を計算する
======POIviewSelection======
*POIviewSelection( poi ) : 指定されたPOIの属性・リンクの表示選択画面を表示する。また、選択したイベントに従い、属性の表示または、リンク先のページを表示する。
======SVG2Geo ======
*SVG2Geo ( svgX , svgY , crs , inv ) : 指定されたSVG座標(svgX , svgY)をCRSにより、GEO座標に変換する。または、invにより逆変換する
======addEvent======
*addEvent(elm,listener,fn) : 指定された要素(elm)にイベント属性(listener)時の呼び出す関数(fn)を設定する (addEventListenerが実装されていなかったブラウザサポートの名残です)
======callFunction======
*callFunction( fname ,p1,p2,p3,p4,p5) : 指定した関数(fname)を引数(p1,p2,p3,p4,p5)を渡してフレームワーク内の任意の関数を実行する。(フレームワークの内部関数も呼び出すことができる)
======captureGISgeometries======
*captureGISgeometries( cbFunc , prop1 , prop2 , prop3 , prop4 , prop5 , prop6 , prop7 ): 現在画面上に表示中の地図コンテンツに対応した、GeoJsonのGeometryデータ構造に準拠のGISgeomerry情報をがレイヤ単位でまとまった連想配列の形で取り出す。非同期処理で、cbFuncの最初の引数に返却される。
** 連想配列のハッシュ値：レイヤID
** geomeryには、src(そのジオメトリのもととなっているSVGの図形要素), href(ビットイメージの場合のリンク)が付加される
** geoJsonのgeometryに相当する情報が含まれる（座標は[経度,緯度]）
** display="none"の図形要素は表示されていないとみなされる。また画面外にある図形要素も表示されていないとみなされる。画面に部分的に表示されている要素は表示されているものとみなされるとともにクリッピングも行われない。
** [[#captureGISgeometriesOption|captureGISgeometriesOption]](true)を設定してから実行すると、ビットイメージもジオメトリとして取得する。（ただし実データは含まれないので必要に応じて[[#getImagePixelData|getImagePixelData]]で取得する）
*** type : Coverage
*** src : 画像情報のURL
*** coordinates : transformのb,c==0の場合、当該画像の南西、北東端が設定される
*** transform : b,c!=0の場合の、画像の座標(左上隅を0,0、右下隅が画像のw,h)から地理座標([経度,緯度])への一次座標変換情報(a,b,c,d,e,f)が設定される

======captureGISgeometriesOption======
*captureGISgeometriesOption(BitImageGeometriesCaptureFlg, TreatRectAsPolygonFlg, SkipVectorRenderingFlg, captureAlsoAsBitImage): captureGISgeometriesでキャプチャするデータの取得条件を設定する。
** BitImageGeometriesCaptureFlg: ビットイメージタイルをカバレッジとして取得するか(Default:false)。captureGISgeometriesを呼び出す前に使用する。
*** 2019.5.17アップデートで、transform matrix(非対角要素あり)を持つビットイメージタイルについても必要な情報を得られるようになった。
** TreatRectAsPolygonFlg: rect要素をポリゴンとして扱う(デフォルトは円もrectもPointとして扱われる)
** SkipVectorRenderingFlg: ベクトル図形の描画をスキップする
** captureAlsoAsBitImage: polygon/polylineの図形を描画したビットイメージをレイヤー単位でカバレッジデータとして取得
*captureGISgeometriesOption(captureGISgeometriesOptionObject) : オブジェクトでも設定できる(rev18以降)（以下そのメンバー変数：全て値はboolean）
** .BitImageGeometriesCaptureFlag, .TreatRectAsPolygonFlag, .SkipVectorRendering, .captureAlsoAsBitImage　上と同様

======checkSmartphone======
*checkSmartphone() : タッチに対応したスマホブラウザなのかどうかを判別
======childDocOp======
*childDocOp(func , docHash , param1, param2 , param3 , param4 , param5) : 指定した文書をルートにして、DOM操作をその子文書に対して実行する。なおこれはlinkedDocOpの直系の子供のみ適用版(自身も適用しない)
======dynamicLoad======
*dynamicLoad( docId , parentElem ) : 指定した文書ID(docId)以下の表示に必要な文書を読み込み、指定したdiv要素(parentElem)に表示する
======escape======
*escape(str) : 以下の文字をHTMLエスケープする(&:&amp,":&quot;,':&#039;,<:&lt;,>:&gt;)
======geo2Screen======
*geo2Screen( lat ,lng ) : 地理座標を指定すると、その画面上のキャンバスの座標(px)を返す
======getBBox======
*getBBox( x , y , width , height ) : 指定された値でviewBoxを作成する

======getBasicPermanentLink======
* getBasicPermanentLink(copyLinkTextToClipboard) : 現在の表示状態(レイヤーの表示非表示および表示領域)を反映した基本的なパーマリンクを生成する
** URLオブジェクトが返却される
** copyLinkTextToClipboardがtrue場合、クリップボードにもURLがコピーされる。
** 生成されるURLは、[[#起動URLによるオプション指定]]の仕様に基づく
** 参考：[[#サブレイヤーパーマリンク]]

======getCentralGeoCoorinates======
*getCentralGeoCoorinates() : グローバル変数 rootViewBox,rootCrsから画面中心地理座標を得る
======getConversionMatrixViaGCS======
*getConversionMatrixViaGCS( fromCrs , toCrs ) : 元座標変換行列(fromCrs)から先座標変換行列(toCrs)への変換行列を作成する

======getCORSURL======
* getCORSURL(originalURL, alsoCrossoriginParam) : クロスオリジンアクセス用URLを生成する。([[#setProxyURLFactory|setProxyURLFactory]]の第4,5引数が設定されている場合)
** alsoCrossoriginParam クロスオリジンアクセスに際してoriginヘッダが必要かを取得する(この引数がある場合は.url, .crossorigin メンバを持つオブヘクトが返却される)
** レイヤー固有UIのウェブアプリなどで独自にクロスオリジンアクセスを行ってデータを取得するような場合にプロキシ経由のURLを生成するのに利用できます。
** 参考：[[#.E3.83.97.E3.83.AD.E3.82.AD.E3.82.B7.E3.81.AE.E8.A8.AD.E5.AE.9A|クロスオリジンアクセスのためのプロキシ設定]]

======getDevicePixelRatio======
*getDevicePixelRatio( docId ) : setDevicePixelRatioで設定した値を取得できる。 docIdが指定されなかった場合は全ての値が得られる

======getElementByImageId======
*getElementByImageId( XMLNode , searchId ) : 指定されたSVG文書群ノード(XMLNode)以下の属性iidが指定されたID(searchId)と等しいノードを返す

======getLoadErrorStatistics======
*getLoadErrorStatistics() : 伸縮スクロール、refreshScreenごとの、リソースの読み込み状況を取得する。
**メンバー変数: timeoutBitImagesCount,timeoutSvgDocCount,otherBitImagesCount,otherSvgDocCount

======getGeoViewBox======
*getGeoViewBox() : コンテナsvgのviewBoxをgeo変換したgeoのviewBoxを取得
======getHashByDocPath ======
*getHashByDocPath ( docPath ) : ターゲットのレイヤーのハッシュをPath名(docPath)から探し出す
======getHyperLink======
*getHyperLink( svgNode ) : 指定されたsvg文書(svgNode)から、親文書をたどり最初に取得できたハイパーリンクを取得
======getInverseMatrix======
*getInverseMatrix(matrix) : 逆行列を求める(matrix.a..f)
======getLayer======
*getLayer(layerID_Numb_Title) : [[#getLayerId|layerID]],title,番号,href(URI)のいずれかで、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]SVGDOMにおけるレイヤーの(svg:animation or svg:iframe)要素を取得する。getLayersと似ているが、getLayersのほうは任意のsvg文書(オプションなしではroot container)に対して、内包されるレイヤーのリストを返却。こちらは[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]に対して検索キーに基づいてレイヤーを返却する

======getLayerId======
*getLayerId( layerKey ) : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]における"レイヤ"概念のレイヤidを検索する。検索に用いることができるのは、getLayerと同じtitle,url,もしくはルートレイヤの要素
* layerIDはレイヤー名とは異なる、フレームワークによって任意に附番された、そのSVGMapドキュメントを識別するための文字列。このlayerIDを基に動作するAPIが多くあります。
* [[#レイヤー固有のUI]]　の　[[#layerID]] も参照

======getLayers======
*getLayers( id ) : オプションなしの場合、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーに該当する要素をリストアップし、返却する。オプションアリの場合、そのidを持つ要素を返却
======getLinearTransformMatrix======
*getLinearTransformMatrix(x1i,y1i,x2i,y2i,x3i,y3i,x1o,y1o,x2o,y2o,x3o,y3o) : ３つの基準点の変換前後の座標を与えると、それに適合する1次変換行列が得られる。(*i:変換前の座標, *o:変換後の座標)
======getMapCanvas======
*getMapCanvas() : 地図キャンバスとなる、おおもとのdiv要素の取得
======getMapCanvasSize======
*getMapCanvasSize() : 地図キャンバスのサイズ(画面サイズ)を取得
======getMouseXY======
*getMouseXY( evt ) : 指定されたイベント時のマウスの画面上の座標(px)を返す
======getNonScalingOffset======
*getNonScalingOffset(svgPoiNode) : 拡大縮小しても伸縮しない図形要素のオフセット値を取得する
======getObject======
*getObject( oname ) : 指定されたオブジェクト(oname)を取得
======getPoiPos======
*getPoiPos( svgPoiNode ) : =getNonScalingOffset
======getRoot2Geo======
*getRoot2Geo() : コンテナsvgのCRSの逆変換CRS( rootのsvg - > geo )を取得
======getRootCrs======
*getRootCrs() : コンテナsvgのCRS ( geo->rootのsvg )を取得
======getRootLayersProps======
*getRootLayersProps() : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の(animetion||iframeで構成される)レイヤー情報を取得する。Arrayが返却、並び順はsvgの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]と同じ（最初のレイヤーが一番下。selectメニュー創るときはひっくり返して使うこと）レイヤー情報：名称、表示非常時状態、レイヤーグループ、グループのフィーチャ(バッチ||スイッチ||ふつう)、編集可、編集中、対応SVGドキュメント、個別ユーザインターフェース、個別凡例
======getRootViewBox======
*getRootViewBox() : aspectを加味し実際に開いているコンテナsvgのviewBoxを取得
======getSvgImages======
*getSvgImages() : svg文書群(XML)の連想配列を取得(ハッシュキーは[[#getLayerId|layerID]]("root"以外は"i"+連番))
* (参考:[[#svgImages.5B.5D|svgImages]])

======getSvgImagesProps======
*getSvgImagesProps() : svg文書群のプロパティ( .Path,.CRS,.script,.editable,.editing,.isClickable,.parentDocId,.childImages,.controller)の連想配列を取得(ハッシュキーは[[#getLayerId|layerID]]("root"以外は"i"+連番))
* (参考:[[#svgImagesProps.5B.5D|svgImagesProps]])

======getSvgTarget======
*getSvgTarget( htmlImg ) : html文書中のimg要素(POI)を入力すると、対応するSVG文書の文書番号とその要素(use)が出力される。対応するuse要素を持つsvg文書自体を取得したい場合は.ownerDocumentする。idからhtml文書のimg要素を取得するには、Document.gelElementById(id)
======getSwLayers ======
*getSwLayers ( cat ) : swLayers[クラス名]に、クラス名ごとのレイヤー(のSVG要素)の全リストを構築する。catがある場合は、catの名称を持つもののリストのみを構築する
======getSymbols======
*getSymbols(svgDoc) : POI編集のsymbol選択を可能にするとともに、defsは、useより前に無いといけないという制約を払った
======getTickerMetadata======
*getTickerMetadata() : 現在Tickerが表示されているグラフィックスオブジェクトのメタデータを取得する
======getTransformedBox ======
*getTransformedBox ( inBox , matrix ) : 指定されたviewBox(inBox)を変換行列にてサイズ変更と移動のみでの座標変換する。b=0、c=0の場合のみ利用可能。たとえば、matrixには、svgImagePropsのCRSを設定することで、そのSVGMapコンテンツのSVG座標系でのviewPortが計算できる。このときmatrixは線形変換の係数が含まれたオブジェクトでも良いし、[[#.E5.A4.9A.E6.A7.98.E3.81.AA.E5.9B.B3.E6.B3.95.E3.81.AE.E5.AE.9A.E7.BE.A9.E3.81.A8.E5.88.A9.E7.94.A8|非線形変換のための関数が含まれたオブジェクト]]でも良い。　svgMap.getTransformedBox(svgMap.getGeoViewBox(),svgImageProps.CRS)

======getUaProp======
*getUaProp() : ブラウザの種類(isIE：IEかどうか、isSP：スマートフォンかどうか)を取得する
======getVerticalScreenScale======
*getVerticalScreenScale(screenLength) : 垂直(緯度)方向のscreenLengthに対する長さを取得する(input: px, return : Km)
======getViewBox======
*getViewBox( svgDoc ) : 指定したSVG文書のviewBoxを取得
======gps======
*gps() : ブラウザの測位APIによって測位しその点を中心に表示、表示縮尺は測位精度を元に適当に決定
======gpsCallback======
*gpsCallback(position) : GPS測位が成功した後に実行されるコールバック関数で、positionを中心とした場所を表示させる
======handleResult======
*handleResult( docId , docPath , parentElem , httpRes , parentSvgDocId ) : SVG文書を(docPathから)svg文書群とそのプロパティをHTTPXMLRequest(httpRes)から親文書(parentSvgDocId)の子文書(docId)として読込み、指定されたHTML要素(parentElem)に貼り付ける
======ignoreMapAspect======
*ignoreMapAspect() : 地図のアスペクト比を、rootSVGのviewBox( or hashのviewBox)そのものに設定する
======initLoad======
*initLoad() : load時に"一回だけ"呼ばれる初期化関数
======isIntersect======
*isIntersect( rect1, rect2 ): rect1(x,y,width,height)とrect2が交差(包含も含む)しているかどうかを返却
======linkedDocOp======
*linkedDocOp( func , docHash , param1, param2 , param3 , param4 , param5 ) : 再帰実行のルートになる文書のハッシュ(docHash)以下の子・孫・・・文書に対して、同じ処理(func( docHash , param1, param2 , param3 , param4 , param5 ))を再帰実行する関数
======loadSVG======
*loadSVG( path , id , parentElem , parentSvgDocId) : SVG文書を(pathから)svg文書群とそのプロパティを親文書(parentSvgDocId)の子文書(id)として読込み、指定されたHTML要素(parentElem)に貼り付ける
======matMul======
*matMul( m1 , m2 ) : 行列の積 x',y' = m2(m1(x,y)) = m(x,y) となる変換行列を構築
======numberFormat======
*numberFormat( number , digits ) : 指定された数値(number)を小数点以下第digit+1位を四捨五入した値を取得
======override======
*[OBSOLUTEWD] override( mname , mval ) : グローバルオブジェクトの関数プロパティでmnameという変数にmvalの値を代入する

======panMap======
* panMap( x, y, options ) : 地図をスムースにスクロールさせる
** x,y : パン量デフォルトはpx
** option.unit でパン量のコンテキストを変化できる
*** "%"||"percent"||"ratio" : 地図キャンバスに対する相対値で指定 (%,percentはパーセント, ratioは比率)
*** "canvas" : 地図キャンバス上の指定した座標を地図中心に
*** Note: 地理座標でパンする場所を変えたい場合は[[#geo2Screen]]を併用すると良い

======parseEscapedCsvLine======
*parseEscapedCsvLine(csv) : CSV 1行分文字列データ(csv)をエスケープを考慮して配列にパースする。
======refreshScreen======
*refreshScreen() : 画面の再描画を実行する（[[解説書#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90|参考情報]]）

======registLayerUiSetter======
*registLayerUiSetter( layerUIinitFunc, layerUIupdateFunc ) : レイヤー選択UI初期化関数と更新用関数を設定する
======reLoadLayer======
*reLoadLayer(layerID_Numb_Title) : 指定したレイヤー([[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーのみ。小孫レイヤーはNG)をリロードする
======resumeToggle======
*resumeToggle(evt) : 引数のイベント(evt)ターゲットのチェックボックスのチェック状態により、setResumeを実行する
======screen2Geo======
*screen2Geo( screenX , screenY ) : 画面上の座標(px)を指定すると、その地理座標を返す
======setCenterHitTest======
*setCenterHitTest(enable) : 自動中心ヒットテストの設定を変更するデフォルト:true

======setCursorCenterZooming======
*setCursorCenterZooming(enable) : (カーソル|ピンチ)位置中心ズーム機能を設定するデフォルト:false

======setCustomModal======
*setCustomModal( messageHTML , buttonMessages , callback,callbackParam) : モーダル画面を出現させ、指定されたメッセージ(messageHTML(String)もしくはdomオブジェクト(Object))、指定されたボタン(buttonMessages(Array))を表示する。ボタンが押された場合、コールバック関数(callback)を引数(クリックしたボタンのインデックス, callbackParam)を渡し呼び出す。
messageにHTML Stringだけではなく、DOM objectが使える点、ボタンに対するcallbackを設定できる点。ただしモーダルダイアログになる点が[[#showModal]]と異なる。

======setDefaultHilightStyle======
*setDefaultHilightStyle( style ) : ヒットテストなどによるオブジェクトのハイライト時のスタイルを設定する
* style : {stroke:{color,widthIncrement}, fill:{color,lineWidth,lineColor}}
** stroke : 線オブジェクトに対してハイライト時の色(color)と線幅増分(widthIncrement)
** fill : 塗りつぶしオブジェクトに対してハイライト時の色(color)、輪郭線幅(lineWidth)、輪郭線色(lineColor)

======setDevicePixelRatio======
*setDevicePixelRatio( dpr (, layerId) ) : zoom計算時に用いる(たとえば２にするとzoom値が本来の２分の１になる)変数を指定値(dpr)に設定する。ズームに応じた表示制御(visible*zoom属性等のLevel of Detail機能)に影響を与える。オプションの[[#getLayerId|layerId]]を指定すると、指定したlayerに対して別個の値を設定する。dprにnullを与えると初期値(1)にクリア。

======setGeoCenter======
*setGeoCenter( lat , lng , radius) : 中心地理座標を指定して地図を移動 (radiusは緯度方向の度1≒110Km) lat,lng:必須 radius:オプション(今の縮尺のまま移動)
======setGeoViewPort======
*setGeoViewPort( lat, lng, latSpan , lngSpan , norefresh) : 地理(グローバル)座標系で指定したエリアを包含する最小のviewportを設定する
======setLayerVisibility======
*setLayerVisibility([[#getLayerId|layerID]]_Numb_Title, visivility, [options]) : 指定した[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のレイヤーの表示非表示を設定し、layerListUIのアップデートも行う
** layerID : String: [[#getLayerId|layerID]]のの文字列
** visivility : Boolean
** options : Object　以下のメンバー変数でオプションの指定が可能
*** .exec : String : 指定したレイヤーがレイヤー固有UIを持つ場合、その起動を指定できます。与えることができる文字列は[[#.E8.A9.B3.E7.B4.B0|data-controllerの起動オプション]]と同じ。
*** .hash : 指定したレイヤーを表示するときにハッシュ値を設定する

======setMapCanvas : ======
*setMapCanvas : ( mc ) : 地図キャンバスとなる、おおもとのdiv要素を指定した要素(mc)に設定
======setMapCanvasCSS======
*setMapCanvasCSS(mc) : マップキャンバスのCSS(postion、overflow、top、left、width、height)を設定
======setMapCanvasSize======
*setMapCanvasSize( mcs ) : 地図キャンバスのサイズを指定したサイズ(mcs)に設定
======setPreRenderController======
*setPreRenderController( layerID, cntFunc ) : 再描画(画面更新)シーケンスの直前に実行する関数(cntFunc)を設定する。　[[#getLayerId|layerID]]が指定されていると、そのIDをもつSVG文書に対して設定する。指定されていない場合は、全てのSVG文書に対して指定した関数が描画前に実行される。cnfFuncが無い場合は設定を解除する。また、cntFuncには再描画前制御の際に必要になるかもしれないいくつかの変数が第一引数にオブジェクトの形で渡される。(docId,scale,actualViewBox,geoViewBox,viewChanged(zoom|scroll|false) なお、SVGMapLayerUI.jsが有効化されている場合、[[#.E6.8B.A1.E5.BC.B5API|レイヤ固有UIのhtml文書中のscript内にpreRenderFunctionという関数]]がある場合、そのレイヤーを指定したsetPreRenderControllerでの関数設定と同じ振る舞いをする。なお、この処理内容は、動的レイヤー(<script>を持つSVGコンテンツ)のonload関数と同じタイミングで呼び出される関数をレイヤ固有UI等に設置できるものと考えると良い。

======setResume======
*setResume( stat ) : レジュームを実行するかどうかを引数(stat)によって設定し、cookieにレイヤー情報を保存する
======setRootLayersProps======
*setRootLayersProps(layerID_Numb_Title, visible , editing , hashOption , removeLayer , execOption ) : [[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の(animetion||iframeで構成される)レイヤー情報を設定する。[[#getLayerId|layerID]]_Numb_Titleは、レイヤー番号(root svg container内での順番)、[[#getLayerId|layerID]](svg文書のiid = htmlのid = selectのvalue)、タイトル名(不確実-同じ名前があるかもしれない。最初に当たったものを選択)。変化があるとtrueが返却される。
*visible , editingはtrue,false,nullのいずれか。nullの場合、その値を変化させないという意味。もしくは不合理の場合はfalseが返却される。この時classで設定されているレイヤーグループの特性(switch)に基づいた制御がかかる
*hashOption 指定したレイヤーを表示するとき、ハッシュを指定して表示する
*removeLayer 指定したレイヤーを消去する
*execOption レイヤ固有UIを持つレイヤーを表示する場合の起動方法を指定："hiddenOnLayerLoad", "onClick", "appearOnLayerLoad"のいずれか。[[#.E8.A9.B3.E7.B4.B0|詳細はこちらを参照]]

*setLayerVisibilityと異なり、アップデート(refreshScreen())は別途行う必要がある

======setRootViewBox ======
*setRootViewBox ( rvb ) : aspectを加味し実際に開いているコンテナsvgのviewBoxを指定したコンテナsvgのviewBox(rvg)に設定*setShowPoiProperty( func , docId ) : 特定のレイヤー・svg文書(docId)もしくは、全体に対して別のprop.表示関数(func)を指定する。funcが未指定の場合、設定された関数をクリアする。指定した関数は、帰り値がfalseだった場合、デフォルトprop.表示関数を再度呼び出す
======setShowPoiProperty======
*setShowPoiProperty(func , docId ): 特定のレイヤー・svg文書(いずれもdocIDで指定)もしくは、全体に対してPOIをクリックした時の表示関数をセットする
**セットされていないときは内蔵のデフォルト関数が使用される
**docId: セットされていないときはすべてのレイヤの docIdがルートレイヤに対応するものの場合はそのレイヤー下の子孫文書に対しても
**func: コールバック関数
*** funcがセットされいていないときはクリアする
*** funcの第一引数にはクリックされた要素が入る

======setSmoothZoomInterval======
*setSmoothZoomInterval(zoomInterval) : ズームアニメーションの設定(ズームイン／アウト後のタイル読み込み開始タイマー(ms))(Default:20ms)
======setSmoothZoomTransitionTime======
*setSmoothZoomTransitionTime(zoomTransitionTime) : ズームアップ[[#zoomup]]／ダウン[[#zoomdown]]／パン[[#panMap]]時の遷移時間(Default:300ms)

======setSummarizeCanvas======
*setSummarizeCanvas( val ) : 2Dベクトル図形描画用に統合キャンバス(レイヤー単位でのキャンバス統合)の使用有無を設定する。デフォルトは統合する
======setUpdateCenterPos======
*setUpdateCenterPos(func) : 中心座標書き換え関数を指定した関数に設定(デフォルト:id="centerPos"要素の文字列を適当に書き換える)
======setProxyURLFactory======
*setProxyURLFactory( documentURLviaProxyFunction, imageURLviaProxyFunction, imageCrossOriginAnonymous, imageURLviaProxyFunctionForNonlinearTransformation, imageCrossOriginAnonymousForNonlinearTransformation, LaWAfetchviaProxyFunction ): コンテンツの取得をプロキシ経由等にするために、URL(文字列)を書き換える関数を指定する。
** documentURLviaProxyFunction : svgドキュメント用のプロキシ経由のURLを生成する関数をここに設定する。<code>URLviaProxy = documentURLviaProxyFunction(URL)</code>
** imageURLviaProxyFunction : 同ビットイメージ用
** imageCrossOriginAnonymous : ビットイメージのコンテンツ取得に際しcrossorigin = "anonymous"を設定
** imageURLviaProxyFunctionForNonlinearTransformation: ビットイメージへの非線形図法変換専用のプロキシ経由URL生成関数を設定する。
** imageCrossOriginAnonymousForNonlinearTransformation : 同上のコンテンツ取得に際しcrossorigin = "anonymous"を設定
** LaWAfetchviaProxyFunction : [[#レイヤー固有ユーザインターフェース|LaWA]]内のFetch/XHRに対してプロキシ経由URL生成関数を設定する。
** 参考：[[#.E3.83.97.E3.83.AD.E3.82.AD.E3.82.B7.E3.81.AE.E8.A8.AD.E5.AE.9A|クロスオリジンアクセスのためのプロキシ設定]]

======setZoomRatio ======
*setZoomRatio ( ratio ) : zoomUp、zoomDownボタン押下時のズームレシオを指定した値(ratio)に設定する
======showModal======
*showModal( htm , maxW, maxH) : ダイアログ表示フレームワークを呼び出し、指定したhtm文字列を最大maxW,H値の中で表示する。closeボタンはフレームワークで設置される（参考[[#setCustomModal]]）（API名に反して、この関数はモーダルダイアログではない、ダイアログボックスの挙動を取る）
** htm：ダイアログ内に表示するhtmlのソース文字列、もしくはHTML DOM Elementオブジェクト
** maxW, maxH : Optional: ダイアログのサイズ（もしウィンドサイズに収まらない場合は、このサイズを下回ることがある。指定されていない場合はhtmの内容をベースにサイズが変化する


======showPage======
*showPage( hyperLink ) : 指定されたハイパーリンク先のページを表示する。ハッシュだけの場合は viewPort変化をさせる
======showUseProperty======
*showUseProperty( target ) : 指定されたPOI( target )の属性情報を表示する
======transform ======
*transform ( x , y , mat , calcSize , nonScaling) : 指定された座標を変換する。
======updateLayerListUI======
*updateLayerListUI() : レイヤーリストのUIの表示を更新したりレイヤー固有UIを設定したりする
** '''[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]のsvgmap文書をDOMで直接編集したり、setRootLayersPropsで操作した場合、この関数を呼ばないとレイヤ固有UIが正しく設定されないなど多くの処理が破綻するので、必ず呼ぶ必要がある。(近い将来refreshScreenで自動的に反映されるようにする予定)'''

======zoomdown======
*zoomdown( ratio ) : 地図をスムースにズームダウン
** ratioはオプション(デフォルトは1.732)

======zoomup======
*zoomup( ratio ) : 地図をスムースにズームアップ
** ratioはオプション(デフォルトは1.732) (デフォルトは[[#setZoomRatio]]で変更可)

=====svgMapAuthoringTool.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_Authoring_r*.jsを用いた場合に使える
======cancelPointingPoiRegister======
* cancelPointingPoiRegister: initPOIregistToolで設置したUIの地図クリック・タッチでの座標入力イベント(click, touchend)をキャンセルする
======clearTools======
*clearTools: オーサリングツールを除去する。
======initGenericTool======
*initGenericTool(targetDiv,poiDocId,cbFunc,cbFuncParam,options): 点、線、多角形（オプションでそれらのバッファ付き）の総合オーサリングツールを初期化する。
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** options: {withBufferedTools,editingStyle,shapeStyle}　その他オプションをオブジェクトで指定(Optional)
*** withBufferedTools: boolean: trueでバッファ付きツールを追加
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルをブジェクトで指定
*** editingStyle: {opacity,strokeWidth,stroke,fill}：編集中の表示スタイルをブジェクトで指定
*** useXlinkTitle: trueでタイトル編集欄付きツール (Pointツールには影響しない)
*** styleEditor: trueでスタイル編集UI追加

======initPOItools======
*initPOItools(targetDiv,poiDocId,cbFunc,cbFuncParam,getPointOnly,returnSvgElement,options)　: 複数のPOIを編集するツールを初期化する (このツールは一個しか設置できない)
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** getPointOnly : ポイントを取得するのみで、その点にuse要素を設置することはしない(Optional)
** returnSvgElement : trueで編集したSVG要素などがコールバック関数に構造化され返却される(Optional)
** options : {bufferOption,editingStyle,shapeStyle}: その他のオプションをオブジェクトで指定(Optional)
*** bufferOption : trueでバッファ付きツール
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルを指定 (buffer指定時に有効)
*** styleEditor: trueでスタイル編集UI追加

======initPOIregistTool======
*initPOIregistTool(targetDiv,poiDocId,poiId,iconId,title,metaData,cbFunc,cbFuncParam,getPointOnly,returnSvgElement): 一個のPOINTオブジェクトの登録ツール・座標入力ツールを初期化する
** initPOItoolsと異なりこちらのツールは複数個設置できる
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** poiId : 登録するPOIのIDを指定
** iconId : 対象文書内のアイコンのIDを指定
** title : アイコンのタイトルを指定
** metaData : アイコンのメタデータ文字列を指定
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** getPointOnly : ポイントを取得するのみで、その点にuse要素を設置することはしない(Optional)
** returnSvgElement : trueで編集したSVG要素などがコールバック関数に構造化され返却される(Optional)
======initPolygonTools======
*initPolygonTools(targetDiv,poiDocId,cbFunc,cbFuncParam,isPolylineMode,options): POLYGONオブジェクトの"編集"ツール新規追加、削除、変更などが可能　ただし一個しか設置できない
** コンテナsvgコンテンツでclickable及びeditableを設定したレイヤーで再編集可能
** targetDiv: 編集ツールを設置するDIV要素
** poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
** cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
*** 第一引数に成否、第二引数にcbFuncParam が入る。作成したPOIの情報は、SVGDOMから得るか、指定したdiv内に生成されているフォームから得る（少し使いづらいので、今後もう少し便利にするかもしれません）
** cbFuncParam : 同コールバック関数に渡す引数(Optional)
** isPolylineMode : ポリゴンではなくポリラインの編集ツールとする
** options : {bufferOption,editingStyle,shapeStyle}: その他のオプションをオブジェクトで指定(Optional)
*** bufferOption : trueでバッファ付きツール
*** shapeStyle: {opacity,strokeWidth,stroke,fill}：描画スタイルを指定
*** editingStyle: {opacity,strokeWidth,stroke,fill}：編集中の表示スタイルを指定
*** useXlinkTitle: trueでタイトル編集欄付きツール
*** styleEditor: trueでスタイル編集UI追加

======setTargetObject======
*setTargetObject: TBD プログラムから編集対象オブジェクトを指示する（ただし編集中レイヤのオブジェクトに限る）
======isEditingGraphicsElement======
*isEditingGraphicsElement: 編集中のオブジェクトがあるかどうかを確認する

=====svgMapGIStool.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_GIS_r*.jsを用いた場合に使える。なお本機能拡張はJSTS([https://unpkg.com/jsts@1.6.1/dist/jsts.min.js jsts.min.js])の読み込みがさらに必要。

====== 参考：JSTS ======
[https://github.com/bjornharrtell/jsts/ JSTS](JavaScript Topology Suite)は、[https://github.com/locationtech/jts JTS](Java Topology Suite)をjavaScriptに移植した地理空間情報処理ライブラリです。地理空間情報の標準に準拠したAPIを備えています。
* [https://github.com/bjornharrtell/jsts JSTSのプロジェクトページ]
* [http://locationtech.github.io/jts/javadoc/ API](JTS用、JSTSもこれに準ずる)
* [https://www.tsusiatsoftware.net/jts/files/JTS_Library_for_Geometry_2011.pdf JTSの機能概要スライド]

====== buildDifference======
* buildDifference( sourceId1, sourceId2, targetId , strokeColor, strokeWidth, fillColor, progrssCallback, getResultAsGeoJsonCallback,getResultAsGeoJsonCallbackParam)
** JSTSのDifferenceを実行
** 引数はbuildIntersectionの該当引数に対応

======buildIntersection======
*buildIntersection( sourceId1, sourceId2, targetId , strokeColor, strokeWidth, fillColor, progrssCallback, addSourceMetadata, getResultAsGeoJsonCallback, getResultAsGeoJsonCallbackParam, options )
** sourceId1とsourceId2のレイヤーに対してJSTSのIntersectionを実行し、結果をtargetIdレイヤーにコンテンツとして出力する。性能はgetIncludedPointsより低いことが多い intersection処理の振る舞いは[https://bjornharrtell.github.io/jsts/ JSTSを参照]
** sourceId1: sourceId1レイヤーのレイヤーID
** sourceId2: sourceId2レイヤーのレイヤーID
** targetId : targetId レイヤーのレイヤーID
** strokeColor : 線の色 (なお、strokeColor, strokeWidth, fillColor のいずれも指定ない場合は描画しない(getResultAsGeoJsonCallbackがあればそこに結果を変換するのみ))
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** progrssCallback: 変換途中の状況が返されるコールバック関数。
** addSourceMetadata: sourceId1とsourceId2の各図形要素に付随しているメタデータ(contentアトリビュートの値)を演算結果の該当する図形要素に結合して付加する。
** getResultAsGeoJsonCallback: 演算結果をgeoJsonで返却を受けたい場合にコールバック関数を指定する。第一引数に結果が返る
** getResultAsGeoJsonCallbackParam : 上記コールバック関数に送りたい引数(第二引数に入力される)
** options: その他のオプションを指定するオブジェクト(下記、メンバ変数)
*** uniteSource1: trueでsourceId1のジオメトリ群をuniteしてから演算する
*** uniteSource2: trueでsourceId2のジオメトリ群をuniteしてから演算する
*** areaCompare: trueで演算結果と元のジオメトリとの面積比をメタデータに付与
*** resultGroupId: 演算結果を生成するグループを指定
*** opacity: 透明度

======captureGeometries======
*captureGeometries( cbFunc , opt ) : svgMap.captureGISgeometriesの引用
====== coverageImageXY2LatLng======
* coverageImageXY2LatLng(pixWidth , pixHeight, px,py,targetCoverage) : ビットイメージカバレッジのピクセル座標から地理座標を算出する関数
** pixWidth, pixHeight : ビットイメージカバレッジのサイズ
** px,py : ビットイメージカバレッジのピクセル座標
** targetCoverage : getInRangePolygonParts で得られた返り値を設定する
====== drawGeoJson======
* drawGeoJson( geojson , targetSvgDocId, strokeColor, strokeWidth, fillColor, POIiconId, poiTitle, metadata, parentElm, metaDictionary) : geojsonのgeomerty を指定したレイヤーに描画する
** geojson : geojson データのgeopmetry
*** メタデータ : メタデータはgeojsonの本来のメタデータ仕様(type:Featureのオブジェクトにpropertiesを設置する)で設定可能
**** また、連想配列もしくは配列の形で、関数の呼び出し時のmetadataパラメータでデフォルトのメタデータを指定できる。
**** また、geoJSONの任意のデータ階層にmetadataプロパティとしても埋め込める。
**** 加えて、propertiesを同様に任意のデータ階層に設定できる(この場合、上の階層の値は下の階層の値で上書きされる)
*** スタイリング : メタデータ仕様を拡張した、geojsonの[https://github.com/mapbox/simplestyle-spec mapbox拡張仕様]に基づいて、描画スタイルを各Featureに設定可能　上記の拡張properties拡張により、デフォルト描画スタイルを設定することも可能。
**** marker-sizeは未実装。marker-symbolではsvgコンテンツのdefsで登録済みのアイコンのIDを指定する。
**** 参考: properties.で設定できる、スタイル属性名: <code>title, description, marker-size, marker-symbol, marker-color, stroke, stroke-opacity, stroke-width, fill, fill-opacity</code>
** targetSvgDocId : 描画先のレイヤーID
** strokeColor : 線の色
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** POIiconId :　Pointの場合のアイコンID(あらかじめ指定した描画先のレイヤーのコンテンツに該当IDのアイコンが定義されている必要がある)
** poiTitle : POIのタイトル
** metadata : POIのメタデータ（連想配列）
** parentElm : (Optional) 指定した要素の子要素として描画
** metaDictionary: (Optional) メタデータとして要素に埋め込みたい属性名のリストを配列で指定する（これ以外の属性は無視するようになる）

====== drawKml======
* drawKml( kml , targetSvgDocId, strokeColor, strokeWidth, fillColor, POIiconId, poiTitle, metadata, parentElm,styleData) : KMLを指定したレイヤーに描画する
** KML : KML 描画するKMLデータのXML DOM
** targetSvgDocId : 描画先のレイヤーID
** strokeColor : 線の色
** strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
** fillColor : 塗りの色
** POIiconId :　Pointの場合のアイコンID(あらかじめ指定した描画先のレイヤーのコンテンツに該当IDのアイコンが定義されている必要がある)
** poiTitle : POIのタイトル
** metadata : POIのメタデータ文字列
** parentElm : (Optional) 指定した要素の子要素として描画
** styleData : TBD

====== getBufferedPolygon ======
* getBufferedPolygon(geom,bufferLength) : 任意のジオメトリ(geom)に対して、指定のバッファ長[m]のポリゴンジオメトリを生成する。
** Note: [[#captureGISgeometries]]で取得したデータ等も演算対象にすることができる。

====== getColorString ======
* getColorString(r,g,b) : r,g,b値から、webColor文字列を生成する

======getExcludedPoints======
*getExcludedPoints(poiID, polyID, cbFunc, param , progrssCallback , pointOnly ) : 指定したpoiID検索対象レイヤーのうち、指定したpolyIDポリゴンコンテンツレイヤーのポリゴンに内包されないものを抽出する。
** パラメータはinverseを除きgetIncludedPointsと同じ。
====== getImage======
* getImage(sourceData, renderingOptions ) : メッシュデータからビットイメージ(mage/pngのdataURL)を生成
** sourceData : 以下のデータ構造を持つオブジェクト
*** width, height メッシュのピクセル数
*** rasterData[py][px] 以下のデータ構造を持つオブジェクト
**** color 以下のデータ構造を持つオブジェクト
***** r,g,b,a
**** inRange : boolean
** renderingOptions : 以下のデータ構造を持つオブジェクト
*** drawOutOfRange : boolean レンジ内ではなくレンジ外を描画する
*** fillColor : boolean 上記条件のピクセルを指定した色で描画する
*** useCoverageColor 上記条件のピクセルをカバレッジの色で描画する

====== getImagePixelData======
* getImagePixelData(capturedSvgMapGeometry, callBackFunction, param) : ラスタ画像のビットマップデータを取得する。
** capturedSvgMapGeometry : [[#captureGISgeometries|captureGISgeometries]]で取得したビットイメージカバレッジのジオメトリ情報をもとに取得する
** callBackFunction : 取得したビットイメージデータが引数に渡される
*** data : RGBA intArray ( CanvasのContext.getImageData(...).dataで得られる情報と同様のデータ)
*** width
*** height
*** param : getImagePixelDataの第三引数がそのまま渡される

====== getIncludedPoints======
* getIncludedPoints(poiID, polyID, cbFunc, param , progrssCallback , inverse , pointOnly ) : 指定したpoiID検索対象レイヤーのうち、指定したpolyIDポリゴンコンテンツレイヤーのポリゴンに内包されるものを抽出する。
** poiID : 検索対象コンテンツレイヤーのレイヤID
** polyID : ポリゴンコンテンツレイヤーのレイヤID
** cbFunc : 検索完了後の結果を返却するコールバック関数　第一引数にポイントがGeoJasonのGeometry形式で返却され、第二引数にその個数、第三引数に(あれば)下記paramが返却される
** param : cbFuncに渡す任意パラメータ(第三引数に入る)
** progrssCallback : 変換途中の状況が返されるコールバック関数。　変換中　時々呼び出され、変換状態[%]が第一引数に渡される。
** inverse : trueで getExcludedPoints
** pointOnly : trueの場合検索対象コンテンツレイヤーのジオメトリがPoint以外の物は無視、false(もしくは未設定)の場合はPolygonやMultiLineStringのデータの場合中心点をPointと見立てて検索なお、ポリゴンやポリラインのしっかりした処理を期待する場合は下記のbuildIntersectionを使用すべき。
====== getInRangePoints======
* getInRangePoints(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : 検索対象のPointジオメトリが、検索条件としてのラスターデータ(カバレッジ)の特定色域に入っているものを検索する（ラスターGIS機能）
** poiID_or_points : 検索対象のPointジオメトリのあるレイヤIDもしくは、geoJsonのPointジオメトリ自体
** coverIDラスターデータ(カバレッジ)のレイヤーID
** rangeData : 色域 .hue, .satulation, .value, .alphaをそれぞれ指定する
*** hue: 0..360
*** satulation, value, alpha : 0..100
*** .hue, .satulation, .value, .alphaそれぞれのレンジは<nowiki>[[range1Min,Max],[range2Min,Max],...[rangenMin,Max]]</nowiki>の形で指定する。
*** データがない場合のデフォルトは<nowiki>{hue:[[0,360]],satulation: [[10,100]],value:[[10,100]],alpha:[[10,100]]}</nowiki> : アルファが10以上の全ての色
*** .outOfBoundsColor : TBD {r:255,g:0,b:0} の形で色を指定するとその色のピクセルは領域外(存在しないもの)として評価をスキップする
** cbFunc : 検索完了後の結果を返却するコールバック関数　第一引数にポイントがGeoJasonのGeometry形式で返却され、第二引数にその個数、第三引数に(あれば)下記paramが返却される
** param : cbFuncに渡す任意パラメータ(第三引数に入る)
** progrssCallback : 変換途中の状況が返されるコールバック関数。　変換中　時々呼び出され、変換状態[%]が第一引数に渡される。
** preCapturedGeometry : svgMap.captureGISgeometries()であらかじめ取得したgeometryがある場合、それを投入するとそれを用いて処理する
** computingOptions : getInRangeGeometriesOnCoverageを参照
====== getInRangeLineParts======
* getInRangeLineParts(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : ラインストリングジオメトリ用のラスターGIS機能パラメータはgetInRangePoints()と同じ
====== getInRangePolygonParts======
* getInRangePolygonParts(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : ポリゴンジオメトリ用のラスターGIS機能パラメータはgetInRangePoints()と同じ

====== getInRangeGeometriesOnCoverage======
* getInRangeGeometriesOnCoverage(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry, computingOptions ) : getInRange*を包含する関数
** computingOptions.targetVectorTypeで以下を設定することでそれぞれの機能を動かすことができる
*** 0:point,1:polyline(multiLineString),2:polygon
** computingOptions:
*** overlappingCoverage : "or"
*** splitByCoverage : boolean カバレッジが複数のビットイメージ(タイル)で構成されている場合、タイルごとに分割した答えを返す
***
====== haltComputing======
* haltComputing() : getIncludedPoints, getExcludedPoints, buildIntersectionを中断する
====== imageUrlEncoder ======
* imageUrlEncoder : オリジナルのURLから、setImageProxyの設定を加味したURLを生成する関数
====== latLng2coverageImageXY======
* latLng2coverageImageXY(pixWidth , pixHeight, lng,lat,targetCoverage) : 地理座標からビットイメージカバレッジのピクセル座標を算出する関数
** pixWidth, pixHeight : ビットイメージカバレッジのサイズ
** lng,lat : 地理座標
** targetCoverage : getInRangePolygonParts で得られた返り値を設定する
====== latLng2GeoJsonPoint======
* latLng2GeoJsonPoint(lat , lng ) : 緯度経度をGeoJsonのPointジオメトリに変換する
====== renderImages ======
* renderImages(sourceDataArray, parentElment, crs, renderingOptions) : ビットイメージカバレッジ×ポリゴンGIS(getInRangePolygonParts)の結果を直接可視化する
**sourceDataArray : [[#getInRangePolygonParts]]の結果を設定
**parentElment: SVGMapコンテンツ内で描画する親要素を設定
**crs: 描画するSVGMapコンテンツのCRS matrix(a,b,c,d,e,f)を設定
**renderingOptions : [[#getImage]]を参照

====== setImageProxy======
* setImageProxy( url , directURLls , useAnonProxy): getInRangePointsは、canvasを使った処理のため、CORSの制約にかかる場合、proxyを設定して回避できる。
** url : encodeURIComponent()でエンコードしたカバレッジのレイヤーのビットイメージのURLを付加すると、proxyとしてimageを返却してくれるURL文字列を指定
** directURLls : proxyを使わず直接アクセスするコンテンツを判定するための文字列の配列（この文字列のどれかが含まれていたら直接アクセス）
** useAnonProxy : Image.crossOrigin = "anonymous"を指定してアクセスする

====== hsv2rgb ======
* hsv2rgb(h, s, v) : hsv値からrgb値の色情報変換
** h (hue): 0..360
** s (saturation): 0..100
** v (value): 0..100
** 帰り値 : {r,g,b}: いずれも0..255

====== rgb2hsv ======
*rgb2hsv(r, g, b): RGB値からHSV値の色情報変換
** rgb: いずれも0..255
** 帰り値:{h,s,v}
*** h:0..360
*** s,v: いずれも0..100

=====svgMapLayerUI.で呼び出せるAPI=====
以下のAPIは、SVGMapLv0.1_LayerUI2_r*.jsを用いた場合に使える。
======assignLayerSpecificUiElement======
* >r4
* assignLayerSpecificUiElement( targetElement , isInline , autoSizing) : レイヤ固有UIを出力する先のDOM要素を指定する
** この関数は、レイヤーUIの初期化前～[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]読み込み前に呼ばれる必要がある（すなわち、load時のみ有効）
** targetElement : 出力先要素：出力先はsvgMapオブジェクトを持つwindowでなくても良い
** isInline : boolean 指定した要素をインライン要素として扱い、UIが存在しえない場合は消える。レイヤ固有UIを消すボタンも付与される
** autoSizing : boolean 自動リサイズを有効化

======customEvents======
*customEvents() : サポートしているイベントを返却

======launchController======
* >r4
* launchController(layerID, cbf) : レイヤ固有UIを出現させる。ただしそのレイヤーがレイヤー固有UIを持っており、且つ表示状態になっている必要がある。
** [[#getLayerId|layerID]] : レイヤーのID
** cbf (optional) : レイヤー固有UIが生成されたとき、第一引数にレイヤー固有UIのwindowオブジェクトが返却される。

======layerSpecificUIhide======
* layerSpecificUIhide() : レイヤ固有UIを隠す

======setLayerListmessage======
* setLayerListmessage( head , foot ) : head 及び footで指定した文字列を　レイヤリストUIのトップのメッセージに設定する。[head]numberOfVisibleLayers[foot] : デフォルトはhead :"Layer List: ", foot :" layers visible"

=====svgMapPWA.で呼び出せるAPI=====
'''実験的機能段階''' :
; 以下のAPIは、SVGMapLv0.1_PWA_r*.jsを用いた場合に使える。
:- SVGMap.jsをPrpgressiveWebApps(PWA)として動作させ、オフラインでも利用できるウェブアプリを構築することができる。
:- Progressive Web Appsが機能するブラウザで有効。Chrome,Edge(PC,Android), Safari(Apple製品)
:- iOS SafariのPWAネイティブキャッシュの50MB制限を回避するIndexedDBによる実装がなされており、そのクォータが許す限りの(iOSでも数百MB以上の)オフライン地図コンテンツを利用できる
:- 同じく、iOS Safariが持たないsyncの一部を代替する機能(オンラインになったらポストする機能)が利用できる
:- zip圧縮されたオフラインコンテンツパッケージ読み込み機構を使う場合はzip.jsおよびそれが利用するArrayBufferReader.js,deflate.js,inflate.jsの読み込みが必要。
:- <code>serviceWorkerPath</code>グローバル変数で、専用のサービスワーカープログラムsvgMapServiceWorker_r*.jsのパスを指定する必要がある。
::- サービスワーカー～svgMapServiceWorker_r*.jsは、同jsと同じディレクトリにあるbaseResources.jsonを読み込み初期設定を行う
::- baseResources.json：　srcにサービスワーカーネイティブのキャッシュに読み込むべきリソースのリストを記載、mapCacheTargetに、SVGMapのコンテンツキャッシュを稼働させるターゲットとなるパスを記載
::-baseResources.jsonの例
<pre>
{
"src": [
"index.html",
"Container_mercator_org.svg",
"SVGMapLv0.1_PWA_r5.js",
"js/SVGMapLv0.1_r16.js",
"js/SVGMapLv0.1_LayerUI2_r3.js",
"js/SVGMapLv0.1_GIS_r2.js",
"js/SVGMapLv0.1_Authoring_r7.js",
"js/jsts.min.js",
"imgs/gps.png",
"imgs/gps_s.png",
"imgs/Xcursor.png",
"imgs/zoomdown.png",
"imgs/zoomdown_s.png",
"imgs/zoomup.png",
"imgs/zoomup_s.png",
"imgs/mappin.png"
],
"mapCacheTarget":"localMaps/"
}
</pre>

* autoPilotDownloader
*:エリアと縮尺を指定し、オートパイロットで地図画面をスクロールさせることで、オフラインキャッシュに地図を保存する動作を自動的に行う機能のオブジェクト。レイヤー固有UIでの利用などを想定しており、以下のメンバー関数を持つ
** halt()
**:オートパイロット動作を中断させる
** searchAll(initialViewBox, minScale, maxScale)
**:- initialViewBoxで指定したエリアを、minScale、maxScaleの間でオートパイロットをかけキャッシュに保存させる
**:- minScale, maxScaleは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]の座標系におけるscale値(getRootScale()で取れるもの)
** setProgressCallBack(cbf)
**:オートパイロット動作中の進行状況をcbfの第一引数に返却する
* async clearOfflineContents()
*:SVGMapのオフラインコンテンツを全消去する。SVGMapのオフラインコンテンツはserviceWorkerのネイティブキャッシュ機構とは別の独自キャッシュ機構(indexedDBを使用した機構)として構築される
* clearCache()
*:（未実装）serviceWorkerのネイティブキャッシュを全消去する
* cacheDB
*:SVGMapのオフラインコンテンツデータベースのオブジェクト。IndexedDBをpromise化した簡略的APIをメンバ関数として持つ。
** clear()
**:データベースをクリア
** async connect()
**:データベースに接続
** async delete(path)
**:pathで指定したコンテンツを削除
** async get(path)
**:pathで指定したコンテンツ(blob)を取得
** async getAll()
**:全コンテンツを取得
** async getAllKeys()
**:全Key(コンテンツのpath)を取得
** async put({idCol:path,contentBlob:blobdata})
**:コンテンツ(blobdata)をpathをキーにして格納(上書き)
* deleteCachedLayerMeta()
* async disableCache()
*:serviceWorkerのネイティブのキャッシュ機構とSVGMapの独自キャッシュ機構を全て無効化する
* async enableCache()
*:serviceWorkerのネイティブのキャッシュ機構とSVGMapの独自キャッシュ機構を全て有効化する
* getCachedLayerMeta
* async getPostQueue()
*:postMessageWhenConnectedでポストをリクエストし、未完了のリクエストを取得する
* getRootScale()
*:svgMapの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]座標系における現在の表示のscaleを取得
* getScales()
*:読み込み済み文書全てのscaleを連想配列で返す(hashKeyはdocID)
* getVisibleLayers
* getStorageUsage
* async loadOfflineContents(contentUrlList, overwrite, progressCallBack)
*:-contentUrlListで指定したコンテンツをオフラインキャッシュに読み込む(自ドメイン内のコンテンツ限定)
*:-overwriteをtrueにすると上書きする。progressCallBackは指定した関数の第一引数に進捗状況を返却
* async loadZippedOfflineContents(zip_url,progressCallBack)
*:保存してあるディレクトリに対して、そのzipファイルの中のディレクトリ構造で、コンテンツがあるものと見做したURLもつキャッシュを形成する
* async postMessageWhenConnected(URL, postData, postCompleteCBF)
*:-postDataデータをURLにポストする　オンライン時は即座にポスト、オフライン時はいったんindexedDBにポストデータを格納後オンラインになったらポストする。
*:-postDataは、文字列(この場合form-data決め打ちのリクエスト)、もしくは .bodyメンバー変数を持ったオブジェクト
*:-この場合は .bodyはFormDataタイプのインスタンスもしくは任意のデータ、そしてfetchAPIに準じた.headers, .methodをメンバー変数に持たせることができる。(methodでGETを指定すればGETリクエストも可能)またserviceWorkerが管理する
* async setCachedLayerMeta
* setScaleTrim
* async updateCacheIndex()

=====svgMapCustomLayersManager.で呼び出せるAPI=====

'''実験的機能段階''' :

基本的なフレームワークで提供されているレジューム機能を更に強化し、レイヤーの表示非表示状態、初期表示エリア(viewPort)等をユースケースなどに応じて複数登録、切り替えを可能とする機能を提供します。更に[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]をさらに積極的に編集し、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルに無いレイヤーを追加したり、削除したりした、カスタマイズされた[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]を差分情報の形でlocalStorageに保存・利用する機能を提供します。

:- 以下のAPIは、SVGMapLv0.1_CustomLayersManager_r*.jsを用いた場合に使用できます。
:- SVGMapLv0.1_CustomLayersManager_r*.jsは、svgMapオブジェクトもつwindowで使用するとともに、svgMapオブジェクト用のカスタムレイヤーセットを構築するための別ページのwebAppsにおいても使用することができます。
:- 上記svgMapオブジェクト用のカスタムレイヤーセットを構築するためのwebApps用としてSVGMapCustomLayersManagerApp_r*.js、SVGMapCustomLayersManager.htmlが用意されています。

*registCustomLayer(customLayerObject, applyImmediately, customLayerMetadata)
*applyCustomLayers(customLayersObject, baseLayersPropertySet)
*getDetailedLayersPropertySet(rootContainerDoc, ignoreIid)
*getDetailedLayersPropertySetFromPath(rootContainerUrl, ignoreIid)
*getDif( edit, orig )
*originalLayersProperty
*deepCopy(obj)
*deleteAllCustomLayerSettings()
*deleteCustomLayerSetting( key )
*setCustomLayerSettingIndex(key)
*buildCustomLayersSetting(difObj, editedLayersProperty, originalLayersProperty)
*loadCustomLayerSettings()
*storeCustomLayerSettings( settings )
*getElementByAttr( XMLNode , searchId , atName )

*applyCustomLayersSettingsToCurrentMapView(lpEdit, svgMapWin)
*loadCustomGeoViewboxes()
*storeCustomGeoViewboxes(customViewBoxes)
*buildCustomGeoViewboxSettingObject(key, title, geoViewBoxX, geoViewBoxY, geoViewBoxWidth, geoViewBoxHeight)

====起動URLによるオプション指定====
svgMapフレームワークを導入したhtmlコンテンツは、URLの"#"以降であるフラグメント識別子によってフレームワークにいくつかの起動時オプションを提示することができます。
通常、これらのオプションは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]における記述で示されています。フラグメント識別子による指示はそれをオーバーライドします。
一般的な"&"による区切りで複数の複数のパラメータを指定できます。
=====表示範囲の指定=====
global座標系によって表示範囲を指示することができます。　標準のフラグメント記述に対してそれぞれ"global"文字列の追加が必要です。
なおglobal座標系におけるxは一般的に経度、yは一般的に緯度に対応することに留意してください。
*メディアフラグメントによる指定 : xywh=global:<xmin>,<ymin>,<width>,<height>
*svgViewフラグメントによる指定 : svgView(viewbox(global,<xmin>,<ymin>,<width>,<height>))

=====表示・非表示レイヤーの指定=====
* 表示すべきレイヤー: visibleLayer=<layer title>,<layer title>...
* 非表示すべきレイヤー: hiddenLayer=<layer title>,<layer title>...
* 個々のレイヤーに対するフラグメントの提示 : それぞれのレイヤーに対しては、さらにフラグメントを追加することができます。ただし"="は"%3D",&は"%26"でURLエンコードしてください。<layer title>#fragment1=val1&fragment2=val2　⇒<layer title>#fragment1%3Dval1%26fragment2%3Dval2　

===レイヤー固有のUI===
"[https://satakagi.github.io/mapsForWebWS2020-docs/De-centralizedWebMapping.html#:~:text=To%20achieve%20this,everything%20in%20detail. Layers as WebApps]"(ウェブアプリケーションとしてのレイヤー: webApp Layer)を実現する機構　（LaWA、レイヤーwebApp、webAppレイヤー、アプリレイヤー、レイヤーアプリなどと呼ぶこともある）（[[#レイヤー固有ユーザインターフェース|こちらも参照]]）

====概要====
[[#レイヤー|レイヤーsvgコンテンツ]](フレームワークが最初に読み込むコンテナsvgコンテンツの中で埋め込まれるsvgコンテンツ)に対して、[[#動的な地図レイヤー|動的な地図レイヤー]]の一種として、そのレイヤーに固有の処理ロジックや、可視化・描画ロジック　そしてユーザインターフェースも含むことができる　htmlによるウェブアプリを定義できる機能です。

javascriptを使った独自のロジックによる動的な可視化データの生成が実装可能です。

また、この機能はそのレイヤーの設定やインタラクティブ操作のための表示やユーザインターフェースを地図表現とは別に表示したい場合にも用いることができます。従来のアーキテクチャでは、もしもこのようなレイヤーに固有のUIが必要だった場合でも、地図アプリケーション全体の処理や表示を司るグローバルな空間(ルートhtmlコンテンツのwindowオブジェクト直下)に、サイドエフェクトを考慮しながらコードを組み込む必要があり、結果としてコードのスパゲッティ化が懸念されました。SVGMapのレイヤー固有UIは、レイヤーごとにUIとそのロジックをカプセル化可能にし、これを排除することが可能です。(カプセル化はiframeによって行われます。)さらに、レイヤー固有UIによるウェブアプリは自律分散的な配置にも対応し、UIを備えた地図レイヤーにまでハイパーレイヤリングアーキテクチャを拡張します。

なお、[[#動的な地図レイヤー]]は、htmlによるユーザーインターフェースを持つことができませんが、同種のウェブアプリケーションのカプセル化の効果があります。

このＵＩには主に二つの用途が考えられます。
;凡例
: 各レイヤーはその地図表現の意味を示すための固有の凡例を持つことがあります。その凡例を表示するために利用できます。
;ウェブアプリケーションによる動的な地図レイヤー
: 先述のように、ウェブアプリケーションによる動的な地図レイヤーは独自のロジックによってそのレイヤーの地図表現を動的に変化させる機能を備えることができます。この場合、例えばエンドユーザがFORMで入力したフィルター条件ををもとに表現を変更するようなケースも考えられます。
これらケースでは、そのフォームや凡例は、[[#フレームワークの呼び出し|ルートhtml文書]]に設置することは可能ですが、もしも多くのレイヤーを表示するアプリケーションであり、それらのレイヤーがそれぞれ固有のフィルタ条件を持つような場合、[[#フレームワークの呼び出し|ルートhtml文書]]は、それぞれのレイヤーをフィルタリングするためのFORMとそのフィルタリングロジックをすべて埋め込む必要があり、画面のデザイン、およびロジックのコーディングの双方がスパゲッティ化する可能性があります。さらに、もしもこのアプリケーションに後日さらにレイヤーが追加される場合、スパゲッティ化の問題はより深刻になるかもしれません。凡例の表示についても同様の問題が考えられます。本レイヤー固有ＵＩはこのような問題に対するソリューションを提供しています。

この機能は、ベースのフレームワークrev12以上　且つLayerUI2フレームワークを読み込み、[[#レイヤー固有のUI(後述)を設置するdiv要素|id="layerSpecificUI"のdiv要素]]が[[#フレームワークの呼び出し|ルートhtml文書]]に設置されているときに使用できます。

;サンプル
:[[チュートリアル#WebApp_Layer.E7.B7.A8|開発者向けチュートリアル]]でいくつかのサンプルを見ることができます。

====[[#レイヤー|レイヤーsvgコンテンツ]]での指定====
レイヤー固有UIの設置には、[[#レイヤー|レイヤーsvgコンテンツ]](のルート要素(svg要素))に、data-controller属性を与え、そこにそのレイヤー固有のUIのためのhtml文書のリンク(ただしsame origin)を設置します。またサブセットとして、data-controller属性にビットイメージ(.pngもしくは.jpg, .jpeg, .gif拡張子を持つビットイメージ)へのリンクを与えることでレイヤーの凡例情報の提示をすることもできます。

[[#レイヤー固有のUI(後述)を設置するdiv要素|レイヤー固有ＵＩの表示部位]]には、このように指定されたリソース(ビットイメージもしくはhtml)がレイヤーの選択の状況に応じて、切り替わり表示されます。レイヤーがONになっている間、それに紐付けられたレイヤー固有UI(htmkのwindowオブジェクト)が存在し続け、そのレイヤーのsvgDOMの操作やUIの提供が可能です。

なお、標準のフレームワークでは、表示中のレイヤーの中の選択された一つのUIのみが地図のメインのwindowに配置されたiframeで表示されます。表示中ではあっても選択されていないレイヤーのUI(iframe)は非表示状態で動作しています。

'''サンプル'''
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="9000.0 -9000.0 9000.0 9000.0" go:dataArea="9000.0 -9000.0 9000.0 9000.0"
'''data-controller="../Self-GS-POI_controller.html"'''>
.....

====レイヤー固有のUIのためのhtml文書(webApp)の構造・作法====
レイヤー固有のUIとなるhtml文書は、下記の通り、その初期化等を行うライブラリ <code>svgMapLayerLib.js</code> を読み込む必要があります。（現在のところ通常のjavascriptライブラリのみ提供されます）
CDNからライブラリを読む場合は、<code>https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/svgMapLayerLib.js</code>です。

'''サンプル'''
<!doctype html>
<html>
...
<script src="https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/svgMapLayerLib.js"></script>
...
</html>

====LaWAとS-LaWA（サンドボックス化LaWA）のアーキテクチャ====
SVGMapにおけるレイヤー固有UI（LaWA: Localized active Web App）には、セキュリティと用途に応じた2つの動作モードが存在します。2026年のアップデートにより、Web標準のセキュリティモデル（クロスオリジン制約）に完全準拠した'''S-LaWA（サンドボックス化LaWA）'''が導入されました。

'''T-LaWA (Tight-coupled LaWA / 従来の密結合モード)'''
* 親のSVGMapフレームワークと同じオリジン（ドメイン）で動作する、従来型のレイヤーWebAppです。
* iframeのJavaScriptコンテキストに、親フレームワークから直接APIオブジェクトが注入されます。
* 全ての[[#拡張API]]にアクセスでき、複雑なDOM操作や関数渡しが可能ですが、サードパーティ製のレイヤーを読み込む際にはセキュリティ上のリスク（XSS等）を伴います。

'''S-LaWA (Strict/Sandbox LaWA / 分離モード)'''
* 親のSVGMapフレームワークとは異なるオリジンで動作することを前提とした、セキュアなレイヤーWebAppです。
* iframeは完全に隔離（サンドボックス化）され、親フレームワークとの通信は全て非同期メッセージング（postMessage）を介して行われます。
* 悪意のあるスクリプトから親フレームワークを保護できるため、外部のサードパーティ製レイヤーを安全に統合できます。
* セキュリティの代償として、直接的なオブジェクト参照や関数の受け渡しが禁止されるため、[[#拡張API]]の利用に強い制限がかかります（前節の「S-LaWAでの制限」を参照）。

===== 動作モードの指定 (data-lawa-mode) =====
レイヤーがどちらのモードで起動するかは、[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]内でそのレイヤーを参照している '''<code>animation</code> 要素の <code>xlink:href</code> の値（URLのオリジン）'''、もしくは同要素に付与する '''<code>data-lawa-mode</code>''' 属性で制御できます。

<code>data-lawa-mode="auto"</code> (未指定時のデフォルト): レイヤー（コントローラ）のURLが親フレームワークと同一オリジンであれば '''T-LaWA''' として、クロスオリジンであれば自動的に '''S-LaWA''' として起動します。

<code>data-lawa-mode="isolated"</code>: 同一オリジンであっても、強制的に '''S-LaWA''' として完全に隔離して起動します（開発時のテスト等に有用です）。

<code>data-lawa-mode="tight"</code>: 強制的に '''T-LaWA''' として起動を試みます。（※クロスオリジン環境でこれを指定した場合は、適切なCORS設定やプロキシサーバーの利用が必須となります）

====詳細====

レイヤー固有UIは、SVGMapのグローバルなwindowに設置されたiframeの中で動作します。このiframeの性質と利用できるAPIは、前述の動作モード（T-LaWAかS-LaWAか）によって大きく異なります。

どのような環境・モードで起動された場合でも、レイヤー固有UI内でSVGMapの各種リソースへ安全にアクセスするためには、レイヤーのHTML内で提供される初期化ライブラリ（<code>svgMapLayerLib.js</code> 等）を読み込む必要があります。

'''【重要】''' 各種APIへのアクセスが可能になるのは、iframe自体の "load" イベントではなく、SVGMapフレームワークとの接続が完了した後に発行される '''<code>layerWebAppReady</code>''' イベント以降です。
* 初期化処理は以下のように記述することを強く推奨します。
* <code>window.addEventListener("layerWebAppReady", function(){ /* 初期化処理 */ });</code>

[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]が設置されたSVGMapのグローバルなwindowと異なるドメインにレイヤーを設置し、そのレイヤーがレイヤー固有UIを持つこともできます。デフォルト（<code>data-lawa-mode="auto"</code>）では、これは自動的にセキュアなS-LaWAとして起動するため、特別なCORS設定は不要です。ただし前述の通りAPIには制限がかかります。

[[#レイヤー|レイヤーsvgコンテンツ]]のドキュメントルート要素へdata-controller属性を設定する代わりに、コンテナsvgコンテンツにおける[[#レイヤー|レイヤーsvgコンテンツ]]への参照要素にdata-controller属性を設定することもできます。

data-controller属性の代わりに、data-controller-src属性の値に、適切にエスケープすることで直接htmlを記述することもできます。（※この機能は主にT-LaWAでの利用を想定しています）

data-controller属性によって参照されるhtmlコンテンツでは、次節[[#拡張API]]で説明する値や関数が使用できます（※モードによる制限あり）。

data-controller属性のURLには以下のオプションをフラグメント識別子として指定することができます。
* #exec=appearOnLayerLoad||hiddenOnLayerLoad||onClick レイヤー固有UIの起動オプション
** appearOnLayerLoad : レイヤーを表示状態にすると即座にレイヤ固有UIが出現
** hiddenOnLayerLoad : レイヤーを表示状態にすると即座にレイヤ固有UIがhidden状態で起動(そのレイヤ固有UIに含まれるscriptが起動)
** onClick : レイヤー固有UI起動ボタン">"を押したときにレイヤ固有UIが出現(デフォルト)
* #requiredHeight=hhh&requiredWidth=www
** id="layerSpecificUI"のdiv要素のcss値に関わらず、requiredHeight、requiredWidthでiframeの表示を指示

====拡張API====
レイヤー固有UI(iframeのwindowオブジェクトのjavascriptコード)では以下のAPIが拡張されています。
'''【注意】S-LaWA（サンドボックス化LaWA）環境においては、セキュリティ上の理由から親フレームワークのオブジェクトに直接アクセスできません。代わりに <code>svgMapSandboxLayerLib.js</code> が提供する「モック（代替）オブジェクト」を介して非同期に操作が行われます。各項目の「S-LaWAでの仕様」を参照してください。'''

=====イベント=====
*layerWebAppReady : 初期化が完了しLaWAの実行が可能になった (LaWAでは、loadイベントではなくlayerWebAppReadyを使用することを強く推奨します)
*openFrame : そのiframeが、新たに生成された
*closeFrame : 同、消滅した
*hideFrame : 同、隠された
*appearFrame : 同、隠されていたのが再度現れた
*zoomPanMap : [[#.E6.8B.A1.E5.BC.B5.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88|SVGMapフレームワークと同じ]]
*zoomPanMapCompleted : 同上
*screenRefreshed : 同上

'''【S-LaWAでの仕様】''' すべてのイベントがサポートされています。親フレームワークで発生したイベントは、メッセージングを通じてS-LaWA内のwindowオブジェクトに中継・ディスパッチされます。

=====svgImageProps=====
このレイヤー固有UIに紐づいたレイヤーSVGの各種プロパティを参照できる（基本的に全て読み出しのみ） (参考:[[#svgImagesProps.5B.5D]])
*[[解説書#svgImagesProps.5B.5D|プロパティのリストはこちらを参照]]
*svgImageProps.scriptで、動的地図レイヤーのscript要素によって生成されたオブジェクトにもアクセスできます。
*svgMap.getSvgImagesProps(layerID) で得た値と同等。
*.hashは書き込みが有効(参考 [[#サブレイヤーパーマリンク]])

'''【S-LaWAでの仕様】''' 親フレームワークから非同期で同期された静的なコピーデータとして提供されます。<code>.hash</code> プロパティへの書き込みはS-LaWAでもサポートされており、裏側で自動的に親へ同期されます。ただし、<code>.script</code> による親の実行コンテキストへのアクセスはできません。

=====svgImage=====
このレイヤー固有UIに紐づいたレイヤーSVG文書(DOM Documentオブジェクト) (参考：[[#svgImages.5B.5D]])
*このドキュメントを操作することで、そのレイヤーの表示を動的に変化させることが可能です。
*特に、[[解説書#.E5.8B.95.E4.BD.9C.E3.81.AE.E5.88.B6.E9.99.90.E3.83.BB.E5.B7.AE.E7.95.B0|動作の制限に注意して実装してください]]
*svgMap.getSvgImages(layerID) で得た値と同等。

'''【S-LaWAでの仕様】''' S-LaWA環境内に展開された「ローカルXML DOM」が提供されます。このドキュメント（要素の追加・削除・属性変更・テキスト変更など）を操作して <code>svgMap.refreshScreen()</code> を呼び出すと、フレームワークの共通地図キャンバスに送信され更新します。

=====svgMap=====
svgMapフレームワークインスタンス

'''【S-LaWAでの仕様】''' 親のインスタンスの代わりに、S-LaWA用のモッククラス（<code>SandboxSvgMap</code>）が提供されます。以下のメソッドのみが利用可能です。
* <code>refreshScreen()</code>, <code>transform()</code>, <code>getGeoViewBox()</code>, <code>getSvgImageProps()</code>, <code>setShowPoiProperty()</code>, <code>showModal()</code>, <code>getCORSURL()</code>, <code>setCORSproxy()</code>, <code>parseEscapedCsvLine()</code>

=====layerID=====

svgMapフレームワークが管理しているSVG文書ハッシュリスト(svgMap.getSvgImages())における、このレイヤー固有UIに紐づいたレイヤーSVG文書のハッシュキー

[[#getLayerId]]参照

'''【S-LaWAでの仕様】''' 制限なく利用可能です。

=====svgMapGIStool=====
GIStoolsフレームワークを拡張した時、同インスタンス
*[[解説書#svgMapGIStool..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI|svgMapGIStoolが持つAPI]]

'''【S-LaWAでの仕様】''' '''現在のところ利用不可です。'''

=====svgMapAuthoringTool=====
svgMapAuthoringToolフレームワークを拡張した時、同インスタンス
*[[解説書#svgMapAuthoringTool..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI|svgMapAuthoringToolが持つAPI]]

'''【S-LaWAでの仕様】''' '''現在のところ利用不可です。'''

=====controllerSrc=====
レイヤー固有UIのiframeの起動に使われたsrc属性(レイヤー固有UIのパス・URL)が読み出せます。特にレイヤーが異なるドメインから配信されたものの場合、レイヤー固有UIのwindowのlocation属性(及びそれによるURL解決を行うAPI)からは適切な情報が得られません。これ代えてこの値が使用できるケースがあるでしょう。

'''【S-LaWAでの仕様】''' 参照できません。S-LaWAは自身のURLコンテキストで動作するため、自身の <code>location.href</code> などを参照してください。

=====putGlobalMessage(messageText)=====
messageTextを[[#グローバルメッセージ]]エリアに表示する　レイヤーが消滅したら自動でメッセージも消滅します。

'''【S-LaWAでの仕様】''' 現在のところ利用不可です。

=====preRenderFunction=====
この名前の関数を(レイヤー固有UIのwindowに)定義すると、そのレイヤーのSVG文書の再描画(画面更新)シーケンスの直前にこの関数の内容が実行される。詳細は[[解説書#setPreRenderController|setPreRenderControllerを参照]]

'''【S-LaWAでの仕様】''' '''利用可能です。''' S-LaWA内で <code>window.preRenderFunction</code> を定義しておくと、<code>svgMap.refreshScreen()</code> が呼ばれた際や、親からズーム・パンなどのイベントを受信した際に、S-LaWA内でローカルに実行されます。この関数内でローカルDOMを変更することで、描画前の状態更新をエミュレートできます。

=====customHitTester=====
この名前の関数を定義すると、そのレイヤーに固有のヒットテスト（マウスやタッチによって地図上をヒットしたときの振る舞い）機能を追加することができます。ヒットテストは通常のクリッカブルオブジェクト（ポイントやライン・ポリゴンなど）のそれと同等に扱われます。
* customHitTester( position )
** 第一引数に、ヒットされた座標(.screenX,Y:window上の座標、.lat,lng:地理座標、.isMapCenterHitTest:後述)が与えられます。（この値をもとに実際のヒットテスト処理を書く）　この関数の帰り値が'''null'''や'''undefined'''の場合はヒットしなかったこと、'''true'''もしくは文字列もしくはそのレイヤーの任意の図形要素、もしくはそれらの配列の場合はヒットしたことを示します。
*** isMapCenterHitTestが'''true'''の場合、そのヒットテストは伸縮スクロール時自動発生するケースで発生したものです。（もしこのケースでのテストを除外したいなど特別な処理をしたい場合に利用できます）
** ヒットテスト後の振る舞いも通常のクリッカブルオブジェクトと同等で、通常はデフォルトで備えるヒットされたグラフィックスオブジェクトの[[#metadata.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF|メタデータ]]表示パネルが呼び出されます。(帰り値が図形要素の場合）　もしこの振る舞いを変更したい場合は、[[#setShowPoiProperty|setShowPoiProperty]]を用いることが可能です。
** 帰り値がtrue、文字列、およびそれらの配列を返す場合は、[[#setShowPoiProperty|setShowPoiProperty]]を使用してカスタマイズされた処理を行う必要があります。この場合[[#setShowPoiProperty|setShowPoiProperty]]で設定された関数が受け取る引数は、そのSVG文書のドキュメントルート要素であり、その'''"data-hitTestIndex"'''属性に選択されたオブジェクトのインデックス(配列の場合。配列でない場合は常に0)が設定されます。

'''【S-LaWAでの仕様】''' <code>customHitTester</code> 自体は利用できません。（なお<code>svgMap.setShowPoiProperty(func)</code>は利用可能です。）

====サブレイヤーパーマリンク====
(2024/10のdev1ブランチから有効)
*[[#レイヤーsvgコンテンツ]]のURLが任意のフラグメント識別子を持つことができる。
*ただしフラグメント識別子はカンマ","、アンパサンド"&"を含めることはできない。
*[[#レイヤー固有のUI]]が以下を実装する場合、任意のレイヤーの設定をパーマリンク([[#getBasicPermanentLink]])に反映できる。
**[[#レイヤー固有のUI]]は起動時(onload)同フラグメント識別子の情報を解釈し適切な状態に変化させる機能
**[[#レイヤー固有のUI]]は、パーマリンクによる指定に対応した標示状態に表示が切り替わるタイミングで[[#レイヤーsvgコンテンツ]]のURLのフラグメント識別子の内容をそれに対応した値に変更する機能
*[[#レイヤーsvgコンテンツ]]のURLのフラグメント識別子は、[[#svgImageProps]].hashを設定することで変更できる ([[#svgImageProps|⇒仕様参照]])

===動的な地図レイヤー===
svgドキュメントにjavascriptを記述することでも、動的なデータ生成を実装可能としています。
本フレームワークでは、svgドキュメント中に<script>要素を一つだけ記述することができ、その要素の中にjavascriptコードを入れることができます。

DOMを操作し、動的に描画を変化させることが可能です。ただし、[[解説書#.E5.8B.95.E4.BD.9C.E3.81.AE.E5.88.B6.E9.99.90.E3.83.BB.E5.B7.AE.E7.95.B0|動作の制限に注意してください]]

====動的SVGMapコンテンツで利用可能な拡張API====
一般のjavascriptAPIに加えて、動的な地図レイヤーを実装するために以下のAPIが提供されます。（既存のものでも注記があるものも列挙）
*document: このsvgMapドキュメント自身
*READ ONLY変数
**CRS:このドキュメントのCRS : CRS.a....fに、地理座標からこのドキュメントのSVGユーザ座標への変換係数が提供される
**docId:このSVGドキュメントのdocId
**scale：倍率：このドキュメントの座標系と、画面の(px座標系)との間の倍率(この値は等倍が1.0だが、svgMapコンテンツのvisibleMin/MaxZoom値は%(等倍は100)なので注意)
**actualViewBox：このドキュメントの座標系でのviewBox
**geoViewBox：地理座標におけるviewBox
**geoViewport
**viewport
**this.location:相対パス
**(this.verIE)
*refreshScreen(): 描画の更新を明示: refreshScreenを用いていない場合、そのレイヤーのDOMを編集してもそれが即座に表示に反映(更新)するとは限りません。文書のロード、ズーム、スクロールのときが表示のDOMの内容を反映した画面の自動更新のタイミングです。それ以外、多くの場合反映されません（性能確保のための本フレームワークの現在の制限）。DOMO編集をそれ以外のタイミングで表示に反映したい場合、この関数の呼び出しを行うひつようがあります。一方不必要にこの関数を呼び出すとシステム全体の性能が低下するかもしれません。
*transform()
*getCanvasSize()
*linkedDocOp()
*isIntersect()
*drawGeoJson()
*childDocOp()
*onload:この関数を設定すると、ロードされると呼ばれる(ドキュメントロード後、描画前のタイミング。)
** この関数は、DOMトラバース前に同期処理される。
**したがってonloadで実行される処理はその中が非同期でない限り、refreshScreen()しなくてもonload時のDOM編集は直後の描画に反映される。
*onscroll:この関数を設定すると、スクロールされるとき呼ばれる（ほかにズーム以外で画面更新時も）(スクロール後の描画前のタイミング。)
**同上
*onzoom:この関数を設定すると、ズーミングが発生するとき呼ばれる(同上)

====拡張イベント====
*document -> zoomPanMap イベント addEventHandlerすると、ズームパンが起き(viewPortが変化したとき)地図システム全体の描画が完了(含タイムアウト)後に発行される。SVGMap*.jsが地図をウェブアプリ起動後、最初に描画完了した時にもこのイベントが発生する。（レイヤー追加時には発生しない）
**これをイベントリスナに設定した関数は、非同期に実行される。onscroll()と異なり、もしその関数でDOM編集を行った場合は、直後の描画にそれが反映される保証がない。refreshScren()による再描画が必要。
*document -> screenRefreshed イベント addEventHandlerすると、ズームパン以外で地図システム全体の描画が完了(含タイムアウト)後に発行される。主にrefreshScreen()など。このイベントをフックにして、SVGMapコンテンツのDOM操作・再描画（refreshScreen()）を行うと無限ループに陥るので使用方法に注意が必要。
*document -> zoomPanMapCompleted イベント SVGMaplayerUIが有効な時に発行される。　zoomPanMapイベントは伸縮スクロール完了時に発行されるが、その直後にレイヤー固有UIにおいて(XHRやfetchを用いた)非同期なデータ取得とレイヤー書き換えが生じるケースでは、その完了を検知しない。zoomPanMapCompleted イベントはこのような非同期通信の完了後に発行される。

===SVGMapの埋め込み(SVGMapFrame)===
'''実験的機能段階''' :

SVGMapフレームワークはwindow全体に地図コンテンツが占有される形で表示する設計です。ウェブページはwebAppsとしてカプセル化されたレイヤーをsvgMapオブジェクトに差し込む形でアプリケーションが構築されます。すなわち、基本的に[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|グローバル空間]]windowにはsvgMapオブジェクトだけが単独で存在し、その他のアプリケーションをwindow上に実装する場合は、その開発者がsvgMapオブジェクトとのグローバル空間でのスパゲッティ化に注意を払いながら開発していく必要があります。

それに対して、''SVGMapLv0.1_Frame*.js''が提供する機能は、window内の指定した領域にsvgMapによる地図を埋め込むことを可能にします。さらにこの埋め込まれたsvgMapオブジェクトを　外部からより簡単に操作できるようカプセル化されたインターフェースを提供します。

====ライブラリ====
SVGMapを埋め込むウェブページでは''SVGMapLv0.1_Frame*.js''を導入します。
<!doctype html>
<html>
<script type="text/javascript" src="SVGMapLv0.1_Frame_r4.js"></script>
</html>

====svg-map要素====

svg-mapカスタム要素を使用してsvgMapオブジェクトを任意の場所に埋め込むことができます。
<nowiki>
<!doctype html>
<html>
<script type="text/javascript" src="SVGMapLv0.1_Frame_r4.js"></script>
<body>
<table>
<tr>
<td>
説明用地図
</td>
<td>
<svg-map svgMapAppPage="SVGMapper_r16_layerUICustom.html" id="svgMapTag" latitude="37" longitude="135" zoom="4" layerui="#layerUIarea">
</svg-map>
</td>
</tr>
</table>
</body>
</html></nowiki>

=====属性=====
======svgMapAppPage======
必須属性: 起動するSVGMapLv0.1*.jsが組み込まれたhtmlを指定。
svg-map要素はshadow domとなっており、内部はひとつのiframeとして構成されます。このiframe内のwindowで通常のsvgMapオブジェクトが稼働する形となります。svgMapAppPage属性はこのiframe内で起動するsvgMapオブジェクトを持ったhtmlを指定するものです。

======latitude, longitude======
オプション: 表示領域を下記の属性と組み合わせて指定します。DOMを操作することによって動的に表示領域を変更することが可能です。
======zoom======
オプション: 表示位置の中心点を上の2属性で、ズームレベルをこの属性で指定します。ズームレベルの定義は[https://docs.microsoft.com/ja-jp/azure/azure-maps/zoom-levels-and-tile-grid webMercatorタイルピラミッドのレベル番号]（ただし小数点指定も可能）
======latitude2, longitude2======
オプション: latitude, longitudeと組み合わせて対角線を指定し表示領域を設定します。
======customjson======
オプション: 任意のJSON文字列を(エスケープしたうえで)与えることができます。 SVGMap.jsのあるiframeのwindow.rootMessage.customJsonに、JSON.parseされたうえでその値が反映されます。この値もDOM操作により動的に反映されます。window.rootMessage.customJsonの変化を監視できるようsetterを設けることで動的な変化に対応する実装が可能です。

var rootMessage={
set customJson(json){
...
}
}

======layerui======
オプション: レイヤーUIの出力要素をxlinkで指定します。　この値はmutationをobserveしていません（svg-mapオブジェクトが生成された、最初の一回のみ有効です）

<svg-map svgMapAppPage="SVGMapper_r16_layerUICustom.html" id="svgMapTag" latitude="37" longitude="135" zoom="4" layerui="#layerUIarea">

=====DOM API=====
======setCenter======
setCenter( longitude, latitude, zoom ) : 緯度経度ズームレベルで地図を表示させる
======addLayer======
addLayer(url,title,visibility) : URLで指定したリソースのレイヤーをtitleを付けて追加する

======svgMapObject======
getter svgMapObject : この要素に紐付いたsvgMapオブジェクトを得る

====layer要素====
svg-map要素の子要素として、任意の個数のlayer要素を設置できます。
=====属性=====
======title======
iframeで起動されるsvgMapオブジェクトの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルにある、レイヤー名(title)を指定し、そのレイヤーとlayer要素を紐付ける。該当するレイヤーが無く、且つ下記のsrcが指定されている場合は新しいレイヤーを追加する。なお、任意の属性や子ノードが与えられている場合は、下記の通りレイヤーの読み込み後にそれらの値が該当するレイヤーの[[#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|data-controller]]の window.rootMessageに設定される。

======src======
iframeで起動されるsvgMapオブジェクトの[[#SVGMapコンテンツを配置するためのdiv要素|コンテナsvgコンテンツ]]ファイルにある、レイヤーをURLを使って指定する
======visibility [TBD] ======
visible もしくは hiddenを設定すると、そのレイヤーの表示状態を制御できる。

======任意の属性======
任意の属性を設定できる。設定した属性名と属性値は、対応するレイヤーの[[#レイヤー固有ユーザインターフェース|data-controller]]で指定されたレイヤーのコントローラのwindowにおけるwindow.rootMessageの対応するメンバ変数に反映される。[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/set setter]を設定することで変化に応じて動作させることが可能になる。

======rootMessage.update()関数======
レイヤーのコントローラのwindow.rootMessage.update()関数(引数なし)が定義されている場合、上記の属性変更(最初の設定も含む)が検知される度にこの関数が呼び出される。

=====子ノード(TEXT CONTENTやXML要素)=====
任意のテキスト(textContent)や、XML要素(xmlContent)を子ノードに入れることができる。
入れられた情報は、同様に対応するレイヤーのdata-controllerの
window.rootMessage.textContent、もしくはwindow.rootMessage.xmlContentメンバ変数に反映される。
XMLに関しては任意の階層化がされていても良い。DOM操作による変化があれば更新されるので、同様にsetterを用いて変化を反映させることが可能。

=====DOMAPI=====
======layerId======
layerId : このレイヤーのレイヤーIDを得る
======svgImage======
svgImage : このレイヤーに紐付いたsvgMapコンテンツ(document)を得る
======svgImageProps======
svgImageProps : このレイヤーに紐づいたsvgMapコンテンツのsvgImagePropsオブジェクト(各種プロパティを格納したオブジェクト)を得る
======controllerWindow======
controllerWindow : (もしあれば)このレイヤーに紐づいたsvgMapコンテンツのレイヤー固有UIを得る

==第四章：内部機構解説==
[[内部機構解説|別ページを参照してください。]]

==第五章：付加機能==
===3D可視化機能===
:- SVGMap.jsはCesium.jsを利用してSVGMapで表示しているレイヤーを3D可視化することができます。
:- 3D可視化はSVGMap.jsの地図ウィンドと独立した別ウィンドで行われます。
:- すなわち、ここから呼び出されるCesiumベースの3D可視化ウェブアプリは、それ専用のwebApps([https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4_module.js cesiumWindow*.js]を読み込んだアプリ。：基本的な3D可視化ウェブアプリとして、[https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4.html cesiumWindow4.html]を用意)を持つ別のブラウジングコンテキストで起動されます。
:- この3D可視化ウェブアプリは、svgmapjsとメッセージングを行いsvgmapjsで表示されているレイヤーを3D可視化します。

====3Dビジュアライザ起動用ボタンの設置====
3D可視化機能を起動するためのUI(ボタン)は、[[#フレームワークの呼び出し|ルートhtml文書]]に設置した以下の要素によって構築されます。
<code><pre><img id="3DviewButton" data-app="cesiumWindow4.html" .../></pre></code>

* <code>id</code>が<code>3DviewButton</code>である必要があります。
* <code>data-app</code>属性で、3D可視化ウェブアプリのパスを指定することが可能です。
** もし指定されていない場合は、ルートhtml文書と同一ディレクトリの<code>cesiumWindow2.html</code>というファイルがデフォルトで指定されます。
** パスは同一オリジンである必要があります。
** 基本的な3D可視化ウェブアプリとして、[https://github.com/svgmap/svgmapjs/blob/main/3D_extension/cesiumWindow4.html cesiumWindow4.html]が[https://github.com/svgmap/svgmapjs/ svgmapjsリポジトリ]に用意されています。