Previous Page Next Page

オープンソースによる地図表示(Leaflet編)追加分 その1

2019/5/8 by T. Fujita

追加-1、デバイスの位置を地図上に表示する

 技術情報共有サービスであるQiita『Geolocation APIでPCやスマホの位置情報を取得する』 という記事がありましたので、記事内容を利用してスマホ等の位置を地図上に表示させてみました。 さらに、任意の時間間隔で連続して地図上に位置をトレースし表示するプログラムを作成してみました。  これらのプログラムは、PCでの動作は確認できましたが、スマホでは通信が暗号化された『https://』以外のホームページからでは位置情報が使用できないようです。

 1-1、スマホ等の位置を地図に表示させてみる

 『Leaflet_Tutrial_101.html』を元にスマホ等の位置を地図上に表示させてみました。  プログラムを実行すると「位置情報を使うことを許可するか」の確認メッセージが表示されますので、「はい」か「許可する」をクリックして下さい。(ブラウザによってメッセージが異なります)  使用しているデバイスの現在地がマーカーで表示され、その地点が地図の中心になります。 表示されたマーカーをクリックすると取得時刻と位置誤差がポップアップで表示されます。  なお、「Safari」では動作しませんでした。 以下にその表示例とソースファイルの内容を示します。 ソースファイルの内容では、追加した部分を赤字で表示しています。  単独で表示する場合は、『 Leaflet_Tutrial_Additional_001.html 』をクリックして下さい。

       スマホ等の位置を地図上に表示する例



       『 Leaflet_Tutrial_Additional_001.html 』のソースファイル内容
001  <!DOCTYPE html>
002  <html>
003  <head>
004	<title>Leaflet_Tutrial_Additional_001.html	2019/5/5	by T. Fujita</title>
005	<meta charset="utf-8" />
006	<link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
007	<script src = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
008	<script>
009
010	function init() {
011		var Layer_A001 = new Array();
012		var Current_Lat = 0;
013		var Current_Lon = 0;
014		var Accuracy = 0;
015		var Current_Time = "";
016		var zoom = 8;
017		var map_A001 = L.map('map_A001').setView([35.65809922, 139.74135747], 8);
018		mapLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>';
019		    L.tileLayer(
020			'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
021			attribution: 'Map data © ' + mapLink,
022			maxZoom: 18
023		    }).addTo(map_A001);
024
025  // Geolocation APIに対応している場合
026		if (navigator.geolocation) {
027			getPosition();
028  // Geolocation APIに対応していない場合
029		} else {
030		      alert("この端末では位置情報が取得できません");
031		} 
032
033		function Leaflet_Marker_A001()		// マーカー設置
034		{
035		    var Markers_shape = new Array();
036		    var Markers_shape_pos = new Array();
037		    var Markers_shape_nam = new Array();
038		    var Markers_shape_lnk = new Array();
039		    Markers_shape_pos[ 0 ] = [Current_Lat, Current_Lon];
040		    Markers_shape_nam[ 0 ] = Current_Time;
041		    Markers_shape_lnk[ 0 ] = "";
042		    Markers_shape[ 0 ] = L.marker([ Markers_shape_pos[ 0 ][ 0 ], Markers_shape_pos[ 0 ][ 1 ] ]);
043		    Markers_shape[ 0 ].bindPopup(Markers_shape_nam[ 0 ] + "<BR> 位置誤差:" + Accuracy + " (m)").openPopup();
044		    Layer_A001[ 0 ] = Markers_shape[ 0 ];
045		    Layer_A001[ 0 ].addTo(map_A001);
046		}
047
048  // 現在地取得処理
049		function getPosition() {
050		    navigator.geolocation.getCurrentPosition(
051  // 取得成功した場合
052			function(position) {
053				Current_Lat = position.coords.latitude;
054				Current_Lon = position.coords.longitude;
055				Accuracy = position.coords.accuracy;
056				Current_Time = new Date(position.timestamp); 
057				zoom = map_A001.getZoom();
058				Leaflet_Marker_A001();
059				map_A001.setView(new L.LatLng(Current_Lat, Current_Lon), zoom, {animation: true} );
060			},
061  // 取得失敗した場合
062			function(error) {
063				switch(error.code) {
064				    case 1: //PERMISSION_DENIED
065					alert("位置情報の利用が許可されていません");
066					break;
067				    case 2: //POSITION_UNAVAILABLE
068					alert("現在位置が取得できませんでした");
069					break;
070				    case 3: //TIMEOUT
071					alert("タイムアウトになりました");
072					break;
073				    default:
074					alert("その他のエラー(エラーコード:"+error.code+")");
075					break;
076				}
077			}
078		    );
079		} 
080	}
081
082	</script>
083  </head>
084  <body onload="init()">
085	<div id="map_A001" style="width: 100%; height: 400px; border: solid 1px"></div>
086  </body>
087  </html>



 1-2、連続して位置をトレースしてみる

 次に『Leaflet_Tutrial_404.html』を元にスマホ等の位置を地図上に表示・トレースさせてみました。  画面上部のメニューに「本デバイスの位置」を追加し、クリックすると次のサブ・メニューが表示されるようにしています。

  (1)本デバイスの位置表示: 上記1-1項と同一
  (2)位置トレース開始・終了: トレースを開始・終了するためのダイアログ・ボックスが表示されます。 また、トレースのインターバル・タイムを設定できるようにしました。
  (3)トレース表示消去: 本デバイスの位置表示及びトレース結果の表示を全て消去します。
  (4)トレース保存(CSV形式): トレース結果をCSV形式でローカルファイルとして保存します。 保存したCSVファイルは、『Leaflet_Tutrial_404.html』、『Leaflet_Tutrial_505.html』、『Leaflet_Tutrial_601.html』と共通していますので、直線や円を表示することができます。
  (5)トレース読込(CSV形式): ローカルファイルからトレースデータを選択するダイアログ・ボックスを表示します。 マーカーの読込みと同一ですが、ファイル選択後にトレース表示が選択できます。

 以下に 表示例とそのソースファイルの内容を示します。 単独で表示する場合は、 『 Leaflet_Tutrial_Additional_002.html 』をクリックして下さい。

       連続して位置をトレースしてみるの表示例
 ここで使用しているアイコン素材は、 FLAT ICON DESIGN および ICOON MONO から取得しており、これらアイコン素材データの著作権は TopeconHeroes が保持しています。



 ソースファイルの内容で赤字の部分が追記した箇所です。

       『 Leaflet_Tutrial_Additional_002.html 』のソースファイル内容
