Leaflet地図：「新潟酒蔵マップ」作成。CSVファイルから。サンプルソース。

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

今回、「新潟酒蔵マップ」を作成した。

「LinkData」のデータを使わせてもらった。

「LinkData」のデータをCSVファイルにして、CSVファイルを読み込む方式にした。

→→→　https://ok2nd.github.io/leaflet/csv-niigata_sake.html

マーカーをクリックすると、代表銘柄などが表示される。

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

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) {
			var memo = '<b>代表銘柄：' + data[5] + '</b><br>' + data[10];
			place.push([data[0], data[1], data[2], data[4], memo]);
		}
	}
	place2map(place, false, true);	// place[0] = ['地名', 緯度, 経度, URL, 補足メモ]; 3番目引数true: URL有り
}
function place2map(place, others, url) {
	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', url);
	}
	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', url);
	}
	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);
}