## マップ上にアイコンを表示させたい

ShogoHirasawa commented 2 years ago

したいこと

以下の画像のように、任意の位置に画像をプロットしたい
画像の出典

用意できているもの

表示させたい画像

画像を表示させたい場所のpointデータをベクトルタイル化したもの

表示させるそもそものWebマップ

行ったこと1

このドキュメントを参考にして以下のコードを追加してみた。
pngデータのURLを"https://furuhashilab.github.io/2021gsc_ShogoHirasawa/家アイコン.png"

id を "evacuation"と指定した

map.loadImage('https://furuhashilab.github.io/2021gsc_ShogoHirasawa/家アイコン.png', (error, image) => {
if (error) throw error;
// add image to the active style and make it SDF-enabled
map.addImage('evacuation', image, { sdf: true });
});

全体のコード


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>東京災害マップ</title>
<meta
  name="viewport"
  content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<script src="maplibre-gl.js"></script>
<link href="maplibre-gl.css" rel="stylesheet" />
<style>
  body {
    margin: 0;
    padding: 0;
  }
  #map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
  }
</style>
</head>
<body>
<div id="map"></div>
<script>
  //追加したコード↓
    var map = new maplibregl.Map({
      container: "map",
      map.loadImage('https://furuhashilab.github.io/2021gsc_ShogoHirasawa/家アイコン.png', (error, image) => {
          if (error) throw error;
        map.addImage('evacuation', image, { sdf: true });
             });
    //追加したコード↑

      style: {
        version: 8,
        sources: {
          "raster-tiles": {
            type: "raster",
            tiles: ["http://a.tile.openstreetmap.org/{z}/{x}/{y}.png"],
            tileSize: 256,
            attribution:
              'Map tiles by <a target="_top" rel="noopener" href="http://stamen.com">Stamen Design</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>',
          },
          road: {
            type: "vector",
            tiles: [
              "https://furuhashilab.github.io/2021gsc_ShogoHirasawa/road_VT/{z}/{x}/{y}.pbf",
            ],
            tileSize: 512,
          },
          setagaya_evacuation: {
            type: "vector",
            tiles: [
              "https://furuhashilab.github.io/2021gsc_ShogoHirasawa/evacuation_center_VT/{z}/{x}/{y}.pbf",
            ],
            tileSize: 512,
          },

          buildings: {
            type: "vector",
            tiles: [
              "https://furuhashilab.github.io/2021gsc_ShogoHirasawa/buildings_VT/{z}/{x}/{y}.pbf",
            ],
            tileSize: 512,
          },
          dronebird: {
            type: "raster",
            tiles: [
              "https://furuhashilab.github.io/2021gsc_ShogoHirasawa/futakotamagawac_ RT/{z}/{x}/{y}.png",
            ],
            tileSize: 256,
            attribution:
              'Map tiles by <a target="_top" rel="noopener" href="http://furuhashilab.com/">Furuhashi Lab.</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>',
          },
        },
        layers: [
          {
            id: "road",
            type: "line",
            "source-layer": "road_VT",
            source: "road",
            minzoom: 12,
            maxzoom: 17,
          },
          {
            id: "buildings",
            type: "fill",
            "source-layer": "buildings_VT",
            source: "buildings",
            minzoom: 12,
            maxzoom: 17,
            paint: {
              "fill-color": ["rgb", 240, 128, 128],
            },
          },
          {
            id: "dronebird",
            type: "raster",
            source: "dronebird",
            minzoom: 0,
            maxzoom: 22,
          },
          {
            id: "evacuation",
            type: "symbol",
            "source-layer": "setagaya_evacuation_VT",
            source: "setagaya_evacuation",
            minzoom: 12,
            maxzoom: 17,
            layout: {
              "icon-image": "evacuation", // reference the image
            },
          },
        ],
      },
      center: [139.62756, 35.60882], // starting position
      zoom: 14, // starting zoom
    });
</script>
</body>
</html>

