GithubからGeoJSONを検索して地図上に表示するページを作ってみました。

example

Google Custom Search APIを使って、GithubからGeojsonを検索し地図に表示するページを作ってみました。
GithubではGeojsonをアップするとヘッダに「Access-Control-Allow-Origin: *」を付加してくれるので、外部から読みだして地図上に表示することができます。
地理情報を公開する方法として面白いなと思ったので作ってみました。
ただ、APIの制限がかなりきつく、無料サービスの範囲内では１回のリクエストで取れるのが10件までなうえ日に100回検索リクエストがかかると制限がかかるらしいので実用的ではありません。
検索しても結果が返ってこなくなったら、別の日にでも試してみてください。
（あとたまに、ものすごーく巨大なGeoJSONを読み込もうとして固まる時があります）

GoogleCustomSearchAPI – Google Custom Search API を使ってみる – Qiita

サンプル

API keyとカスタムサーチID(cx)は自分で取得したものをつかってください。
あと、d3.jsonp.jsプラグインを使用しています。

(function(){
	"use strict";


	/****************************************************
	 * Google Custom search Ajax
	 ***************************************************/		
	var getGeoJson = function(keyword){
		var url = "https://www.googleapis.com/customsearch/v1?key=＜API key＞=＜カスタムサーチID＞&q="+keyword+" FeatureCollection filetype:geojson&callback=d3.jsonp.foo";
		//var url = "./mock.js?&callback=d3.jsonp.foo"
		d3.jsonp(url, function() {
			if (arguments.lenght <= 0){ webix.message('not found data'); return }
			Array.prototype.slice.call(arguments).forEach(function(row){
				row.items.forEach(function(item){
					$$('geojsonList').add(item);
				});
			});		
		});
	}	
	
	
	/****************************************************
	 * webix Layout	
	 ***************************************************/	
	var resultList = {
		id:'geojsonList',
		view:"list",
		select:true,
		template:'<a target="_blank" href="#link#">link</a>:#link#',
		data:[]
	}
	
	var search_input = {id:'search_input', view:'text'};
	
	var search_btn = { id:'search_btn', view:'button', width:120,label:'search'}
	
	var resultClear_btn = {id:'resultClear_btn', view:'button',height:30, label:'Clear'}
			
	webix.ui({
		rows:[
			{template:'<h1>Github GeoJSON Search　β</h1>', height:40, css:'header'},
			{view:"form", elements:[
				{cols:[
					search_input,
					search_btn
					]
				}
				]
			},
			{
				cols:[
					{rows:[
						resultList,
						resultClear_btn
					]},
					{view:'resizer'},
					{template:'<div id="map"></div>'}
				]
			}
		]
	});

	/****************************************************
	 * webix Event Handling 	
	 ***************************************************/	
	$$('search_btn').attachEvent('onItemClick', function(){
		var keyword = $$('search_input').getValue();
		getGeoJson(keyword.trim());
	});
	$$('resultClear_btn').attachEvent('onItemClick', function(){
		$$('geojsonList').clearAll();
		webix.message("検索結果をクリアしました");		
	});
	
	$$('geojsonList').attachEvent('onAfterSelect', function(id){
			var item = this.getItem(id);
			geojsonLayer.clearLayers();
			d3.json(item.link, function(geodata){
				geojsonLayer.addData(geodata);
				map.fitBounds(geojsonLayer.getBounds())
			});
	});
	
	
	/****************************************************
	 * leaflet Init 	
	 ***************************************************/	
	var map = L.map('map').setView([-41.2858, 174.78682], 14);
	var mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
	L.tileLayer(
		'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
		{
			attribution: 'Map data &copy; ' + mapLink,
			maxZoom: 18
		}
	).addTo(map);
		
	var onEachFeature = function(feature, layer) {
			if (!feature.properties) return ;
			var properties = '<table width="300">';
			Object.keys(feature.properties).forEach(function(key){
				var status = typeof feature.properties[key];
				var text = "";
				switch (status) {
					case 'string': text = feature.properties[key].slice(0, 10) + "...";break;
					case 'object': text = "[object]";break;
					case 'function': text = '[function]'; break;
				}				
				properties += '<tr><td>'+key+'</td><td>'+text+'</td></tr>'
			});
			properties += '</table>';
			layer.bindPopup(properties);
	}
	
	var geojsonLayer = L.geoJson(null, {onEachFeature:onEachFeature}).addTo(map);
	

})();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

(function(){

"use strict";

/****************************************************

* Google Custom search Ajax

***************************************************/

var getGeoJson = function(keyword){

var url = "https://www.googleapis.com/customsearch/v1?key=＜API key＞=＜カスタムサーチID＞&q="+keyword+" FeatureCollection filetype:geojson&callback=d3.jsonp.foo";

//var url = "./mock.js?&callback=d3.jsonp.foo"

d3.jsonp(url, function() {

if (arguments.lenght <= 0){ webix.message('not found data'); return }

Array.prototype.slice.call(arguments).forEach(function(row){

row.items.forEach(function(item){

$$('geojsonList').add(item);

});

}

/****************************************************

* webix Layout

***************************************************/

var resultList = {

id:'geojsonList',

view:"list",

select:true,

template:'<a target="_blank" href="#link#">link</a>:#link#',

data:[]

}

var search_input = {id:'search_input', view:'text'};

var search_btn = { id:'search_btn', view:'button', width:120,label:'search'}

var resultClear_btn = {id:'resultClear_btn', view:'button',height:30, label:'Clear'}

webix.ui({

rows:[

{template:'<h1>Github GeoJSON Search　β</h1>', height:40, css:'header'},

{view:"form", elements:[

{cols:[

search_input,

search_btn

]

}

]

{

cols:[

{rows:[

resultList,

resultClear_btn

]},

{view:'resizer'},

{template:'<div id="map"></div>'}

]

}

]

});

/****************************************************

* webix Event Handling

***************************************************/

$$('search_btn').attachEvent('onItemClick', function(){

var keyword = $$('search_input').getValue();

getGeoJson(keyword.trim());

});

$$('resultClear_btn').attachEvent('onItemClick', function(){

$$('geojsonList').clearAll();

webix.message("検索結果をクリアしました");

});

$$('geojsonList').attachEvent('onAfterSelect', function(id){

var item = this.getItem(id);

geojsonLayer.clearLayers();

d3.json(item.link, function(geodata){

geojsonLayer.addData(geodata);

map.fitBounds(geojsonLayer.getBounds())

});

/****************************************************

* leaflet Init

***************************************************/

var map = L.map('map').setView([-41.2858, 174.78682], 14);

var mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';

L.tileLayer(

'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',

{

maxZoom: 18

}

).addTo(map);

var onEachFeature = function(feature, layer) {

if (!feature.properties) return ;

var properties = '<table width="300">';

Object.keys(feature.properties).forEach(function(key){

var status = typeof feature.properties[key];

var text = "";

switch (status) {

case 'string': text = feature.properties[key].slice(0, 10) + "...";break;

case 'object': text = "[object]";break;

case 'function': text = '[function]'; break;

}

properties += '<tr><td>'+key+'</td><td>'+text+'</td></tr>'

});

properties += '</table>';

layer.bindPopup(properties);

}

var geojsonLayer = L.geoJson(null, {onEachFeature:onEachFeature}).addTo(map);

})();

サンプル

投稿者: shimizu