mapbox

概要 以前某インターンで Vue.js を初めて使いました．自分の専門が地理情報関係なので， Vue.js と地図ライブラリを使って簡単なアプリを作ってみようと思いました．地図ライブラリには Mapbox を採用しました． Mapbox は自由度が非常に高く，使いこなせるようになりたいと思っているためです． 何をしようかと考えたのですが，Mapbox の長所は先ほど述べた通りの自由度の高さと描画できる数の多さだと思っているので，たくさん描画できるものにしようと思いました．そこで， OpenStreetMap が提供している道路ネットワークグラフにしました． 環境構築はこちら の通りでした． 実…

概要 自分は基本的に地図ライブラリに JavaScript の Leaflet か，それの Python バージョンの folium を使っています．簡単な描画であればこれが最適だと思いますが，もっと複雑なものを描画したい，大容量のデータを描画したいとなった時，これでは限界があります．そこで Mapbox を使ってみようと思います． Mapbox のすごさが分かるのはこちら． 練習用なので何でもよかったんですが，街路灯のヒートマップを作ろうと思います．街路灯データはこちら 実装 csv から geojson への変換 今回は簡単のために pbf ではなく， geojson を使います．上記で提…

はじめに 本エントリーは ベクトルタイル Advent Calendar 2021 4日目の記事です。 qiita.com Mapbox、Maptiler、Esri 社の ArcGIS がクラウドサービスとして、ベクトルタイルの作成や配信などができる地図プラットフォームを提供しています。今回は、各社のプラットフォームに触ってみましたので、各社の特徴や自分なりの見解について紹介したいと思います。地図プラットフォームとて、近年はベクトルタイルに限らず、3D データなどの扱いも増えており、多様なデータフォーマットに対応しているなど、クライアントに求められるニーズも多様化しています。各社得意な領域など…

ルートに沿って、スクロールでカメラをぬるぬる移動させる3DのScrollyTellingを実装しました。 実装では、タイトル通りMapbox GL JSのFreeCamera APIを利用しています。 FreeCamera API とは Mapbox GL JSがv1からv2にメジャーアップデートした際に追加された新機能です。このAPIを使って、3Dマップ上のカメラの位置や角度を自由に操作することができます。 カメラの位置や角度は、FreeCameraOptionオブジェクト内の次のインスタンスで管理されています。 lookAtPoint setPitchBearing 今回は lookAtP…

はじめに Ruby on Rails で JavaScript を使用しているのですが、今回 Rails 側で登録済みの住所からジオコーディングをして地図に表示するという要件があり、Mapbox の Geocoding API を使用しました。もともと 管理者用の画面では、地図を使用している機能があり、Mapbox GL JS を使用しているため、Mapbox の Geocoding API を試しに使用してみました。今回は、Geocoding API を利用するために Mapbox JavaScript SDK を使用してみましたので、簡単に実装方法について紹介したいと思います。 docs.…

はじめに 今回は、Mapbox GL JS と ArcGIS Platform で提供されている到達圏解析のサービスを使用して、到達圏解析が実行できる簡単なアプリを作成しました。 到達圏解析サービスなどのロケーションサービスについては、前回のブログでも紹介していますので、ご参照ください。 freedom-tech.hatenablog.com 作成したサンプルアプリは以下になります。 地図をクリックした地点から 250m、500m、750m、1000m のエリアを表示しています。 Mapbox GL JS 到達圏解析 アプリは GitHub に公開しております。また、サンプルアプリのソースコー…

ポイントデータの3D地図表現が、Mapboxにあるようで無かったので作りました。 どんな時に使うの 棒グラフに地理情報を付けたい時に使えます。 例えば、「全国の展望台付きタワーの高さ」を比較する場合。 ↓ ↓ 比較する各地を、地図上に載せる時に使えます。 ↓ 実装例 今回はシンプルに、１層の棒グラフを地図に載せる方法を紹介します。 デモとソースコード デモとソースコードは、こちらのリンク先に掲載しています。 bl.ocks.org 要点の解説 今回の要点は、ポイントデータから3Dポリゴンデータを作る点です。 Mapboxにはポイントを直接3Dで表現するメソッドは無いのですが、3Dポリゴンを描画…

市や区の境界線の座標情報をJavaScriptで取得したいと思ったのでそのメモ。 今回はOpenStreetMap(OSM)を使ってやる。 OSMにはNominatimというものがあり、これが住所によるOSMのデータ検索やその逆を提供してくれます。詳細はこちら。 JA:Nominatim - OpenStreetMap Wiki このサイトで実際に試すこともできます。 Nominatim Demo 提供されているAPIのリファレンスはこちら。 Overview - Nominatim Documentation 普通にブラウザからでもリクエストすることができます。例えば神奈川県の横浜市の境界線…

