From 793dfffca77f02ea4daa244647b05412ecd9cb81 Mon Sep 17 00:00:00 2001 From: Maggie Moeller Date: Tue, 14 Apr 2026 15:42:19 -0400 Subject: [PATCH 1/5] Add dedicated sample pages for Compass, Locate, BasemapToggle, and ScaleBar widgets New pages: - /compass-widget: Map rotation controls with CompassWidget reset - /locate-widget: Geolocation with configurable zoom scale - /basemap-toggle-widget: Switchable basemap style pairs - /scale-bar-widget: Unit (Imperial/Metric/Dual) and style (Ruler/Line) toggles Also adds nav menu entries and fixes UniqueValueRenderers build error. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../Pages/BasemapToggleWidgetPage.razor | 52 +++++++++++++++ .../Pages/CompassWidgetPage.razor | 42 +++++++++++++ .../Pages/LocateWidgetPage.razor | 56 +++++++++++++++++ .../Pages/ScaleBarWidgetPage.razor | 63 +++++++++++++++++++ .../Pages/UniqueValueRenderers.razor.cs | 2 +- .../Shared/NavMenu.razor.cs | 4 ++ 6 files changed, 218 insertions(+), 1 deletion(-) create mode 100644 samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/BasemapToggleWidgetPage.razor create mode 100644 samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/CompassWidgetPage.razor create mode 100644 samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/LocateWidgetPage.razor create mode 100644 samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/ScaleBarWidgetPage.razor diff --git a/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/BasemapToggleWidgetPage.razor b/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/BasemapToggleWidgetPage.razor new file mode 100644 index 0000000..0e6912d --- /dev/null +++ b/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/BasemapToggleWidgetPage.razor @@ -0,0 +1,52 @@ +@page "/basemap-toggle-widget" + +Basemap Toggle Widget +

Basemap Toggle Widget

+ +
+ ArcGIS Sample + BasemapToggle API Reference +
+

+ The Basemap Toggle widget allows switching between two basemap styles with a single click. + Select a basemap pair below, then click the toggle button in the bottom-right corner of the map + to switch between the two styles. +

+ +
+ +
+ + + + + + + + + + +@code { + private int _pairIndex; + + private readonly (BasemapStyleName Primary, BasemapStyleName Secondary)[] _pairs = + [ + (BasemapStyleName.ArcgisImageryStandard, BasemapStyleName.ArcgisStreets), + (BasemapStyleName.ArcgisTopographic, BasemapStyleName.ArcgisDarkGray), + (BasemapStyleName.ArcgisNavigation, BasemapStyleName.ArcgisImagery), + (BasemapStyleName.OsmStandard, BasemapStyleName.ArcgisTerrain), + ]; + + private void OnPairChanged(ChangeEventArgs e) + { + _pairIndex = int.Parse(e.Value?.ToString() ?? "0"); + } +} diff --git a/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/CompassWidgetPage.razor b/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/CompassWidgetPage.razor new file mode 100644 index 0000000..460ab2e --- /dev/null +++ b/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/CompassWidgetPage.razor @@ -0,0 +1,42 @@ +@page "/compass-widget" + +Compass Widget +

Compass Widget

+ +
+ ArcGIS Sample + Compass API Reference +
+

+ The Compass widget indicates the map's current orientation relative to north. + Use the buttons below to rotate the map, then click the compass to reset to north. + The compass only appears when the map is rotated away from north. +

+ +
+ + + + + + + Current: @(_rotation)° +
+ + + + + + + + + + +@code { + private double _rotation = 45; + + private void SetRotation(double degrees) + { + _rotation = degrees; + } +} diff --git a/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/LocateWidgetPage.razor b/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/LocateWidgetPage.razor new file mode 100644 index 0000000..8401784 --- /dev/null +++ b/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/LocateWidgetPage.razor @@ -0,0 +1,56 @@ +@page "/locate-widget" + +Locate Widget +

Locate Widget

+ +
+ ArcGIS Sample + Locate API Reference +
+

+ The Locate widget uses the browser's Geolocation API to find and zoom to the user's current position. + Click the + + + + + + + button (top-left of the map) to fly to your location. + Change the zoom scale below, then click it again to see the difference in zoom level. +

+ +
+
+ +
+
+ + + + + + + + + + +@code { + private int _scale = 1500; + private int _widgetKey; + + private void OnScaleChanged(ChangeEventArgs e) + { + _scale = int.Parse(e.Value?.ToString() ?? "1500"); + _widgetKey++; + } +} diff --git a/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/ScaleBarWidgetPage.razor b/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/ScaleBarWidgetPage.razor new file mode 100644 index 0000000..1561592 --- /dev/null +++ b/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/ScaleBarWidgetPage.razor @@ -0,0 +1,63 @@ +@page "/scale-bar-widget" + +Scale Bar Widget +

Scale Bar Widget

+ +
+ ArcGIS Sample + ScaleBar API Reference +
+

+ The Scale Bar widget displays a bar or line indicating the map scale at the current zoom level. + Zoom in and out to see the scale bar update. Use the controls below to change the unit system + and visual style. +