001  <!DOCTYPE html>
002  <html>
003  <head>
004	<title>Leaflet_Tutrial_Additional_002.html	2019/5/6	by T. Fujita</title>
005	<meta charset = "utf-8" />
006	<link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
007	<link rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
008	<link rel = "stylesheet" href = "./Plugins/ms-Dropdown-master/css/msdropdown/dd.css" />
009	<link rel = "stylesheet" href = "./CSS/scroll_menu.css" />
010	<link rel = "stylesheet" href = "./CSS/Original_Style_404.css" />
011
012	<style>
013	    html, body {
014		width: 99%;
015		height: 98%;
016		font-size: 14px;
017		z-index: 0;
018	    }
019	</style>
020
021	<script src = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
022	<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
023	<script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
024	<script src = "./Plugins/ms-Dropdown-master/js/msdropdown/jquery.dd.js"></script>
025	<script src = "./JS/Dialog_Additional_002.js" ></script>
026	<script>
027		var Marker_LAT = new Array();
028		var Marker_LON = new Array();
029		var Marker_NAM = new Array();
030		var Marker_LNK = new Array();
031		var Marker_ICN = new Array();
032		var Marker_ID = new Array();
033		var Marker_Drag_flag = new Array();
034		var Marker_Drag_info = new Array();
035		var ClickLat = null;
036		var ClickLon = null;
037		var Marker_count = 0;
038		var Marker_ID_count = 0;
039		var SelectedID;
040		var Marker_flag = 0;
041		var Temp_shape, Temp_shape_clone;
042		var Temp, Temp_LAT, Temp_LON, Temp_NAM, Temp_LNK, Temp_ICN, Temp_ID, Temp_ACC;
043		var Temp_Drag_flag, Temp_Drag_info;
044		var Layer_404 = new Array();
045		var Layer_404_clone = new Array();
046		var Dialog_flag_001 = 0;
047		var Trace_LAT = new Array();
048		var Trace_LON = new Array();
049		var Trace_NAM = new Array();
050		var Trace_LNK = new Array();
051		var Trace_ACC = new Array();
052		var Trace_ICN = new Array();
053		var Trace_ID = new Array();
054		var Trace_Drag_flag = new Array();
055		var Trace_Drag_info = new Array();
056		var Trace_count = 0;
057		var Trace_ID_count = 0;
058		var Layer_AD_002 = new Array();
059		var Layer_AD_002_clone = new Array();
060		var Accuracy = 0;
061		var Time_Stamp = "";
062		var Interval_flag = 0;
063		var zoom = 6;
064		var map_AD_002;
065
066		function init() {
067			map_AD_002 = L.map('map_AD_002').setView([35.0, 137.0], 6);
068			mapLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>';
069			L.tileLayer(
070				'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
071				attribution: 'Map data © ' + mapLink,
072				maxZoom: 18
073		        }).addTo(map_AD_002);
074			map_AD_002.on('click', function(e) {
075				ClickLat = e.latlng.lat;
076				ClickLon = e.latlng.lng;
077				if ( Marker_flag == 1 ) { Leaflet_Marker_401(); }
078				if ( Marker_flag == 2 ) { Leaflet_Marker_403(); }
079			});
080		}
081
082		function Leaflet_Marker_400() {		// 初期設定(マーカー単独設置)
083			ClickLat = null;
084			ClickLon = null;
085			Marker_flag = 1;
086		}
087
088		function Leaflet_Marker_401() {		// マーカー単独設置
089		  if(Marker_flag == 1) {
090			Marker_LAT[ Marker_count ] = ClickLat;
091			Marker_LON[ Marker_count ] = ClickLon;
092			Marker_NAM[ Marker_count ] = Set_Text;
093			Marker_LNK[ Marker_count ] = " ";
094			Marker_ICN[ Marker_count ] = L.icon({
095				iconUrl: Icon_Url,
096				iconSize: [Icon_W, Icon_H],
097				iconAnchor : [Icon_AW, Icon_AH],
098				popupAnchor: [Icon_PW, Icon_PH]
099			});
100			Marker_ID[ Marker_count ] = "Marker" + Marker_ID_count;
101			Marker_Drag_flag[ Marker_count ] = true;
102			Marker_Drag_info[ Marker_count ] = "マウスで移動出来ます。";
103			Temp = Marker_count;
104			Marker_setting();
105			Marker_set();
106			Layer_404[ Temp ] = Temp_shape;
107			Layer_404[ Temp ].addTo(map_AD_002);
108			Layer_404_clone[ Temp ] = Temp_shape_clone;
109			Layer_404_clone[ Temp ].addTo(map_AD_002);
110			Marker_count = Marker_count + 1;
111			Marker_ID_count = Marker_ID_count + 1;
112			Marker_flag = 0;
113		    }
114		}
115
116		function Leaflet_Marker_402() {		// 初期設定(マーカー連続設置)
117			ClickLat = null;
118			ClickLon = null;
119			Marker_flag = 2;
120		}
121
122		function Leaflet_Marker_403() {		// マーカー連続設置
123		    if(Marker_flag == 2) {
124			Marker_LAT[ Marker_count ] = ClickLat;
125			Marker_LON[ Marker_count ] = ClickLon;
126			Marker_NAM[ Marker_count ] = Set_Text;
127			Marker_LNK[ Marker_count ] = " ";
128			Marker_ICN[ Marker_count ] = L.icon({
129				iconUrl: Icon_Url,
130				iconSize: [Icon_W, Icon_H],
131				iconAnchor : [Icon_AW, Icon_AH],
132				popupAnchor: [Icon_PW, Icon_PH]
133			});
134			Marker_ID[ Marker_count ] = "Marker" + Marker_ID_count;
135			Marker_Drag_flag[ Marker_count ] = true;
136			Marker_Drag_info[ Marker_count ] = "マウスで移動出来ます。";
137			Temp = Marker_count;
138			Marker_setting();
139			Marker_set();
140			Layer_404[ Temp ] = Temp_shape;
141			Layer_404[ Temp ].addTo(map_AD_002);
142			Layer_404_clone[ Temp ] = Temp_shape_clone;
143			Layer_404_clone[ Temp ].addTo(map_AD_002);
144			Marker_count = Marker_count + 1;
145			Marker_ID_count = Marker_ID_count + 1;
146		    }
147		}
148
149		function Leaflet_Marker_404() {		// マーカー連続設置終了
150			Marker_flag = 0;
151		}
152
153		function Leaflet_Marker_405() {		// マーカー全消去
154			var j = Layer_404.length - 1;
155			for(i = 0; i <= j; i++) {
156				if(Layer_404[i] != null) {
157					map_AD_002.removeLayer(Layer_404[i]);
158					map_AD_002.removeLayer(Layer_404_clone[ i ]);
159				}
160			}
161			Marker_count = 0;
162			Marker_LAT = new Array();
163			Marker_LON = new Array();
164			Marker_NAM = new Array();
165			Marker_LNK = new Array();
166			Marker_ICN = new Array();
167		}
168
169		function Leaflet_Marker_406() {		// マーカー保存(CSV形式)
170		    for (i = 0; i <= (Marker_LON.length - 1); i++) {
171			if( !isNaN(Marker_LON[ i ]) ) {
172			    while( (Marker_LON[ i ] * 1.0) < -180) {
173				Marker_LON[ i ] = (Marker_LON[ i ] * 1.0) + 360;
174			    }
175			    while( (Marker_LON[ i ] * 1.0) > 180) {
176				Marker_LON[ i ] = (Marker_LON[ i ] * 1.0) - 360;
177			    }
178			}
179		    }
180		    if(Marker_LAT[ 0 ] == "LAT(deg.)") {
181			var CSV_content = [];
182		    } else {
183			var CSV_content = "LAT(deg.),LONG(deg.),Name(by utf-8),Link,\r\n";
184		    }
185			const aTag = document.createElement('a');
186			aTag.download = "CSV_Data.csv";
187			var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
188			Temp = Marker_LAT.length;
189			for ( i = 0; i < Temp; i++ ) {
190				if( Marker_LAT[ i ] != "" && Marker_LON[ i ] != "" ) {
191				    CSV_content = CSV_content + Marker_LAT[ i ] + "," + Marker_LON[ i ] + "," + Marker_NAM[ i ] + "," + Marker_LNK[ i ] + ",\r\n";
192				}
193			}
194			var blob = new Blob([ bom, CSV_content ], { "type": "text/csv"});
195			if(window.navigator.msSaveBlob) {
196				window.navigator.msSaveBlob(blob, aTag.download);					// for IE
197			} else if (window.URL && window.URL.createObjectURL) {
198				aTag.href = window.URL.createObjectURL(blob);					// for FireFox
199				document.body.appendChild(aTag);
200				aTag.click();
201				document.body.removeChild(aTag);
202			} else if (window.webkitURL && window.webkitURL.createObject) {
203				aTag.href = (window.URL || window.webkitURL).createObjectURL(blob);		// for Chrome
204				aTag.click();
205			} else {
206				alert("保存に失敗しました!");
207			}
208		}
209
210		function Leaflet_Marker_407() {		// マーカー読込(CSV形式)
211			Dialog_002();
212		}
213
214		function Marker_setting() {		// マーカー設定
215			Temp_LAT = Marker_LAT[ Temp ] * 1.0;
216			Temp_LON = Marker_LON[ Temp ] * 1.0;
217			Temp_NAM = Marker_NAM[ Temp ];
218			Temp_LNK = Marker_LNK[ Temp ];
219			Temp_ICN = Marker_ICN[ Temp ];
220			Temp_ID = Marker_ID[ Temp ];
221			Temp_Drag_flag = Marker_Drag_flag[ Temp ]
222			Temp_Drag_info = Marker_Drag_info[ Temp ]
223			Set_Link =" ";
224			if(Temp_LNK != undefined ) {
225			    if( String( Temp_LNK ).length > 5 ) {
226				Set_Link = "<a href= '" + Temp_LNK + "' target='_blank'> " + Temp_NAM + "情報にリンク</a>";
227			    }
228			}
229		}
230
231		function Marker_set() {			// マーカー設置
232		  if( !isNaN( Temp_LAT ) && !isNaN( Temp_LON ) ) {
233		    if( (Temp_LAT !== undefined) || (Temp_LAT !== "") ) {
234			if( ((Temp_LAT * 1.0) != 0) || ((Temp_LON * 1.0) != 0) ) {
235			    Temp_shape = L.marker([ Temp_LAT, Temp_LON ],
236				{icon: Temp_ICN, id: Temp_ID, draggable: Temp_Drag_flag}).bindPopup( Temp_NAM + "<BR>" + Temp_Drag_info + "<BR>" +
237				 "<p> <input type='button' value='Change this Marker' class='marker-change-button'/></p>" +
238				 Set_Link + "<p> <input type='button' value='Delete this Marker' class='marker-delete-button'/></p>");
239			    Temp_shape.on('popupopen', onMarkerOpen ).on('dragend', Dragging);
240			    if(Temp_LON >= 0) {
241				Temp_shape_clone = L.marker([ Temp_LAT, (Temp_LON - 360) ],
242				    {icon: Temp_ICN, id: Temp_ID, draggable: Temp_Drag_flag}).bindPopup( Temp_NAM + "<BR>" + Temp_Drag_info + "<BR>" +
243				 "<p> <input type='button' value='Change this Marker' class='marker-change-button'/></p>" +
244				 Set_Link + "<p> <input type='button' value='Delete this Marker' class='marker-delete-button'/></p>");
245				Temp_shape_clone.on('popupopen', onMarkerOpen ).on('dragend', Dragging);
246			    } else {
247				Temp_shape_clone = L.marker([ Temp_LAT, (Temp_LON + 360) ],
248				    {icon: Temp_ICN, id: Temp_ID, draggable: Temp_Drag_flag}).bindPopup( Temp_NAM + "<BR>" + Temp_Drag_info + "<BR>" +
249				 "<p> <input type='button' value='Change this Marker' class='marker-change-button'/></p>" +
250				 Set_Link + "<p> <input type='button' value='Delete this Marker' class='marker-delete-button'/></p>");
251				Temp_shape_clone.on('popupopen', onMarkerOpen ).on('dragend', Dragging);
252			    }
253			}
254		    }
255		  }
256		}
257
258		function onMarkerOpen() {		// マーカーをクリックした時に表示する削除ボタンと変更ボタン
259		    var tempMarker = this;
260		    SelectedID = tempMarker.options.id;
261		    $(".marker-delete-button:visible").click(function () {
262			Marker_DEL(tempMarker);
263		    });
264		    $(".marker-change-button:visible").click(function () {
265			Dialog_001();
266		    });
267		}
268
269		function Change_Marker() {		// 変更ボタン押下時の処理
270		    for(i = 0; i <= Marker_count; i++) {
271			if(SelectedID == Marker_ID[ i ] ) {
272				Marker_NAM[ i ] = Set_Text;
273				Marker_ICN[ i ] = L.icon({
274					iconUrl: Icon_Url,
275					iconSize: [Icon_W, Icon_H],
276					iconAnchor : [Icon_AW, Icon_AH],
277					popupAnchor: [Icon_PW, Icon_PH]
278				});
279			}
280		    }
281		    for(i = 0; i <= Trace_count; i++) {
282			if(SelectedID == Trace_ID[ i ] ) {
283				Trace_ICN[ i ] = L.icon({
284					iconUrl: Icon_Url,
285					iconSize: [Icon_W, Icon_H],
286					iconAnchor : [Icon_AW, Icon_AH],
287					popupAnchor: [Icon_PW, Icon_PH]
288				});
289			}
290		    }
291		    Marker_Refresh();
292		}
293
294		function Marker_DEL(tempMarker) {	// 削除ボタン押下時の処理
295			var k = 0;
296			Marker_flag = 0;
297			Marker_LAT[ Marker_count + 1 ] = "";
298			Marker_LON[ Marker_count + 1 ] = "";
299			Marker_NAM[ Marker_count + 1 ] = "";
300			Marker_LNK[ Marker_count + 1 ] = "";
301			Marker_ICN[ Marker_count + 1 ] = "";
302			Marker_ID[ Marker_count + 1 ] = "";
303			SelectedID = tempMarker.options.id;
304			for(i = 0; i <= Marker_count; i++) {
305				if(SelectedID == Marker_ID[ i ] ) {
306					for(k = i; k <= Marker_count; k++) {
307						Marker_LAT[ k ] = Marker_LAT[ k + 1 ];
308						Marker_LON[ k ] = Marker_LON[ k + 1 ];
309						Marker_NAM[ k ] = Marker_NAM[ k + 1 ];
310						Marker_LNK[ k ] = Marker_LNK[ k + 1 ];
311						Marker_ICN[ k ] = Marker_ICN[ k + 1 ];
312						Marker_ID[ k ] = Marker_ID[ k + 1 ];
313						Marker_Drag_flag[ k ] = Marker_Drag_flag[ k + 1 ];
314						Marker_Drag_info[ k ] = Marker_Drag_info[ k + 1 ];
315					}
316				}
317			}
318			SelectedID = null;
319			Marker_count = Marker_count - 1;
320			Marker_Refresh();
321		}
322
323		function Marker_Refresh() {		// マーカー再表示
324			var j = Layer_404.length - 1;
325			for(i = 0; i <= j; i++) {
326			    if(Layer_404[ i ] != null) {
327				map_AD_002.removeLayer(Layer_404[ i ]);
328				map_AD_002.removeLayer(Layer_404_clone[ i ]);
329			    }
330			}
331			var j = Layer_AD_002.length - 1;
332			for(i = 0; i <= j; i++) {
333			    if(Layer_AD_002[ i ] != null) {
334				map_AD_002.removeLayer(Layer_AD_002[ i ]);
335				map_AD_002.removeLayer(Layer_AD_002_clone[ i ]);
336			    }
337			}
338			for (i = 0; i <= Marker_count - 1; i++)
339			{
340				Temp = i;
341				Marker_setting();
342				Marker_set();
343				Layer_404[ Temp ] = Temp_shape;
344				Layer_404[ Temp ].addTo(map_AD_002);
345				Layer_404_clone[ Temp ] = Temp_shape_clone;
346				Layer_404_clone[ Temp ].addTo(map_AD_002);
347			}
348			for (i = 0; i <= Trace_count - 1; i++)
349			{
350				Temp = i;
351				Trace_setting();
352				Trace_set();
353				Layer_AD_002[ Temp ] = Temp_shape;
354				Layer_AD_002[ Temp ].addTo(map_AD_002);
355				Layer_AD_002_clone[ Temp ] = Temp_shape_clone;
356				Layer_AD_002_clone[ Temp ].addTo(map_AD_002);
357			}
358		}
359
360		function Dragging() {			// マーカーをドラッグ時の位置取得
361			ClickLat = this._latlng.lat;
362			ClickLon = this._latlng.lng;
363			SelectedID = this.options.id;
364			for(i = 0; i <= Marker_count; i++) {
365				if(SelectedID == Marker_ID[ i ] ) {
366					Marker_LAT[ i ] = ClickLat;
367					Marker_LON[ i ] = ClickLon;
368				}
369			}
370			Marker_Refresh();
371			SelectedID = null;
372		}
373
374		function CSV_Markers() {		// CSVデータを表示
375		    for (i = 0; i <= (Data_CSV.length - 1); i++) {
376			if((Data_CSV[i][0] * 1.0) > 90) {
377			    Data_CSV[i][0] = 90;
378			}
379			if((Data_CSV[i][0] * 1.0) < -90) {
380			    Data_CSV[i][0] = -90;
381			}
382			while( (Data_CSV[i][1] * 1.0) < -180) {
383			    Data_CSV[i][1] = Data_CSV[i][1] * 1.0 + 360;
384			}
385			while( (Data_CSV[i][1] * 1.0) > 180) {
386			    Data_CSV[i][1] = Data_CSV[i][1] * 1.0 - 360;
387			}
388		    }
389		    for (i = 0; i <= (Data_CSV.length - 1); i++) {
390			Marker_LAT[ Marker_count ] = Data_CSV[i][0];
391			Marker_LON[ Marker_count ] = Data_CSV[i][1];
392			Marker_NAM[ Marker_count ] = Data_CSV[i][2];
393			Marker_LNK[ Marker_count ] = Data_CSV[i][3];
394			Marker_ICN[ Marker_count ] = L.icon({
395				iconUrl: Icon_Url,
396				iconSize: [Icon_W, Icon_H],
397				iconAnchor : [Icon_AW, Icon_AH],
398				popupAnchor: [Icon_PW, Icon_PH]
399			});
400			Marker_ID[ Marker_count ] = "Marker" + Marker_ID_count;
401			Marker_Drag_flag[ Marker_count ] = false;
402			Marker_Drag_info[ Marker_count ] = "移動出来ません。";
403			if( Data_CSV[i][0] != "" ) {
404			    if( !isNaN( Data_CSV[i][0] ) ) {
405				Temp = Marker_count;
406				Marker_setting();
407				Marker_set();
408				Layer_404[ Temp ] = Temp_shape;
409				Layer_404[ Temp ].addTo(map_AD_002);
410				Layer_404_clone[ Temp ] = Temp_shape_clone;
411				Layer_404_clone[ Temp ].addTo(map_AD_002);
412			    }
413			}
414			Marker_count = Marker_count + 1;
415			Marker_ID_count = Marker_ID_count + 1;
416		    }
417		}
418
419		function Leaflet_Position_AD001() {		// デバイスの位置表示
420			if (navigator.geolocation) {		// Geolocation APIに対応している場合
421				getPosition();
422			} else {				// Geolocation APIに対応していない場合
423			      alert("この端末では位置情報が取得できません");
424			}
425		}
426
427		function Leaflet_Trace_AD002() {		// トレース開始/終了
428			Dialog_AD_001();
429		}
430
431		function Leaflet_Trace_AD003() {		// トレース消去
432			var j = Layer_AD_002.length - 1;
433			for(i = 0; i <= j; i++) {
434				if(Layer_AD_002[i] != null) {
435					map_AD_002.removeLayer(Layer_AD_002[i]);
436					map_AD_002.removeLayer(Layer_AD_002_clone[ i ]);
437				}
438			}
439			Trace_count = 0;
440			Trace_LAT = new Array();
441			Trace_LON = new Array();
442			Trace_NAM = new Array();
443			Trace_LNK = new Array();
444			Trace_ACC = new Array();
445			Trace_ICN = new Array();
446		}
447
448		function Leaflet_Trace_AD004() {		// トレースデータ保存
449		    for (i = 0; i <= (Trace_LON.length - 1); i++) {
450			if( !isNaN(Trace_LON[ i ]) ) {
451			    while( (Trace_LON[ i ] * 1.0) < -180) {
452				Trace_LON[ i ] = (Trace_LON[ i ] * 1.0) + 360;
453			    }
454			    while( (Trace_LON[ i ] * 1.0) > 180) {
455				Trace_LON[ i ] = (Trace_LON[ i ] * 1.0) - 360;
456			    }
457			}
458		    }
459		    if(Trace_LAT[ 0 ] == "LAT(deg.)") {
460			var CSV_content = [];
461		    } else {
462			var CSV_content = "LAT(deg.),LONG(deg.),Time Stamp,Link,Accuracy(m),\r\n";
463		    }
464			const aTag = document.createElement('a');
465			aTag.download = "CSV_Trace_Data.csv";
466			var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
467			Temp = Trace_LAT.length;
468			for ( i = 0; i < Temp; i++ ) {
469				if( Trace_LAT[ i ] != "" && Trace_LON[ i ] != "" ) {
470				  CSV_content = CSV_content + Trace_LAT[ i ] + "," + Trace_LON[ i ] + "," + Trace_NAM[ i ] + "," + Trace_LNK[ i ] + "," + Trace_ACC[ i ] + ",\r\n";
471				}
472			  }
473			var blob = new Blob([ bom, CSV_content ], { "type": "text/csv"});
474			if(window.navigator.msSaveBlob) {
475			     window.navigator.msSaveBlob(blob, aTag.download);					// for IE
476			  } else if (window.URL && window.URL.createObjectURL) {
477				aTag.href = window.URL.createObjectURL(blob);					// for FireFox
478				document.body.appendChild(aTag);
479				aTag.click();
480				document.body.removeChild(aTag);
481			  } else if (window.webkitURL && window.webkitURL.createObject) {
482				aTag.href = (window.URL || window.webkitURL).createObjectURL(blob);		// for Chrome
483				aTag.click();
484			  } else {
485				alert("保存に失敗しました!");
486			  }
487		}
488
489		function getPosition() {			// 現在地取得処理
490		  navigator.geolocation.getCurrentPosition(
491		    function(position) {			// 取得成功した場合
492			Trace_LAT[ Trace_count ] = position.coords.latitude;
493			Trace_LON[ Trace_count ] = position.coords.longitude;
494			Trace_NAM[ Trace_count ] = new Date(position.timestamp); 
495			Trace_ACC[ Trace_count ] = position.coords.accuracy;
496			Trace_LNK[ Trace_count ] = " ";
497			Trace_ICN[ Trace_count ] = L.icon({
498				iconUrl: Icon_Url,
499				iconSize: [Icon_W, Icon_H],
500				iconAnchor : [Icon_AW, Icon_AH],
501				popupAnchor: [Icon_PW, Icon_PH]
502			});
503			Trace_ID[ Trace_count ] = "Trace" + Trace_ID_count;
504			Trace_Drag_flag[ Trace_count ] = false;
505			Trace_Drag_info[ Trace_count ] = "マウスで移動出来ません。";
506				Temp = Trace_count;
507				Trace_setting();
508				Trace_set();
509				Layer_AD_002[ Temp ] = Temp_shape;
510				Layer_AD_002[ Temp ].addTo(map_AD_002);
511				Layer_AD_002_clone[ Temp ] = Temp_shape_clone;
512				Layer_AD_002_clone[ Temp ].addTo(map_AD_002);
513				zoom = map_AD_002.getZoom();
514				map_AD_002.setView(new L.LatLng(Trace_LAT[ Temp ], Trace_LON[ Temp ]), zoom, {animation: true} );
515				Trace_count = Trace_count + 1;
516				Trace_ID_count = Trace_ID_count + 1;
517		    },
518		    function(error) {			// 取得失敗した場合
519			switch(error.code) {
520		            case 1: //PERMISSION_DENIED
521				alert("位置情報の利用が許可されていません");
522				break;
523		            case 2: //POSITION_UNAVAILABLE
524				alert("現在位置が取得できませんでした");
525				break;
526		            case 3: //TIMEOUT
527				alert("タイムアウトになりました");
528				break;
529		            default:
530				alert("その他のエラー(エラーコード:"+error.code+")");
531				break;
532			}
533		    }
534		  );
535		}
536
537		function Trace_setting() {		// トレース用マーカー設定
538			Temp_LAT = Trace_LAT[ Temp ] * 1.0;
539			Temp_LON = Trace_LON[ Temp ] * 1.0;
540			Temp_NAM = Trace_NAM[ Temp ];
541			Temp_LNK = Trace_LNK[ Temp ];
542			Temp_ACC = Trace_ACC[ Temp ];
543			Temp_ICN = Trace_ICN[ Temp ];
544			Temp_ID = Trace_ID[ Temp ];
545			Temp_Drag_flag = Trace_Drag_flag[ Temp ]
546			Temp_Drag_info = Trace_Drag_info[ Temp ]
547			Set_Link =" ";
548			if(Temp_LNK != undefined ) {
549			    if( String( Temp_LNK ).length > 5 ) {
550				Set_Link = "<a href= '" + Temp_LNK + "' target='_blank'> " + Temp_NAM + "情報にリンク</a>";
551			    }
552			}
553		}
554
555		function Trace_set() {			// トレース用マーカー設置
556		  if( !isNaN( Temp_LAT ) && !isNaN( Temp_LON ) ) {
557		    if( (Temp_LAT !== undefined) || (Temp_LAT !== "") ) {
558			if( ((Temp_LAT * 1.0) != 0) || ((Temp_LON * 1.0) != 0) ) {
559			    Temp_shape = L.marker([ Temp_LAT, Temp_LON ],
560				{icon: Temp_ICN, id: Temp_ID, draggable: Temp_Drag_flag}).bindPopup( Temp_NAM + "<BR> 位置誤差:" + Temp_ACC + " (m) <BR>" +
561				 "<p> <input type='button' value='Change this Marker' class='marker-change-button'/></p>" );
562			    Temp_shape.on('popupopen', onMarkerOpen ).on('dragend', Dragging);
563			    if(Temp_LON >= 0) {
564				Temp_shape_clone = L.marker([ Temp_LAT, (Temp_LON - 360) ],
565				    {icon: Temp_ICN, id: Temp_ID, draggable: Temp_Drag_flag}).bindPopup( Temp_NAM + "<BR> 位置誤差:" + Temp_ACC + " (m) <BR>" +
566				 "<p> <input type='button' value='Change this Marker' class='marker-change-button'/></p>");
567				Temp_shape_clone.on('popupopen', onMarkerOpen ).on('dragend', Dragging);
568			    } else {
569				Temp_shape_clone = L.marker([ Temp_LAT, (Temp_LON + 360) ],
570				    {icon: Temp_ICN, id: Temp_ID, draggable: Temp_Drag_flag}).bindPopup( Temp_NAM + "<BR> 位置誤差:" + Temp_ACC + " (m) <BR>" +
571				 "<p> <input type='button' value='Change this Marker' class='marker-change-button'/></p>");
572				Temp_shape_clone.on('popupopen', onMarkerOpen ).on('dragend', Dragging);
573			    }
574			}
575		    }
576		  }
577		}
578
579		function Start_Trace() {
580			Interval_flag = 1;
581			var POS_Data = setInterval( function() {
582				Leaflet_Position_AD001();
583				if(Interval_flag != 1) {
584					clearInterval(POS_Data);
585				}}, Interval * 60 * 1000 );
586		}
587
588		function Stop_Trace() {
589			Inteval_flag = 0;
590		}
591
592		function CSV_Trace() {
593		    for (i = 0; i <= (Data_CSV.length - 1); i++) {
594			if((Data_CSV[i][0] * 1.0) > 90) {
595			    Data_CSV[i][0] = 90;
596			}
597			if((Data_CSV[i][0] * 1.0) < -90) {
598			    Data_CSV[i][0] = -90;
599			}
600			while( (Data_CSV[i][1] * 1.0) < -180) {
601			    Data_CSV[i][1] = Data_CSV[i][1] * 1.0 + 360;
602			}
603			while( (Data_CSV[i][1] * 1.0) > 180) {
604			    Data_CSV[i][1] = Data_CSV[i][1] * 1.0 - 360;
605			}
606		    }
607		    for (i = 0; i <= (Data_CSV.length - 1); i++) {
608			Trace_LAT[ Trace_count ] = Data_CSV[i][0];
609			Trace_LON[ Trace_count ] = Data_CSV[i][1];
610			Trace_NAM[ Trace_count ] = Data_CSV[i][2];
611			Trace_LNK[ Trace_count ] = Data_CSV[i][3];
612			Trace_ACC[ Trace_count ] = Data_CSV[i][4];
613			Trace_ICN[ Trace_count ] = L.icon({
614				iconUrl: Icon_Url,
615				iconSize: [Icon_W, Icon_H],
616				iconAnchor : [Icon_AW, Icon_AH],
617				popupAnchor: [Icon_PW, Icon_PH]
618			});
619			Trace_ID[ Trace_count ] = "Trace" + Trace_ID_count;
620			Trace_Drag_flag[ Trace_count ] = false;
621			Trace_Drag_info[ Trace_count ] = "移動出来ません。";
622			if( Data_CSV[i][0] != "" ) {
623			    if( !isNaN( Data_CSV[i][0] ) ) {
624				Temp = Trace_count;
625				Trace_setting();
626				Trace_set();
627				Layer_AD_002[ Temp ] = Temp_shape;
628				Layer_AD_002[ Temp ].addTo(map_AD_002);
629				Layer_AD_002_clone[ Temp ] = Temp_shape_clone;
630				Layer_AD_002_clone[ Temp ].addTo(map_AD_002);
631			    }
632			}
633			Trace_count = Trace_count + 1;
634			Trace_ID_count = Trace_ID_count + 1;
635		    } 
636		}
637
638	</script>
639  </head>
640  <body onload="init()">
641  <nav id="menu-wrap" style="z-index: 1000;">  
642	<ul id="menu" style="width: 98%;">
643		<li><a href="#">マーカー設定</a>
644		<ul>
645			<li><a href="#" onclick = "Dialog_001()">マーカーのスタイル設定</a></li>
646			<li><a href="#" onclick = "Leaflet_Marker_400()">マーカー単独設置 </a></li>
647			<li><a href="#" onclick = "Leaflet_Marker_402()">マーカー連続設置 </a></li>
648			<li><a href="#" onclick = "Leaflet_Marker_404()">マーカー連続設置終了 </a></li>
649			<li><a href="#" onclick = "Leaflet_Marker_405()">マーカー全消去 </a></li>
650			<li><a href="#" onclick = "Leaflet_Marker_406()">マーカー保存(CSV形式) </a></li>
651			<li><a href="#" onclick = "Leaflet_Marker_407()">マーカー読込(CSV形式) </a></li>
652		</ul>
653		</li>
654		<li><a href="#">本デバイスの位置</a>
655		<ul>
656			<li><a href="#" onclick = "Leaflet_Position_AD001()">本デバイスの位置表示 </a></li>
657			<li><a href="#" onclick = "Leaflet_Trace_AD002()">位置トレース開始/終了 </a></li>
658			<li><a href="#" onclick = "Leaflet_Trace_AD003()">トレース表示消去 </a></li>
659			<li><a href="#" onclick = "Leaflet_Trace_AD004()">トレース保存(CSV形式) </a></li>
660			<li><a href="#" onclick = "Leaflet_Marker_407()">トレースー読込(CSV形式) </a></li>
661		</ul>
662		</li> 
663	</ul>
664  </nav>
665  <div id="map_Layer">
666	<div id="map_AD_002" style="width: 100%; height: 95%; border: solid 1px"></div>
667   ここで使用しているアイコン素材は、<A HREF = "http://flat-icon-design.com/" target="_blank"> FLAT ICON DESIGN </A>および
668  <A HREF = "http://icooon-mono.com/" target="_blank"> ICOON MONO </A>から取得しており、これらアイコン素材データの著作権は TopeconHeroes が保持しています。
669  </div>
670  </body>
671  </html>



 『 Dialog_Additional_002.js 』は、『Dialog_404.js』に位置をトレースするインターバルとトレースの開始/終了を指定する箇所を追加した JavaScriptファイルです。  インターバルは、1分から120分の間でスライダーにより指定できます。

       『 Dialog_Additional_002.js 』のソースファイル内容
