MapTiler SDK：ステロイドのJavaScriptマップ
2023年05月05日発行
MapTiler SDKとは何ですか？
MapTilerは、Desktop/Engine のような高度な処理ツール、データの保存と処理サービス、QGISプラグイン、ジオコーディングとジオロケーションサービス、JavaScriptライブラリ、地図スタイリングツールなど、ビジネス向けの包括的な地図エコシステムを構築してきました。これまで、ウェブ上での地図の表示については、主にオープンソースコミュニティとMapLibreに依存していました。これは今後も継続されますが、私たちは独自のSDKを作成することで次のレベルに進み、私たちの地図とお客様のウェブサイトをよりよく統合できるようにしています。MapTiler SDKは、MapTilerCloud のために作られた新しいJavaScriptとTypeScript SDKです。
本記事では、新SDKのターゲット層、構造、注目すべき機能、始め方、今後のビジョンなど、新SDKの詳細をご紹介します。
なぜ自社でSDKを作るのか？
SDKの開発に着手する前に、社内ではSDKの開発について何度も議論を重ねました：まったく新しいものをゼロから作るのか、それとも既存のソリューションをベースにするのか。全く新しいものを作るのか、それとも既存のソリューションをベースにするのか、その場合、どの選択肢が最も適しているのか。
ビジネスの観点から、SDKの主な機能は他のアイデア（当社とお客様の両方）を促進することであるため、開発に1年を必要としないソリューションが必要でした。当時、SDKとうまく統合できるようなプロジェクトがすでにいくつかありました。すぐに、MapLibre GLが最有力候補として浮上しました。高速でメンテナンスが行き届いており、我々もコミュニティもすでに使いこなしていたため、私たちのプロジェクトの理想的な基盤になりました！
さて、"なぜMapLibreに直接貢献しないのか？"と聞かれるかもしれません。- その理由は主に2つあります：
-
私たちはSDKが私たちのデータスタックやサービスと完全に統合され、シームレスで摩擦のない開発体験を提供することを望んでいます。コミュニティによって維持されているプロジェクトであるMapLibreが、特定のデータプロバイダーについて核心部分まで大きく意見することは不適切です。
-
ビジネスとして、MapTilerは独自の製品リリースロードマップを持っています。もっと早くリリースしたい機能もありますし、私たちのタイムラインでMapLibreのコミュニティ主導の開発の方向性を乱したり、影響を与えたりすることは避けたいのです。
2点目ですが、私たちのSDKはオープンソースライセンス（BSD-3）で公開されているので、近い将来、そのコンポーネントの一部がMapLibreにプッシュされるかもしれません。
また、予想された質問として、互換性についての質問がありました："自分のデータ（タイルセット、GeoJSONファイルなど）を自分のサーバーやMapTiler以外のデータプロバイダーのサーバーに置いている場合、MapTiler SDKで動作するのでしょうか？"- はい、間違いなくあなたのデータを使い続けることができます！
初日から、私たちのSDKがMapLibreをベースにしている場合、MapLibreとの完全な後方互換性を維持することを保証しています。私たちのSDKはショートカットや機能を追加しますが、それらを使用することを義務づけられるものではありません。ですから、カスタムサーバーのデータや他のソースからのデータを使うのは、完全にあなた次第です！
SDKをさらに掘り下げる前に、MapLibreの進化に言及する最後のポイントがあります。私たちはSDKを積極的にメンテナンスする予定であり、SDKはMapLibreの将来のバージョンに適応し、その進歩の恩恵を受けながら成長するように設計されています。
では、詳細を説明します！
MapTiler sdkで最初のマップを作成する
MapLibreに既に慣れている方であれば、私たちのSDKの学習曲線はほぼフラットでしょう！
まず最初に、APIキーを取得する必要があります。MapTilerCloud のアカウントを作成し、APIセクションに移動してキーを取得します。
そして、JS/TSプロジェクトにSDKをインストールして使用するためには、2つの選択肢があります：
- のCDNを使用し、このようなシンプルなHTMLページを作成します：
(この例だけでなく、SDKのドキュメントページで他の多くの例を見ることができます)
- または、NPMでプロジェクトにインストールしてください：
npm install --save @maptiler/sdk
次に、フロントエンドのページまたはReactコンポーネントで、SDKからこれらの要素をインポートします：
import { Map, MapStyle, config } from '@maptiler/sdk';
// Set your MapTiler CLoud API key
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({
container: 'map', // Div container ID HTML element, or React ref
style: MapStyle.STREETS, // Pick one of the built-in styles
center: [16.62662018, 49.2125578], // position [lng, lat]
zoom: 14,
});
お気づきかもしれませんが、これは MapLibre を初期化するのとかなり似ています。ここから、主な違いはAPIトークン（以前はスタイルURLの一部だった）をどのように設定するか、そして りゅうぎ が、多数の内蔵スタイルから自動補完された値になっています。
MapTiler のData スタックに最適なパートナーです。
MapTilerは多作なデータ作成者です！多くのレイヤーが自社開発されており、ジオデータチームはいつも忙しくしています！MapTiler Planet、Geocoding、Ocean、カスタム3D地形などなど（このニュースセクションの他の記事を見てみてください）、他にもたくさんあります！また、ユーザーに素晴らしいデータを提供するために、大手企業とのパートナーシップの構築にも積極的です。これらが簡単に顧客の製品に反映されないのは残念です。
SDKの主な特徴の1つは、データアクセスが容易なことです！
MapTilerCloud の無料アカウントで得られるものは以下の通りです。
- カートグラファーが管理するすべてのプレミアムスタイルとタイルセット
- ゼロから、または既存のスタイルをクローンして、独自のスタイルを作成するツールです。
- ジオデータ（.geojson, .gpx, .kml, .shp, .zip shapefile）をgeojsonで格納するホスティングサービスです。
- データを利用するためのサービス（REST APIとクライアントTypeScriptライブラリ）。
- ジオコーディングサービス（REST APIとクライアントTypeScriptライブラリ）。
- IPジオロケーションサービス（REST APIとクライアントTypeScriptライブラリ）。
- チュートリアルが充実しているので、すぐに始められ、より高度な地図作成も可能です！
- 充実したノルマで、副業にも十分な効果を発揮します！
マップスタイルが簡単に
地図デザインは簡単な作業ではありません。特に、視覚的な混乱を最小限に抑えながら、明確な意図を伝える必要があります。しかし、私たちはあなたをサポートします！
MapTilerのカートグラファーとデザイナーのチームは、ストリート系、ハイキング・スキー系、データビジュアライゼーション系、海洋系など、様々な用途に合わせた新しいスタイルを継続的に作成しています！現在では、それぞれがユニークな特徴と用途を持つ、幅広いスタイルのリストを保持しています。
これらのスタイルを簡単にプロジェクトに取り入れることができるように、TypeScriptを使用する際に説明をオートコンプリートするショートサンドを作成することにしました。では、その仕組みを見てみましょう：
import { Map, MapStyle } from '@maptiler/sdk';
this.map = new Map({
container: someDiv,
style: MapStyle.DATAVIZ.DARK,
})
のことです。 りゅうぎ のプロパティを使用します。 マップ コンストラクタはオプションとなり（MapLibreでは必須）、もし提供されない場合は、私たちの ストリートビュー2 スタイル（速記： MapStyle.STREETS).
ここでは、スタイルURLよりも速記を使うことのメリットを紹介します：
- URLを覚える必要がなく、短縮形がオートコンプリートされる
- 最後のバージョンを知る必要はなく、最新のもの（street-v2かv3か）を使用しています。
- APIキーを連結する必要がない
- スタイルバリエーションは、より手に取りやすい
ここでは、TypeScriptのプロジェクトでVSCodeにオートコンプリートを表示する方法を紹介します：
すべてのスタイルを表示するオートコンプリート
指定したスタイルのすべてのバリエーションを表示するオートコンプリート しかし、MapTiler SDKはMapLibreと完全な後方互換性があるため、URLやオブジェクトスタイルの記述を使用することができます。
スタイルバリエーションについて一言： と入力すると MapStyle.DATAVIZ をVSCodeで実行すると、以下のようなオートコンプリートが表示されます：
MapStyle.DATAVIZ.DEFAULTについてミニマムなスタイルに、ほんの少し色味を加えるだけ。MapStyle.DATAVIZMapStyle.DATAVIZ.LIGHTライトグレーのミニマリストの代替品です。MapStyle.DATAVIZ.DARKグレーダークモードのミニマリストの代替
ほとんどのスタイルには複数のバリアントがあり、同じスタイル内のバリアントはすべて同じデータを表示し、配色のみが変化します。また、異なるスタイルにもバリアントが存在し、たとえば ダーク モードは、DATAVIZスタイルにも存在し、さらに STREETS, ブライト, BASICなどがあります。
ここでは、人気の高い4つのスタイルをご紹介します：
 MapStyle.STREETS |
 MapStyle.SATELLITE（マップスタイル サテライト |
 MapStyle.DATAVIZ.DARK |
 MapStyle.OUTDOOR |
