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

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

はじめに前回の記事ではAPIを直接呼び出す形でMTSを試しました。今回はTilesets CLIを用いて試してみます。https://zenn.dev/ottylab/articles/9fc83e9a211d35/ Tilesets CLITilesets CLIはMTSでデータをアップロード・タイルセット作成等を行うためのCLIツールです。Pythonで実装されています。 インストールPython 3.6以上の環境で以下のコマンドによりインストールします。% pip install mapbox-tilesetsまた、追加機能のestimate-areaを使用...

はじめに以下の記事の通り、先日ラスターMTSが正式にリリースされました。https://www.mapbox.jp/blog/platform-support-for-raster-data-enhances-weather-and-imagery-visualizationsMTSはMapbox Tiling Serviceの略で、Mapboxのサーバにデータをアップロードしてタイルセットに変換するサービスです。以前からベクターデータをサポートしていましたが、今回ラスターデータにも対応し、ラスタータイルセットの作成が可能になりました。詳細については以下のドキュメントもご参照...

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

はじめに前回に続き、react-map-glを試します。今回は以下の記事でご紹介したReact実装のSearch JSを組み合わせてみます。https://zenn.dev/ottylab/articles/ab629f6696e865以下がデモです。SafariやFirefoxを使用されている方はデモが実行されない可能性があります。Chromeで表示するか、 https://stackblitz.com/edit/vitejs-vite-rf15vg を直接ご参照ください。 おさらいSearch JSのReact実装の使い方をおさらいしましょう。以下のようにprops...

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

はじめに前回に続き、react-map-glを試します。今回はGeoJSONレイヤーを追加します。東京駅を表現したポリゴンを追加します。以下がデモです。SafariやFirefoxを使用されている方はデモが実行されない可能性があります。Chromeで表示するか、 https://stackblitz.com/edit/vitejs-vite-fi2kyj を直接ご参照ください。 コードを確認以下が今回作成したコードです。YOUR_MAPBOX_ACCESS_TOKENはご自身のMapboxのパブリックトークンを使用してください。App.jsximport Map, ...

はじめにMapbox GL JSは強力なJavaScript用の地図ライブラリですが、公式にはReact用のライブラリはありません。ドキュメントにしたがってReactと組み合わせて使用することはできますが、Reactっぽいコードから逸脱している感は否めません。そこでMapbox GL JSをラップしてReact対応したライブラリを探してみるといくつか見つかります。中でもreact-map-glがおすすめです。このライブラリはdeck.glのコンポーネントとして開発されてきたようですが、単独でも使用可能です。react-map-glはMapboxが直接開発しているわけではありませ...

はじめにこの記事は、先日配信されたMapbox NewsletterのWEEKLY TIPSで紹介されていた「タイムスライダーを作成」についての解説です。このサンプルではMap#setFilterの使い方を例示しています。また、Newsletterの購読はこちらからお申し込みいただけます。以下が本サンプルのデモです。 コードを確認まずExamplesのコードを見に行きましょう。日本語サイト英語サイト基本的に同じコードですが、英語版はスタイルとしてMapbox Light v11、プロジェクション（地図投影法）としてヴィンケルトリペル図法を使用しています。プロジェ...

はじめにこの記事は、先日配信されたMapbox NewsletterのWEEKLY TIPSで紹介されていた「ホバー時にポップアップを表示」についての解説です。このサンプルではPopupおよびマウスイベントの使い方について例示しています。また、Newsletterの購読はこちらからお申し込みいただけます。以下が本サンプルのデモです。 コードを確認まずExamplesのコードを見に行きましょう。日本語サイト英語サイト基本的に同じコードですが、英語版はスタイルがMapbox Streets v12にアップグレードされているのでこちらを使用します。Mapbox Str...

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

はじめにもうすでに利用された方もいらっしゃるかもしれませんが、Mapbox, Inc.のドキュメントサイトにはAIチャットボットがあります。右下の「Ask AI」をクリックすると以下のようなチャット画面が表示されます。このAIチャットボットはRAG (Retrieval Augmentented Generation)を用いているため。ドキュメントサイトの内容に関する質問については正確な回答が期待できます。また、日本語にも対応しています。そこで、この記事ではいくつか技術的な質問をしてどれぐらい使えるAIか試してみます。 試してみるそれでは実際にいくつかの質問を試してみ...

はじめにこの記事はMapbox Search JS を触ってみる (SearchBox/React編)の続きで、Search JSのSearchBox/Coreの使い方を見ていきます。Search Box - Search SessionのSearchSessionのExampleを参考にしつつ、使い方を見ていきます。以下が本サンプルのデモです。テキストボックスに地名や住所を入れてSuggestボタンをクリックします。次にSelectメニューに追加された候補から一つ選択することで地図が表示され、その場所がマーカーで示されます。 Search Box Core と Minim...

はじめにこの記事はMapbox Search JS を触ってみる (SearchBox/Web編)の続きで、Search JSのSearchBox/Reactの使い方を見ていきます。Search Box - React QuickstartのIntegration with a Mapbox GL JS Mapを参考にしつつ、Add Search Box for Japanと同じものを作成します。以下が本サンプルのデモです。SafariやFirefoxを使用されている方はデモが実行されない可能性があります。Chromeで表示するか、 https://stackblitz.com/...

はじめにこの記事は、先日配信されたMapbox NewsletterのWEEKLY TIPSで紹介されていた「陰影処理を追加」についての解説です。このサンプルではhillshadeレイヤーの使い方について例示しています。また、Newsletterの購読はこちらからお申し込みいただけます。以下が本サンプルのデモです。 コードを確認まずExamplesのコードを見に行きましょう。日本語サイト英語サイト基本的に同じコードですが、英語版はMapbox Light v11スタイルを使用しているのでこちらを参照します。また、英語版はMapbox GL JS v3が使用されて...

はじめに2024年春リリースでSearch SDKsの発表がありました。その中で現在ベータ版で公開中のMapbox Search JSの使い方についてみていきます。 Mapbox Search JSとはMapbox Search JSはMapboxのSearchサービスをJavaScript環境で使用するためのライブラリです。サービスとしてはAddress Autofill、Search Box、Geocodingの3種類に対応しています。Autofill: Autofill API (日本未対応) を使用して不完全な住所情報から完全な住所を得る機能Search Box...

はじめにこの記事は、先日配信された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にアッ...