地図情報を扱うサービス「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】
- 複数マーカーを表示
- マーカーをクリックするとポップアップを表示する
- 全マーカーを画面内に収める
<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>
サンプル >>> https://ok2nd.github.io/leaflet/tokyo-01.html
【ステップ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>
サンプル >>> https://ok2nd.github.io/leaflet/tokyo-02.html
Leafletで地図を切り替えできる。(↓)
Leafletで「Google マップ」も使える。(↓)
作成した地図の一覧を作成。(↓)