npm - splatone - Versions diffs - 0.0.1 - Mend

splatone 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/.gitattributes +2 -0
package/.vscode/settings.json +1 -0
package/LICENSE +21 -0
package/README.md +28 -0
package/crawler.js +570 -0
package/lib/PluginBase.js +23 -0
package/lib/VisualizerBase.js +15 -0
package/lib/paletteGenerator.js +532 -0
package/lib/pluginLoader.js +146 -0
package/lib/util.js +180 -0
package/package.json +36 -0
package/plugins/flickr/index.js +55 -0
package/plugins/flickr/worker.js +77 -0
package/public/style.css +318 -0
package/public/visualizer.js +49 -0
package/views/index.ejs +740 -0
package/visualizer/bulky/node.js +41 -0
package/visualizer/bulky/web.js +29 -0
package/visualizer/marker-cluster/node.js +50 -0
package/visualizer/marker-cluster/public/style.css +1 -0
package/visualizer/marker-cluster/web.js +153 -0

package/views/index.ejs ADDED Viewed

@@ -0,0 +1,740 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8" />
+  <title>
+    <%= title %>
+  </title>
+  <!-- Leaflet CSS -->
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="anonymous" />
+  <!-- Leaflet.draw CSS -->
+  <link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css" crossorigin="anonymous" />
+  <link rel="stylesheet" href="/style.css" />
+</head>
+<body>
+  <!-- ハンバーガー -->
+  <button id="hamburger" class="hamburger" aria-label="Open controls" aria-expanded="false" aria-controls="sidepanel">
+    ☰
+  </button>
+  <!-- スライドオーバー（右） -->
+  <aside id="sidepanel" class="sidepanel" aria-hidden="true">
+    <header class="panel-header">
+      <h2>Controls</h2>
+      <button id="panelClose" class="icon-btn" aria-label="Close controls">✕</button>
+    </header>
+    <div class="panel-body">
+      <section class="panel-section">
+        <p class="muted">
+          地図上で <strong>矩形をドラッグ</strong> して BBOX を指定してください。<br>
+          クリックした三角形と、<em>共有辺を持つ別Hexの三角形</em>が同時にハイライトされます。
+        </p>
+      </section>
+      <section class="panel-section">
+        <label class="field">
+          <span>Keywords</span>
+          <input id="keywords" type="text" value="<%= defaultKeywords %>" />
+        </label>
+        <label class="field">
+          <span>cellSize</span>
+          <input id="cellSize" type="number" step="0.1" min="0.05" value="<%= defaultCellSize %>" />
+        </label>
+        <label class="field">
+          <span>units</span>
+          <select id="units">
+            <option value="kilometers" <%=defaultUnits==='kilometers' ?'selected':'' %>>kilometers</option>
+            <option value="meters" <%=defaultUnits==='meters' ?'selected':'' %>>meters</option>
+            <option value="miles" <%=defaultUnits==='miles' ?'selected':'' %>>miles</option>
+          </select>
+        </label>
+        <label class="check">
+          <input id="toggleTriangles" type="checkbox" checked />
+          <span>Show triangles</span>
+        </label>
+        <label class="check">
+          <input id="toggleHexLabels" type="checkbox" />
+          <span>Show Hex IDs</span>
+        </label>
+        <div class="panel-actions">
+          <button id="clear" class="btn">Clear</button>
+        </div>
+        <div class="bbox-row">
+          <span id="bboxLabel" class="bbox-label"></span>
+        </div>
+      </section>
+      <section class="panel-section">
+        <details>
+          <summary>ヘルプ</summary>
+          <ul class="muted">
+            <li>左上の四角いツールで矩形を描画します。</li>
+            <li>矩形を編集すると自動で再生成します。</li>
+            <li>三角形をクリックすると、隣接する他Hexの三角形を同時ハイライト。</li>
+          </ul>
+        </details>
+      </section>
+    </div>
+  </aside>
+  <!-- パネルの背面オーバーレイ -->
+  <div id="panelOverlay" class="panel-overlay" hidden></div>
+  <!-- 地図 -->
+  <div id="map"></div>
+  <!-- Leaflet JS -->
+  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin="anonymous"></script>
+  <!-- Leaflet.draw JS -->
+  <script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js" crossorigin="anonymous"></script>
+  <!-- Socket.IO JS -->
+  <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
+  <!-- Visualize.js -->
+  <script src="visualizer.js"></script>
+  <!-- Main JS -->
+  <script type="module">
+    const lat = <%= lat %>;
+    const lon = <%= lon %>;
+    const socket = io({
+      path: "/socket",
+      reconnection: false
+    });
+    function setProgress(el, value) {
+      //プログレスバー
+      const v = Math.max(0, Math.min(100, Number(value)));
+      el.style.setProperty('--value', v);
+      el.setAttribute('aria-valuenow', String(v));
+      const label = el.querySelector('.progress__label');
+      if (label) label.textContent = v + '%';
+    }
+    function downloadJSON(filename, obj) {
+      const json = JSON.stringify(obj, null, 2);
+      const blob = new Blob([json], {
+        type: "application/json"
+      });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(url);
+    }
+    socket.on('connect', () => {
+      //console.log('Connected to server');
+    });
+    socket.on('disconnect', () => {
+      //console.log('Disconnected from server');
+    });
+    let sessionId=null;
+    let visualizers = {};
+    let layerControl=null;
+    socket.on("welcome",async (res) => {
+      //console.log(`welcome ${res.sessionId} at ${new Date(res.time).toLocaleTimeString()}`);
+      console.log("VIS",res.visualizers);
+      sessionId = res.sessionId;
+      visualizers = Object.fromEntries(await Promise.all(res.visualizers.map(async vis => { const m = await import(new URL(`./visualizer/${vis}/web.js`, import.meta.url).href); return [vis, m.entry ?? m.default ?? m[vis]]; })));
+      console.log(visualizers);
+    });
+    function generateLegend(legends) {
+      return legends.reduce(
+        (memo, legend) => {
+          return memo + `<li><span class="legend_circle" style="border-color:${legend.stroke};background:${legend.fill};"></span><span class="legend_category">${legend.category}</spam></li>`
+        },
+        "");
+    }
+    const BottomLeftProgressBar = L.Control.extend({
+      options: {
+        position: 'bottomleft'
+      },
+      onAdd(map) {
+        const div = L.DomUtil.create('div', 'map-bottom-left-progressbar');
+        div.innerHTML = `
+    <div class="panel-contents">
+    <!-- 幅は親 .progress-wrap の width/max-width で制御。 -->
+    <div id="progressCrawl" class="progress is-lg" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="32" aria-label="進捗" style="--value:32">
+    <div class="progress__bar" aria-hidden="true"></div>
+    <div class="progress__label" aria-hidden="true">32%</div>
+    </div>
+    </div>`;
+        // コントロール内の操作が地図ドラッグに奪われないようにする
+        L.DomEvent.disableClickPropagation(div);
+        L.DomEvent.disableScrollPropagation(div);
+        return div;
+      }
+    });
+    const BottomLeftLegend = L.Control.extend({
+      options: {
+        position: 'bottomleft'
+      },
+      onAdd(map) {
+        const div = L.DomUtil.create('div', 'map-bottom-left-legend');
+        div.innerHTML = `
+    <div class="panel-contents">
+      <div id="map_legend">
+      </div>
+      <div class="center-x">
+        <button id="download-json" class="dl-btn" title="Download JSON">
+          <!-- インラインSVG（ダウンロードアイコン） -->
+          <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+            <path d="M12 3v9m0 0l4-4m-4 4L8 8m-5 9v2a2 2 0 002 2h14a2 2 0 002-2v-2"
+                  fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <span class="label">ダウンロード</span>
+        </button>
+      </div>
+    </div>`;
+        // コントロール内の操作が地図ドラッグに奪われないようにする
+        L.DomEvent.disableClickPropagation(div);
+        L.DomEvent.disableScrollPropagation(div);
+        return div;
+      }
+    });
+    socket.on('progress', (res) => {
+      //console.table(res.progress);
+      //console.log(Object.values(res.progress));
+      let {
+        crawled,
+        total
+      } = Object.values(res.progress).reduce(
+        (acc, g) => (g == null ? acc : {
+          crawled: acc.crawled + (g.crawled ?? 0),
+          total: acc.total + (g.total ?? 0)
+        }), {
+        crawled: 0,
+        total: 0
+      }
+      );
+      if (total == 0) {
+        crawled = 1, total = 1;
+      }
+      const percent = Math.round((crawled / total) * 100);
+      console.log(`[Done] ${crawled} / ${total} --> ${percent}`);
+      setProgress(document.getElementById("progressCrawl"), percent);
+      //ここでHexのプログレスグラデーションレイヤのOpacity調整
+      highlightHexById(res.hexId, 1 - res.progress[res.hexId].percent, "#263238");
+    });
+    function isPlainObject(a) {
+      if (a === null || typeof a !== 'object') return false;  // 原始値/関数など除外
+      const proto = Object.getPrototypeOf(a);
+      return proto === Object.prototype || proto === null;     // {} / Object.create(null)
+    }
+    let latestResult = {};
+    const overlays = {};
+    socket.on('result',async (res) => {
+      latestResult["_"]["visualizers"] = res.visualizers;
+      latestResult["_"]["plugin"] = res.plugin;
+      clearHexHighlight();
+      latestResult = {...latestResult, ...res.geoJson};
+      console.log("result");
+      console.log("geoJSON",res.geoJson);
+      for(const vis in visualizers){
+        const layers = await visualizers[vis](map, res.geoJson[vis], {palette:res.palette});
+        console.log("【レイヤ】",layers);
+        if((layers == null) ){
+          //SKIP
+        }else if(layers.hasOwnProperty("type") && layers["type"]=="FeatureCollection"){
+          //レイヤ一つ
+          overlays[`[${vis}]`] =  layers;
+        }else{
+          for(const name in layers){
+            overlays[`[${vis}] ${name}`] =  layers[name];
+          }
+        }
+      }
+      //進捗バーを消して凡例を表示
+      if (myProgress) map.removeControl(myProgress);
+      myLegend = new BottomLeftLegend().addTo(map);
+      document.getElementById('map_legend')?.replaceChildren();
+      const ul = document.createElement('div');
+      ul.className = 'legend_ul';
+      const palette = [];
+      for (const cat in res.palette) {
+        palette.push({
+          category: cat,
+          fill: res.palette[cat].color,
+          stroke: res.palette[cat].darken
+        });
+      }
+      ul.innerHTML = generateLegend(palette);
+      console.log(overlays);
+      layerControl = L.control.layers([baseLayer], {
+        ...overlays,
+        "Hex Grid": hexLayer,
+        "Tri Grid": triLayer
+      }, {
+        position: 'topleft'
+      });
+      layerControl.addTo(map);
+      document.getElementById("map_legend")?.appendChild(ul);
+      document.getElementById("download-json").addEventListener("click", () => {
+        const stamp = new Date().toISOString().replace(/[:.]/g, "-");
+        downloadJSON(`data-${stamp}.json`, latestResult);
+        let sessionId = null;
+      });
+    });
+    // 地図
+    const map = L.map('map', {
+      preferCanvas:true,
+      zoomControl: true
+    }).setView([lat, lon], 12);
+    const baseLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
+      maxZoom: 19,
+      attribution: '&copy; OpenStreetMap contributors'
+    }).addTo(map);
+    /*
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxZoom: 19,
+      attribution: '&copy; OpenStreetMap contributors'
+    }).addTo(map);
+    */
+    // Drawn items
+    const drawnItems = new L.FeatureGroup();
+    map.addLayer(drawnItems);
+    // Draw control（矩形・ポリゴンのみ）
+    const drawControl = new L.Control.Draw({
+      position: 'topleft',
+      draw: {
+        polygon: {
+          allowIntersection: false,
+          showArea: true,
+          metric: true,
+        },
+        polyline: false,
+        marker: false,
+        circle: false,
+        circlemarker: false,
+        rectangle: {
+          shapeOptions: {
+            weight: 1,
+            fillOpacity: 0
+          }
+        }
+      },
+      /* edit: {
+        featureGroup: drawnItems,
+        edit: true,
+        remove: true
+      }*/
+    });
+    map.addControl(drawControl);
+    // レイヤ参照
+    let hexLayer = null;
+    let triLayer = null;
+    let myStartBtn = null;
+    let myLegend = null;
+    let myProgress = null;
+    let hexLayerIndex = {}; // hexId -> layer
+    let triLayerIndex = {}; // triangleId -> layer
+    let hexLabelLayer = L.layerGroup(); // Hex IDラベル群
+    // Util: Bounds → "minLon,minLat,maxLon,maxLat"
+    function boundsToBbox(bounds) {
+      return [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()].join(',');
+    }
+    // ハイライト制御
+    function clearHexHighlight() {
+      Object.values(hexLayerIndex).forEach(layer => {
+        layer.setStyle({
+          weight: 2,
+          opacity: 0.5,
+          fillOpacity: 0.1,
+          color: "#37474F",
+          fillColor: "#546E7A",
+        });
+      });
+    }
+    function highlightHexById(hexId, fillOpacity = 0.7, fillColor = "#3949AB") {
+      const layer = hexLayerIndex[hexId];
+      if (layer) {
+        layer.setStyle({
+          weight: 2,
+          opacity: 1,
+          fillOpacity: fillOpacity,
+          color: "#37474F",
+          fillColor: fillColor,
+        });
+        if (layer.bringToFront) layer.bringToFront();
+      }
+    }
+    function clearTriHighlight() {
+      Object.values(triLayerIndex).forEach(layer => {
+        layer.setStyle({
+          weight: 1,
+          opacity: 0.8,
+          fillOpacity: 0,
+          fillColor: "#EC407A",
+          color: "#F50057",
+          dashArray: "10 20",
+          dashOffset: 10,
+        });
+      });
+    }
+    function highlightTriangle(triId, style = {
+      weight: 1,
+      opacity: 1,
+      fillOpacity: 0.5,
+      fillColor: "#EC407A",
+      color: "#F50057",
+      dashArray: "15,30",
+      dashOffset: 0,
+    }) {
+      const layer = triLayerIndex[triId];
+      if (layer) {
+        layer.setStyle(style);
+        if (layer.bringToFront) layer.bringToFront();
+      }
+    }
+    // Hex IDラベルを作成
+    function renderHexLabels(hexFC) {
+      hexLabelLayer.clearLayers();
+      hexFC.features.forEach(f => {
+        const id = f.properties?.hexId;
+        if (!id) return;
+        const coords = f.geometry.coordinates[0];
+        let sumLat = 0,
+          sumLon = 0,
+          n = 0;
+        coords.slice(0, -1).forEach(([lon, lat]) => {
+          sumLat += lat;
+          sumLon += lon;
+          n++;
+        });
+        const lat = sumLat / n,
+          lon = sumLon / n;
+        const icon = L.divIcon({
+          html: `<div style="font-size:12px;font-weight:600;background:rgba(255,255,255,.85);padding:2px 4px;border-radius:4px;border:1px solid #999;">${id}</div>`,
+          className: '',
+          iconSize: [0, 0]
+        });
+        L.marker([lat, lon], {
+          icon
+        }).addTo(hexLabelLayer);
+      });
+    }
+    // Hex / Triangles を描画
+    function renderLayers(hexFC, trianglesFC) {
+      if (hexLayer) map.removeLayer(hexLayer);
+      if (triLayer) map.removeLayer(triLayer);
+      document.getElementById('map_legend')?.replaceChildren();
+      if (myLegend) map.removeControl(myLegend);
+      if (myStartBtn) map.removeControl(myStartBtn);
+      hexLabelLayer.removeFrom(map);
+      hexLayerIndex = {};
+      triLayerIndex = {};
+      // 六角形
+      hexLayer = L.geoJSON(hexFC, {
+        style: {
+          weight: 2,
+          opacity: 0.5,
+          fillOpacity: 0.1,
+          color: "#37474F",
+          fillColor: "#546E7A",
+        },
+        onEachFeature: (feature, layer) => {
+          const hid = feature.properties?.hexId;
+          if (hid != null) hexLayerIndex[hid] = layer;
+          const triIds = feature.properties?.triIds?.length ? feature.properties.triIds.join(', ') : 'N/A';
+          layer.bindPopup(`Hex ID: ${hid}<br>Triangles: ${triIds}`);
+        }
+      }).addTo(map);
+      const BottomLeftPanel = L.Control.extend({
+        options: {
+          position: 'bottomleft'
+        },
+        onAdd(map) {
+          const div = L.DomUtil.create('div', 'map-bottom-left-control');
+          div.innerHTML = `
+      <div class="panel-contents">
+        <button class="btn"id="doSomething">Start Crawling!</button>
+      </div>`;
+          // コントロール内の操作が地図ドラッグに奪われないようにする
+          L.DomEvent.disableClickPropagation(div);
+          L.DomEvent.disableScrollPropagation(div);
+          const btn = div.querySelector('#doSomething');
+          btn.addEventListener('click', (ev) => {
+            ev.preventDefault();
+            ev.stopPropagation(); // 念のため地図へのバブリングも止める
+            if (myStartBtn) map.removeControl(myStartBtn);
+            myProgress = new BottomLeftProgressBar().addTo(map);
+            // ---- 任意の処理 ----
+            socket.emit("crawling", {
+              sessionId: sessionId,
+            });
+          }, {
+            once: true
+          });
+          return div;
+        }
+      });
+      myStartBtn = new BottomLeftPanel().addTo(map);
+      // 三角形
+      triLayer = L.geoJSON(trianglesFC, {
+        style: {
+          weight: 1,
+          opacity: 0.8,
+          fillOpacity: 0,
+          fillColor: "#EC407A",
+          color: "#F50057",
+          dashArray: "15,30",
+          dashOffset: 0,
+        },
+        onEachFeature: (feature, layer) => {
+          const pid = feature.properties?.parentHexId ?? 'N/A';
+          const tid = feature.properties?.triangleId ?? 'N/A';
+          const cross = feature.properties?.crossNeighbors ?? [];
+          const neighborHexIds = feature.properties?.neighborHexIds ?? [];
+          triLayerIndex[tid] = layer;
+          layer.bindPopup(
+            `Triangle: ${tid}<br>` +
+            `Parent Hex: ${pid}<br>` +
+            `Cross neighbors: ${cross.length ? cross.join(', ') : 'None'}<br>` +
+            `Neighbor Hexes: ${neighborHexIds.length ? neighborHexIds.join(', ') : 'None'}`
+          );
+          layer.on('click', () => {
+            // クリック時：当該三角形＋交差隣接三角形をハイライト
+            clearHexHighlight();
+            clearTriHighlight();
+            highlightHexById(pid); // 親Hexも強調
+            highlightTriangle(tid, {
+              weight: 3,
+              opacity: 1,
+              fillOpacity: 0.30
+            }); // クリック対象
+            // 隣接（別Hex）の三角形を同時に強調
+            cross.forEach(cid => {
+              highlightTriangle(cid, {
+                weight: 2,
+                opacity: 1,
+                fillOpacity: 0.25
+              });
+              // その親Hexも薄く強調
+              const neighborLayer = triLayerIndex[cid];
+              if (neighborLayer) {
+                const pHex = neighborLayer.feature?.properties?.parentHexId;
+                if (pHex != null) highlightHexById(pHex);
+              }
+            });
+          });
+          // マウスアウトで三角形のハイライトだけ戻す（Hexは維持）
+          layer.on('mouseout', () => {
+            clearTriHighlight();
+          });
+        }
+      });
+      // 三角形トグル
+      if (document.getElementById('toggleTriangles').checked) {
+        triLayer.addTo(map);
+      }
+      // Hex ID ラベル
+      renderHexLabels(hexFC);
+      if (document.getElementById('toggleHexLabels').checked) {
+        hexLabelLayer.addTo(map);
+      }
+      // ビュー調整
+      const layers = [hexLayer];
+      if (document.getElementById('toggleTriangles').checked) layers.push(triLayer);
+      const bounds = L.featureGroup(layers).getBounds();
+      if (bounds.isValid()) map.fitBounds(bounds, {
+        padding: [20, 20]
+      });
+    }
+    // API呼び出し
+    async function loadHexgridByBounds(bounds, drawn = null) {
+      const bbox = boundsToBbox(bounds);
+      document.getElementById('bboxLabel').textContent = `BBOX: ${bbox}`;
+      const cellSize = document.getElementById('cellSize').value.trim();
+      const units = document.getElementById('units').value.trim();
+      const keywords = document.getElementById('keywords').value.trim();
+      latestResult["_"]??={};
+      latestResult["_"]["keywords"] = keywords;
+      socket.once("hexgrid", (res) => {
+        if (res.sessionId) sessionId = res.sessionId;
+        //console.log(`hexgrid received (${res.hex.features.length} hexes, ${res.triangles.features.length} triangles)`);
+        const hex = res.hex;
+        const triangles = res.triangles;
+        latestResult["_"]["hex"] = hex;
+        latestResult["_"]["triangles"]=[triangles];
+        renderLayers(hex, triangles);
+      });
+      socket.emit("target", {
+        sessionId: sessionId,
+        query: {
+          bbox: bbox,
+          drawn: drawn,
+          cellSize: cellSize,
+          units: units,
+          tags: keywords
+        }
+      });
+    }
+    // Draw イベント
+    map.on(L.Draw.Event.CREATED, async (e) => {
+      drawnItems.clearLayers();
+      const layer = e.layer;
+      drawnItems.addLayer(layer);
+      try {
+        await loadHexgridByBounds(layer.getBounds(), layer.toGeoJSON());
+      } catch (err) {
+        alert(err.message);
+      }
+    });
+    map.on(L.Draw.Event.EDITSTOP, async () => {
+      const layers = drawnItems.getLayers();
+      if (layers.length === 1) {
+        try {
+          await loadHexgridByBounds(layers[0].getBounds(), layers[0].toGeoJSON());
+        } catch (err) {
+          alert(err.message);
+        }
+      }
+    });
+    map.on(L.Draw.Event.DELETED, () => {
+      drawnItems.clearLayers();
+      if (hexLayer) {
+        map.removeLayer(hexLayer);
+        hexLayer = null;
+      }
+      if (triLayer) {
+        map.removeLayer(triLayer);
+        triLayer = null;
+      }
+      if (myStartBtn) {
+        map.removeControl(myStartBtn);
+        myStartBtn = null;
+      }
+      if (myLegend) {
+        document.getElementById('map_legend')?.replaceChildren();
+        map.removeControl(myLegend);
+        myLegend = null;
+      }
+      hexLabelLayer.removeFrom(map);
+      document.getElementById('bboxLabel').textContent = '';
+    });
+    // ======= ハンバーガー / パネル制御 =======
+    const hamburger = document.getElementById('hamburger');
+    const sidepanel = document.getElementById('sidepanel');
+    const panelClose = document.getElementById('panelClose');
+    const panelOverlay = document.getElementById('panelOverlay');
+    function openPanel() {
+      sidepanel.classList.add('open');
+      hamburger.setAttribute('aria-expanded', 'true');
+      sidepanel.setAttribute('aria-hidden', 'false');
+      panelOverlay.hidden = false;
+      // 画面幅が狭い時に、Leafletのツールと干渉しないようパネルを最前面に
+    }
+    function closePanel() {
+      sidepanel.classList.remove('open');
+      hamburger.setAttribute('aria-expanded', 'false');
+      sidepanel.setAttribute('aria-hidden', 'true');
+      panelOverlay.hidden = true;
+    }
+    hamburger.addEventListener('click', () => {
+      if (sidepanel.classList.contains('open')) closePanel();
+      else openPanel();
+    });
+    panelClose.addEventListener('click', closePanel);
+    panelOverlay.addEventListener('click', closePanel);
+    // ESCで閉じる
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') closePanel();
+    });
+    // UIトグル
+    document.getElementById('clear').addEventListener('click', () => {
+      drawnItems.clearLayers();
+      if (hexLayer) {
+        map.removeLayer(hexLayer);
+        hexLayer = null;
+      }
+      if (triLayer) {
+        map.removeLayer(triLayer);
+        triLayer = null;
+      }
+      if (myStartBtn) {
+        map.removeControl(myStartBtn);
+        myStartBtn = null;
+      }
+      if (myLegend) {
+        document.getElementById('map_legend')?.replaceChildren();
+        map.removeControl(myLegend);
+        myLegend = null;
+      }
+      hexLabelLayer.removeFrom(map);
+      document.getElementById('bboxLabel').textContent = '';
+    });
+    document.getElementById('toggleTriangles').addEventListener('change', () => {
+      if (!triLayer) return;
+      if (document.getElementById('toggleTriangles').checked) triLayer.addTo(map);
+      else map.removeLayer(triLayer);
+    });
+    document.getElementById('toggleHexLabels').addEventListener('change', () => {
+      if (document.getElementById('toggleHexLabels').checked) {
+        hexLabelLayer.addTo(map);
+      } else {
+        hexLabelLayer.removeFrom(map);
+      }
+    });
+    // 初期は描画待ち（必要なら初期BBOXを有効化）
+    // loadHexgridByBounds(L.latLngBounds([35.53, 139.55], [35.80, 139.92]));
+  </script>
+</body>
+</html>