【Leaflet】地図に独自のUIを追加する

Leafletで作った地図に独自のUIを追加したい！

概要

今回の記事では、Leafletで作った地図に独自のUIを追加する手順を掲載する。

仕様書

環境

Leaflet 1.7.1

手順書

今回は、地図の左上と右上に独自のUIを追加してみる。（左上はズームイン・アウトのコントロールの下に追加される）

コードは下記のようになる。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Leaflet Test</title>
    <style>
      .menu-right {
        border: solid 1px;
        background-color: #ffffff;
        border-radius: 4px;
        padding: 8px;
        color: #000000;
      }
    </style>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script>
      function init() {
        var image = {
          url: "https://blog.nekonium.com/wp-content/uploads/catacombs_of_the_cursed_witch.png",
          width: 2030,
          height: 2730,
        };

        var map = L.map("leaflet-container", {
          crs: L.CRS.Simple,
          minZoom: -1,
          maxZoom: 5,
        });

        var imageBounds = L.latLngBounds([
          map.unproject([0, image.height], 4),
          map.unproject([image.width, 0], 4),
        ]);

        map.fitBounds(imageBounds);
        map.setMaxBounds(imageBounds.pad(0.5));

        L.imageOverlay(image.url, imageBounds).addTo(map);

        var menuRight = L.control({ position: "topright" });
        menuRight.onAdd = function (map) {
          this.ele = L.DomUtil.create("div", "menu-right");
          this.ele.id = "id_menu_right";
          return this.ele;
        };
        menuRight.addTo(map);

        document.getElementById("id_menu_right").innerHTML = "<a target='_blank' href='https://blog.nekonium.com'>ネコニウム研究所</a>";

        var menuLeft = L.control({ position: "topleft" });
        menuLeft.onAdd = function (map) {
          this.ele = L.DomUtil.create("div");
          this.ele.id = "id_menu_left";
          return this.ele;
        };
        menuLeft.addTo(map);

        document.getElementById("id_menu_left").innerHTML = "<a target='_blank' href='https://blog.nekonium.com'><img src='https://blog.nekonium.com/favicon.png' width='30px' height='30px' /></a>";
      }
    </script>
  </head>
  <body onload="init()">
    <div
      id="leaflet-container"
      style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
    ></div>
  </body>
</html>

右上のUIを追加する部分。

        var menuRight = L.control({ position: "topright" });
        menuRight.onAdd = function (map) {
          this.ele = L.DomUtil.create("div", "menu-right");
          this.ele.id = "id_menu_right";
          return this.ele;
        };
        menuRight.addTo(map);

L.control({ position: "topright" })のpositionの値に追加するUIの位置を文字列で設定する。
指定できる文字列と一の一覧は下記のとおり。

文字列	位置
topleft	左上
topright	右上
bottomleft	左下
bottomright	右下

L.DomUtil.create("div", "menu-right")の第1引数は追加するタグ（要素）を、第2引数は追加するタグ（要素）のクラス（CSS）を設定する。

this.ele.id = "id_menu_right"で追加するタグ（要素）のIDを設定する。

右上のUIの内容を設定する部分。

        document.getElementById("id_menu_right").innerHTML =　"<a target='_blank' href='https://blog.nekonium.com'>ネコニウム研究所</a>";

IDから要素を取得して、要素の内部のHTMLを代入する。
お試しに当サイト名とリンクを代入した。

左上のUIを追加する部分。

var menuLeft = L.control({ position: "topleft" });
        menuLeft.onAdd = function (map) {
          this.ele = L.DomUtil.create("div");
          this.ele.id = "id_menu_left";
          return this.ele;
        };
        menuLeft.addTo(map);

やってることは右上のUIを追加したときとほとんど同じ。

L.DomUtil.create("div")の部分、今回は第2引数を省略してクラス（CSS）の設定を行わない。

        document.getElementById("id_menu_left").innerHTML = "<a target='_blank' href='https://blog.nekonium.com'><img src='https://blog.nekonium.com/favicon.png' width='30px' height='30px' /></a>";

左上のUIの内容を設定する部分。
こちらも右上とほとんど同様。
当サイトのアイコン（画像）を表示してみた。

デモ

CODEPENで動かしてみると下記のような感じ。

See the Pen
Untitled by 108nen (@108nen)
on CodePen.

CODEPEN上では、JSで追加した要素に対するCSSが効いてない。（編集画面では効いてたんだけども）

まとめ（感想文）

Leafletのライブラリに含まれてる機能でUIを追加してみた。

標準のCSSだけでUIのように表示させる方法もあるので、次回掲載する。