Language
Login
Language Setting
X
English
日本語 [Japanese]
about this App
ユッケマップ
useful
1
Loading...
//緯度(lat)と経度(lng)の候補 var lat_list = ["緯度", "lat", "latitude", "Latitude"]; var lng_list = ["経度", "lng", "long", "longitude", "Longitude"]; // Work loop mappingDataList = []; $.each(LinkData.getWorks(), function(workKey, workValue) { // File loop $.each(LinkData.getFiles(workValue), function(fileKey, fileValue) { var this_file = []; this_file.push(workValue); this_file.push(fileValue); var this_shorten_property_list = []; for (i = 0; i < LinkData.getProperties(workValue, fileValue).length; i++) { this_shorten_property_list.push(getLastName(LinkData.getProperties(workValue, fileValue)[i])); }; var this_lat = "null"; var this_lng = "null"; for (i = 0; i < this_shorten_property_list.length; i++) { for (j = 0; j < lat_list.length; j++) { if (this_shorten_property_list[i] == lat_list[j]) { this_lat = decodeURIComponent(this_shorten_property_list[i]) //デコードして日本語なら日本語へ } } for (j = 0; j < lng_list.length; j++) { if (this_shorten_property_list[i] == lng_list[j]) { this_lng = decodeURIComponent(this_shorten_property_list[i]) //デコードして日本語なら日本語へ } } } this_file.push(this_lat); this_file.push(this_lng); $.each(LinkData.getSubjects(workValue, fileValue), function(subjKey, subjValue) { var this_suj_latlng = []; $.each(LinkData.getTriplesBySubject(workValue, fileValue, subjValue), function(tripleKey, tripleValue) { //$("#this_console").append(tripleValue.property); //$("#this_console").append(this_lat); if (this_lat == getLastName(tripleValue.property)) { this_suj_latlng.unshift(tripleValue.object); }; if (this_lng == getLastName(tripleValue.property)) { this_suj_latlng.push(tripleValue.object); }; }); this_file.push(this_suj_latlng); }); if (this_file[2] == "null" || this_file[3] == "null") { $("#error_append").html("error"); $("#error_contents").append( "In " + LinkData.getWorkName(workValue) + ":" + fileValue + ", cannot find properties mean \"Latitude\" or Longitude<br><hr>" ) } else { mappingDataList.push(this_file); }; }); }); //ここから描写 var map = L.map('map').setView([38.258595, 137.6850225], 5); L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imagery © <a href="http://mapbox.com">Mapbox</a>', id: 'mapbox.streets' }).addTo(map); var MasterGroup = L.layerGroup(); MasterGroup.addTo(map); //緯度経度を探知したデータをマッピングリストに追加 for (i = 0; i < mappingDataList.length; i++) { $("#add_content").append( '<div class="row" style="text-align:center;width:85%">' + '<div class="card z-depth-1">' + '<div class="card-content">' + '<center><div class="card-panel" style="text-align:center;background-color:#28ad8d;width:100%;font-size:large;color:white">' + mappingDataList[i][1] + '</div></center>' + '<div class="switch"><label>Off<input type="checkbox" name="' + mappingDataList[i][1] + '" value="' + mappingDataList[i][1] + '"><span class="lever"></span>On</label></div><br><br>' + /////円の半径選択 '<a class=\"btn\" style=\"width:60%;border-radius:20px;background-color:gray;\">radius</a><br>' + '<center><form action="#" ><p class="range-field""><center><input type="range" id="r_' + mappingDataList[i][1] + '" min="1" max="30" style="width:60%"/></center></p></form></center>' + /////色選択 '<a class=\"btn\" style=\"width:60%;border-radius:20px;background-color:gray;\">color</a><br>' + '<form action="#">' + '<p><center>' + '<input class="with-gap" name="c_' + mappingDataList[i][1] + '" type="radio" checked="checked" id="c_' + mappingDataList[i][1] + 'select1" value="red" />' + '<label for="c_' + mappingDataList[i][1] + 'select1">red</label>' + '</center></p>' + '<p><center>' + '<input class="with-gap" name="c_' + mappingDataList[i][1] + '" type="radio" id="c_' + mappingDataList[i][1] + 'select2" value="blue" />' + '<label for="c_' + mappingDataList[i][1] + 'select2">blue</label>' + '</center></p>' + '<p><center>' + '<input class="with-gap" name="c_' + mappingDataList[i][1] + '" type="radio" id="c_' + mappingDataList[i][1] + 'select3" value="green" />' + '<label for="c_' + mappingDataList[i][1] + 'select3">green</label>' + '</center></p>' + '<p><center>' + '<input class="with-gap" name="c_' + mappingDataList[i][1] + '" type="radio" id="c_' + mappingDataList[i][1] + 'select4" value="yellow" />' + '<label for="c_' + mappingDataList[i][1] + 'select4">yellow</label>' + '</center></p>' + '</form>' + '</div>' + '</div>' + '</div>' ); } //mappingクリック時にオプションを設定し、マッピングする $("#mapping").click(function() { for (i = 0; i < mappingDataList.length; i++) { if ($('input[name=' + mappingDataList[i][1] + ']:eq(0)').prop('checked')) { var this_r = $("input[id='r_" + mappingDataList[i][1] + "']").val(); var this_color = $("input:radio[name='c_" + mappingDataList[i][1] + "']:checked").val(); for (j = 4; j < mappingDataList[i].length; j++) { L.circleMarker([mappingDataList[i][j][0], mappingDataList[i][j][1]], { radius: this_r * 2, color: 'transparent', fillColor: this_color, fillOpacity: 0.5 }).addTo(MasterGroup); } } }; }); //clearクリック時にレイヤを初期化 $("#clear").click(function() { MasterGroup.clearLayers(); }) // get the last name of the string separated with # and / function getLastName(string) { string = decodeURIComponent(string); var sharp = string.split("#"); var slash = sharp[sharp.length - 1].split("/"); var lastName = slash[slash.length - 1]; return lastName; };
<center> <div class="card-panel" style="text-align:center;width:100%;background-color:#28ad8d"> <span class="white-text" style="text-align:center;font-size:large">自分で作る可視化アプリ</span> <a href="#"><i class="small material-icons left" style="color:transparent">replay</i></a> <a href="#" onclick=location.reload()><i class="small material-icons right" style="color:white">replay</i></a> </div> <div id="map" style="width: 1200px; height: 800px"></div> <hr> <div id="error_append"></div> <div id="error_contents" style="color:#ff8989"></div> <div id="this_console"></div> <br> <br> <div id="add_content"> </div> <br> <br> <a class="btn" style="width:250px;border-radius:20px;background-color:#28ad8d" id="mapping"><i class="material-icons left">add</i>mapping</a><br><br> <a class="btn" style="width:250px;border-radius:20px;background-color:gray;" id="clear"><i class="material-icons left">clear_all</i>clear</a> </center> <br><br><br>
Preview
Input Data
ReadMe
Snapshots
LinkData Work
Table Data
認定生食用食肉取扱者等設置施設(ユッケが食べられるお店)/육회 점포지도
Contributor:KeitarouNakayama
Update:Feb 23, 2016
182 Downloads, 1 Applications
認定生食用食肉取扱者等設置施設(ユッケが食べられるお店)一覧 육회 점포지도 クレジット表記を「(C)Nakayama Database LLC」として下さい。
yuk
[
]
Add LinkData work(LinkData)
Link http://app.linkdata.org/run/app1s1282i?tab=readme
Work
Add
Clear
insert work id or work name.