【Leaflet】CSSを使って独自のUIを追加する

Leafletで作った地図にライブラリの機能を使わずにCSSを使って独自のUIを追加したい！

概要

今回の記事では、Leafletで作った地図にライブラリの機能を使わずにCSSを使って独自のUIを追加する手順を掲載する。

仕様書

環境

Leaflet 1.7.1

手順書

今回は、Leafletで作った地図の中にLeafletの機能を使わずにCSSを使って独自のUIを追加する。
JSを使わずにHTMLを直接入力できるので、こちらの方が簡単かつ自由にUIを作ることができる。

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Leaflet Test</title>
    <style>
      .menu-right {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: #ffffff;
        z-index: 400;
        padding: 16px;

        overflow: hidden;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      }
    </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);
      }
    </script>
  </head>
  <body onload="init()">
    <div
      id="leaflet-container"
      style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
    ></div>
    <div class="menu-right">
      <a target="_blank" href="https://blog.nekonium.com">ネコニウム研究所</a>
    </div>
  </body>
</html>

解説

地図の上に重ねて表示する要素に設定するクラス（CSS）。

      .menu-right {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: #ffffff;
        z-index: 400;
        padding: 16px;

        overflow: hidden;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      }

ポイントは下記の2点。

position: absolute;で絶対位置に配置されるよう設定する。
z-index: 400;でz順（要素の重なり準）を400以上に設定する。

    <div class="menu-right">
      <a target="_blank" href="https://blog.nekonium.com">ネコニウム研究所</a>
    </div>

デモ

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

See the Pen
Leaflet Add UI Test 2 by 108nen (@108nen)
on CodePen.

前回同様、CODEPEN上でCSSが効かない…。（編集画面では効いてる）
後で直します。

まとめ（感想文）

CSSを使った実装の方がPHPやASPと連携しやすい気がする。