ホ−ム » スタートガイド

スタートガイド

APIの実装に関する情報や実装方法を解説します。

APIを利用した最も簡単なサンプル

次のサンプルは、APIを利用した最も簡単なサンプルとして、東京駅を中心とした地図を表示します。
地図はマウスによるドラッグ&ドロップによるスクロールと、マウスホイールによる縮尺レベルの変更ができます。

Your borwser is not supporting object tag. Please use one of the latest browsers.
Go to ./apisample/tutorial/tutorial_001.html

ソースコードと解説

地図を表示させるまでの手順は次の通りです。

  1.script タグにローダーの処理を記述して、zdcmap.jsを読み込みます。

  2.地図を表示する領域の div 要素「ZMap」を作成します。(名称は任意です)

  3.ZDC.Mapオブジェクトを作成して、mapオブジェクトに代入する処理を記述します。

  4.map オブジェクトを body タグの onloadイベントから初期化します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="//api.its-mo.com/v3/loader?key=JSZ9ea6d26ac8a7|VbFeP&api=zdcmap.js&enc=UTF8&force=1" 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を利用するにはローダーを利用します。

APIファイル一覧

利用可能なAPIファイルの一覧です。

ファイル名対応クラス機能
zdcmap.jsZDC.Map地図を作成するクラス
ZDC.Markerマーカを作成するクラス
ZDC.MapCenter中心点画像を作成するクラス
ZDC.ScaleBarスケールバーを作成するクラス
ZDC.MsgInfo吹き出しを作成するクラス
ZDC.LatLon緯度経度を保持するクラス
イベント地図やウィジットのイベントを扱うための定数・メソッド
ユーティリティメソッド各種ユーティリティメソッド
ZDC.LatLonBox緯度経度の矩形を生成するクラス
ZDC.Pixelピクセル座標を保持するクラス
ZDC.PixelBoxピクセル座標の矩形を生成するクラス
ZDC.TLトップ、レフトを保持するクラス
ZDC.WH幅高さを保持するクラス
ZDC.UserTileユーザ独自のタイルを重畳するクラス
shape.jsZDC.Polyline線・多角形を描画するクラス
ZDC.Oval円・楕円を描画するクラス
geo.jsジオメトリック幾何計算等を行うためのメソッド
control.jsZDC.Controlコントロールを作成するクラス
usercontrol.jsZDC.UserControlユーザ独自のコントロールを作成するクラス
userwidget.jsZDC.UserWidgetユーザウィジットを作成するクラス
ZDC.StaticUserWidget地図に連動しないユーザウィジットを作成するクラス
search.jsZDC.Search検索を実行するためのメソッドが定義されたネームスペース
submap.jsZDC.Submapサブマップを作成するクラス
areamap.jsZDC.AreaMap地域図を作成するクラス
railwaymap.jsZDC.RailwayMap路線図を作成するクラス

マップタイプ

API では複数のマップタイプを用意しており、用途に応じた地図をご利用いただけます。

スマートフォン・タブレットでのご利用

APIはスマートフォン・タブレットでもご利用いただけます。

PCとの差異

ZDC.MapクラスのgetPointerPosition()が利用できません。
・一部のイベントが発生しません。

画面表示

スマートフォン・タブレットの解像度に合わせて、metaタグ(viewport)の設定や、専用のWebページの作成が推奨されます。
実装例

地図の印刷

ブラウザによっては、透過PNG形式の画像やウィジットの印刷がサポートされません。
ZDC.MapクラスのsetPrintModeOn()を利用した印刷用のページを別途表示することが推奨されます。
実装例

イベント

ZDC.addListener()を使って地図やウィジットにイベントリスナを登録すると、追加したイベント が発生したときに地図やウィジットを操作できます。
実装例