JavaScript

OpenStreetMapとLeafletで表示位置を変更する方法

2020年8月30日

はじめに

地図データを扱うためのJavaScript ライブラリである「Leaflet」と「OpenStreetMap」を使い地図の表示位置を変更する方法を紹介します。

地図の表示イメージは以下の通りです。ボタンを押下することで、地図の表示位置が変わります。



JavaScriptの実装例

<!DOCTYPE html>
<html>
  <head>
    <title>OpenStreetMapとLeafletで表示位置を変更する</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
      integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
      crossorigin=""></script>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        window.onload = function() { 
            //緯度,経度,ズーム
            var map = L.map('view_map').setView([35.6809591, 139.7673068],15);

            // OpenStreetMap から地図画像を読み込む
            L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                maxZoom: 18,
                attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '
            }).addTo(map);
            
            var popup = L.popup();
            L.marker([35.658577, 139.745451]).addTo(map);
            L.marker([35.6603835, 139.7292068]).addTo(map);
            L.marker([35.7100069, 139.8108103]).addTo(map);
            
            $("#tokyoTower").on('click', function () {
                // 東京タワーの位置に移動
                map.setView([35.658577, 139.745451]);
            });
            $("#roppongiHills").on('click', function () {
                // 六本木ヒルズの位置に移動
                map.setView([35.6603835, 139.7292068]);
            });
            $("#tokyoSkyTree").on('click', function () {
                // 東京スカイツリーの位置に移動
                map.setView([35.7100069, 139.8108103]);
            });
        }
    </script>
  </head>
  <body>
    <div>
        <input type="button" id="tokyoTower" value="東京タワーの位置に移動">
        <input type="button" id="roppongiHills" value="六本木ヒルズの位置に移動">
        <input type="button" id="tokyoSkyTree"value="東京スカイツリーの位置に移動">
    </div><br>
    <div id="view_map" style="height: 500px;"></div>
  </body>
</html>

JavaScriptの解説

各ボタンのonClickイベントで「map.setView（緯度,経度）」を使い、地図の表示位置を変更しています。

$("#tokyoTower").on('click', function () {
    // 東京タワーの位置に移動
    map.setView([35.658577, 139.745451]);
});
$("#roppongiHills").on('click', function () {
    // 六本木ヒルズの位置に移動
    map.setView([35.6603835, 139.7292068]);
});
$("#tokyoSkyTree").on('click', function () {
    // 東京スカイツリーの位置に移動
    map.setView([35.7100069, 139.8108103]);
});

終わりに

本記事では「OpenStreetMapとLeafletで表示位置を変更する方法」を紹介しました。

次回は「地図やマーカーを削除する方法」を紹介します。

【関連記事】

helpful