2024年10月30日 (水) 10:19時点における最新版

[編集] SVGMap.js (Level0.1フレームワーク)解説書

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

[編集] 第一章：SVGMapの基本機構と、更新部分

この章は、JIS化されたSVGMap (JIS X.7197)や、W3C Member Submissionに対する、近年の開発成果に基づいたSVGMapのアップデートを解説しています。

JIS X.7197もしくは、W3C Member Submissionに記載されているように、SVGMapの基本機構は主に以下の機能を　汎用的なグラフィイクスデータ記述形式SVGに拡張することです。

• 地理座標処理
  • SVGの座標系と地理座標系との間の関係を記述する globalCoordinateSystems要素
• タイルピラミッド（タイリングとLevel of Detail）
  • コンテンツを埋め込むimage要素、animation要素のx,y,width,height属性への追加の振る舞いと、visible-min-zoom, visible-max-zoom属性の追加
  • 詳細は こちらの論文を参照
• 拡張されたレイヤー
  • ルートコンテナにおけるimage, animation要素の扱い
  • ルートコンテナが埋め込むsvgコンテンツ(レイヤーsvgコンテンツ)の処理

[編集] 地理座標系の処理

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

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

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

[編集] メルカトル図法を含む任意の図法の定義とその合成機能(＞rev16)

従来のSVGMapでは、グローバル座標系に緯度経度座標を用いた場合、使用できる図法はPlateCarreeや正距円筒図法でした。

一方、rev16ではコンテナsvgコンテンツを含む任意のSVGMapコンテンツ(レイヤーsvgコンテンツやサブレイヤー、タイルなど)のglobalCoordinateSystem 要素のtransform属性に、下記のように"mercator"を指定することで、そのコンテンツの座標系がメルカトル図法(web mercator)であることを宣言できます。

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

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

[編集] メルカトル図法での地図表示

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

[編集] メルカトル図法のドキュメントルート要素のviewBox属性

• コンテナsvgコンテンツにおいて、地図の初期表示状態を記述するドキュメントルート要素(<svg>要素)のviewBoxに記述する座標も先述のメルカトル座標系で記述する必要があります。
• 一方、緯度経度で初期表示領域を記述したい場合に対応する仕様が拡張されており、その記述例は下記のとおり、globalを追加します。

<svg viewBox="global,138,35,2,2">

[編集] プロキシの設定

