React Hooks とdeck.gl v.7を使ってweb地図を作ってみた。
example 以前紹介したUber社製のWeb地図フレームワーク「Deck.gl」のver.7が公開されました。紹介した頃はver.5だったのでだいぶ間があき、公式のチュートリアルサイトVis Academyの内容も改編されていたので改めて一からチュートリアルをやり直してみることにしました。 Vis Academy – Building a Geospatial App ただ、改編されたとはいえ一度やったことのあるチュートリアルをただなぞるのもなんなので、公式ではclassベースで書かれているコードを勉強がてらReact Hooksの機能を使ってfanctionベースに書き換えながら進めてみています。 例えば第1章のコードなら、以下のように変更しています。 元のコード import React, { Component } from 'react'; import MapGL from
react-map-glとFirebaseで擬似UBER EATSを実現する part2 firestore連携編 - Qiita
現在地のマーカーを表示する Uberでは現在地をマーカー表示して、待機中のタクシーはタクシーアイコンで常時移動しています。 まずは自分の現在地をマーカーで表示してみます。part1と全く同じ方法で、現在地を取得を押したときについでにmarkerの緯度経度も設定します。 marker: { latitude:37.7577, longitude:-122.4376, } /////////////// case LOCATE_USER: return { ...state, viewport: {...state.viewport, latitude:action.latitude, longitude: action.longitude }, marker:{...state.marker, latitude:action.latitude, longitude: action.longi
React と Mapbox GL JS を使ってベクトルタイルを表示する - Qiita
こんにちは、TileCloud というサービスの開発チームの鎌田です。 https://geolonia.com Mapbox GL JS は WebGL を使って MBTiles 形式のベクトルタイルの地図をレンダリングする JavaScript のライブラリです。タイルのベンダーを選び、地図の見た目を定義するためのスタイルを JSON 形式で指定することで、ベクトルタイルの地図をブラウザ上に簡単に表示することができます。 この記事では、web フロントエンドのフレームワークとしてよく使われている React を使ってアプリを作成し、Mapbox GL JS を組み込んで、ベクトルタイルの地図をレンダリング方法について解説します。また、地図のスタイルの変更などのインタラクティブな操作を実装することも試します。 開発環境 この記事では以下のツールを使うことを想定しています。 LTS な N
Try #018 – BigQuery GISとFlaskとMapbox GL JSを組みわせて可視化してみた | dayjournal memo
この記事は、「Google Cloud Platform Advent Calendar 2018」の9日目の記事です。 BigQuery GISとFlaskとMapbox GL JSを組み合わせて可視化してみました! 今回は、BigQueryのGIS系関数の利用方法や�、BigQuery Geo Viz以外の可視化方法を試していきます。BigQuery�へのデータ登録については触れません。 BigQuery� GISのデータ登録の流れについては、こちらの記事がすごく参考になります。今回は、国土数値情報 都市公園データをBigQuery� GISにインポートしてみました。 可視化の方法については、BigQuery Geo Vizを利用すると�手軽に確認はできますが、今回はMapbox GL JSと組み合わせて�より�自由度が高い可視化をします。 �全体の構成はできるだけシンプルに。 バック
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
expressionを使用してグラデーションラインを作成 | Mapbox GL JS | ドキュメント
Mapbox GL JS + React
Vue-mapbpx 入門 / mapbox GL JS を Vue + TypeScript で使用する
mapbox-gl-vue
Mapbox Nuxt component