いろいろな位置ゲーのデザインを見る funq.jp 意外と少ない。マイクラも一時期出してすぐ消えてたし難しいんだな〜 ポケモンGo ピクミンブルーム ドラクエウォーク テクテクライフ 刀剣乱舞のお散歩機能 おまけ：Finding Serendipity ポケモンGo 流行った当初にちょっとだけやってすぐやめた トップ絵があるのはピクミンブルームと一緒だ〜 街の描画がサイバー感ある 道端にクリスマスピカチューがいた つかまえた〜かわいい 写真撮影。平面検知が足跡なのいいね かわいい〜＝〜〜 ポケストップ？ 家でもやる。ポケモンを捕まえる時もARできる。左にいるよーって矢印が言っている でも部屋が…

この記事は Mapbox Advent Calendar 2022 の12日目の記事です。 Mapbox の弱点として、3D のデータ表現が弱いということが言われます。確かに、3D 地図の上空に何かを配置したり、3D の点群を地図に重ね合わせて表示するための標準的な機能はありません。もちろん、カスタムスタイルレイヤーを使って、直接 WebGL もしくは Three.js のようなライブラリで 3D オブジェクトを配置することもできますが、あまり手軽ではありません。あるいは fill-extrusion レイヤーの fill-extrusion-base プロパティを使って、宙に浮いた押し出しポ…

この記事は 3D都市モデル Project PLATEAU Advent Calendar 2022 の17日目の記事です（既に終了しておりますが、空いている日付にエントリーさせてもらいます！）。 ここ数年開発を続けている東京の公共交通のリアルタイム3Dマップ Mini Tokyo 3D ですが、2020年末に国土交通省が Project PLATEAU を発表して以来、何か面白いデータの活用ができないかと考えを巡らせておりました。今回 PLATEAU の精巧な3D都市モデルを Mini Tokyo 3D のマップ上に組み込んで表示する Mini Tokyo 3D プラグイン PLATEAU …

メモです。でも結論からするとうまく行かずに挫折。この投稿はその失敗の記録である。 はじめに タイトルどおりなんですが、Mapboxにはカーナビみたいなturn by turnのナビゲーションを実現するためのNavigation SDKというものが存在しています。でもiOSとAndroid向けにしかありません。 今回はReact Nativeでナビゲーションを実装してみたかったのでいろいろと探してみるとやりたいことをやってくれているであろうOSSを発見しました。 github.com 個人の努力が公開されているのかと思いきやHOMEEというUSはシカゴにある企業のリポジトリでした。 最終的にこれ…

メモです。 Mapboxというのは地図情報のサービス。地図の点だけで言えばGoogle Mapとかと同じようなものと言えば同じようなものなのだけどカスタマイズ性の高さとビジュアライズ周りに強みがあると思っている。なので地図をベースにしたいろんな表現が可能になっていると言える。実績も多く有名なところだとYahooカーナビなんかはMapboxを利用している。 www.mapbox.jp Mapbox自体の細かい話はさておき、そんなMapboxを使って経路探索をやってみる。つまり出発地、経由地、目的地を指定してルートを作成するやつ。 Mapboxでこれをやる場合にはDirections APIという…

こんにちは。Insight Edge引越し好き(?)Data Scientistの中野です。 最近は1年半のペースで引越してるので、免許書の住所記入欄が足りなくなり付箋のようなものに住所を記入しています！ 新しいエリアに引っ越す時は近隣のカフェや本屋情報を調査しているのですが毎回イマイチ綺麗に可視化できないので、 今回は地理情報データを可視化できるツールの比較や、その際のちょっとしたコツを紹介します！ 背景 自転車盗難データの準備 自転車盗難データとは サンプルデータの概要 各ツールの紹介 01.Looker Studio（旧：データポータル） 使用時のポイント 画面イメージ 02. BigQ…

【問い】One on Oneミーティング 重要な5つのポイントとは？ ----------------------------------------------------- 2003年の創刊以来、19年間 ハーバードビジネスレビュー から珠玉の一行をお届けして参りました。 ずっと同じ雑誌を読み続けることで未来の経営が見えて来ます。 ----------------------------------------------------- 【問い】One on Oneミーティング 重要な5つのポイントとは？ 1 対 1 の会議を最大限に活用する マネージャーが従業員と個別にミーティングを行う…

Mapboxで映画のようなルートアニメーション Mapboxで映画のようなルートアニメーションを作る｜ブログ｜Mapbox Japan Garmin connectに類似したアニメーションがあり、コードを書く必要があるかは謎だが、実装できる環境はありがたい。 鉱物や化学物質などの要素で差異が出るSAR等の背景を地形のテスクチャーとして利用するという方法もあるだろう。現在は有償データのみ？