ソースファイルを表示

全国ロケ地ガイド
Leafletの使い方
ソースファイルを表示
sample/sample_loca.htm

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />
<title>Leaflet 地図の表示</title>
<link rel="stylesheet" href="js/leaflet.css" />
<link rel="stylesheet" charset="UTF-8" href="js/leaflet_opacity.css" />
<link rel="stylesheet" charset="UTF-8" href="js/win.css" />
<link rel="stylesheet" charset="UTF-8" href="js/win_map.css" />
<script type="text/javascript" src="js/leaflet.js"></script>
<script type="text/javascript" charset="UTF-8" src="js/leaflet_opacity.js"></script>
<script type="text/javascript" charset="UTF-8" src="js/leaflet_url.js"></script>
<script type="text/javascript" charset="UTF-8" src="js/win.js"></script>
<script type="text/javascript" charset="UTF-8" src="js/win_map.js"></script>
<script type="text/javascript" charset="UTF-8">
var placeTitle = '日本三名園';
var placeList = [{ // マーカデータの定義
    'name':'兼六園', 'addr':'石川県金沢市兼六町',
    'coord':{'lat':36.562214, 'lng':136.662544},
    'photo':'<img src="img/kenrokuen.jpg" width="180" height="120" />'
},{
    'name':'後楽園', 'addr':'岡山県岡山市北区後楽園',
    'coord':{'lat':34.667849, 'lng':133.934932},
    'photo':'<img src="img/korakuen.jpg" width="180" height="120" />'
},{
    'name':'偕楽園', 'addr':'茨城県水戸市常磐町1丁目',
    'coord':{'lat':36.374166, 'lng':140.452557},
    'photo':'<img src="img/kairakuen.jpg" width="180" height="120" />'
}];

var wMap; // 地図表示クラス
var wMenu; // メニュー
var wLbl; // ラベル
var wTitle; // タイトル枠
var wTool; // ツールボックス
var wBtn; // 全体表示ボタン
var wLat; // 変換ボタン

function init() {
    wMap = W.mapWin('wMap', 'root', {
        title: placeTitle,
        markList: placeList
    });

    let menu = [ // メニュー定義
        {txt: '全国ロケ地ガイド', cmd: 'top'},
        {txt: 'Leafletについて', cmd: 'leaf'}
    ];
    wMenu = wMap.createMenu({
        menu: menu,
        func: function(e) {
            let cmd = this.getAttribute('w-cmd');
            if (cmd == 'top') {
                window.open('http://loca.ash.jp/');
            } else if (cmd == 'leaf') {
                window.open('http://loca.ash.jp/leaflet/index.htm');
            }
        }
    });
    wMenu.classList.add('wMenu');

    wLbl = wMap.createLbl('ロケ地マップ');
    wLbl.classList.add('wLbl');

    wTitle = wMap.createToolbox([wMenu, wLbl], {elem:true});
    wTitle = wMap.addCtrl(wTitle, 'topleft', 'wTitle');

    let tool = [{
        icon: 'str3w', // アイコンの種類
        str1: 'ロケ地', // アイコン文字列
        str2: '情報', // アイコン文字列
        func: function(e) {
            window.open('http://loca.ash.jp/');
        }
    },{
        icon: 'str3',
        str: 'リスト',
        func: function(e) {
            let win = W.getElemWin(this);
            win.dispList(); // 一覧の表示消去（トグル）
        }
    }];
    wTool = wMap.createToolbox(tool);
    wTool = wMap.addCtrl(wTool, 'topleft', 'wTool');

    wBtn = wMap.createBtn({
        icon: 'str2w', // アイコンの種類
        str1: '全体', // アイコン文字列
        str2: '表示', // アイコン文字列
        func: function (e) { // ボタンクリック時の処理
            let win = W.getElemWin(this);
            win.map.fitBounds(win.bound); // マーカ全体の範囲を表示
        }
    });
    wBtn = wMap.addCtrl(wBtn, 'bottomleft', 'wBtn');

    wLat = wMap.createBtn({
        icon: 'str2', // アイコンの種類
        str: '変換', // アイコン文字列
        func: function (e) { // ボタンクリック時の処理
            let pos = wMap.getPos();
            let href = 'http://loca.ash.jp/cgi/lat.cgi?md=show';
            href += '&lat=' + encodeURIComponent(pos.lat);
            href += '&lng=' + encodeURIComponent(pos.lng);
            href += '&sc=' + pos.zoom;
            window.open(href);
        }
    });
    wLat = wMap.addCtrl(wLat, 'topright');
}
</script>
</head>
<body onload="init()">
<div id="root"></div>
</body>
</html>