はじめに
https://github.com/brianmcleer/rightclick-widget
Right ClickウィジェットはArcGIS Experience Builderにコンテキストマップツールを追加します。ユーザーが地図上で右クリックすると、設定可能なアクションのメニューが表示されます。これにより、ズーム、測定、座標コピー、マーカープロット、テキスト配置、逆ジオコーディングなどの機能にアクセスできます。
エンドユーザーの操作
展開後、ユーザーは地図上の任意の場所で右クリックしてコンテキストメニューを開けます。設定によっては、以下のアクションが利用可能です：
ナビゲーションアクション：
- ズームイン／ズームアウト：クリック位置のズームレベルを調整
- ここを中心に：クリックした地点を中心に地図をパン
座標アクション：
- 座標をコピー：設定された座標系で位置をクリップボードにコピー
- 座標をプロット：番号付き座標マーカーを配置し、スタイルや座標ラベルを設定可能
- マーカーをプロット：カスタマイズ可能な外観のシンプルなマーカーを配置
グラフィックアクション：
- テキスト追加：フォントプロパティを設定してカスタムテキストグラフィックを地図に配置
- すべてのグラフィックをクリア：配置したマーカーとテキストをすべて削除（グラフィックがある場合は件数表示）
外部サービス：
- Google Street Viewで開く：投影座標を使ってGoogle Street Viewで位置を開く
- Pictometryで開く：投影座標を使ってPictometry航空写真ビューアで位置を開く
測定ツール：
情報サービス：
ここは何？：以下を使った位置特定を実行：
- 設定されたロケーターサービスによる逆ジオコーディングで住所検索
- 設定されたArcGIS Feature Servicesへのフィーチャレイヤークエリ
- ジオコーディングとフィーチャレイヤークエリ両方の結果を表示するポップアップ表示
コンテキストメニューは管理者設定に応じて変化します。ツールは使用後または地図操作時に自動的に閉じます。
測定ツール
測定機能には以下の仕様があります：
利用可能な単位
- 距離測定：フィート、ヤード、マイル、メートル、キロメートル
- 面積測定：平方フィート、平方ヤード、平方マイル、平方メートル、平方キロメートル、エーカー
単位表示オプション
- 単一単位のみ：選択したデフォルト単位で測定値を表示
- 両単位表示：主単位と換算値（例：「150.00 feet (45.72 meters)」）の両方で表示
インターフェース要素
- 距離測定ツールには閉じるボタンが含まれる
- 面積測定ツールには閉じるボタンが含まれる
- デフォルトの「新しい測定」ボタンは削除される
座標およびマーカープロット
ウィジェットは2種類のマーカー配置を提供します：
座標マーカー：
- 1から連番で番号付けされる
- ポップアップに設定可能な座標情報を表示する
- 複数の座標系（地図ネイティブ、WGS84、カスタムWKID）に対応する
- 地図上に任意で座標ラベル表示可能
- マーカースタイル、色、アウトライン、位置調整が設定可能
- 緯度経度は小数度または度分秒形式に対応する
シンプルマーカー：
- 番号なしの基本ポイントマーカー
- スタイル、サイズ、色、アウトライン、回転角度、オフセットなど完全カスタマイズ可能な外観
- 透過設定にも対応する
テキストグラフィック：
- クリックした場所にカスタムテキスト配置可能
- フォントファミリー、サイズ、太さ、色が設定可能
- 任意でテキストアウトライン（ハロー）や背景も設定可能
- ブラウザセッション中持続する
開発者向け設定
地図ウィジェット選択
- Right Clickウィジェットとアプリ内の地図ウィジェットを接続する機能
- 選択した地図で右クリック機能を有効化するための設定項目
有効化されたアクション群
各アクションは個別に切り替え可能：
- ズームイン
- ズームアウト
- ここを中心にする
- 座標コピー
- 座標プロット
- マーカープロット
- テキスト追加
- Google Street Viewで開く
- Pictometryで開く
- 距離測定
- 面積測定
- 'ここは何？'
'座標系設定'
'コピーされる座標形式は次から選択可能:'
- '現在の地図の座標系を使用'
- 'WGS84（緯度/経度）を使用'
'座標プロット設定'
'包括的なマーカー構成オプション:'
- '座標系' : 地図ネイティブ, WGS84, またはカスタムWKID
- Format Options: Decimal degrees or degrees/minutes/seconds for lat/lon
- Marker Style: Circle, Square, Cross, X, Diamond, Triangle, Pin
- Visual Properties: Size, color, outline color/width, opacity, rotation angle
- Positioning: X/Y offset controls for precise placement
- Text Settings: Number text size and color
- Labels: Optional coordinate labels with customizable offset, size, and color
- Popup Content: Toggle coordinate display in marker popups
Simple Marker Settings
Independent styling controls for basic markers:
- Style Options: Circle, Square, Cross, X, Diamond, Triangle, Pin
- Appearance: Size, color, outline properties, opacity
- Positioning: Rotation angle and X/Y offsets
Text Settings
Font and display configuration for text graphics:
- Typography: Font family, size, weight (normal/bold)
- Colors: Text color and outline (halo) color
- Effects: Outline size, optional background color
- Background: Transparent or colored background options
Reverse Geocoding Configuration
Feature Layer Configuration
Advanced settings for "What's Here?" functionality:
- Layer Management: Add/remove feature layers with custom names
- Field Selection: Choose specific fields to display from each service
- Service Integration: Automatic field loading from Feature Service URLs
- Display Options: Configure field aliases and grouping
Popup Display Settings
Customization options for information popups:
- Layout: Popup width and maximum height settings
- Content Organization: Show/hide layer names, group by layer option
- Field Display: Use field aliases or raw field names
- Styling: Responsive design with scrolling for large content
Measurement Settings
- Default Units: Select from Feet, Yards, Miles, Meters, or Kilometers
- Unit Display: Choose between single unit display or dual unit display with conversions
External Service URLs
- Pictometry Integration: Configure Pictometry service URL with coordinate parameters
- Geocoding Services: Set reverse geocoding service endpoints
Widget Placement
The widget does not display interface components and operates in the background. Recommended configuration:
- Set widget size to 0×0 pixels
- Place in unused corner of the layout
- Use "Send to back" option in layout settings
- Keep widget visible and active
- Recommended for desktop only, not for tablet/phone viewers
Technical Notes
- Unit dropdown options are filtered to show only the specified available units
- Invalid unit selections are blocked and revert to default units
- Console logging is limited to warnings and errors
- Widget includes cleanup procedures for memory management
- Graphics persist during browser session but are cleared on page refresh
- Coordinate projections support multiple spatial reference systems
- Field metadata is automatically loaded from configured Feature Services
Changelog
9/10/26:
Added a Help button at the top of the right-click menu that opens a short searchable guide, and fixed the menu running off the page when you right click near the bottom or right edge of the map. Colors and icons now follow your app's theme; download the attached zip or grab it from GitHub.
7/23/26: Experience Builder 1.21 compatibility (v1.0.2)
EB Developer Edition 1.21 (JS API 5.x) broke parts of the widget UI. All resolved below. The widget remains compatible with 1.20.
- Fixed the measurement panel layout in 1.21: the label and value ran together on one line ("Distance378.15 ft") and the panel lost its padding and was cut off. The panel is now styled independently of Esri's internal class names, so it renders correctly on both versions and will survive future Esri DOM changes.
- Fixed What's Here popup styling in 1.21: list rows, the Back and Zoom to buttons, and links rendered unstyled because the popup now places content inside a shadow root that page-level stylesheets cannot reach. Styles are now applied directly to the popup content. The resizable popup also works across the 1.21 shadow DOM boundary.
- Internal modernization for JS API 5.x: module loading migrated from the global AMD require to the Experience Builder module loader, property watching migrated to reactiveUtils, and length/area calculations fall back to the new geometry operators automatically if Esri removes geometryEngine in a future release.
- Developer experience: added a widget-level tsconfig.json and suppressed TypeScript false positives that appeared in Visual Studio and VS Code after 1.21 relocated several type packages. Editing only, no runtime impact.
7/17/26: Bugfix: Fixed a regression introduced with the mobile long-press feature that made popup text un-selectable and un-copyable in every Experience Builder app containing this widget. The iOS long-press touch-callout suppression was being applied to the entire MapView container, which also holds the popup DOM; because user-select is inherited in the browser, popups inherited the suppression. The suppression is now scoped to the map canvas surface only, so long-press behavior is unchanged and popup text is selectable and copyable again. Existing live sessions are cleaned up on upgrade without needing a map remount.
6/03/26: Enhancements (1.20 version only)
- Add support to launch and open Mailing Labels or Property Report when they are nested in accordion widget (Thank you @KeyHunter for idea and testing)
- Standardized package structure: added package.json, README.md, LICENSE (Apache 2.0), .gitignore, and .npmignore so dependencies install automatically with the standard `npm install` in the client folder. No per-dependency install commands needed.
5/21/26: Enhancements (1.20 version only)
5/12/26: 強化機能（1.20バージョンのみ）
- 設定：XMLのインポート/エクスポートにより、設定構成をバックアップまたはアプリ間で転送可能。
- 設定/ウィジェット：「What's here?」機能を強化し、レイヤーをさらに掘り下げられるようにしました（ビデオ参照）。Webmapのデフォルト設定をサポートし、設定構成にArcadeを埋め込むことも可能。
5/7/26: 1.20バージョンでGoogle Street Viewが動作しないバグを修正。
3/26/26: 1.20の問題を解決。バージョン1.19と1.20がダウンロード可能です。問題はこのブログ投稿で報告してください。
3/25/26 - 破壊的変更はありませんが、DE 1.20でいくつかのバグが発生しており調査中です。
2/17/2026:
2/10/2026:
- 1.18バージョンを削除し、1.19バージョンのみ維持
- ピックリストから不要な測定単位（インチ、センチメートル）を削除
- 線のEsriデフォルト測定合計を削除（重複が発生したため）
- サイドバー展開時に隠れないようコンテキストメニューの配置を改善
12/10/2025（1.19バージョンのみ）：
12/03/2025:
- 設定パネルでコピー座標機能にWeb Mercatorだけでなく任意の座標系を許可する機能を追加。
- 1.19で新機能追加、1.18では未テスト。元の記事は新機能なしの1.18版と新機能ありの1.19版。1.18でも互換性あるかもしれませんが未検証。
07/23/2025:
- 7/23/25リリースのDeveloper Edition 1.18でウィジェットをテストし、正常に動作確認済み。
06/20/2025:
- 7種類の形状オプション（円、四角、十字、×印、ダイヤモンド、三角、ピン）によるマーカースタイリング強化を追加
- マーカーの回転、不透明度、X/Yオフセット位置調整コントロールを追加
- カスタムフォントコントロール、アウトライン、背景オプション付きテキストグラフィックス機能を追加
- WKID入力によるカスタム座標系サポートを追加
- 座標形式オプション（10進度数 vs 度分秒）を追加
- 座標マーカーとは別のシンプルなマーカープロット機能を追加
- 自動フィールド読み込み付きフィーチャレイヤー用包括的フィールド選択機能を追加
- ポップアップ表示カスタマイズオプション（幅、高さ、グループ化、フィールド別名）を追加
- すべてクリアオプションでリアルタイムグラフィックスカウント機能を追加
- 設定画面でマーカープレビュー機能を追加
- 座標ラベルの位置調整と書式設定強化を追加
- 座標マーカーとシンプルマーカー用に別々のスタイリングコントロールを追加
06/13/2025:
- 右クリック時にカスタム右クリックウィンドウに加えブラウザデフォルトウィンドウが表示されるバグ修正
- 右クリックオプションにPictometryを追加
- What's Here? 機能にクエリ可能なフィーチャレイヤーを追加
概要
Right Clickウィジェットはコンテキストメニューによる設定可能な地図ベースアクションを提供します。ズーム、単位制御付き測定、座標取得、多彩なスタイルオプション付きマーカー・テキスト配置、フィーチャレイヤー統合による逆ジオコーディングなどに対応。Developer Editionで設定可能で接続された地図ウィジェットに適用されます。
バグや強化へのフィードバックはこのブログ投稿のコメント欄から送信できます。
