ScribbleMapsをアプリに追加する

注意:

ユーザーがScribble Mapsにサインインし、利用可能なマップを閲覧して、マップデータをWebアプリケーションに直接返せるようにしたい場合は、ScribbleMaps Connect Pickerを使用します。

ピッカーはポップアップで開き、そこでユーザーのサインインプロセスを処理するため、アプリケーションがScribble Mapsの資格情報を直接収集する必要はありません。

Connect Pickerの仕組み

ScribbleMaps Connect Pickerを使用すると、ユーザーはScribble Mapsからマップを閲覧、検索、選択し、そのマップデータを選択したフォーマットでアプリケーションに直接返すことができます。

これは、ユーザーがScribble Mapsで地理データを作成または管理し、独自のマップブラウザやサインインフローを構築することなく、そのデータを独自のアプリに読み込ませたい場合に便利です。

ユースケース / 例:

この統合は、ユーザーがScribble Mapsからマッピングされたデータを選択して読み込む必要があるダッシュボード、不動産ツール、フィールドデータアプリケーション、およびその他のWebアプリに役立ちます。

目次を表示 ↑

Client IDの取得

Scribble Mapsの開発者サイトを開きます:
https://developers.scribblemaps.com
無料プロジェクトを登録します。
Client IDをコピーします。

この値は、Connect Pickerを呼び出すときに使用します。

目次を表示 ↑

ページへのSDKの追加

WebページにConnect Picker SDKを追加します:

<script src="https://api.scribblemaps.com/connect/picker.js"></script>

ページの変更を保存します。

これで、アプリケーションでScribble Maps Connect Pickerが利用可能になります。

目次を表示 ↑

Connect Pickerを開く

ページからScribbleMapsConnect.pick()を呼び出します。
clientId、希望するエクスポートformat、およびonSelectコールバックを渡します。

次の例のようなコードを使用します:

ScribbleMapsConnect.pick({
  clientId: 'YOUR_CLIENT_ID',
  format: 'geojson',
  onSelect: function (result) {
    // result.data contains your GeoJSON
    // result.title, result.mapCode, result.thumbUrl also available
    loadIntoMyApp(result.data);
  }
});

ピッカーが開くと、ユーザーは認証を行い、利用可能なマップを閲覧して、マップを選択できます。

目次を表示 ↑

選択されたマップデータの処理

onSelectコールバックで、result.dataにアクセスします。

これには、リクエストしたフォーマットのマップデータが含まれています。
（オプション）返された追加のフィールドを使用します:
- result.title — マップのタイトル
- result.mapCode — Scribble Mapsのマップコード
- result.thumbUrl — マップのサムネイルURL
データをアプリケーションロジックに渡します。

たとえば、返されたGeoJSONを独自のマップビューアまたはデータワークフローに読み込みます。

目次を表示 ↑

オプション設定

アプリケーションのワークフローに合わせてピッカーを構成できます。

formatの値を変更して、エクスポートフォーマットを選択します。

例: geojson、kml、csv、gpx、dxf、shapefile、またはsmjson。
tabsオプションを使用して、ユーザーが閲覧できるマップソースを選択します。

ユーザーは、personal library、team-shared maps、またはcommunity collectionからマップを閲覧できます。
（オプション）付属のボタンスタイルを使用して、lightまたはdarkのインターフェースに合わせます。

目次を表示 ↑

サポートされているフォーマットと返されるフィールド

サポートされているエクスポートフォーマット:

GeoJSON

KML

CSV

GPX

DXF

Shapefile

SMJSON

返される結果フィールド:

data

title

mapCode

thumbUrl

設定が完了すると、Connect Pickerを使用することで、ユーザーは単一の統合ポイントを介してアプリケーション内からScribble Mapsデータに直接アクセスできるようになります。

目次

Connect Pickerの仕組み

Client IDの取得

ページへのSDKの追加

Connect Pickerを開く

選択されたマップデータの処理

オプション設定

サポートされているフォーマットと返されるフィールド

関連情報