001  // Dialog_Additional_002.js	2019/5/6 by T. Fujita
002
003  var Set_Text = "";
004  var Set_Link = " ";
005  var Icon_Url = "../ICONS/BW_Icon/BW_Icons_64/icon_000200_64.png";
006  var Icon_W = 24;
007  var Icon_H = 24;
008  var Icon_AW = Math.round(Icon_W / 2);
009  var Icon_AH = Math.round(Icon_H / 2);
010  var Icon_PW = 0;
011  var Icon_PH = Math.round(Icon_H / 2) * -1;
012  var Max_M_Size = 64;
013  var Min_M_Size = 8;
014  var Data_CSV = new Array();
015  var Interval = 1;
016  var Max_Interval = 120;
017  var Min_Interval = 1; 
018
019  $(document).ready( function() {
020	$("body").append('<div id="dialog_001" style="z-index: 2000;"><p><form name="Form_001"> Title: '+
021  '<input type="text" style="width: 230px;" name="txt_mk" value=""></form><BR>'+
022  '<div>Marker Select:<BR>'+
023  '<select id="Marker_Samples" name="Marker_Samples" style="width:150px;">'+
024  '<option value="1" title="../ICONS/BW_Icon/BW_Icons_64/icon_000200_64.png">001</option>'+
025  '<option value="2" title="../ICONS/BW_Icon/BW_Icons_64/icon_127890_64.png">002</option>'+
026  '<option value="3" title="../ICONS/BW_Icon/BW_Icons_64/icon_114880_64.png">003</option>'+
027  '<option value="4" title="../ICONS/BW_Icon/BW_Icons_64/icon_109890_64.png">004</option>'+
028  '<option value="5" title="../ICONS/BW_Icon/BW_Icons_64/icon_001050_64.png">005</option>'+
029  '<option value="6" title="../ICONS/BW_Icon/BW_Icons_64/icon_119170_64.png">006</option>'+
030  '<option value="7" title="../ICONS/BW_Icon/BW_Icons_64/icon_122590_64.png">007</option>'+
031  '<option value="8" title="../ICONS/BW_Icon/BW_Icons_64/icon_000220_64.png">008</option>'+
032  '<option value="9" title="../ICONS/BW_Icon/BW_Icons_64/icon_133000_64.png">009</option>'+
033  '<option value="10" title="../ICONS/BW_Icon/BW_Icons_64/icon_115740_64.png">010</option>'+
034  '<option value="11" title="../ICONS/BW_Icon/BW_Icons_64/icon_115710_64.png">011</option>'+
035  '<option value="12" title="../ICONS/BW_Icon/BW_Icons_64/icon_115750_64.png">012</option>'+
036  '<option value="13" title="../ICONS/BW_Icon/BW_Icons_64/icon_115720_64.png">013</option>'+
037  '<option value="14" title="../ICONS/BW_Icon/BW_Icons_64/icon_147060_64.png">014</option>'+
038  '<option value="15" title="../ICONS/BW_Icon/BW_Icons_64/icon_127900_64.png">015</option>'+
039  '<option value="16" title="../ICONS/BW_Icon/BW_Icons_64/icon_109850_64.png">016</option>'+
040  '<option value="17" title="../ICONS/BW_Icon/BW_Icons_64/icon_111050_64.png">017</option>'+
041  '<option value="18" title="../ICONS/BW_Icon/BW_Icons_64/icon_111060_64.png">018</option>'+
042  '<option value="19" title="../ICONS/BW_Icon/BW_Icons_64/icon_111520_64.png">019</option>'+
043  '<option value="20" title="../ICONS/BW_Icon/BW_Icons_64/icon_127100_64.png">020</option>'+
044  '<option value="21" title="../ICONS/BW_Icon/BW_Icons_64/icon_127110_64.png">021</option>'+
045  '<option value="22" title="../ICONS/BW_Icon/BW_Icons_64/icon_127120_64.png">022</option>'+
046  '<option value="23" title="../ICONS/BW_Icon/BW_Icons_64/icon_127130_64.png">023</option>'+
047  '<option value="24" title="../ICONS/BW_Icon/BW_Icons_64/icon_127140_64.png">024</option>'+
048  '<option value="25" title="../ICONS/BW_Icon/BW_Icons_64/icon_127150_64.png">025</option>'+
049  '<option value="26" title="../ICONS/BW_Icon/BW_Icons_64/icon_127160_64.png">026</option>'+
050  '<option value="27" title="../ICONS/BW_Icon/BW_Icons_64/icon_001720_64.png">027</option>'+
051  '<option value="28" title="../ICONS/BW_Icon/BW_Icons_64/icon_100590_64.png">028</option>'+
052  '<option value="29" title="../ICONS/BW_Icon/BW_Icons_64/icon_100600_64.png">029</option>'+
053  '<option value="30" title="../ICONS/BW_Icon/BW_Icons_64/icon_102040_64.png">030</option>'+
054  '<option value="31" title="../ICONS/BW_Icon/BW_Icons_64/icon_104940_64.png">031</option>'+
055  '<option value="32" title="../ICONS/BW_Icon/BW_Icons_64/icon_107470_64.png">032</option>'+
056  '<option value="33" title="../ICONS/BW_Icon/BW_Icons_64/icon_108510_64.png">033</option>'+
057  '<option value="34" title="../ICONS/BW_Icon/BW_Icons_64/icon_108730_64.png">034</option>'+
058  '<option value="35" title="../ICONS/BW_Icon/BW_Icons_64/icon_111960_64.png">035</option>'+
059  '<option value="36" title="../ICONS/BW_Icon/BW_Icons_64/icon_111970_64.png">036</option>'+
060  '<option value="37" title="../ICONS/BW_Icon/BW_Icons_64/icon_112440_64.png">037</option>'+
061  '<option value="38" title="../ICONS/BW_Icon/BW_Icons_64/icon_112450_64.png">038</option>'+
062  '<option value="39" title="../ICONS/BW_Icon/BW_Icons_64/icon_113000_64.png">039</option>'+
063  '<option value="40" title="../ICONS/BW_Icon/BW_Icons_64/icon_113010_64.png">040</option>'+
064  '<option value="41" title="../ICONS/BW_Icon/BW_Icons_64/icon_114520_64.png">041</option>'+
065  '<option value="42" title="../ICONS/BW_Icon/BW_Icons_64/icon_114530_64.png">042</option>'+
066  '<option value="43" title="../ICONS/BW_Icon/BW_Icons_64/icon_114770_64.png">043</option>'+
067  '<option value="44" title="../ICONS/BW_Icon/BW_Icons_64/icon_114780_64.png">044</option>'+
068  '<option value="45" title="../ICONS/BW_Icon/BW_Icons_64/icon_128020_64.png">045</option>'+
069  '<option value="46" title="../ICONS/BW_Icon/BW_Icons_64/icon_124660_64.png">046</option>'+
070  '<option value="47" title="../ICONS/BW_Icon/BW_Icons_64/icon_127930_64.png">047</option>'+
071  '<option value="48" title="../ICONS/Flat_Icons/s64_f_business_72_0nbg.png">048</option>'+
072  '<option value="49" title="../ICONS/Flat_Icons/s64_f_business_76_0nbg.png">049</option>'+
073  '<option value="50" title="../ICONS/Flat_Icons/s64_f_object_6_2nbg.png">050</option>'+
074  '<option value="51" title="../ICONS/Flat_Icons/s64_f_object_7_2nbg.png">051</option>'+
075  '<option value="52" title="../ICONS/Flat_Icons/s64_f_object_24_1nbg.png">052</option>'+
076  '<option value="53" title="../ICONS/Flat_Icons/s64_f_object_25_0nbg.png">053</option>'+
077  '<option value="54" title="../ICONS/Flat_Icons/s64_f_object_27_2nbg.png">054</option>'+
078  '<option value="55" title="../ICONS/Flat_Icons/s64_f_object_155_1nbg.png">055</option>'+
079  '<option value="56" title="../ICONS/Flat_Icons/s64_f_object_164_2nbg.png">056</option>'+
080  '<option value="57" title="../ICONS/Flat_Icons/s64_f_object_167_0nbg.png">057</option>'+
081  '<option value="58" title="../ICONS/Flat_Icons/s64_f_object_173_0nbg.png">058</option>'+
082  '<option value="59" title="../ICONS/Flat_Icons/s64_f_object_115_0nbg.png">059</option>'+
083  '<option value="60" title="../ICONS/Flat_Icons/s64_f_object_116_1nbg.png">060</option>'+
084  '</select></div><BR>'+
085  '<div><tr><td><BR><div id="num_001"></div><div id="slider_001"></div>'+
086  '<BR><BR><div id="Selected_Icon">Selected Icon: <img src=""></div>'+
087  '</td></tr></div><BR>(注) ここで使用しているアイコン素材は、<A HREF = "http://flat-icon-design.com/" target="_blank"> FLAT ICON DESIGN </A>および' +
088  '<A HREF = "http://icooon-mono.com/" target="_blank"> ICOON MONO </A>から取得しており、<BR>' +
089  'これらアイコン素材データの著作権は TopeconHeroes が保持しています。</p><div>');
090
091	$('#Selected_Icon img').attr('src', Icon_Url);
092
093	$('#dialog_001').dialog({
094		autoOpen: false,
095		title: 'Please Set the Icon Style.',
096		height: 450,
097		width: 300,
098		closeOnEscape: true,
099		modal: true,
100		buttons: {
101			"設定": function(){
102				Set_Text = document.Form_001.txt_mk.value;
103				var Temp = Marker_Samples.options[Marker_Samples.selectedIndex].title;
104				Icon_Url = Temp;
105				Icon_AW = Math.round(Icon_W / 2);
106				Icon_AH = Math.round(Icon_H / 2);
107				Icon_PW = 0;
108				Icon_PH = Math.round(Icon_H / 2) * -1;
109				Change_Marker(); 
110				$(this).dialog('close');
111			}
112		}
113	});
114
115	$("body").append('<div id="dialog_002" style="z-index: 2000;"><p><form name="Form_002">'+
116  'Title: <input type="text" style="width: 230px;" name="txt_dat" value=""></form></p><HR>'+
117  '<p> File Select:'+
118  '<form name="subinput">'+
119  '<center>CSVファイルを指定してください。<BR><BR>'+
120  '  <TD><input type="file" name="select" id="select_002" value=""></TD>'+
121  '  <BR><BR>'+
122  '</center></p></div>');
123
124	$('#dialog_002').dialog({
125		autoOpen: false,
126		title: 'CSVファイル選択',
127		height: 400,
128		width: 300,
129		closeOnEscape: true,
130		modal: true,
131		show: "fade",
132		hide: "fade",
133		buttons: {
134			"Select the Marker": function(){
135				Dialog_001();
136			},
137			"Set Markers": function(){
138				CSV_Data();
139				CSV_Markers();
140			},
141			"Set Traced Point": function(){
142				CSV_Data();
143				CSV_Trace();
144			}, 
145			"Close": function(){
146				$(this).dialog('close');
147			}
148		}
149	});
150
151	$("body").append('<div id="dialog_AD_001" style="z-index: 2000;"><p><form name="Form_AD_001">'+
152  'Status: <input type="text" style="width: 230px;" name="txt_AD_001" value=""></form></p><HR>'+
153  '<div id="num_AD_001"></div><div id="slider_AD_001"></div>');
154
155	$('#dialog_AD_001').dialog({
156		autoOpen: false,
157		title: 'Position Trace',
158		height: 180,
159		width: 300,
160		closeOnEscape: true,
161		modal: false,
162		show: "fade",
163		hide: "fade",
164		buttons: {
165			"Start the Trace": function(){
166				document.Form_AD_001.txt_AD_001.value = " Trace in Progress ";
167				Start_Trace();
168			},
169			" Stop & Close ": function(){
170				document.Form_AD_001.txt_AD_001.value = " Stop ";
171				Interval_flag = 0;
172				Stop_Trace();
173				$(this).dialog('close');
174			}
175		}
176	}); 
177
178	$('#slider_001, #slider_AD_001').slider( {
179		orientation: 'horizontal',
180		range: 'min',
181		max: 255,
182		value: 127,
183		slide: refreshSwatch,
184		change: refreshSwatch
185	} );
186	$( '#slider_001' ).slider( 'value', 96 );
187	$( '#slider_AD_001' ).slider( 'value', 1 ); 
188	$( '#Marker_Samples' ).msDropDown({
189		visibleRows:4,
190		on:{change:function(data, ui) {
191			Icon_Url = Marker_Samples.options[Marker_Samples.selectedIndex].title;
192			$('#Selected_Icon img').attr('src', Icon_Url);
193		}}
194	});
195  });
196
197
198  function Dialog_001() {
199	document.Form_001.txt_mk.value = "";
200	$('#dialog_001').dialog('open');
201  }
202
203  function Dialog_002() {
204	CSV_Data();
205	document.Form_002.txt_dat.value = "";
206	$('#dialog_002').dialog('open');
207  }
208
209  function Dialog_AD_001() {
210	if(Interval_flag * 1.0 == 0) {
211		document.Form_AD_001.txt_AD_001.value = " Stop ";
212	} else {
213		document.Form_AD_001.txt_AD_001.value = " Trace in Progress ";
214	}
215	$('#dialog_AD_001').dialog('open');
216  } 
217
218
219  function refreshSwatch() {
220	Icon_W = Math.round($('#slider_001').slider('value') / 255 * Max_M_Size);
221	if (Icon_W <= Min_M_Size) { Icon_W = Min_M_Size; }
222	Icon_H = Icon_W;
223	$( '#num_001' ).html( 'Marker Size: ' + Icon_W );
224	$( '#Selected_Icon img' ).css( { width: Icon_W, height: Icon_H } );
225
226	Interval = Math.round($('#slider_AD_001').slider('value') / 255 * Max_Interval);
227	if (Interval <= Min_Interval) { Interval = Min_Interval; }
228	$( '#num_AD_001' ).html( 'Interval Time (Minutes) : ' + Interval ); 
229  }
230
231  function CSV_Data() {
232	if(window.File) {
233		var select = document.getElementById('select_002');
234		select.addEventListener('change', function(e) {
235		    var fileData = e.target.files[0];
236
237		    Data_CSV = [];
238		    var reader = new FileReader();
239		    reader.onerror = function() {
240			alert('ファイル読み込みに失敗しました。');
241		    }
242		    reader.onload = function() {
243			var lineArr = reader.result.split("\r\n");
244			for (var i = 0; i < lineArr.length; i++) {
245				Data_CSV[i] = lineArr[i].split(",");
246			}
247		    }
248		    reader.readAsText(fileData);
249		}, false);
250	}
251  }




Previous Page Next Page

- 10 -