Language
ログイン
言語設定
X
English
日本語 [Japanese]
オープンデータを使ってアプリを作ろう
アプリケーションの作成と公開をサポートするサイト
お問い合わせ
HOME
チュートリアル
アプリ新規作成
アプリのFork
公開アプリ一覧
アプリ作品の情報
マップ
地震
地震マップ
fullscreen
岡田崇志
1
評価指数
いいね!
1
Loading...
このアプリ作品で使われているデータと同じ形式のデータを作成し、このアプリに適用することができます。
ひな形として使うファイルをリストから選択し、"Create Templete"をクリックして下さい。
アプリケーション
fullscreen
play
stop
reload
Play
JavaScript
CSS
HTML
概要
保存した実行結果
地震マップ
jquery-1.11.2.min.js
http://maps.googleapis.com/maps/api/js?sensor=false
地震マップ
地震マップ
地震マップ
地震マップ
var map; var earthquake_data_all; function initialize(lat, lon) { var myLatLng = new google.maps.LatLng(lat, lon); var mapOptions = { center: myLatLng, zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); // 地震データの読み込み earthquake_data_all = new Array(); // Work loop $.each(LinkData.getWorks(), function(workKey, workValue) { // File loop $.each(LinkData.getFiles(workValue), function(fileKey, fileValue) { // Subject loop $.each(LinkData.getSubjects(workValue, fileValue), function(subjKey, subjValue) { var earthquake_data = {} earthquake_data["id"] = subjValue; $.each(LinkData.getProperties(workValue, fileValue), function(propKey, propValue) { $.each(LinkData.getObjects(workValue, fileValue, subjValue, propValue), function(objKey, objValue) { if(propValue == "http://linkdata.org/property/rdf1s3493i#" + encodeURIComponent("発生日")){ earthquake_data["date"] = objValue; }else if(propValue == "http://linkdata.org/property/rdf1s3493i#" + encodeURIComponent("発生時刻")){ earthquake_data["time"] = objValue; }else if(propValue == "http://www.w3.org/2003/01/geo/wgs84_pos#lat"){ earthquake_data["lat"] = objValue; }else if(propValue == "http://www.w3.org/2003/01/geo/wgs84_pos#long"){ earthquake_data["lng"] = objValue; }else if(propValue == "http://linkdata.org/property/rdf1s3493i#" + encodeURIComponent("深さ")){ earthquake_data["depth"] = objValue; }else if(propValue == "http://linkdata.org/property/rdf1s3493i#" + encodeURIComponent("マグニチュード")){ earthquake_data["magnitude"] = objValue; }else if(propValue == "http://linkdata.org/property/rdf1s3493i#" + encodeURIComponent("最大震度")){ earthquake_data["scale"] = objValue; } }); }); earthquake_data_all.push(earthquake_data); //link to map display if coordinates exist }); }); }); // マーカーを作る makeMarker(); } // マーカーを作る function makeMarker() { for (var i = 0; i < earthquake_data_all.length; i ++) { makeMarkerSub(earthquake_data_all[i]); } } function makeMarkerSub(earthquake_data) { // 適切なマーカーアイコンを選択 var image = null; if (earthquake_data.scale == '1') { image = "http://app.linkdata.org/asset/a502a960.png"; } else if (earthquake_data.scale == '2') { image = "http://app.linkdata.org/asset/cc8f5396.png"; } else if (earthquake_data.scale == '3') { image = "http://app.linkdata.org/asset/a3c3359b.png"; } else if (earthquake_data.scale == '4') { image = "http://app.linkdata.org/asset/99eea85a.png"; } else if (earthquake_data.scale == 'A') { image = "http://app.linkdata.org/asset/922a64ab.png"; } else if (earthquake_data.scale == 'B') { image = "http://app.linkdata.org/asset/64e1f88d.png"; } else if (earthquake_data.scale == 'D') { image = "http://app.linkdata.org/asset/a1f204c5.png"; } else if (earthquake_data.scale == 'C') { image = "http://app.linkdata.org/asset/b91c895f.png"; } else if (earthquake_data.scale == '7') { image = "http://app.linkdata.org/asset/588aab26.png"; } var marker = new google.maps.Marker({ position: new google.maps.LatLng(earthquake_data.lat, earthquake_data.lng), map: map, icon: image, title: earthquake_data.id }); var content = '発生日時:' + earthquake_data.date + " " + earthquake_data.time + '<br />'; content += '最大震度:' + earthquake_data.scale + '<br />'; content += 'マグニチュード:' + earthquake_data.magnitude + '<br />'; content += '深さ(km):' + earthquake_data.depth + '<br />'; google.maps.event.addListener(marker, 'click', function() { var infowindow = new google.maps.InfoWindow({ content: content }); infowindow.open(map, marker); }); return marker; } window.onload = function() { $(function(){ initialize(35.690551, 139.69257); }); };
span.highlight {color: red;} span.propertyName {color: gray;} span.subject { color: blue; } span.object{ color: black; } body { background: white; } a, a span { text-decoration: underline; } a:hover, a span:hover { text-decoration: none; }
<head> <meta name="viewport" content="user-scalable=yes"> </head> <div id="map_canvas" style="width:100%; height:100%;"></div>
テスト中...
レコード数が多いせいか、表示に時間が掛かります。
jquery-1.11.2.min.js
http://maps.googleapis.com/maps/api/js?sensor=false
このアプリをForkして新しいアプリを作る
ダウンロード
Fork元のアプリは更新されました.
>>see
アプリは更新されました.
>>see
ツイート
このアプリ作品をwebから探す
作者
メッセージ送信
岡田崇志
実行回数
188
ウェブサイト
ライセンス
Fork count
0
作成日
2015年8月20日
最終更新日
2015年8月20日
"
" コミュニティへの投稿が完了しました。投稿したアプリ作品は、コミュニティ管理者によって承認されるとコミュニティに公開されます。
エントリー先のコミュニティとカテゴリ名を選択し、「エントリー」ボタンをクリックして下さい。
チュートリアル
アプリ作品の削除をする場合は削除をクリックしてください
送信者
名前
*
E-mail
*
件名
*
メッセージ
*
アクセス認証
*
送信
キャンセル
入力データ
関連アイデア
このアプリ作品で入力データとして使われているデータ作品のリストです。
チェックボックスの選択を変更すると、入力データを変更して実行することができます。
震源データ
作者: 岡田崇志
更新日: 2015年8月20日
172 ダウンロード
,
1 アプリケーション
earthquake_data_2014
自分のデータを入力する
このアプリを使ったアイデアはまだ公開されていません
アイデアを作成
ニュースフィード
linkdata.org に関するツイート