あなたのアプリ作品を公開しよう｜Mash up the Linked Open Data

JavaScript
CSS
HTML
画像ファイル
入力データ
概要
保存した実行結果

API Reference (1.0)
アプリの設定

forked:自分で作る可視化アプリ
https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js
http://code.jquery.com/jquery-2.1.4.min.js
jquery-1.11.2.min.js
http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js

history

forked:自分で作る可視化アプリ
https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css
http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css
http://fonts.googleapis.com/icon?family=Material+Icons

history

forked:自分で作る可視化アプリ

history

forked:自分で作る可視化アプリ

//緯度(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 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;
	};

データ作品

データ作品	テーブルデータ
日本のオープンデータ都市一覧	OPENDATA_Japan localgov_fukui

データ作品を追加する

ドラッグ&ドロップ、または"参照"ボタンをクリックしてファイルをアップロード

アップロード可能なファイルのサイズは1MBです。(bmp,gif,jpeg,jpg,png)

アプリの設定

アプリ作品の情報を入力してください。

*必須項目

アカウント名

アプリ作品のタイトル*: 削除; 別の言語で名前を追加する

共同編集者

画像: 画像を変更する

jpg, gif, png 形式の画像をアップロードできます

ウェブサイト: x

ウェブサイトを追加

タグ

ライセンス

API version

アプリの開発費: ￥

アプリの年間維持費: ￥

説明文: ※2016/01/31 地図をOpenStreetMapに変更プログラミングが出来ない人でも地図にマッピング出来るアプリケーションです。オープンデータを推進したい行政でも成果が目に見える形にしたいという意見が多い中で、自身が作るマッピング結果に触れてみるのもいいと思います。リンクデータにデータをアップロードすることでオープンデータに、このアプリのデータセットで利用すれば可視化を実現。データ公開から可視化までLinkData.orgのみで行えます。・経産省共通語彙基盤対応経度緯度に関する語彙リスト(共通語彙に関しては#以降表示) 緯度：["緯度", "lat", "latitude", "Latitude"]、経度：["経度", "lng", "long", "longitude", "Longitude"] 緯度経度に該当する語彙があれば、連絡お願いします。削除; 別の言語で説明を追加する

公開範囲: public limited private

: finish Editing

履歴

Ready!