地形を、もっと簡単に！
WebGL を使って地図を表示する利点のひとつに、WebGL のメッシュ機能を利用して山などの 3D 要素を描画できることが挙げられます。意外なことに、3D地形は以前から利用可能だったにもかかわらず、これを有効にするのは特に簡単ではありませんでした。通常、地形タイルセットのURLを持つソースを追加し、このソースを非常に特殊な方法でマップに組み込む必要があります。誇張を変更したい場合は、このプロセスの一部を再開する必要があり、かなり面倒なことになります。
MapTilerでは、地形データを所有し提供しているため、直接アクセスを提供し、3D地形の使用を大幅に簡素化することができます！3D地形を有効にするには、MapTilerをインスタンス化する際に、3D地形を有効にします。 マップ:
const map = new Map({
container: someDiv,
style: MapStyle.OUTDOOR,
terrain: true, // OPTIONAL. This is false by default
terrainExaggeration: 1.5, // OPTIONAL. This is 1 by default
})
または、マップがインスタンス化された後、それ以降になります：
// Without param, the exaggeration factor is 1
map.enableTerrain();
// Or with an exaggeration of more than 1, to have even bigger mountains
map.enableTerrain(1.5);
地形を無効化し、地形タイルの取得を停止するには、次のようにします。 map.disableTerrain().
に地形誇張で遊ぶ。 MapStyle.WINTER
を超える。Data
私たちの基本的な設計原則は、複雑さをカプセル化することで、その必要がないようにすることです。これには、前述のように、データスタックへの直接の橋渡しをすることなどが含まれます。次のセクションでは、私たちがこの指針をどのように守っているかを示す、その他の例をご覧いただけます。
よりシンプルな（デヴ）ライフのために
MapTilerCloud'のデータスタックに直接アクセスすることで、スタイルや地形のロックを解除することが簡単にできることがわかりました。しかし、より多くのヘルパーがあるので、詳しく見てみましょう：
-
ジオロケーションを使用します： しめす
geolocate: true(デフォルト：擬似)の中に入っています。マップのコンストラクタを使用し、地図はユーザーの位置の中心に置かれます。これは、MapTilerCloudのIP Geolocation APIを使用しています。これはGPSよりも精度が低いですが、ブラウザのロケーションAPIへのアクセスを許可する必要もないので、ここで流れを乱すことはないことを覚えておいてください。 -
の言語を使用します： SDKのデフォルトでは、地図インスタンスはブラウザの設定を使用して、ユーザーの優先言語を使用します。この設定は
マップコンストラクタオプション言語言語.ENGLISHなど、78種類の内蔵言語ショートカットのいずれかを使用します。マップの作成後、新しい方法であるmap.setLanguage(Language.SPANISH)を更新してください。 -
をコントロールします： 歴史的に、コントロールはまた別の摩擦があり、ほとんどの場合、インスタンス化してから、「load」イベントのコールバックの中からマップに追加する必要があります。SDKでは、これを簡略化し、すべてのクラシックなコントロールをコンストラクターから利用できるようにしました。それぞれについて、以下のように指定できます。
真の/擬似といった位置づけになります。トップレフトまたは右下.以下は、その一覧です。マップコンストラクタのオプションです：ナビゲーションコントロール(デフォルト：真ので表示しています。トップライト) は、ズーム／ベアリング／ローテーションの各ボタンを表示します。テレインコントロール(デフォルト：擬似で表示しています。トップライトと真の)には、3D地形を切り替えるためのボタンが表示されます。ジオロケートコントロール(デフォルト：真ので表示しています。トップライト)は、ブラウザの位置情報API(ほとんどの場合GPS)を使ってユーザーをジオロケートするボタンを表示します。スケールコントロール(デフォルト：擬似で表示しています。右下と真の)は、スケールルーラーを表示します。フルスクリーンコントロール(デフォルト：擬似で表示しています。トップライトと真の)には、フルスクリーンを切り替えるためのボタンが表示されます
- geocodingを使用しています： MapTiler SDKには、TypeScript MapTilerCloud API クライアントライブラリ で、それも公開します。つまり、ジオコーディングのような機能をこんな風に簡単に使うことができるのです：
geocoding.forward("paris")
...you_name_itより優れている点は何ですか？
MapTiler SDKと私たちのデータの組み合わせの目的は、素晴らしいスターターパックで学習曲線を減らすことであり、より多くの人が自分のデータを世界に示すことができるように、インタラクティブマッピングをより簡単にできるようにすることです。しかし、SDKがどのように優れているのか、比較表で見てみましょう：
| オルタナティブ | オープンソース？ | タイル/スタイルプロバイダー？ | 短所（MapTiler SDKと比較した場合） |
|---|---|---|---|
| Google Map SDK | ノーン | 噫 |
|
| マップボックスgl js | ノーン | 噫 |
|
| リーフレット | 噫 | ノーン |
|
| OpenLayers | 噫 | ノーン |
|
| MapLibre gl js | 噫 | ノーン |
|
| MapTiler SDK | 噫 | 噫 | N/A |
サポートをお探しですか？
SDKには包括的なドキュメントと豊富なサンプルが付属しており、優れた出発点となります！ジオコーディング、IPジオロケーション、またはMapTilerCloud からデータを取得するような機能を使用する場合、SDKにはAPIクライアントライブラリが含まれており、こちらも非常によく文書化されていることに留意してください！
また、皆様からのご意見をSDKに反映させたいと考えています！
- 何か問題があったのでしょうか？
- 新機能をご希望ですか？
GitHubのIssuesから直接お知らせいただければ、迅速に対応させていただきます！
最後の言葉
要約すると、私たちの目標は、複雑さを軽減し、ジュニア開発者を含むすべての人が印象的な地図や地理データのビジュアライゼーションを簡単に作成できるようにすることです！
そのための方法は、一見簡単そうに見えて、主に以下のようなものです：
- 必要なデータとの距離を縮める
- 最も一般的な構成要素を一発芸に変える
- 便利な初期設定も含む
- オンラインとコードエディター内の両方で、役に立つドキュメントを提供すること。
経験上、複雑さをカプセル化することは時間がかかる努力であり、しばしば自明でないエンジニアリングの努力を必要とすることを理解していますが、それこそが私たちのSDKが目指す方向です！
MapTiler SDKを探す
オープンソース（BSD-3）です。また、MapTilerCloud には、新鮮なマップスタイルとタイルセットを提供する、非常に寛大なフリー層があることも覚えておいてください！
以下、ご興味のあるリンクをご紹介します：
私たちは、皆さんが新しいSDKを使って何を作ろうとしているのかを見るのが待ち遠しいので、ぜひTwitterで@maptiler！
MapTiler SDKの今後について
エコシステム」という概念は、私たちが非常に大切にしているものです。新機能のアイデアが浮かんだときは、いつも "これはSDKの一部であるべきか？"と自問自答します。普遍的な答えはなく、"YES "で実現したり、ロードマップに追加したりすることもあれば、"NO "のこともあります。では、次はどうするのか？私たちは、SDKとシームレスに連携し、複雑な機能を追加することなく簡単にデータにアクセスでき、アプリに新機能を導入できる「モジュール」を開発することにしました。いわば、ブースターパックのようなものです！
結論として、SDKはまだ始まりに過ぎません！今後も、MapTilerのデータに直接関連する新機能の追加や、一部のMapLibreコンポーネントの簡素化など、開発者と次のアプリとの間の摩擦をさらに減らしていく予定です！
私たちMapTilerも開発者であり、他の人たちと同じように、私たちはシンプルさを評価しています。私たちは、ある癖に遭遇し、なぜ期待通りに動かないのかを理解するためにStackOverflowやライブラリのソースコードを深く掘り下げることになるたびに、物事をより簡単にする機会を見出すのです！例えば、MapLibreのレイヤーを見てみましょう: いくつかのレイヤーはとても素敵でカスタマイズ可能ですが、必ずしも設定が簡単ではありませんよね？MapTiler SDKの次のバージョンで取り組むべきことかもしれませんね！
それでは、またお会いしましょう！