オンザフライでの図法変換では、多くのケースで非線形の座標変換が必要となります。ビットイメージ（タイルを含む）に対して子の座標変換を実行するためにSVGMap.jsではビット委イメージのピクセルにアクセスしています。これを実現するにはビットイメージがSVGMap.jsと同一オリジンにある必要があります。この条件を満たせないケースに対してフレームワークにはプロキシを設定する機能があります。(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変化すると、コンテンツの座標系でいくつ変化するのかを表す）
• 記述例

<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>

[編集] ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング

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

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

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

こちらの論文も参考にしてください。

ウェブアプリケーションによる地図レイヤーを構築するには二つの方法があります。

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

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

[編集] レイヤー固有ユーザインターフェース

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

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

レイヤー固有ユーザーインターフェースは、グローバル空間(SVGMap.jsをロードしたhtml)のレイヤー選択UIを通してwindowに設置されたiframe中に呼び出されます。詳細は #レイヤー固有のUI を参照してください。

このフレームワークでは、#svgMapLayerUI.で呼び出せるAPIが利用可能です。

[編集] 例

以下に、いくつかのこのような動的な地図コンテンツの例を示しましょう。

検索によって表示スタイルを変更する機能を持ったレイヤー

例えばコンビニエンスストアのＰＯＩレイヤーを表示したとして、そのメタデータを読み取り、検索条件に基づいて（例えば深夜営業している店舗）の表示スタイルを変更するような検索機能を実装したレイヤー　メタデータは書くレイヤーごとに独特の値を持つため、その検索ロジックはレイヤーに固有のものとなることがあります。このケースではそのような機能をレイヤーに組み込むことを可能にします。

CSVデータなどのレガシーな非SVGデータをHXRで取得し、ブラウザ上でSVG DOMツリーを生成するようなSVG地図コンテンツ。

このケースでは、サーバからクライアントに送信されるデータの実体はSVG形式の地図データではなく、CSVなどのレガシーなデータです。SVG地図コンテンツには、CSVデータをSVGとして描画するためのデータ読み込み・解読・SVG DOMツリー生成機構を備えたjavascriptコードが含まれます。また、これよりはモダンなgeoJsonやKML等のデータをSVG DOMに変換することも容易に可能でしょう。これをより簡単に実現するためのライブラリもsvgMapGIStoolに準備されています。

タイリングされた地図コンテンツ

それは、たとえばOpenStreepMapのTile Serverや、Tile Map Serviceのような、特定のロジックによる数列のような法則性を持ったピラミッド状の地図タイルリソースをタイリングする地図コンテンツのことです。

更新されたSVGMapでは、地図コンテンツに内蔵されたjavascriptによるアプリケーションロジックとしてそれらを取り扱うことができます。タイリング規則をそのままウェブアプリケーションとしてで書き下し、スケールやビューポートに応じて適切なタイリング(配置)を行うSVG DOMツリーを生成するSVG地図コンテンツが構築できます。

[編集] タイリングに関するノート

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

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

[編集] SVG以外のデータサポートに関するノート

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

[編集] トポロジースイート(地理空間情報処理)

Rev.13で拡張

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

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

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

[編集] オーサリングシステム

Rev.14で拡張

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

[編集] 3D可視化システム

Rev.15で拡張

Cesium.jsを用いて、SVGMap.jsが表示できるすべてのコンテンツを3D可視化するシステムです。詳細解説はTBD (フレームワークが提供するAPI)

[編集] プログレッシブウェブアプリケーション

Rev.16で拡張

Progressive Web Appsをサポートしたブラウザにおいて、SVGMap.jsをオフラインでも利用可能にする拡張機能です。詳細解説はTBD (フレームワークが提供するAPI)

[編集] SVGMapコンテンツのバックエンドソフトウェア (参考)

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

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

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

[編集] 第二章：SVGMap Revsion 0.1フレームワーク

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

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

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

[編集] 追加・拡張された機能：

[編集] フレームワークの呼び出し

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

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

htmlコンテンツの<body>要素直下に以下の要素を配置します。

[編集] フレームワークを実装したjavascriptライブラリを読み込むscript要素

これがSVGMap.jsのコアのフレームワークを構成します。

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

上のスクリプトで必要なモジュールが読み込まれます。グローバル空間のwindowのメンバには、svgMapオブジェクトを設定しています。

実働サンプル(tutorial5_esm)

もしくは https://github.com/svgmap/svgmapjs の内容を独自のウェブホストにコピーしそれを用いることもできます。(下の例はグローバル空間のhtmlに対して、svgmapサブディレクトリにjsを置いた場合)

<script type="module">
  import { svgMap } from './svgmapjs/SVGMapLv0.1_r18module.js';
  window.svgMap=svgMap
</script>

[編集] GISモジュールを利用する場合

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

<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>

[編集] その他、各種の拡張フレームワークのjavascriptコードを読み込むscript要素(必要に応じて)

ECMA Script Module対応の内容に現在更新中

SVGMapLv0.1_Authoring_r*.js、SVGMapLv0.1_GIS_r*.js他がある。

<script type="text/javascript" src="拡張フレームワークファイル.js"></script>
注記:拡張フレームワークファイル.jsは用いる拡張によって変化する。

[編集] 本解説書でAPIを説明している、現在利用可能な拡張フレームワーク

ECMA Script Module対応の内容に現在更新中

• SVGMapLv0.1_Authoring_r*.js
  • https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/SVGMapLv0.1_Authoring_r7.js
• SVGMapLv0.1_GIS_r*.js
  • https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/SVGMapLv0.1_GIS_r3.js
• SVGMapLv0.1_LayerUI2_r*.js
  • https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/SVGMapLv0.1_LayerUI2_r4.js
• SVGMapLv0.1_CesiumWrapper_r*.js (実験的)
  • https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/experimental/Cesium3D/SVGMapLv0.1_CesiumWrapper_r3.js
• SVGMapLv0.1_PWA_r*.js (実験的)
  • https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/experimental/PWA/SVGMapLv0.1_PWA_r5.js

まだ実験的なsvgMapCesiumWrapperは、svgMap cesium visualizerページを参照ください。 SVGMapPWA(ProgressiveWebApp)については、SVGMap PWA Testページを参照ください。

[編集] SVGMapコンテンツを配置するためのdiv要素

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

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

（要確認：地図のサイズ・配置はこのdiv要素のサイズとなります。無指定の場合は全ウィンドサイズ）

<div id="mapcanvas" title="Container.svg"></div>

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

[編集] 差分データの指定

data-custom-layers-root属性でContainer.svgに対するレイヤーの差分情報のパスを指定することができます。 もしくは、data-custom-layers-root属性に、レイヤーの差分情報が保管されているディレクトリを記述した場合、URLハッシュで差分ファイルを指定することもできます。 差分データは、カスタムレイヤーマネージャで作成することが可能。（データ形式は後述）

<div id="mapcanvas" data-src="Container.svg" data-custom-layers-root="./containerDif/dif0.json"></div>

[編集] 地図中心の照準イメージ。

参照する画像はあらかじめ用意されたもの以外も利用できます。

<img id="centerSight" style="opacity:0.5" src="Xcursor.png" width="15" height="15"/>

[編集] 任意で設置できる要素：

[編集] LayerUIフレームワークを実装したjavascriptコードを読み込むscript要素（本フレームワークについては後述）

下記のレイヤーリストUIおよびレイヤーに特化したUIを設置する場合、このscriptの読み込みは必須です。

<script type="text/javascript" src="SVGMapLv0.1_LayerUI2_r2.js"></script>

[編集] 伸縮ボタン

<img id="zoomupButton" style="left: 5px; top: 5px; position: absolute;" src="zoomup.png" onclick="svgMap.zoomup()" width="20" height="20" />
<img id="zoomdownButton" style="left: 5px; top: 25px; position: absolute;" src="zoomdown.png" onclick="svgMap.zoomdown()" width="20" height="20" />

img要素かつidが上記の値である必要があります。

　伸縮ボタンを一回押すたびに伸縮する比率は、別途svgMap.setZoomRatio(ratio)で設定可能。 　デフォルトの比率はsqrt(3) 　

[編集] 測位ボタン