晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

Leaflet + OpenStreetMapで、地図にマーカー&ラベル表示。サンプルソース。

地図情報を扱うサービス「Google Maps API」が無料では使えなくなり、「Yahoo! JavaScriptマップAPI」もサービス提供が終了し、以前「Mapbox GL JS」を試してみた。

今回、「Leaflet」と「OpenStreetMap」を使って、地図にマーカー表示を試してみた。

Leaflet」は、地図データを扱うためのJavaScript ライブラリ。「OpenStreetMap」は、OpenStreatMap財団が「Open Data Commons Open Database License (ODbL)」 の下にライセンスするオープンデータ。いずれも無料でかつAPIキーの取得なしに利用できる。以下のサイトを参考にした。

試したところ、マーカー表示だけなら非常に簡単にできる。

【ステップ0:基本】

  • LeafletのCSSとJSライブラリを読み込む
<link rel="stylesheet" href="//unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<script src="//unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
  • 地図オブジェクトを生成してOpenStreetMapの画像タイルを読み込む
var map = L.map('map');
var tileLayer = L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: 'c <a href="//osm.org/copyright">OpenStreetMap</a> contributors, <a href="//creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
});
tileLayer.addTo(map);

今回試したのは以下。

【ステップ1】

  1. 複数マーカーを表示
  2. マーカーをクリックするとポップアップを表示する
  3. 全マーカーを画面内に収める
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; right:0; left:0; }
</style>
<div class="container"><div id="map"></div></div>
<script>
var map = L.map('map');
var tileLayer = L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: 'c <a href="//osm.org/copyright">OpenStreetMap</a> contributors, <a href="//creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
});
tileLayer.addTo(map);
// ---------------------------
var place = [
	{
		'name': '東京タワー',
		'lat': '35.6585753263022',
		'lng': '139.7454324609718'
	},{
		'name': '増上寺',
		'lat': '35.65737629074171',
		'lng': '139.7482751425744'
	},{
		'name': '芝公園',
		'lat': '35.65548717662271',
		'lng': '139.74843437145282'
	},{
		'name': '赤羽橋駅',
		'lat': '35.65496610534149',
		'lng': '139.74394970889855'
	},{
		'name': '神谷町駅',
		'lat': '35.66307981284523',
		'lng': '139.7451975472575'
	}
]
// ---------------------------
iconMarkers = L.featureGroup();		// 全マーカーを画面内に収めるため
for (var i = 0; i < place.length; i++) {
	iconMarkers.addLayer( L.marker([place[i].lat, place[i].lng]).addTo(map).bindPopup(place[i].name) );
}
map.fitBounds(iconMarkers.getBounds());	// 全マーカーを画面内に収める
</script>

f:id:art2nd:20210428102446p:plain

サンプル >>> https://ok2nd.github.io/leaflet/tokyo-01.html

【ステップ2】

  1. マーカーの右下に文字ラベルを表示する
  2. マーカーアイコンを標準以外のアイコンに変える。
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; right:0; left:0; }
.divicon {	/* 文字ラベル */
	display: table-cell;
	color: #f00;
	background-color: #ff4;
	opacity: 0.7;
	white-space: nowrap;
	font-size: 12px;
	font-weight: bold;
}
</style>
<script>
・・・・・
var myIcon = L.icon({	/* アイコン */
	iconUrl: 'icon/marker-small.png',
	iconRetinaUrl: 'icon/marker-small.png',
	iconSize: [16, 27],
	iconAnchor: [7, 27],
	popupAnchor: [1, -22],
});
iconMarkers = L.featureGroup();	// 全マーカーを画面内に収めるため
for (var i = 0; i < place.length; i++) {
	// 文字ラベルを表示
	var divIcon = L.divIcon({
		html: '<div class="divicon">' + place[i].name + '</div>',
		iconSize: [0,0]
	});
	iconMarkers.addLayer( L.marker([place[i].lat, place[i].lng], {icon: myIcon}).addTo(map).bindPopup(place[i].name) );
	L.marker([place[i].lat, place[i].lng], {icon: divIcon}).addTo(map);
}
map.fitBounds(iconMarkers.getBounds());	// 全マーカーを画面内に収める
</script>

f:id:art2nd:20210428102510p:plain

サンプル >>> https://ok2nd.github.io/leaflet/tokyo-02.html

Leafletで地図を切り替えできる。(↓)

Leafletで「Google マップ」も使える。(↓)

作成した地図の一覧を作成。(↓)