leaflet.jsとOSMでマップ表示及びマーカー設置方法

GoogleMapAPIを用いたマップ及びマーカー表示にクレジットカード登録が必要になり、非常に使い勝手が悪くなったので代替案を探していた。有名どころのYahooはどうかと調べたところ2020/10/31でAPIの提供を打ち切るらしい。その他だとleaflet.jsとOpenStreetMapを使うのがよさそう。以下に方法をメモ。

サンプル

https://taitan916.info/sample/osm/

GoogleMapに慣れているからだとは思うが、デザイン的に微妙に感じた。何と言うか見づらい。

CDNに注意(2024/01/12追記)

「http://cdn.leafletjs.com」のCDNがHTTP経由だと正常に取得できるがHTTPS経由だと取得できないため以下CDNを使う方がいいかも。

https://cdnjs.com/libraries/leaflet

具体的には以下のような形。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>

ソース

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> 
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
//マップを表示するID名を指定
var map;
map = L.map('map_canvas');

//経度緯度
var lat = '35.681236';
var lng = '139.767125';

//ズームレベル
var zoom = 15;

//マップの中心地とズームレベルを指定
map.setView([lat, lng], zoom);

//タイルレイヤの設定。今回だとOSMだが地理院やMapFanといった他のデザインに変更できる模様
var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
    attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
    maxZoom: 19
});
tileLayer.addTo(map);


var mapData = [
    { 'lat' : lat, 'lng' : lng, 'body' : '<b style="color:#f00;">マーカー</b>',}, 
    { 'lat' : (parseFloat(lat) + 0.05), 'lng' : (parseFloat(lng) + 0.05), 'body' : '<b style="color:#f00;">マーカー2</b>',}, 
    { 'lat' : (parseFloat(lat) + 0.1), 'lng' : (parseFloat(lng) + 0.1), 'body' : '<b style="color:#f00;">マーカー3</b>',}, 
];
for (var key in mapData){
    var marker_data = makeMarker(mapData[key]);
}


//マーカー作成用関数
function makeMarker( mapData ){

    var marker = [{
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [mapData.lng, mapData.lat]
        },
        "properties": {
            "popupContent": mapData.body
        }
    }];

    L.geoJson(marker, {
        onEachFeature: function(feature, layer){
            if (feature.properties && feature.properties.popupContent) {
                layer.bindPopup(feature.properties.popupContent);
            } 
        }
    }).addTo(map);
}
</script>

外部JSの呼び出しにAPIキーはいらないっぽい。mapDataの連想配列部分はPHPのforeachとかでループさせて表示する形で使用する想定。

leaflet.jsとOSM

GoogleMapAPIだとそれ単体でマップを表示できたが、今回はleaflet.jsとOSMに分かれておりそれぞれの役目がなんなのかイマイチ分からなかったので調べたところ、leaflet.jsはWeb地図の為のjavascriptライブラリとのこと。

leaflet.jsを使ってGoogleMapを表示(タイルレイヤを表示)するといったこともできる模様。

次にOpenStreetMapだがこちらは誰でも自由に利用できる地理情報データを集積したデータベースのようなものらしい。OSMのデータを使ってleaflet.jsで表示するみたいな感じか。

その他

以下に関しても可能かどうか検証、可能ならサンプルを作っておきたい。

経度緯度⇔住所の取得・変換(作成済み)

国土地理院のAPIを使用して無料でジオコーディング(住所→経度緯度)を行う方法

現在地の取得(作成済み)

leaflet.jsとOSMで現在地を取得しマップ上にマーカーを表示する方法

マーカーの変更(作成済み)

leaflet.jsとOSMでマーカーの画像をそれぞれ指定する

• クリックした位置の座標を取得
• マップを移動した際の中心座標を取得
• 複数マーカーをまとめる
• 複数マーカーを全て表示できるようオートズーム

上記が全て可能であればとりあえずはGoogleMapAPIの代替案として使っていけそう。