Inleiding
https://github.com/brianmcleer/rightclick-widget
De Rechtermuisknopwidget 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. Zo krijgen gebruikers toegang tot functies zoals zoomen, meten, coördinaten kopiëren, markeringen plaatsen, tekst toevoegen en omgekeerd geocoderen.
Interactie voor eindgebruikers
Na implementatie kunnen gebruikers ergens op de kaart met de rechtermuisknop klikken om een contextmenu te openen. Afhankelijk van de configuratie zijn de volgende acties beschikbaar:
Navigatieacties:
- Inzoomen / Uitzoomen: past het zoomniveau aan op de locatie waar is geklikt
- Hier centreren: verschuift de kaart zodat het aangeklikte punt in het midden staat
Coördinaatacties:
- Coördinaten kopiëren: kopieert de locatie naar het klembord met het geconfigureerde coördinatenstelsel
- Coördinaten plotten: plaatst genummerde coördinatiemarkeringen met configureerbare opmaak en coördinaatlabels
- Markering plaatsen: plaatst eenvoudige markeringen met een aanpasbaar uiterlijk
Grafische acties:
- Tekst toevoegen: plaatst aangepaste tekst op de kaart met configureerbare lettertype-eigenschappen
- Alle grafische elementen wissen: verwijdert alle geplaatste markeringen en tekst (toont het aantal als er grafische elementen aanwezig zijn)
Externe services:
- Openen in Google Street View: opent de locatie in Google Street View met behulp van geprojecteerde coördinaten
- Openen in Pictometry: opent de locatie in de luchtbeeldenviewer van Pictometry met behulp van geprojecteerde coördinaten
Meetinstrumenten:
Informatieservices:
Het contextmenu wordt aangepast op basis van de instellingen van de beheerder. Tools worden na gebruik of bij interactie met de kaart automatisch gesloten.
Meetinstrumenten
De meetfunctionaliteit omvat de volgende specificaties:
Beschikbare eenheden
- Afstandsmetingen: voet, yard, mijl, meter, kilometer
- Oppervlaktemetingen: vierkante voet, vierkante yard, vierkante mijl, vierkante meter, vierkante kilometer, acre
Opties voor eenheidsweergave
- Alleen één eenheid: toont metingen in de geselecteerde standaardeenheid
- Beide eenheden tonen: toont metingen in zowel de primaire eenheid als het omgerekende equivalent (bijv. "150,00 voet (45,72 meter)")
Interface-elementen
- Het afstandsmeetinstrument bevat een knop Sluiten
- Het oppervlaktemeetinstrument bevat een knop Sluiten
- De standaardknoppen voor "Nieuwe meting" zijn verwijderd
Coördinaten en markeringen plotten
De widget biedt twee typen markeringen:
Coördinatiemarkeringen:
- Opeenvolgend genummerd vanaf 1
- Toon configureerbare coördinateninformatie in pop-ups
- Ondersteuning voor meerdere coördinatenstelsels (eigen stelsel van de kaart, WGS84, aangepaste WKID)
- Optionele coördinaatlabels op de kaart
- Configureerbare markeringen, kleuren, contouren en positionering
- Ondersteuning voor decimale graden of graden/minuten/seconden voor lengte- en breedtegraad
Eenvoudige markeringen:
- Eenvoudige puntmarkeringen zonder nummering
- Volledig aanpasbaar uiterlijk, waaronder stijl, grootte, kleur, contour, rotatie en verschuivingen
- Ondersteuning voor transparantie-instellingen
Tekstelementen:
- Aangepaste tekst plaatsen op aangeklikte locaties
- Configureerbare lettertypefamilie, grootte, dikte en kleur
- Optionele tekstcontouren (halo) en achtergronden
- Blijft behouden tijdens de browsersessie
Configuratie voor ontwikkelaars
Kaartwidget selecteren
- Verbindt de Rechtermuisknopwidget met kaartwidgets in de applicatie
- Schakelt functionaliteit voor klikken met de rechtermuisknop 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
- Wat is hier?
Instellingen voor coördinatenstelsel
De indeling van gekopieerde coördinaten kan worden geconfigureerd:
- Het coördinatenstelsel van de huidige kaart gebruiken
- WGS84 gebruiken (breedtegraad/lengtegraad)
Instellingen voor coördinaten plotten
Uitgebreide opties voor markeringen:
- Coördinatenstelsel: Eigen stelsel van de kaart, WGS84 of aangepaste WKID
- Opmaakopties: Decimale graden of graden/minuten/seconden voor lengte- en breedtegraad
- Markeerstijl: Cirkel, vierkant, kruis, X, ruit, driehoek, punaise
- Visuele eigenschappen: Grootte, kleur, contourkleur/-breedte, dekking, draaihoek
- Positionering: X-/Y-verschuiving voor nauwkeurige plaatsing
- Tekstinstellingen: Tekstgrootte en -kleur van nummers
- Labels: Optionele coördinaatlabels met aanpasbare verschuiving, grootte en kleur
- Inhoud van pop-up: Weergave van coördinaten in pop-ups van markeringen in- of uitschakelen
Instellingen voor eenvoudige markeringen
Onafhankelijke opmaakopties voor eenvoudige markeringen:
- Stijlopties: Cirkel, vierkant, kruis, X, ruit, driehoek, punaise
- Uiterlijk: Grootte, kleur, contoureigenschappen, dekking
- Positionering: Draaihoek en X-/Y-verschuivingen
Tekstinstellingen
Lettertype- en weergave-instellingen voor tekstelementen:
- Typografie: Lettertypefamilie, grootte, dikte (normaal/vet)
- Kleuren: Tekstkleur en contourkleur (halo)
- Effecten: Contourgrootte, optionele achtergrondkleur
- Achtergrond: Opties voor een transparante of gekleurde achtergrond
Configuratie voor omgekeerde geocodering
Configuratie van objectlagen
Geavanceerde instellingen voor de functie "Wat is hier?":
- Laagbeheer: Objectlagen toevoegen/verwijderen met aangepaste namen
- Veldselectie: Kies welke velden van elke service worden weergegeven
- Service-integratie: Velden automatisch laden vanuit URL's van Feature Services
- Weergaveopties: Veldaliassen en groepering configureren
Instellingen voor pop-upweergave
Aanpassingsopties voor informatiepop-ups:
- Indeling: Instellingen voor de breedte en maximale hoogte van pop-ups
- Inhoud ordenen: Laagnamen tonen/verbergen, optie om op laag te groeperen
- Veldweergave: Veldaliassen of onbewerkte veldnamen gebruiken
- Opmaak: Responsief ontwerp met schuiven voor grote hoeveelheden inhoud
Meetinstellingen
- Standaardeenheden: kies uit voet, yard, mijl, meter of kilometer
- Eenheidsweergave: kies tussen één eenheid of twee eenheden met omrekeningen
URL's van externe services
- Pictometry-integratie: Configureer de URL van de Pictometry-service met coördinaatparameters
- Geocoderingsservices: Stel eindpunten voor de omgekeerde geocoderingsservice in
Widgetplaatsing
De widget toont geen interface-elementen en werkt op de achtergrond. Aanbevolen configuratie:
- Stel de widgetgrootte in op 0×0 pixels
- Plaats de widget in een ongebruikte hoek van de lay-out
- Gebruik de optie "Naar achteren plaatsen" in de lay-outinstellingen
- Houd de widget zichtbaar en actief
- Aanbevolen voor alleen desktopgebruik, niet voor tablets of telefoons
Technische opmerkingen
- De opties in de vervolgkeuzelijst voor eenheden worden gefilterd zodat alleen de opgegeven beschikbare eenheden worden getoond
- Ongeldige eenheidskeuzes worden geblokkeerd en teruggezet naar de standaardeenheden
- Logboekregistratie in de console is beperkt tot waarschuwingen en fouten
- De widget bevat opruimprocedures voor geheugenbeheer
- Grafische elementen blijven behouden tijdens de browsersessie, maar worden verwijderd wanneer de pagina wordt vernieuwd
- Coördinatenprojecties ondersteunen meerdere ruimtelijke referentiesystemen
- Veldmetadata wordt automatisch geladen vanuit geconfigureerde Feature Services
Wijzigingslog
10/12/2026: De widget volgt nu de taal van de app (?locale=, de taalschakelaar, het ArcGIS-profiel of de browser) in 39 talen; de hulpgids is inbegrepen.
Heb je zelf aangepaste widgets? Dezelfde gratis tool, exb-i18n-kit, kan ze met één opdracht vertalen: localize. Zo vult de tool elke frase in:
- Eerst Esri. De tool leest de vertalingen die al in je Experience Builder-installatie aanwezig zijn, zodat een frase als “Zoomen naar” dezelfde formulering gebruikt als Esri's eigen widgets.
- Standaardtermen. Eenheidsnamen zoals voet en acre zijn afkomstig uit Unicode CLDR, dezelfde gegevens die browsers gebruiken.
- Gedeeld vertaalgeheugen. Alles wat daarna nog overblijft, komt uit een gedeeld woordenboek dat is opgebouwd met LibreTranslate, een openbronvertaler, en de Opus-MT-modellen van Helsinki-NLP voor het Bosnisch, Kroatisch en Servisch. De tool draait gratis op GitHub, dus je hebt geen API-sleutel of account nodig.
- Koppeling. De tool vindt ook Engelse tekst die hardgecodeerd staat buiten het vertaalbestand van de widget, zoals een standaardinstelling of hulpgids, en koppelt die zodat deze ook wordt vertaald.
Handmatige aanpassingen hebben altijd voorrang op de machine en worden nooit overschreven. Sommige vertalingen zijn automatisch gemaakt. Reageer hier met een betere formulering als je een vertaling tegenkomt die niet klopt.
9/10/26:
Bovenaan het rechtermuisknopmenu is een Help-knop toegevoegd die een korte, doorzoekbare gids opent. Ook is opgelost dat het menu buiten de pagina viel als je met de rechtermuisknop onderaan of aan de rechterrand van de kaart klikte. Kleuren en pictogrammen volgen nu het thema van je app. Download het bijgevoegde zipbestand of haal het op via GitHub.
7/23/26: Compatibiliteit met Experience Builder 1.21 (v1.0.2)
Experience Builder Developer Edition 1.21 (JS API 5.x) veroorzaakte problemen met delen van de gebruikersinterface van de widget. Hieronder zijn die allemaal opgelost. De widget blijft compatibel met 1.20.
- De indeling van het meetvenster in 1.21 is hersteld: het label en de waarde stonden op één regel tegen elkaar aan ("Afstand378.15 ft") en het venster had geen binnenruimte meer en werd afgesneden. Het venster is nu opgemaakt zonder afhankelijkheid van interne klassennamen van Esri, zodat het in beide versies correct wordt weergegeven en ook blijft werken als Esri in de toekomst wijzigingen aanbrengt in de DOM.
- De opmaak van de pop-up Wat is hier? in 1.21 is hersteld: lijstregels, de knoppen Terug en Zoomen naar en links hadden geen opmaak, omdat de pop-up inhoud nu in een shadow root plaatst die niet toegankelijk is voor stylesheets op paginaniveau. De stijlen worden nu rechtstreeks op de pop-upinhoud toegepast. De pop-up kan ook worden vergroot of verkleind over de grens van de shadow DOM in 1.21 heen.
- Interne modernisering voor JS API 5.x: het laden van modules is overgezet van de globale AMD require naar de Experience Builder-modulelader, het volgen van eigenschappen is overgezet naar reactiveUtils en berekeningen van lengte en oppervlakte schakelen automatisch over op de nieuwe geometrieoperators als Esri geometryEngine in een toekomstige release verwijdert.
- Ontwikkelervaring: een tsconfig.json op widgetniveau toegevoegd en foutieve TypeScript-meldingen onderdrukt die in Visual Studio en VS Code verschenen nadat 1.21 verschillende typepakketten had verplaatst. Dit betreft alleen het bewerken; er is geen invloed op de uitvoering.
7/17/26: Bugfix: Er is een regressie verholpen die was geïntroduceerd met de functie voor lang indrukken op mobiele apparaten. Hierdoor kon pop-uptekst niet worden geselecteerd of gekopieerd in alle Experience Builder-apps met deze widget. Het uitschakelen van de iOS-aanraakoproep bij lang indrukken werd toegepast op de volledige MapView-container, waarin ook de DOM van de pop-up staat. Omdat user-select in de browser wordt overgeërfd, erfden pop-ups deze instelling. De uitschakeling geldt nu alleen voor het kaartcanvas, zodat het gedrag bij lang indrukken ongewijzigd blijft en pop-uptekst weer kan worden geselecteerd en gekopieerd. Bestaande actieve sessies worden na de upgrade opgeschoond zonder dat de kaart opnieuw hoeft te worden geladen.
3-6-26: Verbeteringen (alleen versie 1.20)
- Ondersteuning toegevoegd om Mailing Labels of Property Report te starten en te openen wanneer deze zijn genest in de accordeonwidget (bedankt @KeyHunter voor het idee en het testen)
- De pakketstructuur gestandaardiseerd: package.json, README.md, LICENSE (Apache 2.0), .gitignore en .npmignore toegevoegd, zodat afhankelijkheden automatisch worden geïnstalleerd met de standaardopdracht `npm install` in de clientmap. Installatieopdrachten per afhankelijkheid zijn niet nodig.
21-5-26: Verbeteringen (alleen versie 1.20)
- Openen Mailing Labels-widget met de optie voor rechtsklikken en een buffer toepassen voordat de gegevens worden verzonden.
12-5-26: Verbeteringen (alleen versie 1.20)
- Instellingen: XML importeren/exporteren, zodat configuraties van instellingen kunnen worden geback-upt of overgezet tussen applicaties.
- Instellingen/widget: De mogelijkheden van ‘Wat bevindt zich hier?’ uitgebreid, zodat u verder kunt doorklikken naar lagen (zie video). Ondersteunt standaardinstellingen vanuit de webmap of het insluiten van Arcade in de instellingenconfiguratie.
7-5-26: Bug verholpen waardoor Google Street View niet werkte in versie 1.20.
26-3-26: Probleem voor versie 1.20 opgelost. Versie 1.19 en 1.20 zijn beschikbaar om te downloaden. Meld eventuele problemen in de reacties op dit blogbericht.
25-3-26 - Geen ingrijpende wijzigingen, maar DE 1.20 veroorzaakt enkele bugs die ik moet onderzoeken
17-2-2026:
- Optie toegevoegd om met rechts te klikken en te starten: Property Report-widget.
10-2-2026:
- Versie 1.18 verwijderd; alleen versie 1.19 wordt nog onderhouden
- Overbodige meeteenheden uit de keuzelijst verwijderd (inch, centimeter)
- De standaard totale Esri-meting voor lijnen verwijderd, omdat deze voor duplicaten zorgde
- De plaatsing van het contextmenu verbeterd, zodat het niet wordt verborgen wanneer een zijbalk is uitgevouwen
10-12-2025 (alleen voor versie 1.19):
Typografie van thema bijgewerkt – Alle widgetteksten gebruiken nu de thematypografie van Experience Builder voor een consistente vormgeving.
Toegankelijkheidsverbeteringen – Meerdere WCAG-conforme verbeteringen toegevoegd aan widgets voor betere bruikbaarheid en toegankelijkheid.
3-12-2025:
- Een functie toegevoegd waarmee u in het instellingenvenster voor de functie Coördinaten kopiëren elk coördinatensysteem kunt gebruiken, niet alleen Web Mercator.
- Nieuwe functie toegevoegd in versie 1.19; niet getest in versie 1.18. Het oorspronkelijke artikel beschrijft versie 1.18 zonder de nieuwe functie en versie 1.19 met de nieuwe functie. Mogelijk is deze ook compatibel met versie 1.18, maar dat heb ik niet getest.
23-7-2025:
- De widget getest in Developer Edition 1.18, uitgebracht op 23-7-25; de widget werkt zoals gebruikelijk.
20-6-2025:
- Uitgebreidere markeropmaak toegevoegd met 7 verschillende vormopties (cirkel, vierkant, kruis, x, ruit, driehoek, punaise)
- Besturingselementen toegevoegd voor markerrotatie, dekking en X/Y-offsetpositionering
- Functionaliteit voor tekstafbeeldingen toegevoegd, met aangepaste lettertype-instellingen, contouren en achtergrondopties
- Ondersteuning toegevoegd voor aangepaste coördinatensystemen via WKID-invoer
- Opties voor coördinatenindeling toegevoegd (decimale graden of graden/minuten/seconden)
- Eenvoudige markerplaatsing toegevoegd, los van coördinatenmarkers
- Uitgebreide veldselectie toegevoegd voor objectlagen, met automatisch laden van velden
- Opties toegevoegd om de weergave van pop-ups aan te passen (breedte, hoogte, groepering, veldaliassen)
- Realtime tellen van graphics toegevoegd aan de optie Alles wissen
- Voorbeeld van markers toegevoegd aan de instellingeninterface
- Plaatsing en opmaak van coördinatenlabels verbeterd
- Afzonderlijke opmaakinstellingen toegevoegd voor coördinatenmarkers en eenvoudige markers
13-6-2025:
- Een bug verholpen waarbij soms naast het aangepaste venster bij rechtsklikken ook het standaardvenster van de browser verscheen
- Pictometry toegevoegd als optie bij rechtsklikken
- Objectlagen toegevoegd aan de functie ‘Wat bevindt zich hier?’ om deze te kunnen doorzoeken
Samenvatting
Met de widget Rechtsklikken kunt u via een contextmenu instelbare kaartacties uitvoeren. De widget ondersteunt inzoomen, metingen met instelbare eenheden, coördinaten ophalen, markers en tekst plaatsen met uitgebreide opmaakopties, en omgekeerd geocoderen met integratie van objectlagen. De configuratie is beschikbaar via Developer Edition en is van toepassing op gekoppelde kaartwidgets.
Feedback over bugs en verbeteringen kunt u indienen in de reacties op dit blogbericht.
