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

fullscreen

ハウモリ

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

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

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

Rating

useful

Application

Play
JavaScript
CSS
HTML
ReadMe
Snapshots

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 this app as your new one download

Web Search

Contributor Send Message	ハウモリ
Forked from (Parent App)	松本豊 's 横浜ランドマークタワーをのぞむMAP
Run count	585
Website	http://howml.org
License
Fork count	1
Created date	Feb 13, 2015
Last update date	Mar 24, 2015

Forked from (Parent App)

横浜ランドマークタワーをのぞむMAP Contributor: 松本豊 Update: Feb 24, 2013 2197 runs

Forked (Child App)

森町の選挙ポスター掲示場(知事・道議) Contributor: 北海道森町総務課情報管理係 Update: Mar 19, 2015 180 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.

森町の名所・公園一覧 Contributor: 北海道森町総務課情報管理係 Update: Sep 10, 2015
719 Downloads
,

2 Applications

hkd_mori_meisyo
八雲町の名所・公園一覧 Contributor: 北海道八雲町 Update: Mar 13, 2015
617 Downloads
,

3 Applications

yakumo_meisyo
Add New Data