自分で作る可視化アプリ

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

Rating

useful

Application

Play
JavaScript
CSS
HTML
ReadMe
Snapshots

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

Fork this app as your new one download

Web Search

Contributor Send Message	Hiroaki Hattori
Collaborators	遠藤守兼松篤子
Run count	1397
Website
License
Fork count	1
Created date	Dec 28, 2015
Last update date	Feb 13, 2016

Forked (Child App)

オープンデータで作る全国避難場所マップマッピング Contributor: Hiroaki Hattori Update: Jan 31, 2016 283 runs

Input Data
Related Ideas

LinkData work list used as input data in this application.
You can change input data and execute application if you change the checkbox.

OPENDATA city list in Japan Contributor: Taisuke Fukuno Update: Apr 23, 2019
27893 Downloads
,

2 Applications

OPENDATA_Japan

localgov_fukui
Add New Data

News Feed

linkdata.org に関するツイート

Publish your application as JavaScript

that mashes up the Linked Open Data

Application Information

自分で作る可視化アプリ

Application

Forked (Child App)

News Feed