APIの実装に関する情報や実装方法を解説します。
次のサンプルは、APIを利用した最も簡単なサンプルとして、東京駅を中心とした地図を表示します。
地図はマウスによるドラッグ＆ドロップによるスクロールと、マウスホイールによる縮尺レベルの変更ができます。
地図を表示させるまでの手順は次の通りです。
１．script タグにローダーの処理を記述して、zdcmap.jsを読み込みます。
２．地図を表示する領域の div 要素「ZMap」を作成します。（名称は任意です）
３．ZDC.Mapオブジェクトを作成して、mapオブジェクトに代入する処理を記述します。
４．map オブジェクトを body タグの onloadイベントから初期化します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script src="//test.api.its-mo.com/v3/loader?key=JSZddc5111626c8|Zo4wz&api=zdcmap.js&enc=UTF8" type="text/javascript"></script> <script type="text/javascript"> /* 東京 */ var map, lat = 35.6778614, lon = 139.7703167; function loadMap() { map = new ZDC.Map( document.getElementById('ZMap'), { latlon: new ZDC.LatLon(lat, lon), zoom: 3 } ); } </script> </head> <body onload="loadMap();"> <div id="ZMap" style="border:1px solid #777777; width:750px; height:500px; top:0px; left:20px; position:absolute;"></div> </body> </html>
1行目で文書型の宣言を行っています。
APIでは、次の文書宣言で動作が保障されています。
・<!DOCTYPE html>
上記以外の記述ではお客様のWebページ中の表示位置や内容がブラウザごとに異なる場合があります。
5行目の<script>でAPIをダウンロードします。
ダウンロードにはローダー（loader）を使い、お客様のキー（クライアントID）や、ローダーに関するオプションパラメータを指定します。
6行目から始まる<script>内で、地図を表示する記述を行っています。
APIのZDC.Mapクラスを利用して、第1引数にdiv要素「Zmap」を、第2引数に地図の初期表示に関するオプションパラメータを指定します。
このWebページでは初期表示位置(latlon)、及び初期表示の縮尺(zoom)の指定を行っています。
bodyの開始タグ内で、onload イベントに紐付けて地図の表示を行うようにする設定を行っています。
この処理は必須ではありませんが、APIの実行がWebページの読み込みより先に行われるケースを回避します。
body内のdiv要素で、地図をWebページに表示する領域を定義して、styleの指定を行っています。
ここでは「ZMap」としていますが、div要素は任意の名称が利用可能です。
styleの指定はwidth, height, top, left, positionまで設定することが推奨されます。
width, heightの設定は必須になります。px単位の数値を300px;のように指定するか、%つきの数値を100%;のように指定してください。
top, leftには、px単位の数値を10px;のように指定してください。未設定の場合は0pxと同義になります。
positionには、absoluteまたはrelativeのどちらかを指定してください。未設定の場合はrelativeと同義になります。
いずれの値も、お客様のWebページ上で適切に表示されるように設定する必要があります。
APIを利用するにはローダーを利用します。
利用可能なAPIファイルの一覧です。
| ファイル名 | 対応クラス | 機能 |
| zdcmap.js | ZDC.Map | 地図を作成するクラス |
| ZDC.Marker | マーカを作成するクラス | |
| ZDC.MapCenter | 中心点画像を作成するクラス | |
| ZDC.ScaleBar | スケールバーを作成するクラス | |
| ZDC.MsgInfo | 吹き出しを作成するクラス | |
| ZDC.LatLon | 緯度経度を保持するクラス | |
| イベント | 地図やウィジットのイベントを扱うための定数・メソッド | |
| ユーティリティメソッド | 各種ユーティリティメソッド | |
| ZDC.LatLonBox | 緯度経度の矩形を生成するクラス | |
| ZDC.Pixel | ピクセル座標を保持するクラス | |
| ZDC.PixelBox | ピクセル座標の矩形を生成するクラス | |
| ZDC.TL | トップ、レフトを保持するクラス | |
| ZDC.WH | 幅高さを保持するクラス | |
| ZDC.UserTile | ユーザ独自のタイルを重畳するクラス | |
| shape.js | ZDC.Polyline | 線・多角形を描画するクラス |
| ZDC.Oval | 円・楕円を描画するクラス | |
| geo.js | ジオメトリック | 幾何計算等を行うためのメソッド |
| control.js | ZDC.Control | コントロールを作成するクラス |
| usercontrol.js | ZDC.UserControl | ユーザ独自のコントロールを作成するクラス |
| userwidget.js | ZDC.UserWidget | ユーザウィジットを作成するクラス |
| ZDC.StaticUserWidget | 地図に連動しないユーザウィジットを作成するクラス | |
| search.js | ZDC.Search | 検索を実行するためのメソッドが定義されたネームスペース |
| submap.js | ZDC.Submap | サブマップを作成するクラス |
| areamap.js | ZDC.AreaMap | 地域図を作成するクラス |
| railwaymap.js | ZDC.RailwayMap | 路線図を作成するクラス |
| imglayer.js | ZDC.ImageLayer | 任意の画像取得インターフェースで取得した画像を重畳するクラス |
| wms.js | Webメルカトル | Webメルカトル投影に準拠したタイル地図に変更 ※一番最後に指定してください |
API では複数のマップタイプを用意しており、用途に応じた地図をご利用いただけます。
APIはスマートフォン・タブレットでもご利用いただけます。
・ZDC.MapクラスのgetPointerPosition()が利用できません。
・一部のイベントが発生しません。
スマートフォン・タブレットの解像度に合わせて、metaタグ(viewport)の設定や、専用のWebページの作成が推奨されます。
実装例
ブラウザによっては、透過PNG形式の画像やウィジットの印刷がサポートされません。
ZDC.MapクラスのsetPrintModeOn()を利用した印刷用のページを別途表示することが推奨されます。
実装例
ZDC.addListener()を使って地図やウィジットにイベントリスナを登録すると、追加したイベント
が発生したときに地図やウィジットを操作できます。
実装例