自分で作る可視化アプリ

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

評価指数

アプリケーション

Play
JavaScript
CSS
HTML
概要
保存した実行結果

//緯度(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して新しいアプリを作るダウンロード

このアプリ作品をwebから探す

作者メッセージ送信	Hiroaki Hattori
共同編集者	遠藤守兼松篤子
実行回数	1400
ウェブサイト
ライセンス
Fork count	1
作成日	2015年12月28日
最終更新日	2016年2月13日