はじめにこの記事は、先日配信されたMapbox NewsletterのWEEKLY TIPSで紹介されていた「画像を追加」についての解説です。このサンプルではimageソースの使い方を例示しています。また、Newsletterの購読はこちらからお申し込みいただけます。以下が本サンプルのデモです。 コードを確認まずExamplesのコードを見に行きましょう。日本語サイト英語サイト基本的に同じコードですが、英語版はスタイルがMapbox Dark v11にアップグレードされているのでこちらを使用します。Mapbox Dark v10ではデフォルトのプロジェクションが...

はじめにこの記事は、先日配信されたMapbox NewsletterのWEEKLY TIPSで紹介されていた「Add a 3D model with threebox」についての解説です。このサンプルではThreeboxの使い方を例示しています。また、Newsletterの購読はこちらからお申し込みいただけます。以下が本サンプルのデモです。 ThreeboxとはこれまでのWEEKLY TIPSではカスタムレイヤーを用いる方法を見てきました。Mapbox Newsletter WEEKLY TIPSの解説 -「カスタムスタイルレイヤーを追加」ではWebGLを直接コントロール...

はじめにこの記事は、先日配信されたMapbox NewsletterのWEEKLY TIPSで紹介されていた「マップナビゲーションコントロールの表示」についての解説です。このサンプルではNavigationControlの使い方を例示しています。また、Newsletterの購読はこちらからお申し込みいただけます。以下が本サンプルのデモです。右上に表示されている+/-ボタン等がナビゲーションです。 コードを確認まずExamplesのコードを見に行きましょう。日本語サイト英語サイト基本的に同じコードですが、英語版はスタイルがMapbox Streets v12にアッ...

はじめにこの記事は、先日配信されたMapbox NewsletterのWEEKLY TIPSで紹介されていた「3Dモデルを追加」についての解説です。このサンプルではThree.jsを使ってCustomLayerInterfaceを構成する方法を紹介しています。また、Newsletterの購読はこちらからお申し込みいただけます。以下が本サンプルのデモです。 Three.jsとはThree.jsはWebGLベースの3Dライブラリです。「カスタムスタイルレイヤーを追加」ではWebGLを直接使ってカスタムレイヤーを作成していましたが、一つの三角形を描くのにもかなりの量のコードが必...

はじめにこの記事は、先日配信されたMapbox NewsletterのWEEKLY TIPSで紹介されていた「カスタムスタイルレイヤーを追加」についての解説です。このサンプルではCustomLayerInterfaceの使い方を紹介しています。また、Newsletterの購読はこちらからお申し込みいただけます。以下が本サンプルのデモです。 CustomLayerInterfaceとは地理空間データを表示する際、通常はMapbox GL JSで定義されているレイヤー（Symbolレイヤー、Circleレイヤー等）を使用します。それに加えて、Mapbox GL JSではユーザ...

はじめにこの記事は、先日配信されたMapbox NewsletterのWEEKLY TIPSで紹介されていた「ジオコーダの結果後にポイントを設定」についての解説です。このサンプルではGeocoderプラグインの使い方を紹介しています。また、Newsletterの購読はこちらからお申し込みいただけます。以下が本サンプルのデモです。テキストボックスに地名等を入力して検索します。候補から一つ選択すると、その場所にピンがセットされカメラが移動します。 コードを確認まずExamplesのコードを見に行きましょう。日本語サイト英語サイト基本的に同じコードですが、英語版はスタ...

はじめにこの記事は、先日配信されたMapbox NewsletterのWEEKLY TIPSで紹介されていた「距離を測定」についての解説です。このサンプルはturf.lineDistanceの使い方について例示しています。また、Newsletterの購読はこちらからお申し込みいただけます。以下が本サンプルのデモです。地図上をクリックしていくと点が打たれ、点と点の間に線分が描画されます。また、点と点の間の距離が表示されます。点をクリックするとその点を消せます。 TurfTurfは地理情報の分析等を行うJavaScriptのライブラリです。Mapbox GL JSと組み合わせ...

はじめにSearch Box APIにおける日本のPOI検索で、Routable Pointsがサポートされました。この記事では、Routable Pointsの使い方等について解説します。 Search Box APIとはSearch Box APIとはMapboxのSearchサービスが提供するAPIの一つです。ユーザー入力に応じて次々と候補を表示するような、インタラクティブな検索に強みがあるのが特徴です。インタラクティブな検索を実現するため、以下の2つのエンドポイントが使用されます。/suggest: ユーザの入力した住所やPOI名に部分一致する結果一覧を返します...

はじめにこの記事は、先日配信されたMapbox NewsletterのWEEKLY TIPSで紹介されていた「ゲーム感覚でマップを操作」についての解説です。このサンプルはデフォルトとは異なるキーボード操作を実装する方法について例示しています。また、Newsletterの購読はこちらからお申し込みいただけます。以下が本サンプルのデモです。キーボードの矢印キーで操作します。上下矢印で前後の移動、左右矢印で地図の回転です。 コードを確認まずExamplesのコードを見に行きましょう。日本語サイト英語サイト基本的に同じコードですが、英語版はスタイルがMapbox Dar...

はじめに現在、Software Designで連載中の「位置情報エンジニアリングのすすめ」を毎月楽しく拝読しております。第7回「防災マップの作成② 地図の3D表現と土砂災害警戒区域の可視化」ではMapLibre GL JSを用いて地理情報を表示していました。今回の紙面の内容もMapbox GL JSで実装可能なので、試してみようと思います。 建物ポリゴンの3D表示紙面ではソースとして国土地理院Vector、レイヤーとしてfill-extrusionを用いて建物を表示していました。Mapbox GL JSでも同じ手法で表示が可能です。ただし、Mapboxの場合はMapbox S...

