須坂市行政区（自治会）一覧｜Mash up the Linked Open Data

須坂市行政区（自治会）一覧

/*
This is a Example program to retrieve and display the data. 
Press the Run button on the right of the screen (described the behavior of the Example program below). 
Please create a new application rewrite this program work. 
*/

//行政区一覧//
//infoウィンドウの初期化
var currentwindow=null;

//全データ
	all_data = tmp_a_data;
	//行政区のデータを表示
	$(".select").append("<option value='-1' selected='selected'>行政区（自治会）を選んでください。</option>");
	for (var i in all_data){
		if (all_data[i].name ){ 
                var all_id=all_data[i].name;

$(".select").append("<option value='"+ all_data[i].id +"'>" + all_data[i].name+ "</option>");
		}
		}

//行政区が選択、変更された時の処理
	$(".select").change(function() {
		//詳細データのリセット
		$("#result2").empty();
		
		//選択された行政区の詳細データの表示
		var sectionKaKey = $("option:selected", $(this)).val();
		if (sectionKaKey == -1) {
			//$("#result2").html("");
			return;
		}
		$("#result2").append();
		for (var i in all_data){
			var detail_c = sectionKaKey;
			if (all_data[i].id === detail_c){
				$("#result2").append("<div>【読み方】:" + all_data[i].kana + "<br/>【大字】:" + all_data[i].oaza + "<br/>【郵便番号】:" + all_data[i].yubin+"<br/>(注：墨坂は382-0099、墨坂南は382-0098、臥竜は382-0028です)<br/>【小学校】:" + all_data[i].e_sch + "<br/>" + "【中学校】:" + all_data[i].l_sch + "<br/>【地域公民館】:"  +　all_data[i].hall + "<br/>【消防団】:"+ all_data[i].fire + "<br/>【避難所】:" +　all_data[i].hinanjo + "<br/>【人口（"  +　all_data[i].kijunbi +"時点)】<br/>　世帯:"  +　all_data[i].setai +"世帯<br/>　男性:"  +　all_data[i].male +"人<br/>　女性:"  +　all_data[i].female + "人<br/>　合計:"  +　all_data[i].total + "人</div>");
				
// 地図センター緯度経度の初期値は「須坂市役所」
    
	var latlng = new google.maps.LatLng(all_data[i].lat,all_data[i].longitude);
    var myOptions = {
    zoom: 16,
    center: latlng,
	 mapTypeId: google.maps.MapTypeId.ROADMAP
    };
   var map = new google.maps.Map(document.getElementById("result"), myOptions);

//* アイコン設定 *//
  var icon = new google.maps.MarkerImage('http://app.linkdata.org/asset/7c83d9be.png',
    new google.maps.Size(100,100),
    new google.maps.Point(0,0),
    new google.maps.Point(19,51)
  );
  var markerOptions = {
    position: latlng,
    map: map,
    icon: icon,
     };
  var marker = new google.maps.Marker(markerOptions);
				
 
				
				
	// ウィンドウに表示するデータをつくる
	var data = new Array();
	for (var i in all_data){ 
        var value = all_data[i].name;  
        data.push({position: new google.maps.LatLng(all_data[i].lat, all_data[i].longitude), content: '【'+ all_data[i].name + '(' + all_data[i].kana + ')】<br>　公民館：' + all_data[i].hall + '<br>　小学校：' +all_data[i].e_sch +'<br>　中学校：' + all_data[i].l_sch + '<br>　消防団：' +all_data[i].fire +  '<br>　大字：' +all_data[i].oaza+'<br><a href="http://maps.google.com/maps?q=' + all_data[i].lat + ',' + all_data[i].longitude + '" target="_blank">マップアプリで経路案内</a>' 
				  });
             	};

}
		}
	});
}

body, input {
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    font-size: 12px;
    margin: 0;
    padding: 0;
	
}

#pageContainer .header {
	background: #ff7f50; /* Old browsers */
	background: -moz-linear-gradient(top,  #ff7f50 0%, #ff7f50 11%, #ff7f50 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff7f50), color-stop(11%,#888888), color-stop(100%,#ff7f50)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ff7f50 0%,#ff7f50 11%,#ff7f50 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ff7f50 0%,#ff7f50 11%,#ff7f50 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ff7f50 0%,#ff7f50 11%,#ff7f50 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ff7f50 0%,#ff7f50 11%,#ff7f50 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7f50', endColorstr='#ff7f50',GradientType=0 ); /* IE6-9 */
	-moz-box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.4);
}

#pageContainer .header .headerContent .pageTitle {
	font-size: 180%;
	font-weight: bold;
    color: #990000;
	background-color: #ffff66;
	padding: 5px;
	text-align: center;
font-family:'Lucida Grande',
 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
 Meiryo, メイリオ, sans-serif;

}
#pageContainer .header .headerContent .explanatory1 {
	font-color: ff9900;
	
}
body {
  -webkit-text-size-adjust: 100%;
}

body .select {/* 行政区選択セレクト */
    font-size: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	display: inline-block;
	background: #FFF;
	width: 90%;
	margin: 5px auto;
	border-radius: 5px;
		box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.4) inset;
}

実行画面
入力データ
概要
保存した実行結果

同じデータを使っているアプリケーション

作者:
更新日:
評価指数

データ作品	テーブルデータ
須坂市行政区一覧作者:長野県須坂市更新日:2018年6月4日 1968 ダウンロード, 2 アプリケーション須坂市内の行政区（自治会）の基本データです。共通語彙基盤コア語彙 2（バージョン2.2）を一部利用しています。読み方は平成１８年３月調査、通学区域等は平成21年2月10日現在のデータです。緯度経度情報は各町の公会堂等でセットしました。なお、読み方は公式ではありません。【更新情報】2018.6.4 2018.6.1時点のデータに更新	suzakacity_gyoseiku

データ作品

テーブルデータ

須坂市行政区一覧

作者:長野県須坂市更新日:2018年6月4日 1968 ダウンロード, 2 アプリケーション須坂市内の行政区（自治会）の基本データです。共通語彙基盤コア語彙 2（バージョン2.2）を一部利用しています。読み方は平成１８年３月調査、通学区域等は平成21年2月10日現在のデータです。緯度経度情報は各町の公会堂等でセットしました。なお、読み方は公式ではありません。【更新情報】2018.6.4 2018.6.1時点のデータに更新

suzakacity_gyoseiku

データ作品を追加する

Link http://app.linkdata.org/run/app1s1023i?tab=readme