Publish your application｜Mash up the Linked Open Data

JavaScript
CSS
HTML
Images
Input Data
ReadMe
Snapshots

API Reference (1.0)
Properties

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;
	};

Select Input Data

LinkData Work	Table Data
OPENDATA city list in Japan	OPENDATA_Japan localgov_fukui

Add LinkData work(LinkData)

Click the Browse button or drag and drop to choose files to upload

The Maximum upload size is 1MB.(bmp,gif,jpeg,jpg,png)

Edit Application

Please enter information for the application to be registered.

*Required field

Account Name

Application Name*: Remove; Add name for another language

Collaborators

Image: Change image

You can upload jpg, gif, png file formats

Website: x

Add website

Tag

License

API version

Initial Cost: ￥

Annual Cost: ￥

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

Security Level: public limited private

: finish Editing

History

Ready!