Language
Login
Language Setting
X
English
日本語 [Japanese]
about this App
クマ目撃情報
useful
6
Loading...
/* This is a Example program to retrieve and display the data. Press the Run button on the right of the screen (described the behavior of the Example program below). Please create a new application rewrite this program work. */ //目撃情報を取得 var all_data; function initialize(){ all_data = new Array(); // データをLinkDataから取得 tmp_a_data = new Array(); $.each(LinkData.getWorks(), function(workKey, workValue) { $.each(LinkData.getFiles(workValue), function(fileKey, fileValue) { $.each(LinkData.getSubjects(workValue, fileValue), function(subjKey, subjValue) { var tmp_data = {} tmp_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/rdf1s2595i#" + encodeURIComponent("日付")){ tmp_data["date"] = objValue; }else if(propValue == "http://www.w3.org/2003/01/geo/wgs84_pos#lat"){ tmp_data["lat"] = objValue; }else if(propValue == "http://www.w3.org/2003/01/geo/wgs84_pos#long"){ tmp_data["lng"] = objValue; }else if(propValue == "http://linkdata.org/property/rdf1s2595i#" + encodeURIComponent("状況")){ tmp_data["situation"] = objValue; }else if(propValue == "http://linkdata.org/property/rdf1s2595i#" + encodeURIComponent("備考")){ tmp_data["foods"] = objValue; }else if(propValue == "http://linkdata.org/property/rdf1s2595i#" + encodeURIComponent("場所")){ tmp_data["area"] = objValue; } }); }); tmp_a_data.push(tmp_data); }); }); }); //全データ all_data = tmp_a_data; //ポイントの設定 var latlng, y; var data = new Array(); var year = new Array(); var gmarker_data = new Array(); var myMap = makeGmap(); for (var i in all_data) { //***の種類で区分する // 緯度経度から中心点をつくる latlng = new google.maps.LatLng(all_data[i].lat,all_data[i].lng); if ((all_data[i].situation == "目撃")){ gmarker_data.push({ pos: latlng, ti: all_data[i].situation, ic: "http://app.linkdata.org/asset/c7735142.png", dt: all_data[i].date, food: all_data[i].foods }); } else if(all_data[i].situation == "農作物被害"){ gmarker_data.push({ pos: latlng, ti: all_data[i].situation, ic: "http://app.linkdata.org/asset/5cd0bb65.png", dt: all_data[i].date, food: all_data[i].foods }); } else if(all_data[i].situation == "捕獲"){ gmarker_data.push({ pos: latlng, ti: all_data[i].situation, ic: "http://app.linkdata.org/asset/9a2887f0.png", dt: all_data[i].date, food: all_data[i].foods }); } else{ gmarker_data.push({ pos: latlng, ti: all_data[i].situation, ic: "http://app.linkdata.org/asset/1f7ef153.png", dt: all_data[i].date, food: all_data[i].foods }); } makeGmarker(gmarker_data[i], myMap); y = all_data[i].date.substr(0,4); if($.inArray(y, year) < 0) year.push(y); gmarker_data[i].year = y; }; //for toji // 年のselectを生成 year.sort(); for (var i in year) { $("#year").append($("<option>").val(year[i]).text(year[i])); } // 年を選択されたときに、その年の情報だけを表示する $('#year').change(function(){ var myMap = makeGmap() for (var i in gmarker_data) { if($(this).val() == "all" || gmarker_data[i].year == $(this).val()) { makeGmarker(gmarker_data[i], myMap); } } }); };//initialize toji // Mapの生成 function makeGmap() { //地図センター緯度経度の初期値は「須坂市役所」 var myLatLng = new google.maps.LatLng(36.651080,138.307227); return new google.maps.Map(document.getElementById('result'), { zoom: 12, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true, scrollwheel: true, draggable: true }); } // Map上に表示するマーカーの生成 function makeGmarker(data, gmap) { var marker = new google.maps.Marker({ position: data.pos, // 緯度・経度は地図の中心 title: data.ti, // ツールチップ openInfo:true, icon: data.ic, map: gmap }); // ウィンドウに表示するデータをつくる var content = data.dt + '<br>' + data.ti; if(data.food != undefined){ content = content + '<br>' + data.food; } // 地図上にウィンドウで表示 attachMessage(marker, content); } // 地図のマーカーをクリックするとウィンドウを表示する処理 function attachMessage(marker, msg) { google.maps.event.addListener(marker, 'click', function(event) { new google.maps.InfoWindow({ content: msg }).open(marker.getMap(), marker); }); }; window.onload = function() { $(function(){ initialize(); }); };
#pageContainer .header .headerContent .pageTitle { font-size: 20px; font-weight: bold; padding: 5px; } #pageContainer .header .headerContent { font-color: ff9900; } body { -webkit-text-size-adjust: 100%; } #pageContainer .header{ height: 35px; color: #ffffff; text-align: center; background-color: #cd853f; } #pageContainer .footer { height: 35px; color: #ffffff; text-align: center; background-color: #cd853f; font-size: 10px; }
<div id="pageContainer"> <div class="header"> <div class="headerContent cf"> <div class="pageTitle">ツキノワグマ 目撃情報</div> </div> </div> <table> <tr> <td><img src="http://app.linkdata.org/asset/9a2887f0.png"></td> <td><img src="http://app.linkdata.org/asset/5cd0bb65.png"></td> <td><img src="http://app.linkdata.org/asset/c7735142.png"></td> <td><img src="http://app.linkdata.org/asset/1f7ef153.png"></td> <td rowspan="2"> <b>出没年:</b> <select id="year"> <option value="all">すべて</option> </select> </td> </tr> <tr> <td><b>捕獲</b></td> <td><b>被害</b></td> <td><b>目撃</b></td> <td><b>出没形跡</b></td> </tr> </table> <div id="result" style="width: 350px; height: 350px; border: 1px solid Gray;"></div> </div> <br/> <div class="footer">このアプリは長野県須坂市のオープンデータ<br/> <a href="http://opendata.city.suzaka.nagano.jp/" target="_blank"> 須坂市ツキノワグマ出没情報</a> を利用しています。</div>
Preview
Input Data
ReadMe
Snapshots
LinkData Work
Table Data
須坂市ツキノワグマ出没情報
Contributor:長野県須坂市
Update:Jun 7, 2018
3672 Downloads, 1 Applications
須坂市ツキノワグマ出没情報(平成24年~平成29年)
suzakacity_kuma
Add LinkData work(LinkData)
Link http://app.linkdata.org/run/app1s903i?tab=readme
jquery-1.7.1.min.js
https://maps.googleapis.com/maps/api/js?key=AIzaSyDAbLPQ3XiDZRWkVgQJg53ywpN__Z0WLLM&sensor=false&language=ja
Work
Add
Clear
insert work id or work name.