diff --git a/.claude/settings.local.json b/.claude/settings.local.json index a862c70..6a49a36 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -2,7 +2,8 @@ "permissions": { "allow": [ "Bash(gh api:*)", - "WebFetch(domain:aka.ms)" + "WebFetch(domain:aka.ms)", + "WebFetch(domain:raw.githubusercontent.com)" ] } } 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..67c30ed --- /dev/null +++ b/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/BasemapToggleWidgetPage.razor @@ -0,0 +1,54 @@ +@page "/basemap-toggle-widget" +@inherits SamplePage + +Basemap Toggle Widget +

Basemap Toggle Widget

+ +

+ 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. +

+ +
+
+ + +
+
+ +@* @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. *@ + + + + + + + + + +@code { + public override List PageLinks => + [ + 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 = + [ + (BasemapStyleName.ArcgisImageryStandard, BasemapStyleName.ArcgisColoredPencil), + (BasemapStyleName.ArcgisTopographic, BasemapStyleName.ArcgisDarkGray), + (BasemapStyleName.ArcgisNavigation, BasemapStyleName.ArcgisImagery), + (BasemapStyleName.OsmStandard, BasemapStyleName.ArcgisTerrain), + ]; +} 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..e23544b --- /dev/null +++ b/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/CompassWidgetPage.razor @@ -0,0 +1,61 @@ +@page "/compass-widget" +@inherits SamplePage + +Compass Widget +

Compass Widget

+ +

+ 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 { + public override List PageLinks => + [ + new("https://developers.arcgis.com/javascript/latest/sample-code/widgets-compass/", "ArcGIS Maps SDK for JavaScript"), + new("https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Compass.html", "Compass API Reference") + ]; + + private MapView? _mapView; + private double _rotation; + + 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/Legends.razor b/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/Legends.razor index 0ae4dc9..bff31c6 100644 --- a/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/Legends.razor +++ b/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/Legends.razor @@ -47,8 +47,7 @@ @if (_showCensusLayer) { - @@ -106,12 +105,11 @@ public override List PageLinks => [ - new("https://developers.arcgis.com/javascript/latest/sample-code/legend/", "ArcGIS Sample"), + new("https://developers.arcgis.com/javascript/latest/sample-code/legend/", "ArcGIS Maps SDK for JavaScript"), new("https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Legend.html", "Legend API Reference") ]; private bool _showCensusLayer; private bool _showTrailsLayer; private bool _showParksLayer; - private FeatureLayer? _censusLayer; } 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..fbd45a5 --- /dev/null +++ b/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/LocateWidgetPage.razor @@ -0,0 +1,52 @@ +@page "/locate-widget" +@inherits SamplePage + +Locate Widget +

Locate Widget

+ +

+ The Locate widget uses the browser's Geolocation API to find and navigate to your 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. +

+ +
+
+ + +
+
+ + + + + + + + + + +@code { + 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 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 new file mode 100644 index 0000000..a63c5b5 --- /dev/null +++ b/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/ScaleBarWidgetPage.razor @@ -0,0 +1,51 @@ +@page "/scale-bar-widget" +@inherits SamplePage + +Scale Bar Widget +

Scale Bar Widget

+ +

+ 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 { + public override List PageLinks => + [ + new("https://developers.arcgis.com/javascript/latest/sample-code/widgets-scalebar/", "ArcGIS Maps SDK for JavaScript"), + 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; +} 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 82bd92e..85a5a3d 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 @@ -170,14 +170,18 @@ await InvokeAsync(async () => new("marker-rotation", "Marker Rotation", "oi-loop-circular", Category: Categories.Visualization), new("widgets", "Widgets", "oi-location", Category: Categories.Widgets), + new("compass-widget", "Compass Widget", "oi-compass", Category: Categories.Widgets), + new("scale-bar-widget", "Scale Bar Widget", "oi-resize-width", Category: Categories.Widgets), + new("legends", "Legend", null, "legend.svg", Category: Categories.Widgets), new("popups", "Popups", "oi-chat", Category: Categories.Widgets), new("popup-actions", "Popup Actions", "oi-bullhorn", Category: Categories.Widgets), - new("bookmarks", "Bookmarks", "oi-bookmark", Category: Categories.Widgets), new("layer-lists", "Layer Lists", "oi-list", Category: Categories.Widgets), - new("legends", "Legend", null, "legend.svg", Category: Categories.Widgets), + new("basemap-toggle-widget", "Basemap Toggle", "oi-loop", Category: Categories.Widgets), new("basemap-layer-lists", "Basemap Layer Lists", "oi-spreadsheet", Category: Categories.Widgets), + new("locate-widget", "Locate Widget", "oi-target", Category: Categories.Widgets), new("measurement-widgets", "Measurement Widgets", null, "ruler.svg", Category: Categories.Widgets), new("search-multi-source", "Search Multiple Sources", "oi-magnifying-glass", Category: Categories.Widgets), + new("bookmarks", "Bookmarks", "oi-bookmark", Category: Categories.Widgets), new("sql-query", "SQL Query", "oi-data-transfer-download", Category: Categories.Queries), new("sql-filter-query", "SQL Filter", "oi-arrow-thick-bottom", Category: Categories.Queries), diff --git a/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/wwwroot/css/site.css b/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/wwwroot/css/site.css index 52ad2aa..ed3a131 100644 --- a/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/wwwroot/css/site.css +++ b/samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/wwwroot/css/site.css @@ -1099,9 +1099,8 @@ a:not([href]):not([class]), a:not([href]):not([class]):hover { /* Group headers */ .nav-list .nav-list-item.nav-group { - padding: 0; - margin-bottom: 0.25rem; - margin-top: 0.25rem; + padding: 0.25rem 0; + margin: 0; background-color: transparent; border-radius: 0; border-top: 1px solid var(--background-grey-3); diff --git a/samples/samples.cmdlineargs.json b/samples/samples.cmdlineargs.json new file mode 100644 index 0000000..6e05299 --- /dev/null +++ b/samples/samples.cmdlineargs.json @@ -0,0 +1 @@ +{"revision":3,"enabled":true,"preview":true,"root":{"items":[]}} \ No newline at end of file