Introductie
https://github.com/brianmcleer/rightclick-widget
De Right Click-widget voegt contextuele kaarttools toe aan ArcGIS Experience Builder. Wanneer een gebruiker met de rechtermuisknop op de kaart klikt, verschijnt er een menu met een reeks configureerbare acties. Dit biedt toegang tot functies zoals in- en uitzoomen, meten, coördinaten kopiëren, markeringen plaatsen, tekst toevoegen en omgekeerd geocoderen.
Interactie met eindgebruiker
Eenmaal geïmplementeerd kunnen gebruikers overal op de kaart met de rechtermuisknop klikken om een contextmenu te openen. Afhankelijk van de configuratie kunnen de volgende acties beschikbaar zijn:
Navigatie-acties:
- In-/uitzoomen: Past het zoomniveau aan op de kliklocatie
- Hier centreren: Verplaatst de kaart zodat het geklikte punt in het midden staat
Coördinatenacties:
- Coördinaten kopiëren: Kopieert de locatie naar het klembord met het geconfigureerde coördinatensysteem
- Coördinaten plotten: Plaatst genummerde coördinatenmarkeringen met configureerbare stijl en coördinatelabels
- Markering plaatsen: Plaatst eenvoudige markeringen met aanpasbare uitstraling
Grafische acties:
- Tekst toevoegen: Plaatst aangepaste tekstgrafieken op de kaart met configureerbare lettertype-eigenschappen
- Alle grafische elementen wissen: Verwijdert alle geplaatste markeringen en tekst (toont aantal als er grafische elementen aanwezig zijn)
Externe diensten:
- Openen in Google Street View: Opent de locatie in Google Street View met geprojecteerde coördinaten
- Openen in Pictometry: Opent de locatie in Pictometry luchtfoto-viewer met geprojecteerde coördinaten
Meetgereedschappen:
Informatiediensten:
Het contextmenu past zich aan op basis van beheerdersinstellingen. Gereedschappen sluiten automatisch na gebruik of bij interactie met de kaart.
Meetgereedschappen
De meetfunctionaliteit omvat de volgende specificaties:
Beschikbare eenheden
- Afstandmetingen: Voeten, Yards, Mijlen, Meters, Kilometers
- Oppervlaktemetingen: Vierkante voeten, vierkante yards, vierkante mijlen, vierkante meters, vierkante kilometers, acres
Weergaveopties voor eenheden
- Alleen enkele eenheid: Toont metingen in de geselecteerde standaard eenheid
- Toon beide eenheden: Toont metingen in zowel de primaire eenheid als het geconverteerde equivalent (bijv. "150,00 feet (45,72 meters)")
Interface-elementen
- Afstandmeetgereedschap bevat een sluitknop
- Oppervlaktetmeetgereedschap bevat een sluitknop
- Standaardknoppen "Nieuwe meting" zijn verwijderd
Coördinaten- en markeringplotting
De widget biedt twee soorten markeringplaatsing:
Coördinatenmarkeringen:
- Genummerd oplopend vanaf 1
- Toont configureerbare coördinateninformatie in popups
- Ondersteunt meerdere coördinatensystemen (kaart-native, WGS84, aangepaste WKID)
- Optionele coördinatelabels weergegeven op kaart
- Configureerbare marker-stijlen, kleuren, omtrekken en positionering
- Ondersteunt decimale graden of graden/minuten/seconden formaat voor lat/lon
Eenvoudige markeringen:
- Basis puntmarkeringen zonder nummering
- Volledig aanpasbare uitstraling inclusief stijl, grootte, kleur, omtrek, rotatie en offsets
- Ondersteunt transparantie-instellingen
Tekstgrafieken:
- Aangepaste tekstplaatsing op geklikte locaties
- Configureerbaar lettertypefamilie, grootte, gewicht en kleur
- Optionele tekstomtrekken (halo) en achtergronden
- Blijvend tijdens browsersessie
Ontwikkelaarsconfiguratie
Kaartwidget-selectie
- Verbindt de Right Click-widget met kaartwidgets in de applicatie
- Schakelt rechtermuisklik-functionaliteit in op geselecteerde kaarten
Ingeschakelde acties
Elke actie kan afzonderlijk worden in- of uitgeschakeld:
- Inzoomen
- Uitzoomen
- Hier centreren
- Coördinaten kopiëren
- Coördinaten plotten
- Markering plaatsen
- Tekst toevoegen
- Openen in Google Street View
- Openen in Pictometry
- Afstand meten
- Oppervlakte meten
- What's Here?
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 met rechtermuisklikoptie en pas een buffer toe voordat het wordt verzonden.
5/12/26: Verbeteringen (alleen versie 1.20)
- Instellingen: Importeer/Exporteer XML zodat configuraties kunnen worden geback-upt of tussen applicaties kunnen worden overgedragen.
- Instellingen/Widget: Verbeterde "Wat is hier?" mogelijkheden om dieper in lagen te graven (zie video). Ondersteunt standaardinstellingen van webmap of kan Arcade insluiten in de instellingenconfiguratie.
5/7/26: Bug opgelost waarbij Google Street View niet werkte in versie 1.20.
3/26/26: Probleem opgelost voor 1.20. Versies 1.19 en 1.20 beschikbaar voor download. Meld eventuele problemen in deze blogpost.
3/25/26 - Geen brekende wijzigingen, maar DE 1.20 veroorzaakt enkele bugs die ik moet onderzoeken
2/17/2026:
2/10/2026:
- Versie 1.18 verwijderd, alleen versie 1.19 wordt onderhouden
- Overbodige meeteenheden uit keuzelijst verwijderd (inches, centimeters)
- Standaard Esri meettotaal voor lijnen verwijderd omdat dit duplicatie veroorzaakte
- Verbeterde plaatsing van contextmenu om te voorkomen dat het verborgen raakt wanneer een zijbalk is uitgeklapt
12/10/2025 (alleen voor versie 1.19):
Thema Typografie Update – Alle widgettekst gebruikt nu de Thema Typografie van Experience Builder voor consistente styling.
Toegankelijkheidsverbeteringen – Meerdere WCAG-conforme updates toegevoegd aan widgets voor betere bruikbaarheid en toegankelijkheid.
12/03/2025:
- Functie toegevoegd om elk coördinatensysteem toe te staan voor de functie Coördinaten Kopiëren, niet alleen Web Mercator in het instellingenpaneel.
- Nieuwe functie toegevoegd in 1.19, niet getest in 1.18. Originele artikelversie 1.18 zonder nieuwe functie en 1.19 met nieuwe functie. Mogelijk achterwaarts compatibel in 1.18 maar ik heb het niet getest.
07/23/2025:
- Widget getest op Developer Edition 1.18 die op 23-07-25 werd uitgebracht en werkt normaal.
06/20/2025:
- Verbeterde marker-styling toegevoegd met 7 verschillende vormopties (cirkel, vierkant, kruis, x, diamant, driehoek, pin)
- Besturingselementen toegevoegd voor markerrotatie, doorzichtigheid en X/Y-offset positionering
- Tekstgrafiekfunctionaliteit toegevoegd met aangepaste lettertypebesturingen, contouren en achtergrondopties
- Ondersteuning toegevoegd voor aangepaste coördinatensystemen via WKID-invoer
- Coördinaatformaatopties toegevoegd (decimale graden versus graden/minuten/seconden)
- Eenvoudige markerplotting toegevoegd, los van coördinatemarkers
- Uitgebreide veldselectie toegevoegd voor feature-lagen met automatische veldlading
- Aanpassingsopties voor pop-upweergave toegevoegd (breedte, hoogte, groepering, veldaliassen)
- Realtime grafiektelling toegevoegd in optie alles wissen
- Markervoorbeeldfunctionaliteit toegevoegd in instellingeninterface
- Verbeterde positionering en opmaak van coördinatelabels toegevoegd
- Aparte stijlbesturingen toegevoegd voor coördinatemarkers versus eenvoudige markers
06/13/2025:
- Bug opgelost waarbij standaard browservenster soms verschijnt bij rechtermuisklik naast aangepast rechtermuisklikvenster
- Pictometry toegevoegd als optie bij rechtermuisklik
- Feature-lagen toegevoegd aan Wat is hier? functie om op te queryen
Samenvatting
De Right Click widget maakt configureerbare kaartgebaseerde acties mogelijk via een contextmenu. Het ondersteunt zoomen, metingen met gefilterde eenheidscontrole, coördinaten ophalen, markering en tekstplaatsing met uitgebreide stijlopties, en reverse geocoding met integratie van feature-lagen. Configuratie is beschikbaar via Developer Edition en geldt voor verbonden kaart-widgets.
Feedback over bugs en verbeteringen kan worden ingediend in de reactiesectie van deze blogpost.
