タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
モダンな技術で手軽に地図アプリを始めてみよう！！！（Next.js/TypeScript/Tailwind CSS/maplibre GL JS/Deck.gl） - Qiita
モダンな技術で手軽に地図アプリを始めてみよう！！！（Next.js/TypeScript/Tailwind CSS/maplibre GL JS/Deck.gl）TypeScriptNext.jsdeckgltailwindcssMapLibre はじめに はい！！！今年もやってまいりましたMIERUNEアドベントカレンダー！！！ 記念すべき1日目は「何をするにもまずは環境構築からだよね！」ということで、モダンな技術をふんだんに使ってフロントエンド側の環境を構築し、簡単な地図アプリ用テンプレートを作成いきたいと思います！ 最新技術を利用すればめんどくさい環境構築も簡単に行えるようになるぞーっていうのを知ってもらえればなーと思います！ こちらに記載の手順を全部実行したテンプレートは以下のリポジトリで公開していますので、せっかちな方はこちらからどうぞ！ https://github.com/n
Google Maps Platform と deck.gl を使った高性能なデータの視覚化
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 5 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 Addy Osmani 1 ADK 2 AdMob 32 Ads 71 Ads API 99 ads query language 2 ads
新型コロナ感染箇所マップを作ってみる【FastAPI/PostGIS/deck.gl(React)】（データ加工編） - Qiita
新型コロナ…感染拡大が止まらないですね… 駆け出しGIS屋としては何かしらのデータを地図上に乗せて可視化したいなーとは思っていたんですが、公開されてるデータって大抵がPDFなんで収集するのめっちゃめんどいやん…と尻込みしていました。 が！！！！！！ 非営利目的であればデータの複製・引用・転載自由で素晴らしいデータを提供してくれているサイト様（https://gis.jag-japan.com/covid19jp/）を見つけたのでこのデータを使って地図上に表現していきたいと思います！！xf 今回は勉強がてらに多少冗長な構成（docker-composeでアプリケーションサーバーとDBサーバーを立ち上げて、わざわざGeoJSONをAPIで配信するなど）になっています。 データの取得 早速データを見てみましょう！ 上述のサイトにアクセスし、左上のcsvのリンクをクリックします。 すると以下のよう
この記事はMIERUNEアドベントカレンダー2日目の記事です！ 1日目は最近弊社にジョインした@JinIgarashiさんがFOSS4GHokkaidoでの登壇から引き続き、とてもアツい記事を投稿されましたのでMIERUNE的なインパクトは十分、2日目はゆるふわに富士山でも見て涼んでいきましょう。 TL;DR 国土地理院の標高タイルで3D表現をするためのGsiTerrainLayerをつくりました。 https://github.com/Kanahiro/deckgl-gsi-terrain-layer npmモジュールとして公開済みです、以下でインストール出来ます。 はじめに QGISやウェブ問わず、GISの使い始めは、まずはOSM地図や地理院タイルを表示するところから始める方が多いのではないでしょうか。今回は地理院タイルにフォーカスしていく訳ですが、国土地理院は空中写真だけではなく、様
edit_calendarHow to join the calendarYou can join the calendar by selecting an available date and registering the URL of the article you wish to link to. If a slot is available, you can go back to a past date to join!
この記事はdeck.gl Advent Calendar 2021 参加記事です。 概要 GTFS（General Transit Feed Specification）は、公共交通に関するデータを扱うための世界標準データフォーマットです。多くの地域で交通データを公開する際のフォーマットとして採用されており、日本でも徐々に普及が進んでいます。 そこで、この記事ではdeck.glを使って、GTFSに含まれる経路情報と停留所情報を地図に表示する方法を解説します。 サンプルコード 「あおい交通 オープンデータ」よりダウンロードさせていただいたaoikotsu_GTFS_20211031.zipファイルから、経路データと停留所データを地図に掲載しています。 経路データはshape_idごとにグルーピングしランダムに色を塗っています。 背景地図は表示すると経路が見えにくくなるので切り替え式にしました
絶賛推し事中のdeck.glなのですが、よく「始めるハードルが高い」といわれるのでcreate-react-appのカスタムテンプレートを作成してみました。 npmに上げてあるので、１コマンド打つだけでdeck.glのコードを書き始めることができます。 create-react-appのインストール cra(create-react-app)はreactが公式で提供している開発環境をセットアップするためのコマンドです。node.jsがインストールされている環境で、npmコマンドを使ってインストールしてください。
import React from 'react'; import { LineLayer } from '@deck.gl/layers'; import { MapboxOverlay } from '@deck.gl/mapbox'; import Map, { useControl } from 'react-map-gl'; // Mapbox GL JS import 'mapbox-gl/dist/mapbox-gl.css'; import './style.css'; const App = () => { const DeckGLOverlay = (props) => { const overlay = useControl(() => new MapboxOverlay(props)); overlay.setProps(props); return null; }
概要 deck.glを使ってWebGLで描画した地図の上に、D3.jsを使ってsvgをオーバーレイしボロノイ図を描画します。 ソースコード 解説 deck.glでは、緯度経度と画面上の座標の投影変換をViewportクラスが担っています。 Viewportクラスは通常外部から利用できるような形でインタンス化されていませんが、サブクラスであるWebMercatorViewportを利用することで、投影変換を行うためのprojectメソッドを外部から利用することができます。 WebMercatorViewport Class projectメソッドを使って母点の画面上の座標を取得し、それらを基にd3-voronoiモジュールを用いてボロノイ図を描画するための座標を算出しています。 あとは、webGL上にオーバーレイしたSVG要素にPathエレメントを設置してボロノイを描画しています。 impo
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
地理院タイルとdeck.glで3D地図をつくろう - Qiita
deck.glのカレンダー | Advent Calendar 2021 - Qiita
deck.glで公共交通データ(GTFS) データを可視化する
create-react-appコマンドのdeck.glテンプレートを作りました。
【deck.gl】react-map-glを使って背景地図を表示する - Qiita
deck.glとD3.jsを組み合わせて、地図上にボロノイ図を描画する
neoneeet.com
www.thewatchcompany.co.jp
www.thewatchcompany.co.jp
www.sponichi.co.jp
nordot.app
natalie.mu