Language
ログイン
言語設定
X
English
日本語 [Japanese]
オープンデータを使ってアプリを作ろう
アプリケーションの作成と公開をサポートするサイト
お問い合わせ
HOME
チュートリアル
アプリ新規作成
アプリのFork
公開アプリ一覧
アプリ作品の情報
マップ
地図
愛媛県
松山市
マッピング
松山フリーWiFiマッピングデモ
fullscreen
ko09
松山フリーWiFiのオープンデータを使ったサンプルデモです。
3
評価指数
いいね!
2
Loading...
このアプリ作品で使われているデータと同じ形式のデータを作成し、このアプリに適用することができます。
ひな形として使うファイルをリストから選択し、"Create Templete"をクリックして下さい。
アプリケーション
fullscreen
play
stop
reload
Play
JavaScript
CSS
HTML
概要
保存した実行結果
松山フリーWiFiマッピングデモ
https://maps.googleapis.com/maps/api/js
松山フリーWiFiマッピングデモ
松山フリーWiFiマッピングデモ
松山フリーWiFiマッピングデモ
松山フリーWiFiマッピングデモ
/**************************************/ /*****逆マッシュアップ用設定**************/ /* 「入力データ」タブから、位置情報付きの任意のデータに 差し替えるだけでマッピングが反映されます。 (※1つデータに複数データある場合は、1つだけ選択してください) */ var //表示させたい項目の「テキスト文字」と「列番号」 lists = [ "名称:", 3, "住所:", 4, "利用時間:", 6, "休日:", 7, "SSID:", 9 ]; /*************************************/ /*************************************/ //データの取得 var topTitle = document.getElementById('topTitle'); var workId = LinkData.getWorks(); var workName = LinkData.getWorkName(workId); var fileName = LinkData.getFiles(workId); var subjects = LinkData.getSubjects(workId, fileName); var markers = []; var infoList = {}; var infoState = null; //タイトル生成 topTitle.textContent = fileName; //データオブジェクト生成 for(var subject in subjects) { infoList[subject] = LinkData.getTriplesBySubject(workId, fileName, subjects[subject]); } //************マップ生成処理**************************************** var mapBox = document.getElementById('mapBox'); for(var i=0; i<infoList[1].length; i++) { var lat = infoList[1][i].property.indexOf('#lat'); var lat2 = infoList[1][i].property.indexOf('#latitude'); var lat3 = infoList[1][i].property.indexOf('#%E7%B7%AF%E5%BA%A6'); if(lat > 0 || lat2 > 0 || lat3 > 0) { var latlng = new google.maps.LatLng(infoList[1][i].object, infoList[1][i+1].object); createMarker(latlng, map, item); } } var mapOptions = { zoom: 14, center: latlng, mapTypeControl: false, mapTypeId: google.maps.MapTypeId.TERRAIN, scrollwheel: false }; var map = new google.maps.Map(mapBox, mapOptions); //マーカーの配置処理 for (var item in infoList) { for(var i=0; i<infoList[item].length; i++) { var lat = infoList[item][i].property.indexOf('#lat'); var lat2 = infoList[item][i].property.indexOf('#latitude'); var lat3 = infoList[item][i].property.indexOf('#%E7%B7%AF%E5%BA%A6'); if(lat > 0 || lat2 > 0 || lat3 > 0) { var latlng = new google.maps.LatLng(infoList[item][i].object, infoList[item][i+1].object); createMarker(latlng, map, item); } } } function createMarker(latlng, map, item) { var infoWindow = new google.maps.InfoWindow(); var marker = new google.maps.Marker({ position: latlng, map: map }); //クリックイベント処理 google.maps.event.addListener(marker, 'click', function() { if(infoState) { infoState.close(); } infoWindow.setContent(getInfo(item)); infoWindow.open(map, marker); infoState = infoWindow; }); } //表示項目の生成 function getInfo(data) { var dataList = "<ul style='list-style-type: none;'>"; for(var i=0; i<lists.length;i+=2) { dataList += "<li>" + lists[i] + infoList[data][lists[i+1]].object + "</li>"; } dataList += "</ul>"; return dataList; } /*********************************************************/ /*********JavaScriptでの各種データ取得API一覧***********/ /* 1,workIdの取得 LinkData.getWorks() 2,workNameの取得(データ名) LinkData.getWorkName(workId) 3,fileNameの取得(データファイル名) LinkData.getFiles(workId) 4,property(データの縦軸)のリストを取得 LinkData.getProperties(workId, fileName) 5,property毎のデータ取得 LinkData.getTriplesByProperty(workId, fileName, property) 6,subject(データの横軸)のリストを取得 LinkData.getSubjects(workId, fileName) 7,subject毎のデータ取得 LinkData.getTriplesBySubject(workId, fileName, subject) 8,全データの取得 LinkData.getTriples(workId, fileName) */ /********データ取得例*****************************/ //subject毎のデータ取得 /* for(var subject in subjects) { var subjectList = LinkData.getTriplesBySubject(workId, fileName, subjects[subject]) for(var item in subjectList) { console.log(subjectList[item]); } } */ //property毎のデータ取得 /* for(var property in properties) { var propertyList = LinkData.getTriplesBySubject(workId, fileName, properties[property]) for(var item in propertyList) { console.log(propertyList[property]); } } */ /***********************************************************/
.map { max-width: 100% ; height: 0 ; margin: 0 ; padding: 0 0 56.25% ; overflow: hidden ; position: relative ; top: 0 ; left: 0 ; } .map > div { position: absolute ; top: 0 ; left: 0 ; width: 100% ; height: 100% ; margin: 0 ; padding: 0 ; }
<h3 id="topTitle"></h3> <div class="map"> <div id="mapBox">ここに地図が表示されます</div> </div>
https://maps.googleapis.com/maps/api/js
このアプリをForkして新しいアプリを作る
ダウンロード
Fork元のアプリは更新されました.
>>see
アプリは更新されました.
>>see
ツイート
このアプリ作品をwebから探す
作者
メッセージ送信
ko09
実行回数
253
ウェブサイト
ライセンス
Fork count
0
作成日
2016年2月18日
最終更新日
2016年2月22日
"
" コミュニティへの投稿が完了しました。投稿したアプリ作品は、コミュニティ管理者によって承認されるとコミュニティに公開されます。
エントリー先のコミュニティとカテゴリ名を選択し、「エントリー」ボタンをクリックして下さい。
チュートリアル
アプリ作品の削除をする場合は削除をクリックしてください
送信者
名前
*
E-mail
*
件名
*
メッセージ
*
アクセス認証
*
送信
キャンセル
入力データ
関連アイデア
このアプリ作品で入力データとして使われているデータ作品のリストです。
チェックボックスの選択を変更すると、入力データを変更して実行することができます。
松山フリーWiFiスポット
作者: ko09
更新日: 2016年2月20日
181 ダウンロード
,
1 アプリケーション
Matsuyama_free_wifi_spot
自分のデータを入力する
このアプリを使ったアイデアはまだ公開されていません
アイデアを作成
ニュースフィード
linkdata.org に関するツイート