+ +
+
+ +
+
+ +
+
+ + + + + + + + + + +@code { + private ScaleUnit _unit = ScaleUnit.Imperial; + private ScaleBarWidgetStyle _style = ScaleBarWidgetStyle.Ruler; + private int _widgetKey; + + private void OnUnitChanged(ChangeEventArgs e) + { + _unit = Enum.Parse(e.Value?.ToString() ?? "Imperial"); + _widgetKey++; + } + + private void OnStyleChanged(ChangeEventArgs e) + { + _style = Enum.Parse(e.Value?.ToString() ?? "Ruler"); + _widgetKey++; + } +} diff --git a/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/UniqueValueRenderers.razor.cs b/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/UniqueValueRenderers.razor.cs index a21a830..ebd0251 100644 --- a/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/UniqueValueRenderers.razor.cs +++ b/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/UniqueValueRenderers.razor.cs @@ -60,7 +60,7 @@ public partial class UniqueValueRenderers ["proposed"] = new SimpleLineSymbol(new MapColor(192, 192, 192), 1.5, SimpleLineSymbolStyle.Dot) }; private readonly UniqueValueRenderer _uniqueValueRenderer = new(uniqueValueInfos: roadTypes - .Select(r => new UniqueValueInfo(r.Key.ToUpperFirstChar().Replace("_", " "), r.Value, r.Key)) + .Select(r => new UniqueValueInfo(string.Concat(r.Key[0].ToString().ToUpper(), r.Key.AsSpan(1)).Replace("_", " "), r.Value, r.Key)) .ToArray(), field: "highway", defaultLabel: "Service", legendOptions: new UniqueValueRendererLegendOptions("Route Type")); diff --git a/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Shared/NavMenu.razor.cs b/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Shared/NavMenu.razor.cs index b9a85f5..6fdce5f 100644 --- a/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Shared/NavMenu.razor.cs +++ b/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Shared/NavMenu.razor.cs @@ -90,6 +90,10 @@ await InvokeAsync(async () => new("many-graphics", "Many Graphics", "oi-calculator"), new("scene", "Scene & Attributes", "oi-globe"), new("widgets", "Widgets", "oi-location"), + new("compass-widget", "Compass Widget", "oi-compass"), + new("locate-widget", "Locate Widget", "oi-target"), + new("basemap-toggle-widget", "Basemap Toggle", "oi-loop"), + new("scale-bar-widget", "Scale Bar Widget", "oi-resize-width"), new("basemaps", "Basemaps", "oi-map"), new("feature-layers", "Feature Layers", "oi-layers"), new("map-image-layers", "Map Image Layers", "oi-image"), From a90f44264268e63b1e29cb0c798731c205a3b23e Mon Sep 17 00:00:00 2001 From: Maggie Moeller Date: Tue, 14 Apr 2026 16:00:58 -0400 Subject: [PATCH 2/5] Bind select values to backing fields and add aria-hidden to inline SVG - Add value="@_pairIndex" to BasemapToggle select - Add value="@_unit" and value="@_style" to ScaleBar selects - Add aria-hidden="true" and focusable="false" to locate icon SVG Co-Authored-By: Claude Opus 4.6 (1M context) --- .../Pages/BasemapToggleWidgetPage.razor | 2 +- .../Pages/LocateWidgetPage.razor | 2 +- .../Pages/ScaleBarWidgetPage.razor | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/BasemapToggleWidgetPage.razor b/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/BasemapToggleWidgetPage.razor index 0e6912d..bbcecf3 100644 --- a/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/BasemapToggleWidgetPage.razor +++ b/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/BasemapToggleWidgetPage.razor @@ -15,7 +15,7 @@

The Locate widget uses the browser's Geolocation API to find and zoom to the user's current position. - Click the + Click the

+@* @key forces the MapView to remount when the basemap pair changes. The primary + swap inside is not propagated reactively today, + so a remount is the simplest way to demonstrate different pairs. *@ @@ -37,7 +41,7 @@ new("https://developers.arcgis.com/javascript/latest/sample-code/widgets-basemaptoggle/", "ArcGIS Maps SDK for JavaScript"), new("https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-BasemapToggle.html", "Basemap Toggle API Reference") ]; - + private int _pairIndex; private readonly (BasemapStyleName Primary, BasemapStyleName Secondary)[] _pairs = @@ -47,9 +51,4 @@ (BasemapStyleName.ArcgisNavigation, BasemapStyleName.ArcgisImagery), (BasemapStyleName.OsmStandard, BasemapStyleName.ArcgisTerrain), ]; - - private void OnPairChanged(ChangeEventArgs e) - { - _pairIndex = int.Parse(e.Value?.ToString() ?? "0"); - } } diff --git a/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/CompassWidgetPage.razor b/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/CompassWidgetPage.razor index 460ab2e..235cfa9 100644 --- a/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/CompassWidgetPage.razor +++ b/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/CompassWidgetPage.razor @@ -1,29 +1,27 @@ @page "/compass-widget" +@inherits SamplePage Compass Widget

