注: 以下の翻訳の正確性は検証されていません。AIPを利用して英語版の原文から機械的に翻訳されたものです。

地図タイルを表示する

カスタムウィジェットでは、Foundry で設定されたタイルソースからラスターおよびベクターの地図タイルを表示できます。アプリケーションビルダーは、mapTileLayer パラメーターを使って Workshop またはカスタムウィジェットのプレイグラウンドでレイヤーを選択できます。

Foundry は、選択したタイルソースに対して、Mapbox Style Specification ↗ に準拠する JSON スタイルドキュメントを提供します。このスタイルは、Mapbox GL JS ↗ または MapLibre GL JS ↗ でレンダリングできます。

Marketplace は、カスタムウィジェットで使用されるタイルソースをパッケージ化しません。Workshop モジュールを含む Marketplace 製品を別の Foundry エンロールメントにインストールした場合、インストールされたモジュールには、ソースエンロールメントのタイルソースへの参照が保持されます。インストールによって、宛先エンロールメントにタイルソースが作成されることはありません。

タイルソースを設定する

レイヤーセレクターで利用可能な任意のタイルソースを使用できます。ソースを追加または変更するには、タイルソースを管理する権限を持つ管理者が Control Panel を開き、該当するスペースを選択して、タイルを開きます。タイルを利用できない場合や、ソースの設定について支援が必要な場合は、Palantir サポートにお問い合わせください。

ウィジェットを設定する

ターミナルで次のコマンドを実行して、ウィジェットのパッケージを更新します。

Copied!1
2
npm install @osdk/widget.client@latest @osdk/widget.client-react@latest
npm install --save-dev @osdk/widget.vite-plugin@latest

ウィジェットの設定に mapTileLayer パラメーターを追加します。

Copied!1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { defineConfig } from "@osdk/widget.client";

export default defineConfig({
  id: "mapWidget",
  name: "Map",
  type: "workshop",
  parameters: {
    mapLayer: {
      displayName: "Map tiles",
      type: "mapTileLayer",
    },
  },
  events: {},
});

パラメーター値には、選択したレイヤーの tileSourceId が含まれます。この値は読み取り専用で、ウィジェットイベントを通じて更新することはできません。

地図をレンダリングする

選択した tileSourceId を使用してスタイル URL を組み立て、地図レンダラーに渡します。

Copied!1
const styleUrl = `${window.location.origin}/api/v3/media/tileSources/${tileSourceId}/style?preview=true`;

カスタムウィジェットでは、blob: ワーカー URL をブロックする厳格なコンテンツセキュリティポリシー (CSP) が適用されます。ウィジェットのアセットからワーカーを読み込むようにレンダラーを設定します。Mapbox GL JS の場合は、厳格な CSP 用のバンドルとワーカーのセットアップ ↗を使用します。

MapLibre の例

ウィジェットの CSP で必要とされるワーカーのセットアップを使用するには、MapLibre GL JS の最新リリースをインストールします。

Copied!1
npm install maplibre-gl@latest

地図を作成する前に、MapLibre の Vite ワーカーのセットアップ ↗を使用してワーカーを設定し、MapLibre の CSS ↗ を組み込みます。この例では、レイヤーを選択すると地図が作成され、選択を変更するか、ウィジェットがアンマウントされると地図が削除されます。

Copied!1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import { useFoundryWidgetContext } from "@osdk/widget.client-react";
import { Map, setWorkerUrl } from "maplibre-gl";
import workerUrl from "maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url";
import "maplibre-gl/dist/maplibre-gl.css";
import { useEffect, useRef } from "react";
import type MainConfig from "./main.config.js";

setWorkerUrl(workerUrl);

const useWidgetContext = useFoundryWidgetContext.withTypes<typeof MainConfig>();

export const Widget = () => {
  const { parameters } = useWidgetContext();
  const tileSourceId = parameters.values.mapLayer?.tileSourceId;
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (containerRef.current == null || tileSourceId == null) return;

    const map = new Map({
      container: containerRef.current,
      style: `${window.location.origin}/api/v3/media/tileSources/${tileSourceId}/style?preview=true`,
      center: [0, 0],
      zoom: 1,
    });

    return () => map.remove();
  }, [tileSourceId]);

  return <div ref={containerRef} style={{ height: 400 }} />;
};

レイヤーを選択する

カスタムウィジェットのプレイグラウンドで、地図タイルパラメーターのレイヤーを選択します。

カスタムウィジェットのプレイグラウンドに、設定パネルでタイルレイヤーが選択された地図が表示されています。

Workshop でウィジェットを使用するには、ウィジェットセットを公開し、ウィジェットを埋め込んで、ウィジェットの設定パネルの地図タイルでレイヤーを選択します。このパラメーターでは、Workshop の変数バインディングではなくレイヤーセレクターを使用します。

←

PREVIOUSパラメーターとイベント

NEXTウィジェットセットへのウィジェットの追加

→