{"id":5512,"date":"2017-11-15T20:27:42","date_gmt":"2017-11-15T11:27:42","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=5512"},"modified":"2020-05-02T21:13:56","modified_gmt":"2020-05-02T12:13:56","slug":"uber%e7%a4%be%e8%a3%bd%e3%80%81%e3%82%b8%e3%82%aa%e3%83%93%e3%82%b8%e3%83%a5%e3%82%a2%e3%83%a9%e3%82%a4%e3%82%bc%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%83%95%e3%83%ac%e3%83%bc%e3%83%a0%e3%83%af","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/react\/5512","title":{"rendered":"Uber\u793e\u88fd\u3001\u30b8\u30aa\u30d3\u30b8\u30e5\u30a2\u30e9\u30a4\u30bc\u30fc\u30b7\u30e7\u30f3\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u300cdeck.gl\u300d\u3092\u89e6\u3063\u3066\u307f\u305f\u3002"},"content":{"rendered":"<p><a href=\"https:\/\/shimizu.github.io\/deckgl-example\/\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2017\/11\/Hello-DECK.GL-2017-11-15-20-01-52.png\" alt=\"Hello DECK.GL 2017-11-15 20-01-52\" width=\"678\" height=\"339\" class=\"aligncenter size-full wp-image-5513\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2017\/11\/Hello-DECK.GL-2017-11-15-20-01-52.png 678w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2017\/11\/Hello-DECK.GL-2017-11-15-20-01-52-500x250.png 500w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2017\/11\/Hello-DECK.GL-2017-11-15-20-01-52-300x150.png 300w\" sizes=\"auto, (max-width: 678px) 100vw, 678px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/shimizu.github.io\/deckgl-example\/\">demo<\/a><br \/>\n<a href=\"https:\/\/github.com\/shimizu\/deckgl-example\">sample code<\/a><\/p>\n<h2>deck.gl\u3068\u306f\uff1f<\/h2>\n<p><a href=\"https:\/\/uber.github.io\/deck.gl\/#\/\">deck.gl<\/a><\/p>\n<p>Uber\u793e\u304c\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u3068\u3057\u3066\u516c\u958b\u3057\u3066\u3044\u308bWebGL\u30d9\u30fc\u30b9\u306e\u5730\u7406\u60c5\u5831\u8996\u899a\u5316\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3059\u3002webGL\u3092\u5229\u7528\u3057\u3066\u3044\u308b\u305f\u3081\u3001\u6bd4\u8f03\u7684\u30c7\u30fc\u30bf\u91cf\u306e\u591a\u3044\u5730\u7406\u60c5\u5831\u3082\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306b\u8868\u793a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>React\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u3057\u3066\u4f5c\u6210\u3055\u308c\u3066\u3044\u308b\u305f\u3081\u3001\u3044\u307e\u307e\u3067\u624b\u3092\u51fa\u3057\u3066\u6765\u306a\u304b\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u6700\u8fd1React\u3092\u52c9\u5f37\u3057\u59cb\u3081\u305f\u3064\u3044\u3067\u306b\u5f04\u3063\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n<p>\u4eca\u56de\u306f\u3001\u3068\u308a\u3042\u3048\u305a\u958b\u767a\u74b0\u5883\u306e\u69cb\u7bc9\u3068\u3001\u30b5\u30f3\u30d7\u30eb\u306b\u3042\u308b<a href=\"https:\/\/github.com\/uber\/deck.gl\/tree\/master\/examples\/website\/geojson\">geojson\u30c7\u30fc\u30bf\u3092\u8aad\u307f\u8fbc\u3093\u3067\u8868\u793a\u3059\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/a>\u3092\u4f5c\u3063\u3066\u307f\u307e\u3059\u3002<\/p>\n<hr \/>\n<p>\u3053\u306e\u8a18\u4e8b\u306f\u5185\u5bb9\u304c\u53e4\u304f\u306a\u3063\u3066\u3044\u307e\u3059\u3002<br \/>\n\u6700\u65b0\u306eDeck.gl\u306b\u3064\u3044\u3066\u306f\u3001\u4ee5\u4e0b\u306e\u8a18\u4e8b\u3092\u53c2\u7167\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p><a href=\"https:\/\/gunmagisgeek.com\/blog\/react\/6399\">React Hooks \u3068deck.gl v.7\u3092\u4f7f\u3063\u3066web\u5730\u56f3\u3092\u4f5c\u3063\u3066\u307f\u305f\u3002<\/a><\/p>\n<hr \/>\n<h2>deck.gl\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h2>\n<p><a href=\"https:\/\/github.com\/uber\/deck.gl\">github\/deck.gl<\/a><\/p>\n<p>deck.gl\u30ea\u30dd\u30b8\u30c8\u30ea\u3092clone\u3057\u3066\u958b\u767a\u3092\u59cb\u3081\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u304c\u3001\u500b\u4eba\u7684\u306bcreate-react-app\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u3044\u305f\u304b\u3063\u305f\u306e\u3067\u3001\u751f\u6210\u3057\u305f\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306bdeck.gl\u3092\u8aad\u307f\u8fbc\u3093\u3067\u30ab\u30b9\u30bf\u30e0\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n<p>\u307e\u305a\u3001\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u751f\u6210\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"lang:sh decode:true \" >$ create-react-app deckgl-example\n$ cd deckgl_example\n$ yarn install\n<\/pre>\n<p>\u7d9a\u3044\u3066\u3001deck.gl\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n<p>deck.gl\u306f\u5358\u4f53\u3067\u5229\u7528\u3067\u304d\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u3059\u304c\u3001\u516c\u5f0f\u306e\u30b5\u30f3\u30d7\u30eb\u3067\u306fUber\u793e\u304c\u516c\u958b\u3057\u3066\u3044\u308b\u4ed6\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3082\u5229\u7528\u3057\u3066\u3044\u308b\u306e\u3067\u3001\u305d\u308c\u3089\u5fc5\u8981\u306a\u3082\u306e\u5168\u3066\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"lang:sh decode:true \" >$ yarn add deck.gl\n$ yarn add luma.gl\n$ yarn add react-map-gl\n<\/pre>\n<p>\u305d\u308c\u305e\u308c\u4ee5\u4e0b\u306e\u6a5f\u80fd\u304c\u5b9f\u88c5\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n<ul>\n<li>deck.gl<br \/>\u5730\u7406\u60c5\u5831\u3092\u8996\u899a\u5316\u3059\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/li>\n<li>luma.gl<br \/>webGL API\u3092react\u304b\u3089\u4f7f\u3044\u3084\u3059\u304f\u3057\u305fwrapper<\/li>\n<li>react-map-gl<br \/>MapboxGL\u3092react\u3067\u5229\u7528\u3059\u308b\u305f\u3081\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/li>\n<\/ul>\n<p>\u4ed6\u3001geoJSON\u30b5\u30f3\u30d7\u30eb\u3067\u306fD3.js\u306erequest\u30e2\u30b8\u30e5\u30fc\u30eb\u304c\u5229\u7528\u3055\u308c\u3066\u3044\u308b\u306e\u3067\u3001\u3053\u3061\u3089\u3082\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"lang:sh decode:true \" >$ yarn add d3-request<\/pre>\n<p>\u4eca\u56de\u306e\u30b5\u30f3\u30d7\u30eb\u3067\u306f\u3001deck.gl &amp; luma.gl \u3067\u8aad\u307f\u8fbc\u3093\u3060GeoJSON\u30c7\u30fc\u30bf\u3092\u8996\u899a\u5316\u3057\u3001react-map-gl\u3067\u30d9\u30fc\u30b9\u30de\u30c3\u30d7\u3092\u8868\u793a\u3057\u307e\u3059\u3002<br \/>\nd3-request\u306f\u30c7\u30fc\u30bf\u306e\u8aad\u307f\u8fbc\u307f\u306b\u4f7f\u3044\u307e\u3059\u3002<br \/>\nreact-map-gl\u3092\u5229\u7528\u3059\u308b\u306b\u306f\u3001Mapbox\u3067\u958b\u767a\u8005\u30c8\u30fc\u30af\u30f3\u3092\u53d6\u5f97\u3057\u3066\u304a\u304f\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<h2>\u30ab\u30b9\u30bf\u30e0\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u308b<\/h2>\n<p>\u4eca\u56de\u306f\u3001deck.gl\u3092\u5229\u7528\u3057\u3066geoJSON\u30c7\u30fc\u30bf\u3092\u5143\u306b3D\u30dd\u30ea\u30b4\u30f3\u3092\u8868\u793a\u3059\u308bMaps\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n<h3>\u30ab\u30b9\u30bf\u30e0\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u69cb\u6210<\/h3>\n<p>\u4f5c\u6210\u3059\u308b\u30ab\u30b9\u30bf\u30e0\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u3001src \u30d5\u30a9\u30eb\u30c0\u914d\u4e0b\u306bcomponents\u30d5\u30a9\u30eb\u30c0\u3092\u4f5c\u6210\u3057\u3001\u305d\u3053\u306b\u53ce\u7d0d\u3057\u307e\u3059\u3002<\/p>\n<p>\u6700\u7d42\u7684\u306a\u30d5\u30a1\u30a4\u30eb\u69cb\u6210\u306f\u4ee5\u4e0b\u3002<\/p>\n<pre class=\"lang:js decode:true \" >src\n\u2514\u2500\u2500 components\n    \u2514\u2500\u2500 Maps\n        \u251c\u2500\u2500 Maps.js\n        \u251c\u2500\u2500 deckgl-overlay.js\n        \u2514\u2500\u2500 index.js\n<\/pre>\n<h3>\u5730\u7406\u30c7\u30fc\u30bf\u3092\u7528\u610f\u3059\u308b<\/h3>\n<p>\u6b21\u306bpubulic\u30d5\u30a9\u30eb\u30c0\u306e\u4e2d\u306b\u3001data\u30d5\u30a9\u30eb\u30c0\u3092\u4f5c\u6210\u3057\u4eca\u56de\u8996\u899a\u5316\u3059\u308bgeoJSON\u3092\u4fdd\u5b58\u3057\u307e\u3059\u3002<br \/>\n\u4eca\u56de\u306fOSM\u304b\u3089\u5927\u962a\u306e\u30d3\u30eb\u30c7\u30a3\u30f3\u30b0\u30c7\u30fc\u30bf(\u30dd\u30ea\u30b4\u30f3)\u3092\u4e00\u90e8\u5207\u308a\u51fa\u3057\u3066\u3001\u30c6\u30b9\u30c8\u30c7\u30fc\u30bf\u3092\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002<\/p>\n<p><a href=\"https:\/\/github.com\/shimizu\/deckgl-example\/tree\/master\/public\/data\">data<\/a><\/p>\n<pre class=\"lang:sh decode:true \" >public\n\u251c\u2500\u2500 data\n \u00a0\u00a0 \u2514\u2500\u2500 osaka.geojson\n<\/pre>\n<h3>\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u958b\u59cb<\/h3>\n<p>\u3053\u3053\u304b\u3089\u3001\u30b3\u30fc\u30c6\u30a3\u30f3\u30b0(\u30b3\u30d4\u30da)\u306b\u5165\u3063\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<h3>components\/Maps\/index.js<\/h3>\n<p>\u307e\u305a\u3001\u306f\u3058\u3081\u306bindex.js\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"lang:js decode:true \" title=\"index.js\" >import Maps from '.\/Maps.js';\nexport default Maps;\n<\/pre>\n<p>\u3053\u308c\u81ea\u4f53\u306f\u3001\u305f\u3093\u306a\u308b\u30a8\u30f3\u30c8\u30ea\u30fc\u7528\u306e\u30b9\u30af\u30ea\u30d7\u30c8\u3067\u3059\u3002<\/p>\n<h3>components\/Maps\/Maps.js<\/h3>\n<p>\u6b21\u306b\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u672c\u4f53\u3067\u3042\u308bMaps.js\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n<p>\u57fa\u672c\u306f\u3001\u4e0a\u8a18example\u5185\u306eApp.js\u3092\u30b3\u30d4\u30da\u3057\u305f\u3060\u3051\u306e\u3082\u306e\u3067\u3059\u3002<\/p>\n<pre class=\"lang:js decode:true \" title=\"Maps.js\" >\n\nimport React, {Component} from 'react';\nimport {render} from 'react-dom';\nimport MapGL from 'react-map-gl';\nimport DeckGLOverlay from '.\/deckgl-overlay.js';\n\nimport {json as requestJson} from 'd3-request';\n\n\/\/ Set your mapbox token here\nconst MAPBOX_TOKEN = '\u3053\u3053\u306b\u30de\u30c3\u30d7\u30dc\u30c3\u30af\u30b9\u306e\u958b\u767a\u8005\u7528\u30c8\u30fc\u30af\u30f3\u3092\u66f8\u304f'; \n\n\/\/ Source data GeoJSON\nconst DATA_URL = '.\/data\/osaka3.geojson'; \n\nclass Maps extends Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      viewport: {\n        ...DeckGLOverlay.defaultViewport,\n        width: 500,\n        height: 500\n      },\n      data: null\n    };\n\n    requestJson(DATA_URL, (error, response) => {\n      if (!error) {\n        this.setState({data: response});\n      }\n    });\n  }\n\n  componentDidMount() {\n    window.addEventListener('resize', this._resize.bind(this));\n    this._resize();\n  }\n\n  _resize() {\n      console.dir(this.div._eventCanvas.parentElement.clientHeight)\n    this._onViewportChange({\n      width: this.div._eventCanvas.parentElement.clientWidth,\n      height: this.div._eventCanvas.parentElement.clientHeight\n    });\n  }\n\n  _onViewportChange(viewport) {\n    this.setState({\n      viewport: {...this.state.viewport, ...viewport}\n    });\n  }\n\n  render() {\n    const {viewport, data} = this.state;\n\n    return (\n      <MapGL\n        ref={div => this.div = div}\n        {...viewport}\n        mapStyle=\"mapbox:\/\/styles\/mapbox\/dark-v9\"\n        onViewportChange={this._onViewportChange.bind(this)}\n        mapboxApiAccessToken={MAPBOX_TOKEN}>\n        <DeckGLOverlay viewport={viewport}\n          data={data}\n          colorScale={colorScale} \/>\n      <\/MapGL>\n    );\n  }\n}\n\n\nexport default Maps;\n<\/pre>\n<p>Maps.js\u3067\u306f\u4e3b\u306b\u30d9\u30fc\u30b9\u30de\u30c3\u30d7 (Mapbox)\u306e\u30b3\u30f3\u30d5\u30a3\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u3092\u304a\u3053\u306a\u3063\u3066\u3044\u307e\u3059\u3002<br \/>\nGeoJSON\u306e\u30c7\u30fc\u30bf\u3092\u5b9f\u969b\u306b\u51fa\u529b\u3057\u3066\u3044\u308b\u306e\u306f DeckGLOverlay \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>DeckGLOverlay \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u8a2d\u5b9a\u306fdeckgl-overlay.js\u306e\u4e2d\u306b\u8a18\u8f09\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n<h3>components\/Maps\/deckgl-overlay.js<\/h3>\n<p>\u6700\u5f8c\u306b\u3001deckgl-overlay.js\u3092\u30b3\u30d4\u30da\u3057\u307e\u3059\u3002<\/p>\n<p>\u30b5\u30f3\u30d7\u30eb\u3067\u306f\u3001\u5143\u306egeojson\u30c7\u30fc\u30bf\u306e\u4e2d\u306b\u9ad8\u3055\u306e\u5024\u304c\u3042\u308a\u307e\u3057\u305f\u304c\u3001\u4eca\u56de\u7528\u610f\u3057\u305f\u5927\u962a\u306e\u30c7\u30fc\u30bf\u306b\u306f\u5b58\u5728\u3057\u306a\u304b\u3063\u305f\u306e\u3067\u3001\u30e9\u30f3\u30c0\u30e0\u306b\u9ad8\u3055\u3092\u5272\u308a\u5f53\u3066\u308b\u3088\u3046\u306b\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c8\u3092\u4fee\u6b63\u3057\u3066\u3044\u307e\u3059\u3002\u307e\u305f\u30013D\u30e2\u30c7\u30eb\u306e\u914d\u8272\u3082\u30d6\u30eb\u30fc\u3092\u57fa\u6e96\u306b\u30e9\u30f3\u30c0\u30e0\u306b\u5857\u308b\u3088\u3046\u306b\u5909\u66f4\u3057\u307e\u3057\u305f\u3002<\/p>\n<pre class=\"lang:js decode:true \" title=\"deckgl-overlay.js\" >import React, {Component} from 'react';\nimport DeckGL, {GeoJsonLayer} from 'deck.gl';\n\nconst LIGHT_SETTINGS = {\n  lightsPosition: [-125, 50.5, 5000, -122.8, 48.5, 8000],\n  ambientRatio: 0.2,\n  diffuseRatio: 0.5,\n  specularRatio: 0.3,\n  lightsStrength: [2.0, 0.0, 2.0, 0.0],\n  numberOfLights: 2\n};\n\nexport default class DeckGLOverlay extends Component {\n\n  static get defaultViewport() {\n    return {\n      latitude: 34.65875,\n      longitude: 135.46257650000007,\n      zoom: 15,\n      maxZoom: 16,\n      pitch: 59,\n      bearing: 0\n    };\n  }\n\n  render() {\n    const {viewport, data} = this.props;\n\n    if (!data) {\n      return null;\n    }\n    \n    const randomColor = () =>{\n      if(Math.random() > 0.95){\n          return [0, 0, 120];\n      }else if(Math.random() > 0.25){\n          return [60,60, 255];\n      }else {\n        return [120, 120, 255];\n      }\n    }\n    \n    const randomHight = () => {\n      if(Math.random() > 0.999){\n          return 400\n      }else if(Math.random() > 0.75){\n          return 150\n      }else if(Math.random() > 0.5){\n          return 50;\n      }else if(Math.random() > 0.25){\n          return 25 \n      }else {\n        return 10;\n      }\n      \n    }\n\n    const layer = new GeoJsonLayer({\n      id: 'geojson',\n      data,\n      opacity: 0.5,\n      stroked: true,\n      filled: true,\n      extruded: true,\n      wireframe: false,\n      fp64: true,\n      getElevation:randomHight,\n      getFillColor: randomColor,\n      getLineColor: [0, 0, 255],\n      lightSettings: LIGHT_SETTINGS,\n      pickable: Boolean(this.props.onHover),\n      onHover: this.props.onHover\n    });\n\n    return (\n      <DeckGL {...viewport} layers={ [layer] } initWebGLParameters \/>\n    );\n  }\n}\n<\/pre>\n<p>\u4e3b\u306b\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u8868\u793a\u9818\u57df\u30843D\u30e2\u30c7\u30eb\u306e\u30e9\u30a4\u30c6\u30a3\u30f3\u30b0\u306a\u3069\u306e\u8a2d\u5b9a\u304c\u8a18\u8f09\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n<h2>\u30ab\u30b9\u30bf\u30e0\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092App.js\u306b\u8ffd\u52a0\u3059\u308b<\/h2>\n<p>\u6700\u5f8c\u306b\u3001\u4f5c\u6210\u3057\u305f\u30ab\u30b9\u30bf\u30e0\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092App.js\u306b\u8ffd\u52a0\u3057\u3066\u7d42\u4e86\u3067\u3059\u3002<\/p>\n<pre class=\"lang:js mark:5,16 decode:true \" title=\"App.js\" >import React, { Component } from 'react';\nimport logo from '.\/logo.svg';\nimport '.\/App.css';\n\nimport Maps from '.\/components\/Maps';\n\nclass App extends Component {\n  render() {\n    return (\n      &lt;div className=\"App\"&gt;\n        &lt;header className=\"App-header\"&gt;\n          &lt;img src={logo} className=\"App-logo\" alt=\"logo\" \/&gt;\n          &lt;h1 className=\"App-title\"&gt;Hello. DECK.GL&lt;\/h1&gt;\n        &lt;\/header&gt;\n        &lt;div className=\"Map-wrapper\"&gt;\n        &lt;Maps \/&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    );\n  }\n}\n\n\nexport default App;\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>demo sample code deck.gl\u3068&hellip;<\/p>\n","protected":false},"author":1,"featured_media":5513,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[73,71],"tags":[],"class_list":["post-5512","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-deck-gl","category-react","has-post-thumbnail-archive"],"_links":{"self":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/5512","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/comments?post=5512"}],"version-history":[{"count":0,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/5512\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/5513"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=5512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=5512"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=5512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}