Compass Widget

-
- ArcGIS Sample - Compass API Reference -

The Compass widget indicates the map's current orientation relative to north. Use the buttons below to rotate the map, then click the compass to reset to north. The compass only appears when the map is rotated away from north.

-
+
- Current: @(_rotation)° + Current: @(_rotation)°
- + @@ -33,10 +31,31 @@ @code { - private double _rotation = 45; + public override List PageLinks => + [ + new("https://developers.arcgis.com/javascript/latest/sample-code/widgets-compass/", "ArcGIS Sample"), + new("https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Compass.html", "Compass API Reference") + ]; + + private MapView? _mapView; + private double _rotation; - private void SetRotation(double degrees) + private async Task SetRotation(double degrees) { _rotation = degrees; + if (_mapView is not null) + { + await _mapView.SetRotation(degrees); + } + } + + private async Task OnViewExtentChanged(Extent _) + { + if (_mapView is not null) + { + double? current = await _mapView.GetRotation(); + _rotation = current ?? 0; + StateHasChanged(); + } } } diff --git a/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/LocateWidgetPage.razor b/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/LocateWidgetPage.razor index 9937d6b..fbd45a5 100644 --- a/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/LocateWidgetPage.razor +++ b/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/LocateWidgetPage.razor @@ -1,39 +1,36 @@ @page "/locate-widget" +@inherits SamplePage Locate Widget

Locate Widget

-
- ArcGIS Sample - Locate API Reference -

- The Locate widget uses the browser's Geolocation API to find and zoom to the user's current position. - Click the button (top-left of the map) to fly to your location. Most browsers will show an + "Allow" permissions dialog the first time — accept it to share your location with the page. + Change the scale below, then click the button again to see the difference.

-
-
- +
+
+ +
- + @@ -45,12 +42,11 @@ @code { - private int _scale = 1500; - private int _widgetKey; + public override List PageLinks => + [ + new("https://developers.arcgis.com/javascript/latest/sample-code/widgets-locate/", "ArcGIS Sample"), + new("https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Locate.html", "Locate API Reference") + ]; - private void OnScaleChanged(ChangeEventArgs e) - { - _scale = int.Parse(e.Value?.ToString() ?? "1500"); - _widgetKey++; - } + private int _scale = 1500; } diff --git a/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/LocateWidgetPage.razor.css b/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/LocateWidgetPage.razor.css new file mode 100644 index 0000000..2f72133 --- /dev/null +++ b/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/LocateWidgetPage.razor.css @@ -0,0 +1,3 @@ +.inline-icon { + vertical-align: middle; +} diff --git a/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/ScaleBarWidgetPage.razor b/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/ScaleBarWidgetPage.razor index d83fc3f..b54f835 100644 --- a/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/ScaleBarWidgetPage.razor +++ b/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/ScaleBarWidgetPage.razor @@ -1,39 +1,34 @@ @page "/scale-bar-widget" +@inherits SamplePage Scale Bar Widget

Scale Bar Widget

-
- ArcGIS Sample - ScaleBar API Reference -

The Scale Bar widget displays a bar or line indicating the map scale at the current zoom level. Zoom in and out to see the scale bar update. Use the controls below to change the unit system and visual style.

-
-
- +
+
+ +
-
- +
+ +
- + @@ -45,19 +40,12 @@ @code { + public override List PageLinks => + [ + new("https://developers.arcgis.com/javascript/latest/sample-code/widgets-scalebar/", "ArcGIS Sample"), + new("https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-ScaleBar.html", "ScaleBar API Reference") + ]; + private ScaleUnit _unit = ScaleUnit.Imperial; private ScaleBarWidgetStyle _style = ScaleBarWidgetStyle.Ruler; - private int _widgetKey; - - private void OnUnitChanged(ChangeEventArgs e) - { - _unit = Enum.Parse(e.Value?.ToString() ?? "Imperial"); - _widgetKey++; - } - - private void OnStyleChanged(ChangeEventArgs e) - { - _style = Enum.Parse(e.Value?.ToString() ?? "Ruler"); - _widgetKey++; - } } From 71c7a57fdd06cda0357e0ca380c6e7c39e9819ed Mon Sep 17 00:00:00 2001 From: Tim Purdum Date: Wed, 29 Apr 2026 13:12:17 -0500 Subject: [PATCH 5/5] PR review cleanup --- .../Pages/BasemapToggleWidgetPage.razor | 6 +++--- .../Pages/CompassWidgetPage.razor | 2 +- .../Pages/Legends.razor | 6 ++---- .../Pages/ScaleBarWidgetPage.razor | 2 +- .../wwwroot/css/site.css | 5 ++--- 5 files changed, 9 insertions(+), 12 deletions(-) diff --git a/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/BasemapToggleWidgetPage.razor b/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/BasemapToggleWidgetPage.razor index a90bcc2..67c30ed 100644 --- a/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/BasemapToggleWidgetPage.razor +++ b/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/BasemapToggleWidgetPage.razor @@ -14,7 +14,7 @@