ソースファイルを表示
sample/sample_win.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>
<style type="text/css">
div#root {
position: absolute;
top:0; left:0; right:0; bottom:0;
}
.wBtn1 {
position: absolute;
top: 12px; left: 12px;
display: block;
}
.wToolbox1 {
position: absolute;
top: 50px; left: 12px;
display: flex;
flex-direction: column;
}
#w-win-wMapList {
background: #e7e7e7;
order: 1; /* 右下 */
}
#wMapList {
overflow-y: auto;
}
#wMapList h2 {
margin: 0px; padding: 10px 0px 6px 0px;
width: 100%;
font-size: 18px;
text-align: center;
background: #e7f7e7;
}
#wMapList hr {
margin: 0px; padding: 0px;
}
#wMapList div.place {
background: #f7f7e7;
padding: 4px;
box-shadow: 1px 0px 5px rgba(0,0,0,0.2);
}
#wMapList div.place:hover {
background: #e7e7f7;
}
#wMapList a {
text-decoration: none;
color: inherit;
}
#wMapList h2 {
margin: 0px; padding: 10px 0px 6px 0px;
width: 100%;
font-size: 18px;
text-align: center;
background: #e7f7e7;
}
#wMapList hr {
margin: 0px; padding: 0px;
}
</style>
<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 menu = [{
icon: 'str3',
str: 'リスト',
func: function(e) {
let win = W.getElemWin(this);
win.dispList(); // 一覧の表示消去（トグル）
}
},{
icon: 'str2w', // アイコンの種類
str1: '全体', // アイコン文字列
str2: '表示', // アイコン文字列
func: function (e) { // ボタンクリック時の処理
let win = W.getElemWin(this);
win.map.fitBounds(win.bound); // マーカ全体の範囲を表示
}
},{
icon: 'str2',
str: '説明',
func: function() {
let dlg = W.dialog('Leafletとウィンドウ制御のサンプル');
dlg.win.innerHTML = '<p>';
dlg.win.innerHTML += ' このプログラムは、Leafletとウィンドウ制御のサンプルです。<br>';
dlg.win.innerHTML += ' サンプルデータとして、日本三名園を表示できます。<br>';
dlg.win.innerHTML += ' Leafletを使うと、簡単に地図を表示することができます<br>';
dlg.win.innerHTML += ' マーカをクリックすると、ポップアップで詳細情報と写真が見れます。<br>';
dlg.win.innerHTML += ' ウィンドウ制御は、タイル型のウィンドウマネージャーです。<br>';
dlg.win.innerHTML += ' 一覧でペインウィンドウが表示され、登録地点の一覧を表示できます。<br>';
dlg.win.innerHTML += ' 登録場所をクリックすると、地図とポップアップが表示されます。<br>';
dlg.win.innerHTML += '</p>';
}
}];
var wMap; // 地図表示クラス
function init() {
wMap = W.mapWin('wMap', 'root', {
title: placeTitle,
markList: placeList
});
let btn = wMap.addBtn({
icon: 'menu',
func: function(e) {
let win = W.getElemWin(this);
if (win.toolbox == null) {
win.toolbox = win.addToolbox(menu);
win.toolbox.className = 'wToolbox1';
} else {
win.toolbox.remove();
win.toolbox = null;
}
}
});
btn.className = 'wBtn1';
}
</script>
</head>
<body onload="init()">
<div id="root"></div>
</body>
</html>