はじめにこの記事は、先日配信されたMapbox NewsletterのWEEKLY TIPSで紹介されていた「一連の場所にジャンプ」についての解説です。このサンプルはMap#jumpToの使い方に関して例示しています。また、Newsletterの購読はこちらからお申し込みいただけます。以下が本サンプルのデモです。 コードを確認まずExamplesのコードを見に行きましょう。日本語サイト英語サイト基本的に同じコードですが、英語版はスタイルがMapbox Streets v12にアップグレードされているのでこちらを使用します。Mapbox Streets v11では...

OCPIプロトコルとはOpen Charge Point Interfaceの略で電気自動車(以下EVと略す)と充電インフラとのやり取りを定義した仕様です。仕様書はGithubにホストされているので誰でも読め、間違い等があったりしたらPRを送ることができます。https://github.com/ocpi/ocpi!2023年11月2日時点で最新のOCPI v2.2.1の仕様について解説します OCPIが生まれた背景EVインフラが世界中に急速に広まっています。米国ではセブンイレブンが7Chargeという充電施設を運営しています。今後も様々な企業が参入し、EVインフラを提供し...

はじめに現在、Software Designで連載中の「位置情報エンジニアリングのすすめ」を毎月楽しく拝読しております。第6回「防災マップの作成① 浸水想定区域と避難所を可視化する」ではMapLibre GL JSを用いて地理情報を表示していました。記事にも記載されている通り、MapLibre GL JSはMapbox GL JSからフォークされた地図ライブラリなので、使い方は非常に似通っています。そこで、ここでは紙面で紹介されていたMapLibre GL JS用のプラグインであるmaplibre-gl-opacityをMapbox GL JSで使ってみようと思います。 map...

はじめにこの記事は、先日配信されたMapbox NewsletterのWEEKLY TIPSで紹介されていた「人口密度を視覚化」についての解説です。このサンプルはExpressionsにおける変数の使い方を例示しています。また、Newsletterの購読はこちらからお申し込みいただけます。以下が本サンプルのデモです。 コードを確認まずExamplesのコードを見に行きましょう。日本語サイト英語サイト基本的に同じコードですが、英語版はスタイルがMapbox Light/Dark v11にアップグレードされているのでこちらを使用します。Mapbox Light/Da...

はじめにこの記事は、先日配信されたMapbox NewsletterのWEEKLY TIPSで紹介されていた「ルートの表示」についての解説です。このサンプルはMapbox GL Directionsプラグインの使い方に関して例示しています。また、Newsletterの購読はこちらからお申し込みいただけます。以下が本サンプルのデモです。始点・終点をクリックして指定すると経路探索が行われ、結果が表示されます。また、プロファイル（Traffic, Driving, Walking, Cycling）も選択できます。 Mapbox GL DirectionsとはMapbox GL...

はじめに前回に引き続き、Software Designで連載中の「位置情報エンジニアリングのすすめ」をMapbox GL JSで実装してみます。 地図の表示 環境構築紙面の通り、Viteをインストールします。% npm create vite@latest webmapNeed to install the following packages: create-vite@5.0.0Ok to proceed? (y) y✔ Select a framework: › Vanilla✔ Select a variant: › TypeScriptScaff...

はじめにこの記事は、先日配信されたMapbox NewsletterのWEEKLY TIPSで紹介されていた「マップ間のスワイプ」についての解説です。このサンプルはmapbox-gl-compareプラグインの使い方に関して例示しています。また、Newsletterの購読はこちらからお申し込みいただけます。以下が本サンプルのデモです。 コードを確認まずExamplesのコードを見に行きましょう。日本語サイト英語サイト基本的に同じコードですが、英語版はスタイルがMapbox Light/Dark v11にアップグレードされているのでこちらを使用します。Mapbox...

はじめに先日、Mapbox Standardスタイルに対応した以下のSDKがリリースされました！Mapbox GL JS v3.0.0Mapbox Maps SDK for Android v11.0.0Mapbox Maps SDK for iOS v11.0.0そこで、ここでは各SDKサイト等の変更点をまとめました。 Mapbox Standardスタイルって？3Dモデルの表示や新しいライティングをサポートしたスタイルです。以下のように、まるでゲームの世界ような地図が表示できます。このスタイルをサポートするにあたり、上記の新しいバージョンのSDKがリリース...

はじめにこの記事は、先日配信されたMapbox NewsletterのWEEKLY TIPSで紹介されていた「マップの言語を変更」についての解説です。Mapbox Streets v8ベクタータイルセットは多言語対応なので簡単に表示する言語を切り替えることができます。また、Newsletterの購読はこちらからお申し込みいただけます。以下が本サンプルのデモです。 コードを確認まずExamplesのコードを見に行きましょう。日本語サイト英語サイト基本的に同じコードですが、英語版はスタイルがMapbox Light v11にアップグレードされているのでこちらを使用し...

はじめにこの記事は、先日配信されたMapbox NewsletterのWEEKLY TIPSで紹介されていた「場所にゆっくり飛ぶ」についての解説です。これはMap#flyToのオプションの使い方のサンプルです。また、Newsletterの購読はこちらからお申し込みいただけます。以下が本サンプルのデモです。 コードを確認まずExamplesのコードを見に行きましょう。日本語サイト英語サイト基本的に同じコードですが、英語版はスタイルがMapbox Streets v12にアップグレードされているのでこちらを使用します。Mapbox Streets v11ではデフォル...