plunkerでdeck.gl その12

# 概要
plunkerでdeck.glやってみた。
tooltip、使ってみた。

# サンプルコード

```


const tileLayer = new deck.TileLayer({
  data: "https://c.tile.openstreetmap.org/{z}/{x}/{y}.png",
  minZoom: 0,
  maxZoom: 19,
  tileSize: 256,
  renderSubLayers: props => new deck.BitmapLayer(props, {
    data: null,
    image: props.data,
    bounds: (({ west, south, east, north }) => [west, south, east, north])(props.tile.bbox),
  }),
});
const ICON_MAPPING = {
  marker: {
    x: 0, 
    y: 0, 
    width: 128, 
    height: 128, 
    mask: true
  }
};
const geojson = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "title": "さいたま市立武蔵浦和図書館",
        "description": "日本、〒336-0021 埼玉県さいたま市南区別所７丁目２０−１",
        "marker-size": "large",
        "marker-color": "#FF0000",
        "stroke": "#FFFFFF",
        "stroke-width": "2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          139.6453593,
          35.8452229
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "さいたま市立大宮図書館",
        "description": "日本、〒330-0843 埼玉県さいたま市大宮区吉敷町１丁目１２４−１",
        "marker-size": "large",
        "marker-color": "#FF0000",
        "stroke": "#FFFFFF",
        "stroke-width": "2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          139.6306352,
          35.901783
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "さいたま市立桜図書館",
        "description": "日本、〒338-0835 埼玉県さいたま市桜区道場４丁目３−１",
        "marker-size": "large",
        "marker-color": "#FF0000",
        "stroke": "#FFFFFF",
        "stroke-width": "2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          139.6104698,
          35.8560164
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "さいたま市岩槻駅東口図書館",
        "description": "日本、〒339-0057 埼玉県さいたま市岩槻区本町３丁目１−１ ワッツ西館 3F",
        "marker-size": "large",
        "marker-color": "#FF0000",
        "stroke": "#FFFFFF",
        "stroke-width": "2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          139.6936884,
          35.9504185
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "さいたま市立　北図書館",
        "description": "日本、〒331-0812 埼玉県さいたま市北区宮原町１丁目８５２−１",
        "marker-size": "large",
        "marker-color": "#FF0000",
        "stroke": "#FFFFFF",
        "stroke-width": "2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          139.6206616,
          35.9316072
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "さいたま市立東浦和図書館",
        "description": "日本、〒336-0932 埼玉県さいたま市緑区中尾１４４０−８ プラザイースト",
        "marker-size": "large",
        "marker-color": "#FF0000",
        "stroke": "#FFFFFF",
        "stroke-width": "2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          139.6855003,
          35.8718554
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "さいたま市立与野図書館",
        "description": "日本、〒338-0002 埼玉県さいたま市中央区下落合５丁目１１−１１ さいたま市立与野図書館",
        "marker-size": "large",
        "marker-color": "#FF0000",
        "stroke": "#FFFFFF",
        "stroke-width": "2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          139.627116,
          35.8852515
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "さいたま市立大宮東図書館",
        "description": "日本、〒337-0052 埼玉県さいたま市見沼区堀崎町４８−１ さいたま市立大宮東図書館",
        "marker-size": "large",
        "marker-color": "#FF0000",
        "stroke": "#FFFFFF",
        "stroke-width": "2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          139.6574525,
          35.9344424
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "さいたま市岩槻図書館",
        "description": "日本、〒339-0034 埼玉県さいたま市岩槻区岩槻区笹久保 岩槻図書館",
        "marker-size": "large",
        "marker-color": "#FF0000",
        "stroke": "#FFFFFF",
        "stroke-width": "2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          139.7124791,
          35.9235309
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "さいたま市立与野図書館　西分館",
        "description": "日本、〒338-0005 埼玉県さいたま市中央区桜丘２丁目６−２８",
        "marker-size": "large",
        "marker-color": "#FF0000",
        "stroke": "#FFFFFF",
        "stroke-width": "2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          139.614984,
          35.8821108
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "さいたま市立桜木図書館",
        "description": "日本、〒330-0854 埼玉県さいたま市大宮区桜木町１丁目１０−１８",
        "marker-size": "large",
        "marker-color": "#FF0000",
        "stroke": "#FFFFFF",
        "stroke-width": "2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          139.6187722,
          35.9054222
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "さいたま市立　中央図書館",
        "description": "日本、〒330-0055 埼玉県さいたま市浦和区東高砂町１１−１",
        "marker-size": "large",
        "marker-color": "#FF0000",
        "stroke": "#FFFFFF",
        "stroke-width": "2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          139.6592777,
          35.8586171
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "さいたま市立大宮西部図書館　三橋分館",
        "description": "日本、〒331-0052 埼玉県さいたま市西区三橋６丁目６４２−４",
        "marker-size": "large",
        "marker-color": "#FF0000",
        "stroke": "#FFFFFF",
        "stroke-width": "2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          139.5919602,
          35.917657
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "さいたま市立桜図書館　大久保東分館",
        "description": "日本、〒338-0826 埼玉県さいたま市桜区大久保領家１３１−６",
        "marker-size": "large",
        "marker-color": "#FF0000",
        "stroke": "#FFFFFF",
        "stroke-width": "2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          139.6082594,
          35.8695438
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "さいたま市立北浦和図書館",
        "description": "日本、〒330-0074 埼玉県さいたま市浦和区北浦和１丁目４−２ さいたま市立北浦和図書館",
        "marker-size": "large",
        "marker-color": "#FF0000",
        "stroke": "#FFFFFF",
        "stroke-width": "2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          139.6464313,
          35.8748354
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "さいたま市立大宮西部図書館",
        "description": "日本、〒331-0825 埼玉県さいたま市北区櫛引町２丁目４９９−１ さいたま市立大宮西部図書館",
        "marker-size": "large",
        "marker-color": "#FF0000",
        "stroke": "#FFFFFF",
        "stroke-width": "2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          139.6094889,
          35.9194337
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "さいたま市立南浦和図書館",
        "description": "日本、〒336-0024 埼玉県さいたま市南区根岸１丁目７−１ さいたま市文化センター",
        "marker-size": "large",
        "marker-color": "#FF0000",
        "stroke": "#FFFFFF",
        "stroke-width": "2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          139.663973,
          35.8437221
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "埼玉県　盲人福祉ホーム・埼玉点字図書館",
        "description": "日本、〒330-0852 埼玉県さいたま市大宮区大成町１丁目４６５ 埼玉県視覚障害福祉センター",
        "marker-size": "large",
        "marker-color": "#FF0000",
        "stroke": "#FFFFFF",
        "stroke-width": "2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          139.6125442,
          35.9094369
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "社会福祉法人埼玉県視覚障害者福祉センター埼玉点字図書館",
        "description": "日本、〒330-0852 埼玉県さいたま市大宮区大成町１丁目４６５ 埼玉県視覚障害福祉センター",
        "marker-size": "large",
        "marker-color": "#FF0000",
        "stroke": "#FFFFFF",
        "stroke-width": "2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          139.6125442,
          35.9094369
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "さいたま市立与野南図書館",
        "description": "日本、〒338-0012 埼玉県さいたま市中央区大戸６丁目２８−１６ さいたま市立与野南図書館",
        "marker-size": "large",
        "marker-color": "#FF0000",
        "stroke": "#FFFFFF",
        "stroke-width": "2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          139.6339674,
          35.8668255
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "さいたま市立馬宮図書館",
        "description": "日本、〒331-0061 埼玉県さいたま市西区西遊馬５３３−１ 馬宮コミュニティセンター1階",
        "marker-size": "large",
        "marker-color": "#FF0000",
        "stroke": "#FFFFFF",
        "stroke-width": "2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          139.5727272,
          35.9050897
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "さいたま市岩槻東部図書館",
        "description": "日本、〒339-0005 埼玉県さいたま市岩槻区東岩槻６丁目６",
        "marker-size": "large",
        "marker-color": "#FF0000",
        "stroke": "#FFFFFF",
        "stroke-width": "2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          139.7161212,
          35.9618476
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "さいたま市立七里図書館",
        "description": "日本、〒337-0014 埼玉県さいたま市見沼区大谷１２１０ さいたま市七里コミュニティセンター 1階",
        "marker-size": "large",
        "marker-color": "#FF0000",
        "stroke": "#FFFFFF",
        "stroke-width": "2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          139.6743801,
          35.9211459
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "さいたま市立春野図書館",
        "description": "日本、〒337-0002 埼玉県さいたま市見沼区春野２丁目１２−１ さいたま市立春野図書館",
        "marker-size": "large",
        "marker-color": "#FF0000",
        "stroke": "#FFFFFF",
        "stroke-width": "2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          139.660819,
          35.959109
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "さいたま市立宮原図書館",
        "description": "日本、〒331-0811 埼玉県さいたま市北区吉野町２丁目１９５−１",
        "marker-size": "large",
        "marker-color": "#FF0000",
        "stroke": "#FFFFFF",
        "stroke-width": "2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          139.6007486,
          35.9585932
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "さいたま市立片柳図書館",
        "description": "日本、〒337-0026 埼玉県さいたま市見沼区染谷３丁目１４７−１ さいたま市立片柳図書館",
        "marker-size": "large",
        "marker-color": "#FF0000",
        "stroke": "#FFFFFF",
        "stroke-width": "2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          139.6844123,
          35.9093393
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "さいたま市立美園図書館",
        "description": "日本、〒336-0967 埼玉県さいたま市緑区美園４丁目１９−１",
        "marker-size": "large",
        "marker-color": "#FF0000",
        "stroke": "#FFFFFF",
        "stroke-width": "2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          139.7276737,
          35.8951187
        ]
      }
    }
  ]
};
const geojsonLayer = new deck.GeoJsonLayer({
  id: 'geojson_layer',
  data: geojson.features,
  pickable: true,
  pointType: 'icon',
  iconAtlas: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/icon-atlas.png',
  iconMapping: ICON_MAPPING,
  getIcon: () => 'marker',
  getIconSize: () => 5,
  iconSizeScale: 4,
  onHover: updateTooltip
});
const deckgl = new deck.Deck({
  initialViewState: {
    longitude: 139.64,
    latitude: 35.86,
    zoom: 10,
    minZoom: 5,
    maxZoom: 16,
  },
  controller: true,
  layers: [tileLayer, geojsonLayer, ]
});
function updateTooltip({x, y, object}) {
  const tooltip = document.getElementById('tooltip');
  if (object) 
  {
    tooltip.style.top = `${y}px`;
    tooltip.style.left = `${x}px`;
    tooltip.innerHTML = `
<div><div>${object.properties.title} </div></div>
<div>${object.properties.description}</div>
`;
  } 
  else 
  { 
    tooltip.innerHTML = '';
  }
}




```

# 実行結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/0ca38227-3849-7001-7bbd-aaa3c06983d5.png)

# 成果物

https://embed.plnkr.co/plunk/0xkx8gZ7mBC1PLk5


以上。