ユーザコントロールを表示する

実行結果

次の例では、ユーザコントロールを表示します。
ユーザコントロールは、任意のコントロールを作成して表示することができます。
ソースコードと解説

ユーザコントロールを表示するには、ZDC.UserControlクラスと、ZDC.MapクラスのaddWidget()を利用します。
<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<script src="//test.api.its-mo.com/v3/loader?key=JSZddc5111626c8|Zo4wz&api=zdcmap.js,usercontrol.js&enc=UTF8" type="text/javascript"></script>
<script type="text/javascript">

var map, widget,
    lat = 35.6778614, lon = 139.7703167;

function loadMap() {
    map = new ZDC.Map(
    document.getElementById('ZMap'),
    {
        latlon: new ZDC.LatLon(lat, lon),
        zoom: 9,
        mapType: ZDC.MAPTYPE_HIGHRES_LV18
    }
);

   createUserControl(); 

    /* スケールバーを作成 */
   /*  scale = new ZDC.ScaleBar(); */

    /* スケールバーを表示 */
    /* map.addWidget(scale); */

};


function createUserControl() {
    /* ユーザコントロールに使用する画像 */
    var imgurl = '../../image/usercontrol/usrctrl_css.png';

    var control = {
        /* ホームポジションへ移動ボタン */
        home:
        {
            /* 画像のURL */
            src: imgurl,
            /* 配置位置 */
            pos:{top: 28,right: 28},
            /* 画像の描画始点 */
            imgTL:{top: 0,left: 0},
            /* 画像の表示サイズ */
            imgSize:{width: 22,height: 22}
        },
        north:
        {
            src: imgurl,
            pos: {top: 10,right: 30},
            imgTL: {top: 0,left: 30},
            imgSize: {width: 19,height: 19}
        },
        east:
        {
            src: imgurl,
            pos: {top: 30,right: 10},
            imgTL: {top: 0,left: 50},
            imgSize: {width: 19,height: 19}
        },
        south:
        {
            src: imgurl,
            pos: {top: 50,right: 30},
            imgTL: {top: 0,left: 70},
            imgSize: {width: 19,height: 19}
        },
        west:
        {
            src: imgurl,
            pos: {top: 30,right: 50},
            imgTL: {top: 0,left: 90},
            imgSize: {width: 19,height: 19}
        },
        bar:
        {
            src: imgurl,
            pos: {top: 72,right: 31},
            imgTL: {top: 62,left: 20},
            imgSize: {width: 19,height: 114/19*13}
        },
        btn:
        {
            src: imgurl,
            pos: {top: 0,right: 1},
            imgTL: {top: 60,left: 50},
            imgSize: {width: 17,height: 11}
        },
        minus:
        {
            src: imgurl,
            pos: {bottom: 10,left: 10},
            imgTL: {top: 60,left: 70},
            imgSize: {width: 19,height: 19}
        },
        plus:
        {
            src: imgurl,
            pos: {bottom: 10,left: 35},
            imgTL: {top: 60,left: 90},
            imgSize: {width: 19,height: 19}
        },
        open:
        {
            src: imgurl,
            pos: {top: 72,right: 31},
            imgTL: {top: 60,left: 170},
            imgSize: {width: 17,height: 12}
        },
        close:
        {
            src: imgurl,
            pos: {top: 152,right: 31},
            imgTL: {top: 60,left: 150},
            imgSize: {width: 17,height: 12
            }
        },

        /* ホームポジションへ移動ボタンマウスオーバー時 */
        home_hvr:
        {
            src: imgurl,
            pos: {top: 28,right: 28},
            imgTL: {top: 25,left: 0},
            imgSize: {width: 22,height: 22}
        },
        north_hvr:
        {
            src: imgurl,
            pos: {top: 10,right: 30},
            imgTL: {top: 25,left: 30},
            imgSize: {width: 19,height: 19}
        },
        east_hvr:
        {
            src: imgurl,
            pos: {top: 30,right: 10},
            imgTL: {top: 25,left: 50},
            imgSize: {width: 19,height: 19}
        },
        south_hvr:
        {
            src: imgurl,
            pos: {top: 50,right: 30},
            imgTL: {top: 25,left: 70},
            imgSize: {width: 19,height: 19}
        },
        west_hvr:
        {
            src: imgurl,
            pos: {top: 30,right: 50},
            imgTL: {top: 25,left: 90},
            imgSize: {width: 19,height: 19}
        },
        bar_hvr:
        {
            src: imgurl,
            pos: {top: 72,right: 31},
            imgTL: {top: 62,left: 0},
            imgSize: {width: 19,height: 114/19*13}
        },
        btn_hvr:
        {
            src: imgurl,
            pos: {top: 0,right: 1},
            imgTL: {top: 85,left: 50},
            imgSize: {width: 17,height: 11}
        },
        minus_hvr:
        {
            src: imgurl,
            pos: {bottom: 10,left: 10},
            imgTL: {top: 85,left: 70},
            imgSize: {width: 19,height: 19}
        },
        plus_hvr:
        {
            src: imgurl,
            pos: {bottom: 10,left: 35},
            imgTL: {top: 85,left: 90},
            imgSize: {width: 19,height: 19}
        },
        open_hvr:
        {
            src: imgurl,
            pos: {top: 72,right: 31},
            imgTL: {top: 85,left: 170},
            imgSize: {width: 17,height: 12}
        },
        close_hvr:
        {
            src: imgurl,
            pos: {top: 152,right: 31},
            imgTL: {top: 85,left: 150},
            imgSize: {width: 17,height: 12
            }
        }

    };
    var options = {
        /* つまみの上限位置(縮尺レベル変更バーのtop: -2pxの位置) */
        start: -2,
        /* つまみの移動量 */
        interval: 6
    };

    /* ユーザコントロールを作成 */
    widget = new ZDC.UserControl(control, options);

    /* ユーザコントロールを追加 */
    map.addWidget(widget);
};



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