長野県長野市

長野市の小中学校と防犯MAP

長野市の小中学校と、交番・駐在所の周辺MAPです。マーカーの黄色が小学校、緑が中学校青い円は警察署半径1km、緑の円は交番・駐在所半径500mです。学校の傍に、交番・駐在所が配置されているのがわかります。開発費\2,000は、ハッカソンの懇親会費です。アイコンは無料素材倶楽部様 http://sozai.7gates.net/info/kiyaku.html の素材をお借りしました。

評価指数

アプリケーション

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

/*
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. 
*/

var all_data;        
function initialize(){
	all_data = new Array();
	all2_data = new Array();
	// データをLinkDataから取得 
	tmp_a_data = new Array();
	tmp_b_data = new Array();

$.each(LinkData.getWorks(), function(workKey, workValue) {
		//$("#result").append("<h3>Work: " + workValue + "</h3>");
		$.each(LinkData.getFiles(workValue), function(fileKey, fileValue) {
			$.each(LinkData.getSubjects(workValue, fileValue), function(subjKey, subjValue) {
				var tmp_data = {}
				tmp_data["name"] = subjValue;
				$.each(LinkData.getProperties(workValue, fileValue), function(propKey, propValue) {
					$.each(LinkData.getObjects(workValue, fileValue, subjValue, propValue), function(objKey, objValue) {
						var tmp_name = propValue.split("#");
						if(tmp_name[1] == "lat"){
							tmp_data["lat"] = parseFloat(objValue);
						} else if(tmp_name[1] == "lng" || tmp_name[1] == "long"){
							tmp_data["lng"] = parseFloat(objValue);
						} else if(tmp_name[1] == "zip"){
							tmp_data["zip"] = objValue;
						} else if(tmp_name[1] == "tel"){
							tmp_data["tel"] = objValue;
						} else if(tmp_name[1] == "address"){
							tmp_data["address"] = objValue;
						} else if(tmp_name[1] == "kubun"){
							tmp_data["kubun"] = objValue;
						}
					});
				});
				//console.log(tmp_data);
				if(fileValue === "school_in_nagano"){
					tmp_a_data.push(tmp_data);
				} else {
					tmp_b_data.push(tmp_data);
				}
			});
		});
	});
	//全データ
	all_data = tmp_a_data;
	all_data2 = tmp_b_data;
	
	//全データを地図上に表示

// 地図センター緯度経度の初期値は「長野市役所」
    var latlng = new google.maps.LatLng(36.6491119,138.168098);
    var myOptions = {
        zoom: 12,
    	center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("result"), myOptions);
	// ウィンドウに表示するデータをつくる
    var data = new Array();
	for (var i in all_data){ 
        var value = decodeURI(all_data[i].name);
		var tmp_name = value.split("#");
		var point_name = tmp_name[1];
		//console.log(all_data[i].lat, all_data[i].lng)
		data.push({position: new google.maps.LatLng(all_data[i].lat, all_data[i].lng), content: point_name });
	};     
    // 地図上にウィンドウで表示
    for (i = 0; i < data.length; i++) {
		var icon = "http://app.linkdata.org/asset/e7d97693.png";
		if(all_data[i].kubun === "2"){
			icon = "http://app.linkdata.org/asset/173688d7.png";
		}
		
		var marker = new google.maps.Marker({
			position: data[i].position,
 			map: map,
			icon: icon
        });
        attachMessage(marker, data[i].content);
	};
	
	// ウィンドウに表示するデータをつくる
    var data2 = new Array();
	for (var i in all_data2){ 
        var value = decodeURI(all_data2[i].name);
		var tmp_name = value.split("#");
		var point_name = tmp_name[1];
		//console.log(all_data[i].lat, all_data[i].lng)
		var content = point_name + "<br>" + all_data2[i].zip + "<br>" + all_data2[i].address + "<br>" + all_data2[i].tel;
		data2.push({position: new google.maps.LatLng(all_data2[i].lat, all_data2[i].lng), content: content });
	};     
    // 地図上にウィンドウで表示
    for (i = 0; i < data2.length; i++) {

var marker = new google.maps.Marker({
            position: data2[i].position,
            map: map,
			icon: "http://app.linkdata.org/asset/ebdea505.png"
        });
        attachMessage(marker, data2[i].content);

var color = "#00ff00";
		var radius = 1000;
		
		if (data2[i].content.match(/^長野中央警察署/) || data2[i].content.match(/^長野南警察署/)){
				color = "#0000ff";
				radius = 2000;
		}
		
		new google.maps.Circle({
  			center: data2[i].position,       // 中心点(google.maps.LatLng)
  			fillColor: color,   // 塗りつぶし色
  			fillOpacity: 0.5,       // 塗りつぶし透過度（0: 透明 ⇔ 1:不透明）
  			map: map,             // 表示させる地図（google.maps.Map）
  			radius: radius,          // 半径（ｍ）
  			strokeColor: color, // 外周色 
  			strokeOpacity: 1,       // 外周透過度（0: 透明 ⇔ 1:不透明）
  			strokeWeight: 1         // 外周太さ（ピクセル）
 		});
	};
};

// 地図のマーカーをクリックするとウィンドウを表示する処理
function attachMessage(marker, msg) {
	google.maps.event.addListener(marker, 'click', function(event) {
    	new google.maps.InfoWindow({
			content: msg
        }).open(marker.getMap(), marker);
    });
};

window.onload = function() {
    $(function(){
    	initialize();        
    });	
};

Initial content

このアプリをForkして新しいアプリを作るダウンロード

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

作者メッセージ送信	Katsuhiko_Miki
共同編集者	Takumi Aizu boonx4m312s
Fork元のアプリ	松本豊 's 横浜ランドマークタワーをのぞむMAP
実行回数	385
ウェブサイト
ライセンス
Fork count	1
作成日	2015年2月21日
最終更新日	2015年2月21日