Einführung
https://github.com/brianmcleer/rightclick-widget
Das Rechtsklick-Widget fügt ArcGIS Experience Builder kontextbezogene Kartenwerkzeuge hinzu. Wenn ein Benutzer mit der rechten Maustaste auf die Karte klickt, erscheint ein Menü mit einer Reihe konfigurierbarer Aktionen. Dies ermöglicht den Zugriff auf Funktionen wie Zoom, Messung, Koordinatenkopie, Markierung, Textplatzierung und Reverse-Geocoding.
Interaktion des Endbenutzers
Nach der Bereitstellung können Benutzer überall auf der Karte mit der rechten Maustaste klicken, um ein Kontextmenü zu öffnen. Je nach Konfiguration sind folgende Aktionen verfügbar:
Navigationsaktionen:
- Reinzoomen / Rauszoomen: Passt den Zoomlevel an der Klickposition an
- Hier zentrieren: Verschiebt die Karte, um den angeklickten Punkt zu zentrieren
Koordinatenaktionen:
- Koordinaten kopieren: Kopiert den Standort in das Clipboard unter Verwendung des konfigurierten Koordinatensystems
- Koordinaten markieren: Platziert nummerierte Koordinatenmarker mit konfigurierbarem Stil und Koordinatenbeschriftungen
- Marker platzieren: Platziert einfache Marker mit anpassbarem Aussehen
Grafikaktionen:
- Text hinzufügen: Platziert benutzerdefinierte Textgrafiken auf der Karte mit konfigurierbaren Schriftarteigenschaften
- Alle Grafiken löschen: Entfernt alle platzierten Marker und Texte (zeigt Anzahl an, wenn Grafiken vorhanden sind)
Externe Dienste:
- In Google Street View öffnen: Öffnet den Standort in Google Street View unter Verwendung projizierter Koordinaten
- In Pictometry öffnen: Öffnet den Standort im Pictometry-Luftbildbetrachter unter Verwendung projizierter Koordinaten
Messwerkzeuge:
Informationsdienste:
Das Kontextmenü passt sich basierend auf Administrator-Einstellungen an. Werkzeuge schließen sich automatisch nach Nutzung oder bei Karteninteraktion.
Messwerkzeuge
Die Messfunktionalität umfasst folgende Spezifikationen:
Verfügbare Einheiten
- Entfernungsmaße: Fuß, Yard, Meilen, Meter, Kilometer
- Flächenmaße: Quadratfuß, Quadratyard, Quadratmeilen, Quadratmeter, Quadratkilometer, Acres
Anzeigeoptionen für Einheiten
- Nur eine Einheit anzeigen: Zeigt Messungen in der ausgewählten Standard-Einheit an
- Beide Einheiten anzeigen: Zeigt Messungen sowohl in der Haupteinheit als auch deren umgerechneten Äquivalent (z.B. "150,00 Fuß (45,72 Meter)") an
Interface-Elemente
- Entfernungsmesswerkzeug enthält eine Schließen-Schaltfläche
- Flächenmesswerkzeug enthält eine Schließen-Schaltfläche
- Standardmäßige "Neue Messung"-Schaltflächen werden entfernt
Koordinaten- und Markerplatzierung
Das Widget bietet zwei Arten der Markerplatzierung:
Koordinatenmarker:
- Nummeriert fortlaufend beginnend bei 1
- Zeigt konfigurierbare Koordinateninformationen in Popups an
- Unterstützt mehrere Koordinatensysteme (kartenintern, WGS84, benutzerdefinierte WKID)
- Optionale Koordinatenbeschriftungen auf der Karte angezeigt
- Konfigurierbare Marker-Stile, Farben, Umrisse und Positionierung
- Unterstützt Dezimalgrad- oder Grad/Minuten/Sekunden-Format für Breiten-/Längengrad
Einfache Marker:
- Grundlegende Punktmarker ohne Nummerierung
- Vollständig anpassbares Aussehen einschließlich Stil, Größe, Farbe, Umriss, Rotation und Versatzwerte
- Unterstützt Transparenzeinstellungen
Textgrafiken:
- Benutzerdefinierte Textplatzierung an angeklickten Positionen
- Konfigurierbare Schriftfamilie, Größe, Gewicht und Farbe
- Optionale Textumrisse (Halo) und Hintergründe
- Bleibt während der Browsersitzung erhalten
Entwicklerkonfiguration
Kartenauswahl für Widget
- Verbindet das Rechtsklick-Widget mit Kartenwidgets in der Anwendung
- Aktiviert Rechtsklick-Funktionalität auf ausgewählten Karten
Aktivierte Aktionen
Jede Aktion kann einzeln ein- oder ausgeschaltet werden:
- Reinzoomen
- Rauszoomen
- Hier zentrieren
- Koordinaten kopieren
- Koordinaten markieren
- Marker platzieren
- Text hinzufügen
- In Google Street View öffnen
- In Pictometry öffnen
- Entfernung messen
- Fläche messen
- 'Was ist hier?'
Coordinate System Settings
The format for copied coordinates can be configured:
- Use the current map's coordinate system
- Use WGS84 (latitude/longitude)
Plot Coordinates Settings
Comprehensive marker configuration options:
- Coordinate System: Map native, WGS84, or custom 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)
- Open Mailing LabelsWidget mit Rechtsklick-Option und Pufferanwendung vor dem Senden.
5/12/26: Verbesserungen (nur Version 1.20)
- Einstellungen: Import/Export von XML, damit Konfigurationen gesichert oder zwischen Anwendungen übertragen werden können.
- Einstellungen/Widget: Verbesserte "Was ist hier?"-Funktionen zum tieferen Einblick in Layer (siehe Video). Unterstützt Standardeinstellungen aus Webmap oder kann Arcade in der Einstellungskonfiguration einbetten.
5/7/26: Fehlerbehebung bei Google Street View, das in Version 1.20 nicht funktionierte.
3/26/26: Problem für Version 1.20 behoben. Version 1.19 und 1.20 zum Download verfügbar. Bitte melden Sie Probleme in diesem Blogbeitrag.
3/25/26 - Keine kritischen Änderungen, aber DE 1.20 verursacht einige Fehler, die ich untersuchen muss
17.02.2026:
10.02.2026:
- Version 1.18 entfernt, nur Version 1.19 wird weitergeführt
- Unnötige Maßeinheiten aus der Auswahlliste entfernt (Zoll, Zentimeter)
- Standardmäßige Esri-Gesamtmessung für Linien entfernt, da sie Duplikate verursachte
- Verbesserte Platzierung des Kontextmenüs, damit es nicht verborgen wird, wenn eine Seitenleiste erweitert ist
10.12.2025 (nur für Version 1.19):
Update der Theme-Typografie – Alle Widget-Texte verwenden jetzt die Theme-Typografie von Experience Builder für einheitliches Styling.
Barrierefreiheitsverbesserungen – Mehrere WCAG-konforme Updates in Widgets für bessere Bedienbarkeit und Zugänglichkeit hinzugefügt.
03.12.2025:
- Funktion hinzugefügt, die jede Koordinatensystem für die Funktion "Koordinaten kopieren" erlaubt, nicht nur Web Mercator im Einstellungsfenster.
- Neue Funktion in 1.19 hinzugefügt, in 1.18 nicht getestet. Ursprünglicher Artikel mit Version 1.18 ohne neue Funktion und Version 1.19 mit neuer Funktion. Möglicherweise abwärtskompatibel in 1.18, aber nicht getestet.
23.07.2025:
- Widget auf Developer Edition 1.18 getestet, die am 23.07.25 veröffentlicht wurde; Widget funktioniert normal.
20.06.2025:
- Erweiterte Marker-Stiloptionen mit 7 verschiedenen Formen hinzufügen (Kreis, Quadrat, Kreuz, x, Raute, Dreieck, Pin)
- Steuerungen für Marker-Rotation, Deckkraft und X/Y-Versatzpositionierung hinzufügen
- Textgrafik-Funktionalität mit benutzerdefinierten Schriftarten, Umrissen und Hintergrundoptionen hinzufügen
- Unterstützung für benutzerdefinierte Koordinatensysteme über WKID-Eingabe hinzufügen
- Optionen für Koordinatenformate hinzufügen (Dezimalgrad vs Grad/Minuten/Sekunden)
- Einfache Markierungsplatzierung getrennt von Koordinatenmarkierungen hinzufügen
- Umfassende Feldauswahl für Feature-Layer mit automatischem Laden der Felder hinzufügen
- Anpassungsoptionen für Popup-Anzeige hinzufügen (Breite, Höhe, Gruppierung, Feld-Aliase)
- Echtzeit-Grafikzählung in der Option "Alle löschen" hinzufügen
- Marker-Vorschaufunktion im Einstellungsinterface hinzufügen
- Verbesserte Positionierung und Formatierung von Koordinatenbeschriftungen hinzufügen
- Getrennte Stilsteuerungen für Koordinatenmarker vs einfache Marker hinzufügen
13.06.2025:
- Fehler beheben, bei dem das Standard-Browserfenster manchmal zusätzlich zum benutzerdefinierten Rechtsklick-Fenster erscheint
- Pictometry als Rechtsklick-Option hinzufügen
- Feature-Layer zur "Was ist hier?"-Funktion zum Abfragen hinzufügen
Zusammenfassung
Das Right Click Widget ermöglicht konfigurierbare kartenbasierte Aktionen über ein Kontextmenü. Es unterstützt Zoomen, Messungen mit gefilterter Einheitenkontrolle, Koordinatenabruf, Platzierung von Markern und Text mit umfangreichen Stiloptionen sowie Reverse Geocoding mit Integration von Feature-Layern. Die Konfiguration erfolgt über Developer Edition und gilt für verbundene Karten-Widgets.
Feedback zu Fehlern und Verbesserungen kann im Kommentarbereich dieses Blogbeitrags eingereicht werden.
