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 』をクリックして下さい。
連続して位置をトレースしてみるの表示例
ソースファイルの内容で赤字の部分が追記した箇所です。
『 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