JavaScript

OpenStreetMapとLeafletで簡単に地図を表示する方法

2020年8月29日

Leafletとは

Leafletとは、地図データを扱うためのJavaScript ライブラリです。

Leafletの公式サイト：https://leafletjs.com/

Leafletはあくまでも地図データを扱うためのライブラリなので、Leaflet単体では地図を表示させることはできません。地図を表示させるためにはLeafletとは別に、地図サービスを使う必要があります。

スポンサーリンク

 

本記事では、クレジット表記をすれば、無料で利用できる地図サービスである「OpenStreetMap」を利用しています。

OpenStreatMapのライセンス：https://www.openstreetmap.org/copyright/ja

OpenStreetMapとLeafletで地図を表示する

地図の表示イメージ

今回、生成する地図は以下です。

実装例

<!DOCTYPE html>
<html>
  <head>
    <title>OpenStreetMapとLeafletで地図を表示する</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
  </head>
  <body>
    <div id="view_map" style="height: 350px;"></div>
    <script type="text/javascript">
        //緯度,経度,ズーム
        var map = L.map('view_map').setView([35.658577, 139.745451], 12);

        // 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);
    </script>
  </body>
</html>

ソースコードの解説

Leafletの読み込み

Leafletのjsファイルとcssファイルを読み込みます。jsファイルとcssファイルはダウンロードして指定することもできますが、今回の例ではCDNで指定しています。

<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>

地図を埋め込む場所の指定

地図を埋め込みたい場所を指定します。

<div id="view_map" style="height: 350px;"></div>

地図に表示する場所を指定

地図に表示する場所（緯度・経度）とズームを指定します。

//緯度,経度,ズーム
var map = L.map('view_map').setView([35.658577, 139.745451], 12);

OpenStreetMapから地図を読み込む

「http://{s}.tile.osm.org/{z}/{x}/{y}.png」を指定してOpenStreetMapから地図を読み込みます。

OpenStreetMapはクレジット表記が必要なので「'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,」を記載しています。

// 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);

終わりに

本記事では、OpenStreetMapとLeafletで簡単に地図を表示する方法を紹介しました。

次回は「地図にピン(マーカー)を立てる方法」を紹介します。

【関連記事】

helpful