森町・八雲町の名所地図(電子国土版)

fullscreen

ハウモリ

「横浜ランドマークタワーをのぞむMAP」を活用させていただき、北海道森町が公開している名所データをgoogle map上に表示させます。

20150216から、電子国土を地図レイヤーとして利用開始しました。 ※ただしGoogleMap APIを利用。
20150315から、八雲町が公開している名所データを読み込みしています。

自治体が共通語彙基盤で同じフォーマットでデータを提供してもらえれば簡単に取り込みできます。

評価指数

アプリケーション

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

var all_data;        
function initialize(){
	all_data = new Array();
	// データをLinkDataから取得 
	tmp_a_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) {
						if(propValue == "http://imi.ipa.go.jp/ns/core/rdf#緯度"){
							tmp_data["緯度"] = objValue;
						}else if(propValue == "http://imi.ipa.go.jp/ns/core/rdf#経度"){
							tmp_data["経度"] = objValue;
						}else if(propValue == "http://imi.ipa.go.jp/ns/core/rdf#名称"){
							tmp_data["名称"] = objValue;
						}else if(propValue == "http://imi.ipa.go.jp/ns/core/rdf#説明"){
							tmp_data["説明"] = objValue;
						}else if(propValue == "http://imi.ipa.go.jp/ns/core/rdf#画像"){
							tmp_data["画像"] = objValue;	
							
						}
					});
				});
				tmp_a_data.push(tmp_data);
			});
		});
	});

//全データ
	all_data = tmp_a_data;
	
	//全データを地図上に表示

//これよりCopyright (c) 2003 amay077 MIT Licenseを利用し改変 http://jsdo.it/amay077/wFtJ	
	//地図表示
    var latlng = new google.maps.LatLng(42.104804,140.5764986);
    var myOptions = {
        zoom: 8,
		mapTypeId: "GsiMaps",
		center: latlng,
    };
    var map = new google.maps.Map(document.getElementById("map"), myOptions);
	
	map.setOptions({
		mapTypeControl: false // 右上の地図タイプ選択を消す
	});
	// 地理院タイルを Overlay する
	// via http://portal.cyberjapan.jp/help/development.html
      
	map.mapTypes.set("GsiMaps", {
		name:"地理院地図(GSI Maps)",
		tileSize:new google.maps.Size(256,256),
		minZoom:5,
		maxZoom:18, 
		getTile:function(tileCoord, zoom, ownerDocument) {
			var img = ownerDocument.createElement("img");
			img.style.width = "256px";
			img.style.height = "256px";
			var x = (tileCoord.x % Math.pow(2, zoom)).toString();
			var y = tileCoord.y.toString();
			img.src = "http://cyberjapandata.gsi.go.jp/xyz/std/" + zoom +  "/" + x + "/" + y + ".png";
			return img;
		}
	});	
	
	// 左下に電子国土ロゴを表示
	var logo = document.createElement('DIV');
	logo.style.padding = '3px';
	map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(logo);
	logo.innerHTML = '<a href="http://portal.cyberjapan.jp/portalsite/kiyaku/index.html" target="_blank"><img style="width:88px, height:32px" src="http://maps.gsi.go.jp/image/logo_l.png" alt="電子国土" /></a>';
//ここまで
	
	// ウィンドウに表示するデータをつくる
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 = all_data [i].名称;
		var point_name = '<a href="'+ all_data[i].name +'" target="_blank">'+ all_data [i].名称 +'</a>';
		var point_description = all_data [i].説明;
		var point_pics = all_data [i].画像;
		data.push({position: new google.maps.LatLng(all_data[i].緯度, all_data[i].経度), content: '<h3>名所・公園:</h3>' + point_name + '<hr /><br />' + point_description　+ '<br /><br />' + '<img border="0" src="' + point_pics + '" width="254">' });
	};

// 地図上にウィンドウで表示
    for (i = 0; i < data.length; i++) {
         var marker = new google.maps.Marker({
            position: data[i].position,
            map: map
        });
        attachMessage(marker, data[i].content);
    };
};

// 地図のマーカーをクリックするとウィンドウを表示する処理
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から探す

作者メッセージ送信	ハウモリ
Fork元のアプリ	松本豊 's 横浜ランドマークタワーをのぞむMAP
実行回数	592
ウェブサイト	http://howml.org
ライセンス
Fork count	1
作成日	2015年2月13日
最終更新日	2015年3月24日