index.html

<meta charset="utf-8" />
<script type="module">
  import { style } from "https://js.sabae.cc/stdom.js";
  import L from "https://code4sabae.github.io/leaflet-mjs/leaflet.mjs";
  import { Geo3x3 } from "https://geo3x3.com/Geo3x3.js";
  import { CSV } from "https://js.sabae.cc/CSV.js";
  import { QRCode } from "https://code4fukui.github.io/qr-code/qr-code.js";
  import { fetchImage } from "https://js.sabae.cc/fetchImage.js";
  //import { InputCheckbox } from "https://code4fukui.github.io/input-checkbox/input-checkbox.js";
  import { create } from "https://js.sabae.cc/stdcomp.js";

  class CheckBox extends HTMLElement {
    constructor(s) {
      super();
      const label = create("label", this);
      this.inp = create("input", label);
      this.inp.type = "checkbox";
      create("span", label).textContent = s;
    }
    set checked(b) {
      this.inp.checked = b;
    }
    get checked() {
      return this.inp.checked;
    }
  }

  customElements.define("check-box", CheckBox);

  export { CheckBox };

  const getResized = (w, h, min) => {
    if (w > h) {
      return { width: min, height: (min * h) / w };
    } else {
      return { width: (min * w) / h, height: min };
    }
  };
  const makeTable = (d) => {
    const cr = (tag) => document.createElement(tag);
    const tbl = cr("table");
    for (const name in d) {
      const val = d[name];
      const tr = cr("tr");
      tbl.appendChild(tr);
      const th = cr("th");
      th.textContent = name;
      th.style.whiteSpace = "nowrap";
      tr.appendChild(th);
      const td = cr("td");
      td.style.minWidth = "8em";
      td.style.wordBreak = "break-all";
      const n = val.match(/<a href=(.+)>(.+)<\/a>/);
      if (n) {
        const url = n[1];
        const cap = n[2];
        td.innerHTML = `<a href=${url}>${cap}</a>`;
      } else if (val.startsWith("https://") || val.startsWith("http://")) {
        td.innerHTML = `<a href=${val}>詳細</a>`;
      } else {
        td.textContent = val;
      }
      tr.appendChild(td);
    }
    return tbl;
  };

  window.onload = async () => {
    const comp = document.body;

    const link = document.createElement("link");
    link.rel = "stylesheet";
    link.href =
      "https://code4sabae.github.io/leaflet-mjs/leaflet-grayscale.css";
    comp.appendChild(link);
    link.onload = () => init();
  };
  const init = async () => {
    const comp = document.body;

    document.body.style.margin = "0";
    document.body.style.textAlign = "center";
    comp.style.backgroundColor = "#D74938";
    comp.style.color = "white";
    
    document.title = "越前市国高地区 地域安全マップ「キッズセーフ」";

    const header = document.createElement("header");
    header.style.height = "56px";
    header.style.margin = "0";
    header.style.display = "grid";
    header.style.gridTemplate =`
      "left-button subtitle right-button" 16px
      "left-button title rigth-button" 24px
      / 56px 1fr 56px
    `;
    header.style.gap = "8px";
    header.style.placeContent = "center";
    comp.appendChild(header);

    const menuButton = document.createElement("div");
    menuButton.style.gridArea = "left-button";
    menuButton.style.display = "grid";
    menuButton.style.placeContent = "center";
    menuButton.style.cursor = "pointer";
    menuButton.onclick = () => {
      drawer.style.display = "block";
    };
    header.appendChild(menuButton);

    const menuIconImage = document.createElement("img");
    menuIconImage.setAttribute("src", "./images/icon_menu.svg");
    menuIconImage.style.height = "40px";
    menuIconImage.style.width = "40px";
    menuButton.appendChild(menuIconImage);

    const subtitle = document.createElement("span");
    subtitle.textContent = "越前市国高地区 地域安全マップ";
    subtitle.style.fontSize = "16px";
    subtitle.style.lineHeight = "1";
    subtitle.style.gridArea = "subtitle";
    header.appendChild(subtitle);

    const title = document.createElement("span");
    title.textContent = "キッズセーフ";
    title.style.fontSize = "24px";
    title.style.lineHeight = "1";
    title.style.fontWeight = "bold";
    title.style.gridArea = "title";
    header.appendChild(title);

    const div = document.createElement("div");
    comp.appendChild(div);
    div.className = "divmap";
    style({
      ".divmap": {
        width: "100%",
        height: "calc(100vh - 56px)",
      },
      "@media print": {
        // 印刷用CSS
        ".divmap": {
          width: "100%",
          height: "calc(100vh - 2em - 300px)",
          "background-color": "red",
        },
      },
    });

    const drawer = document.createElement("div");
    drawer.style.display = "none"; // 最初は非表示にする/表示するときはblock
    drawer.style.height = "100%";
    drawer.style.width = "300px";
    drawer.style.position = "absolute";
    drawer.style.top = "0";
    drawer.style.left = "0";
    drawer.style.zIndex = "1000"; // leafletの上に表示できる最小のz-indexがこれ
    drawer.style.backgroundColor = "white";
    drawer.style.color = "black";
    drawer.style.overflow = "hidden";
    comp.appendChild(drawer);

    const closeMenuButton = document.createElement("div");
    closeMenuButton.style.height = "56px";
    closeMenuButton.style.width = "56px";
    closeMenuButton.style.padding = "8px";
    closeMenuButton.style.display = "grid";
    closeMenuButton.style.placeContent = "center";
    closeMenuButton.onclick = () => {
      drawer.style.display = "none";
    };
    drawer.appendChild(closeMenuButton)

    const closeMenuIconImage = document.createElement("img");
    closeMenuIconImage.setAttribute("src", "./images/icon_close.svg");
    closeMenuIconImage.style.height = "40px";
    closeMenuIconImage.style.width = "40px";
    closeMenuButton.appendChild(closeMenuIconImage);

    const drawerItems = document.createElement("div");
    drawerItems.style.height = "calc(100% - 56px)";
    drawerItems.style.width = "100%";
    drawerItems.style.padding = "0 8px 16px";
    drawerItems.style.overflowY = "scroll";
    drawerItems.style.display = "flex";
    drawerItems.style.flexDirection = "column";
    drawerItems.style.gap = "8px";
    drawerItems.style.alignItems = "flex-start";
    drawer.appendChild(drawerItems);

    //
    const map = L.map(div);
    // set 国土地理院地図 https://maps.gsi.go.jp/development/ichiran.html
    L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png", {
      attribution:
        '<a href="https://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>"',
      maxZoom: 21,
      maxNativeZoom: 18,
    }).addTo(map);

    const lls = [];
    const showIcons = async (list, icon0, addlayer = true) => {
      const icon = "./icon/" + icon0;
      const iconlayer = L.layerGroup();
      if (addlayer) {
        iconlayer.addTo(map);
      }
      const opt = {};
      try {
        const img = await fetchImage(icon);
        const size = getResized(img.width, img.height, 50);
        const iconw = size.width;
        const iconh = size.height;
        opt.icon = L.icon({
          iconUrl: icon,
          iconRetilaUrl: icon,
          iconSize: [iconw, iconh],
          iconAnchor: [iconw / 2, iconh / 2],
          popupAnchor: [0, -iconh / 2],
        });
      } catch (e) {
        console.log("can't load: " + icon);
      }
      for (const d of list) {
        const getPos = () => {
          const pos = Geo3x3.decode(d.Geo3x3 || d.geo3x3);
          if (pos) {
            return [pos.lat, pos.lng];
          }
          return [d.lat, d.lng];
        };
        const ll = getPos();
        const marker = L.marker(ll, opt);
        const tbl = makeTable(d);
        tbl.className = "mapinfo";
        marker.bindPopup(tbl.outerHTML); // `<img width="300px" src=${path}>`);
        iconlayer.addLayer(marker);
        lls.push(ll);
      }
      return iconlayer;
    };
    const showPoints = async (list, color) => {
      const iconlayer = L.layerGroup();
      iconlayer.addTo(map);
      for (const d of list) {
        //const pos = Geo3x3.decode(d.Geo3x3 || d.geo3x3);
        //const ll = [pos.lat, pos.lng];
        const ll = [d.lat, d.lng];
        const marker = L.circle(ll, {
          radius: 2,
          color,
          fillColor: color,
          fillOpacity: 1,
        });
        const tbl = makeTable(d);
        tbl.className = "mapinfo";
        marker.bindPopup(tbl.outerHTML); // `<img width="300px" src=${path}>`);
        iconlayer.addLayer(marker);
        lls.push(ll);
      }
      return iconlayer;
    };
    style({
      ".mapinfo": {
        color: "black",
      },
      ".mapinfo td": {
        "text-align": "left",
        "white-space": "pre-wrap",
      },
    });

    //
    const layers = [];

    // 危険箇所
    const url = "./kidssafe.csv";
    const data = CSV.toJSON(await CSV.fetch(url));
    const list = [];
    for (const d of data) {
      const d2 = CSV.toJSON(await CSV.fetch("kidssafe/" + d.name + ".csv"));
      d2.forEach((n) => {
        n["町名"] = d.name;
        list.push(n);
      });
    }
    console.log(list);
    layers.push(["危険箇所2020", await showIcons(list, "danger.png")]);

    // 危険箇所2021
    const list3 = CSV.toJSON(await CSV.fetch("./kidssafe2021.csv"));layers.push(["危険箇所2021以降",await showIcons(list3, "danger2021.png"),]);

    // 不審者情報
    /*
    try {
      const listfusinsya = CSV.toJSON(await CSV.fetch("https://code4fukui.github.io/kunitaka/fusinnsya.csv"));
      layers.push(["不審者情報",await showIcons(listfusinsya,"https://code4fukui.github.io/kunitaka/fusinsya.png"),]);
    } catch (e) {
      console.log("不審者情報でエラー: " + e);
    }
    */

    // ドローン写真
    const list4 = CSV.toJSON(await CSV.fetch("https://code4fukui.github.io/vr-fukui/vr-kunitaka.csv"));
    layers.push(["ドローン写真", await showIcons(list4, "./drone_icon.png")]);

    // 360度カメラ画像
    {
      const info = {
        url: "./cam360.csv",
        name: "360度カメラ",
        icon: "cam360.png",
      };
      const data = CSV.toJSON(await CSV.fetch(info.url));
      //console.log(data);
      layers.push([
        info.name,
        await showIcons(data, info.icon),
      ]);
    }
    // VRスポット
    {
      const info = {
        url: "./vr_spot.csv",
        name: "VRスポット",
        icon: "vr.png",
      };
      const data = CSV.toJSON(await CSV.fetch(info.url));
      //console.log(data);
      layers.push([
        info.name,
        await showIcons(data, info.icon),
      ]);
    }
    // 防犯カメラ
    {
      const info = {
        url: "./bohan_camera.csv",
        name: "防犯カメラ",
        icon: "bohan_camera.png",
      };
      const data = CSV.toJSON(await CSV.fetch(info.url));
      //console.log(data);
      layers.push([
        info.name,
        await showIcons(data, info.icon),
      ]);
    }

    // こども110番の家
    const list2 = CSV.toJSON(await CSV.fetch("./house110.csv"));
    layers.push(["こども110番の家",await showIcons(list2, "house110_icon.png"),]);

    // 街灯
    const listLight = CSV.toJSON(await CSV.fetch("./streetlight/k2.csv"));
    layers.push(["街灯", await showPoints(listLight, "#fa0")]);

    if (lls.length) {
      map.fitBounds(lls);
    }

    //通学路 geojson
    const roadLayer = L.layerGroup();
    const geojsonurl1 = "./schoolzone1.geojson";
    console.log(geojsonurl1);
    const geojson1 = await (await fetch(geojsonurl1)).json();
    console.log(geojson1);
    const schoolzone1 = L.geoJson(geojson1, {
      style: () => {
        return {
          color: "#ff0000",
          opacity: 1,
          weight: 5,
        };
      },
    });
    const geojsonurl2 = "./schoolzone2.geojson";
    console.log(geojsonurl2);
    const geojson2 = await (await fetch(geojsonurl2)).json();
    console.log(geojson2);
    const schoolzone2 = L.geoJson(geojson2, {
      style: () => {
        return {
          color: "#00ff00",
          opacity: 1,
          weight: 5,
        };
      },
    });
    roadLayer.addLayer(schoolzone1);
    roadLayer.addLayer(schoolzone2);
    roadLayer.addTo(map);
    layers.push(["通学路", roadLayer]);
    
    //グリーンベルト
    // layers.push(["グリーンベルト", schoolzone2]);

    //事故地点
    const accidneturl = "accidents_kuknitaka_geo3x3.csv";
    const accidents = CSV.toJSON(await CSV.fetch(accidneturl));
    layers.push([
      "事故地点",
      await showIcons(accidents, "tobidashi_kodomo.png"),
    ]);

    // テレマティクス
    {
      const urls = [
        "aioi_events.csv",
        "aioi_events_additional.csv",
      ];
      const data = [];
      for (const url of urls) {
        const data0 = CSV.toJSON(await CSV.fetch(url));
        const data2 = data0.map(d => ({ name: d.イベント, 発生件数: d.発生件数, lat: d.緯度, lng: d.経度 })).filter(d => d.lat || d.lng);
        data2.forEach(d => data.push(d));
      }
      const names = [
        ["急加速", "speed"],
        ["急ブレーキ", "brake"],
        ["前方衝突警告", "aioi_3"],
        ["急ハンドル", "aioi_4"],
        ["ふらつき", "aioi_5"],
        ["車線逸脱警告", "aioi_6"],
        ["速度超過", "aioi_7"],
        ["衝突", "aioi_8"],
      ];
      for (let i = 0; i < names.length; i++) {
        const name = names[i][0];
        const icon = names[i][1];
        const data3 = data.filter(d => d.name == name);
        layers.push([
          "テレマティクスデータ " + name,
          await showIcons(data3, icon + ".png", false),
        ]);
      }
    }


    // for (const point of accidents){
    //     const marker = L.icon([parseFloat(point.緯度), parseFloat(point.経度)],
    //     { icon: L.spriteIcon(point.color) });
    // }
    //     marker.addTo(map);

    // レイヤー選択
    {
      for (const layer of layers) {
        const chk = new CheckBox(layer[0]);
        drawerItems.appendChild(chk);
        if (!layer[0].startsWith("テレマティクスデータ")) {
          chk.checked = true;
        } else {
          chk.checked = false;
        }
        if (!chk.checked) {
          map.removeLayer(layer[1]);
        }
        chk.onchange = () => {
          if (chk.checked) {
            map.addLayer(layer[1]);
          } else {
            map.removeLayer(layer[1]);
          }
        };
      }
    }

    // 現在地を取得してピンを打つ
    const currentPositionMarker = L.marker([36, 140], {title: "現在地"}).addTo(map).bindPopup("現在地");
    navigator.geolocation.getCurrentPosition((position) => {
      const currentLoc = [position.coords.latitude, position.coords.longitude];
      currentPositionMarker.setLatLng(currentLoc);
    })

    // 現在地を監視してピン/マップを動かす
    const watchGPS = new CheckBox("現在地追従モード")
    let watchPosition;
    watchGPS.checked = false
    watchGPS.onchange = () => {
      if (watchGPS.checked) {
        watchPosition = navigator.geolocation.watchPosition((position) => {
          const currentLoc = [position.coords.latitude, position.coords.longitude];
          currentPositionMarker.setLatLng(currentLoc);
          map.setView(currentLoc, 16);
        });
      } else {
        navigator.geolocation.clearWatch(watchPosition);
      }
    };
    drawerItems.appendChild(watchGPS);

    // footer
    const links = [
      { text: "データ編集や閲覧はGitHubで", url: "https://github.com/code4fukui/kunitaka/tree/main/kidssafe" },
      { text: "アイコン（きけん、急ブレーキ、急加速） CC BY okiku.graphic", url: "https://www.instagram.com/okame.graphic/" },
      { text: "アイコン（その他） by いらすとや", url: "https://www.irasutoya.com/" },
      { text: "下記データは、オープンデータライセンスでご利用いただけます", url: "https://github.com/code4fukui/opendata-license/" },
      { text: "テレマティクスオープンデータ by あいおいニッセイ同和損保", url: "https://www.aioinissaydowa.co.jp/" },
      { text: "地域安全オープンデータ by 国高地区自治振興会", url: "https://www.city.echizen.lg.jp/office/010/130030/kunitaka.html" },
      { text: "街灯オープンデータ by 越前市", url: "http://www.city.echizen.lg.jp/index.html" },
    ];
    for (const link of links) {
      const a = document.createElement("a");
      a.style.display = "block";
      a.style.textAlign = "left";
      a.textContent = link.text;
      a.href = link.url; // "https://github.com/code4fukui/kunitaka/";
      drawerItems.appendChild(a);
    }

    const qr = new QRCode();
    qr.style.width = "100%";
    qr.style.display = "grid";
    qr.style.placeContent = "center";
    drawerItems.appendChild(qr);
  };
</script>

<style>
  * {
    box-sizing: border-box;
  }

  .selectlayers {
    margin: 1em;
  }
</style>