* ブラウザに何も表示されなくなり、コンソールには以下のエラーが記述された。
* マニュアルをコピペしたのに、文法エラーが出ている理由がわからない...
<img width="704" alt="スクリーンショット 2022-01-30 11 16 24" src="https://user-images.githubusercontent.com/29940264/151684146-20ac89dd-e279-4cd4-885c-aa1234fe5df1.png">
* 31行目は以下のコードが記述されている

map.loadImage('https://furuhashilab.github.io/2021gsc_ShogoHirasawa/家アイコン.png', (error, image) => {


## 行ったこと2
*[un-vector-tile-toolkit/kawagoe](https://github.com/un-vector-tile-toolkit/kawagoe)を参考にしてみた。
*[style.json](https://github.com/un-vector-tile-toolkit/kawagoe/blob/master/docs/style.json)を見てみると、以下の記述がされていた。

{ "center": [ 139.48, 35.9602 ], "glyphs": "https://un-vector-tile-toolkit.github.io/kawagoe/fonts/{fontstack}/{range}.pbf", "layers": [ { "id": "background", "paint": { "background-color": [ "rgb", 243, 245, 250 ] }, "type": "background" }, { "id": "landformclassification1", "layout": {}, "paint": { "fill-color": [ "match", [ "get", "code" ], "10101", "#d9cbae", "1010101", "#d9cbae", "11201", "#d9cbae", "11202", "#d9cbae", "11203", "#d9cbae", "11204", "#d9cbae", "10202", "#9466ab", "10204", "#9466ab", "2010201", "#9466ab", "10205", "#cc99ff", "10206", "#cc99ff", "10301", "#ffaa00", "10302", "#ffaa00", "10303", "#ffaa00", "10304", "#ffaa00", "10308", "#ffaa00", "10314", "#ffaa00", "10305", "#ffaa00", "10508", "#ffaa00", "2010101", "#ffaa00", "10306", "#ffaa00", "10307", "#ffaa00", "10310", "#ffaa00", "10312", "#ffaa00", "10401", "#99804d", "10402", "#99804d", "10403", "#99804d", "10404", "#99804d", "10406", "#99804d", "10407", "#99804d", "3010101", "#99804d", "10501", "#cacc60", "10502", "#cacc60", "3020101", "#cacc60", "10503", "#ffff33", "3040101", "#ffff33", "10506", "#fbe09d", "10507", "#fbe09d", "10801", "#fbe09d", "10504", "#ffff99", "10505", "#ffff99", "10512", "#ffff99", "3050101", "#ffff99", "10601", "#a3cc7e", "2010301", "#a3cc7e", "10701", "#bbff99", "3030101", "#bbff99", "10702", "#bbff99", "10705", "#bbff99", "10703", "#00d1a4", "10804", "#00d1a4", "3030201", "#00d1a4", "10704", "#6699ff", "3040201", "#6699ff", "3040202", "#6699ff", "3040301", "#1f9999", "10802", "#9f9fc4", "10803", "#9f9fc4", "10807", "#9f9fc4", "10808", "#9f9fc4", "10805", "#e5ffff", "10806", "#e5ffff", "10901", "#e5ffff", "10903", "#e5ffff", "5010201", "#e5ffff", "10904", "#779999", "5010301", "#779999", "11001", "#85c4d1", "11003", "#85c4d1", "11009", "#85c4d1", "11011", "#85c4d1", "4010301", "#85c4d1", "11002", "#8ad8b6", "11004", "#ef8888", "11006", "#ef8888", "11007", "#ef8888", "11014", "#ef8888", "4010201", "#ff4f4f", "11005", "#ff4f4f", "11008", "#c37aff", "4010101", "#c37aff", "11010", "#ffe8e8", "999999", "#144dfa", "101", "#e6e600", "102", "#00e2e6", "103", "#2ae600", "104", "#e60400", "105", "#5e5ce6", "9999", "#ff00ff", "#ff00ff" ] }, "source": "w", "source-layer": "landformclassification1", "type": "fill" }, { "id": "1013do", "source": "x", "type": "raster" }, { "id": "lake", "layout": {}, "paint": { "line-color": [ "rgb", 20, 90, 255 ] }, "source": "v", "source-layer": "lake", "type": "line" }, { "id": "landforma", "layout": {}, "paint": { "fill-color": [ "rgb", 20, 90, 255 ] }, "source": "v", "source-layer": "landforma", "type": "fill" }, { "id": "building", "layout": {}, "paint": { "fill-extrusion-color": [ "rgb", 255, 240, 190 ], "fill-extrusion-height": [ "match", [ "get", "ftCode" ], 3101, 3, 3102, 15, 3103, 50, 3111, 3, 3112, 10, 5 ] }, "source": "v", "source-layer": "building", "type": "fill-extrusion" }, { "id": "structurea", "layout": {}, "paint": { "fill-extrusion-color": [ "rgb", 255, 135, 75 ], "fill-extrusion-height": 5 }, "source": "v", "source-layer": "structurea", "type": "fill-extrusion" }, { "id": "coastline", "layout": {}, "paint": { "line-color": [ "rgb", 20, 90, 255 ] }, "source": "v", "source-layer": "coastline", "type": "line" }, { "id": "river", "layout": {}, "paint": { "line-color": [ "rgb", 20, 90, 255 ] }, "source": "v", "source-layer": "river", "type": "line" }, { "id": "searoute", "layout": {}, "paint": { "line-color": [ "rgb", 0, 0, 0 ], "line-dasharray": [ 6, 6 ] }, "source": "v", "source-layer": "searoute", "type": "line" }, { "id": "contour", "layout": {}, "paint": { "line-color": [ "rgb", 200, 160, 60 ] }, "source": "v", "source-layer": "contour", "type": "line" }, { "id": "landforml", "layout": {}, "paint": { "line-color": [ "rgb", 200, 160, 60 ] }, "source": "v", "source-layer": "landforml", "type": "line" }, { "id": "boundary", "layout": {}, "paint": { "line-color": [ "rgb", 68, 0, 128 ] }, "source": "v", "source-layer": "boundary", "type": "line" }, { "id": "road", "layout": {}, "paint": { "line-color": [ "rgb", 100, 100, 100 ] }, "source": "v", "source-layer": "road", "type": "line" }, { "id": "railway", "layout": {}, "paint": { "line-color": [ "rgb", 0, 0, 0 ] }, "source": "v", "source-layer": "railway", "type": "line" }, { "id": "structurel", "layout": {}, "paint": { "line-color": [ "rgb", 0, 0, 0 ] }, "source": "v", "source-layer": "structurel", "type": "line" }, { "id": "transl", "layout": {}, "paint": { "line-color": [ "rgb", 0, 0, 0 ] }, "source": "v", "source-layer": "transl", "type": "line" }, { "id": "landformp", "layout": { "icon-image": "refugee" }, "paint": {}, "source": "v", "source-layer": "landformp", "type": "symbol" }, { "id": "transp", "layout": { "icon-image": "bus_station" }, "paint": {}, "source": "v", "source-layer": "transp", "type": "symbol" }, { "id": "symbol", "layout": { "icon-image": [ "match", [ "get", "ftCode" ], 1401, "都道府県所在地-20", 1402, "市役所・東京都の区役所（都道府県所在都市以外）-20", 1403, "町・村-20", 6367, "特定重要港-20", 6368, "重要港-20", 6375, "国際空港-20", 6376, "国際空港以外の拠点空港等-20", 3201, "官公署", 3202, "裁判所", 3203, "税務署", 3204, "外国公館", 3205, "市役所・東京都の区役所", 3206, "町村役場・政令指定都市の区役所", 3241, "警察署", 3211, "交番", 3242, "消防署", 3212, "高等学校・中等教育学校", 3213, "中学校", 3214, "小学校", 3243, "病院", 3244, "保健所", 3215, "老人ホーム", 3216, "博物館法の登録博物館・博物館相当施設", 3217, "図書館", 3218, "郵便局", 3221, "灯台", 3231, "神社", 3232, "寺院", 4101, "煙突", 4102, "風車", 4103, "油井・ガス井", 4104, "記念碑", 6301, "墓地", 6311, "田", 6312, "畑", 6313, "茶畑", 6314, "果樹園", 6321, "広葉樹林", 6322, "針葉樹林", 6323, "竹林", 6324, "ヤシ科樹林", 6325, "ハイマツ地", 6326, "笹地", 6327, "荒地", 6331, "温泉", 6332, "噴火口・噴気孔", 6341, "史跡・名勝・天然記念物", 6342, "城跡", 6351, "採鉱地", 6361, "港湾", 6362, "漁港", 7101, "電子基準点", 7102, "三角点", 7103, "水準点", 8103, "発電所等", 8105, "電波塔", "標高点（測点）" ], "icon-size": 0.6 }, "paint": {}, "source": "v", "source-layer": "symbol", "type": "symbol" }, { "id": "label", "layout": { "icon-image": "標高点（測点）" }, "paint": {}, "source": "v", "source-layer": "label", "type": "symbol" } ], "light": { "intensity": 0.2, "position": [ 1.5, 210, 30 ] }, "location": "https://un-vector-tile-toolkit.github.io/kawagoe", "sources": { "v": { "attribution": "Source: GSI Maps Vector", "maxzoom": 17, "minzoom": 11, "tiles": [ "https://un-vector-tile-toolkit.github.io/kawagoe/zxy/experimental_bvmap/{z}/{x}/{y}.pbf" ], "type": "vector" }, "w": { "attribution": "Source: GSI", "maxzoom": 12, "minzoom": 12, "tiles": [ "https://un-vector-tile-toolkit.github.io/kawagoe/zxy/experimental_landformclassification1/{z}/{x}/{y}.pbf" ], "type": "vector" }, "x": { "attribution": "Source: GSI", "maxzoom": 18, "minzoom": 11, "tileSize": 256, "tiles": [ "https://un-vector-tile-toolkit.github.io/kawagoe/zxy/20191012typhoon19_tokigawa_1013do/{z}/{x}/{y}.png" ], "type": "raster" } }, "sprite": "https://un-vector-tile-toolkit.github.io/kawagoe/sprite/std", "version": 8, "zoom": 11 }


*行ったこと1のような記述はないのにも関わらず、画像をプロットできていた。

## 疑問点/勉強すべきことなど
* un-vector-tile-toolkit/kawagoeはspriteというものを使っているらしい。この概念の理解が必要なのかも。
* なぜ、##行ったこと1 の記述がないのに、un-vector-tile-toolkit/kawagoeでは画像がプロットできていたのか
* Mapboxのドキュメントでは、画像をプロットする場所を指定する際に.geojsonを使っている。vectortileで指定する場合にどうしたらよいのかがわからない。

ShogoHirasawa commented 2 years ago

古田さんのアドバイスを受けて

Mapboxのこの資料を参考にするようアドバイスを受けて、以下のようにコードを記述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>東京災害マップ</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <script src="maplibre-gl.js"></script>
    <link href="maplibre-gl.css" rel="stylesheet" />
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map = new maplibregl.Map({
        container: "map",
        style: {
          version: 8,
          sources: {
            "raster-tiles": {
              type: "raster",
              tiles: ["http://a.tile.openstreetmap.org/{z}/{x}/{y}.png"],
              tileSize: 256,
              attribution:
                'Map tiles by <a target="_top" rel="noopener" href="http://stamen.com">Stamen Design</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>',
            },
            road: {
              type: "vector",
              tiles: [
                "https://furuhashilab.github.io/2021gsc_ShogoHirasawa/road_VT/{z}/{x}/{y}.pbf",
              ],
              tileSize: 512,
            },
            // setagaya_evacuation: {
            //   type: "vector",
            //   tiles: [
            //     "https://furuhashilab.github.io/2021gsc_ShogoHirasawa/evacuation_center_VT/{z}/{x}/{y}.pbf",
            //   ],
            //   tileSize: 512,
            // },

            buildings: {
              type: "vector",
              tiles: [
                "https://furuhashilab.github.io/2021gsc_ShogoHirasawa/buildings_VT/{z}/{x}/{y}.pbf",
              ],
              tileSize: 512,
            },
            dronebird: {
              type: "raster",
              tiles: [
                "https://furuhashilab.github.io/2021gsc_ShogoHirasawa/futakotamagawac_ RT/{z}/{x}/{y}.png",
              ],
              tileSize: 256,
              attribution:
                'Map tiles by <a target="_top" rel="noopener" href="http://furuhashilab.com/">Furuhashi Lab.</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>',
            },
          },
          layers: [
            {
              id: "road",
              type: "line",
              "source-layer": "road_VT",
              source: "road",
              minzoom: 12,
              maxzoom: 17,
            },
            {
              id: "buildings",
              type: "fill",
              "source-layer": "buildings_VT",
              source: "buildings",
              minzoom: 12,
              maxzoom: 17,
              paint: {
                "fill-color": ["rgb", 240, 128, 128],
              },
            },
            {
              id: "dronebird",
              type: "raster",
              source: "dronebird",
              minzoom: 12,
              maxzoom: 17,
            },

            // {
            //   id: "evacuation",
            //   type: "symbol",
            //   "source-layer": "setagaya_evacuation_VT",
            //   source: "setagaya_evacuation",
            //   minzoom: 12,
            //   maxzoom: 17,
            //   layout: {
            //     "icon-image": "evacuation",
            //   },
            //   paint: {},
            // },
          ],
        },
        center: [139.62756, 35.60882], // starting position
        zoom: 14, // starting zoom
      });
      map.on("load", function () {
        map.loadImage(
          "https://furuhashilab.github.io/2021gsc_ShogoHirasawa/image/house.png",
          function (error, image) {
            if (error) throw error;
            map.addImage("evacuation", image);
            map.addSource("setagaya_evacuation", {
              type: "vector",
              tiles: [
                "https://furuhashilab.github.io/2021gsc_ShogoHirasawa/evacuation_center_VT/{z}/{x}/{y}.pbf",
              ],
              tileSize: 512,
            });
            map.addLayer({
              id: "evacuation",
              type: "symbol",
              source: "setagaya_evacuation",
              "source-layer": "setagaya_evacuation_VT",
              layout: {
                "icon-image": "evacuation",
                "icon-size": 0.25,
              },
            });
          }
        );
      });
    </script>
  </body>
</html>

以下のコードでもiconは表示されず...

ShogoHirasawa commented 2 years ago

表示されない理由の予想

以下のコードの部分でSources もしくは Layers として反映されていない

map.on("load", function () {
    map.loadImage(
      "https://furuhashilab.github.io/2021gsc_ShogoHirasawa/image/house.png",
      function (error, image) {
        if (error) throw error;
        map.addImage("evacuation", image);
        map.addSource("setagaya_evacuation", {
          type: "vector",
          tiles: [
            "https://furuhashilab.github.io/2021gsc_ShogoHirasawa/evacuation_center_VT/{z}/{x}/{y}.pbf",
          ],
          tileSize: 512,
        });
        map.addLayer({
          id: "evacuation",
          type: "symbol",
          source: "setagaya_evacuation",
          "source-layer": "setagaya_evacuation_VT",
          layout: {
            "icon-image": "evacuation",
            "icon-size": 0.25,
          },
        });
      }
    );
  });

vectorタイルのデータが間違っているのかもと思ったが、元データであるgeojsonファイルをgeojson.ioで確認するも問題はなし。
iconのURLをMapboxのドキュメントで使われているURLに変更してみたりもしたが、反応がない。iconデータに問題があるわけではなさそう。

furuhashilab / 2021gsc_ShogoHirasawa