Zenn
🐕

LeafletでOpenStreetMap表示してみました。

2024/12/30に公開
CSS
HTML
JavaScript
tech

3年ぶりにMAPサービスを作るので、Leafletを使ってみました。
LeafletはJavaScriptライブラリでGoogleMapような、地図を簡単に無料で利用することができます。

CDNでリンクするやり方

HTMLファイルを作成し、CDNからcss/jsファイルを読み込みます。

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

ダウンロードして、使うやり方

上記のリンクからダウンロードして、アーカイブ内には、次の4つのものが含ます。

  1. leaflet.js- 縮小されたLeafletのJavaScriptコードです。
  2. leaflet-src.js- 読み取り可能な縮小されていないLeafletのJavaScriptです。デバッグの際、役立つ場合があります。(integrity=” sha256-tPonvXioSHRQt1+4ztWR5mz/1KG1X3yHNzVXprP2gLo= ”)
  3. leaflet.css- Leafletのスタイルシートです。
  4. images- 参照する画像を含むフォルダですleaflet.cssと同じディレクトリにある必要があります。
<link rel="stylesheet" href="leaflet.css" />
<script src="leaflet.js"></script>

表示する場所

bodyタグ内のマップを表示したい場所にdiv要素を追加します。
なお、マップの高さを指定しないと地図が表示されません。

<div id="mapid" style="width: 100%;height: 600px;"></div>

次はJavascriptを書いていきます。
地図を初期化し、表示される地図の中心地とズームレベルを指定します。
中心地は緯度経度で指定してください。
ズームレベルは使用する地図によって異なります。

const map = L.map('mapid', {
                center: [35.66572, 139.73100],
                zoom: 17,
            });

const 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>',
            });
tileLayer.addTo(map);

まとめると以下のようなコードになります。
それでは、実際に表示してみましょう。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>OpenStreetMapを表示する</title>
        <link rel="stylesheet" href="leaflet.css" />
    </head>

    <body>
        <div id="mapid" style="width: 100%;height: 600px;"></div>

        <script src="leaflet.js"></script>
        <script>
            const map = L.map('mapid', {
                center: [35.66572, 139.73100],
                zoom: 17,
            });
            const 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>',
            });
            tileLayer.addTo(map);

            L.marker([35.66572, 139.73100]).addTo(map);
        </script>
    </body>
</html>

最後に

地図をWebページに載せることができるようになりました。
しかし、ここからがLeafletの素敵なところ。

1.マーカーのアイコンを変更する
2.マーカーに登録したタイトルを検索する機能を付ける
3.マップに画像を設置する
4.マップに絵を描く

など、様々な機能をプラグインを用いることで容易に追加することができます。
今回は地図の表示、Leafletの紹介に収まりましたが、ぜひ好きにカスタマイズしてみてください。

Discussion