Leaflet地図：国土地理院のジオコーダーで住所から緯度経度検索。CSVからも。サンプルソース。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。

今回、国土地理院のジオコーダーを使って、住所から緯度経度を取得して地図にマッピングを試した。

【プログラムソースサンプル】

function addrSearch(address) {
	// 国土地理院のジオコーダー利用
	var result = $.ajax({
		type: 'GET',
		url: 'https://msearch.gsi.go.jp/address-search/AddressSearch?q=' + address,
		async: false	// *** 同期通信 ***
	}).responseText;
	return result;
}
function getLatLng(name, address) {
	var json = addrSearch(address);
	var res = JSON.parse(json);
	var latlng = res[0].geometry.coordinates;
	return [name, latlng[1], latlng[0]];
}
var place = Array();
place.push(getLatLng('有野郵便局', '神戸市北区藤原台北町６ー１９'));
place.push(getLatLng('神戸山田郵便局', '神戸市北区松が枝町２ー１ー２'));
place.push(getLatLng('神戸北郵便局', '神戸市北区北五葉２-１-１５'));
.....
.....

≪ place形式 ≫

place[0] = ['地点名', 緯度, 経度]
place[1] = ['地点名', 緯度, 経度]

≪ サンプル：神戸市郵便局マップ ≫

https://ok2nd.github.io/leaflet/geo-kobe-yubinkyoku.html

マーカー表示方法については、以下のブログを参照。

CSVファイルをURLで指定する版も作成。CSV形式は［地点名,住所］。

【CSVサンプル】

有野郵便局,神戸市北区藤原台北町６ー１９
神戸山田郵便局,神戸市北区松が枝町２ー１ー２
神戸北郵便局,神戸市北区北五葉２-１-１５
須磨北郵便局,神戸市須磨区西落合１-１-１０
須磨郵便局,神戸市須磨区鷹取町２ー１ー１
垂水郵便局,神戸市垂水区星陵台１-４-２９
神戸中央郵便局,神戸市中央区栄町通６-２-１
長田郵便局,神戸市長田区細田町７ー１ー１
灘郵便局,神戸市灘区大石東町３ー２ー８
神戸西郵便局,神戸市西区糀台５ー１２ー１
東灘郵便局,神戸市東灘区住吉東町２-２-１７
兵庫郵便局,神戸市兵庫区大開通２-２-１９

≪ サンプル：神戸市郵便局マップ ≫

【URL形式】geo.html?csv=CSVファイル名

https://ok2nd.github.io//leaflet/geo.html?csv=csv/kobe-yubinkyoku.csv&name=神戸市郵便局マップ

【プログラムソース一部抜粋】

function csv2map(csv) {
	var place = Array();
	line = csv.split("\n");
	for (var i=0; i<line.length; ++i) {
		data = line[i].split(',');
		if (data.length >= 2) {
			place.push(getLatLng(data[0], data[1]));
		}
	}
	place2map(place);	// place[0] = ['地名', 緯度, 経度];
}
function getLatLng(name, address) {
	var json = addrSearch(address);
	var res = JSON.parse(json);
	var latlng = res[0].geometry.coordinates;
	return [name, latlng[1], latlng[0]];
}
function addrSearch(address) {
	// 国土地理院のジオコーダー利用
	var result = $.ajax({
		type: 'GET',
		url: 'https://msearch.gsi.go.jp/address-search/AddressSearch?q=' + address,
		async: false	// *** 同期通信 ***
	}).responseText;
	return result;
}
function place2map(place, others) {
	map = L.map('map');
	var tileLayer = L.tileLayer('https://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z}', {
		attribution: '<a href="https://developers.google.com/maps/documentation" target="_blank">Google Map</a>'
	});
	tileLayer.addTo(map);
	iconMarkers = L.featureGroup();
	if (typeof others !== 'undefined') {
		var iconBlue = L.icon({
			iconUrl: 'icon/ltblue-dot.png',
			iconRetinaUrl: 'icon/ltblue-dot.png',
			iconSize: [32, 32],
			iconAnchor: [14, 27],
			popupAnchor: [1, -22],
		});
		placeMarker(others, iconBlue, '#aff');
	}
	if (typeof place !== 'undefined') {
		var iconRed = L.icon({
			iconUrl: 'icon/red-dot.png',
			iconRetinaUrl: 'icon/red-dot.png',
			iconSize: [32, 32],
			iconAnchor: [14, 27],
			popupAnchor: [1, -22],
		});
		placeMarker(place, iconRed, '#ff4');
	}
	map.fitBounds(iconMarkers.getBounds());
	var Basic_Map = new Array();
	Basic_Map[ 0 ] = L.tileLayer('https://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z}', {
		attribution: '<a href="https://developers.google.com/maps/documentation" target="_blank">Google Map</a>'
	});
	Basic_Map[ 1 ] = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
		continuousWorld: false
	});
	Basic_Map[ 2 ] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
		attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">地理院タイル</a>'
	});
	Basic_Map[ 3 ] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', {
		attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">地理院タイル</a>'
	});
	Basic_Map[ 4 ] = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
		attribution: 'Tiles © <a href="http://www.esrij.com/"> Esri Japan </a>'
	});
	var baseMap = {
		'Google マップ': Basic_Map[ 0 ],
		'OpenStreetMap': Basic_Map[ 1 ],
		'国土地理院 標準地図': Basic_Map[ 2 ],
		'国土地理院 写真': Basic_Map[ 3 ],
		'Esri World Topo Map': Basic_Map[ 4 ]
	};
	L.control.layers(baseMap).addTo(map);
	map.addControl(new L.Control.Fullscreen({	// フルスクリーンボタン
		title: {
			'false': '最大化',
			'true': '元に戻す'
		}
	}));
	L.easyButton('fas fa-map-marker-alt', function(btn, easyMap) {
		currentWatchReset();
		currentWatch();
	}).addTo(map);
	L.easyButton('fa fa-times', function(btn, easyMap) {
		currentWatchReset();
	}).addTo(map);
	L.easyButton('fa fa-reply-all', function(btn, easyMap) {
		currentWatchReset();
		if (currentWatchBtn) {
			currentWatchBtn.state('current-watch');
			currentWatchBtn = null;
		}
		map.fitBounds(iconMarkers.getBounds());
	}).addTo(map);
	map.on('click', onMapClick);
}