Skip to content

Add dedicated sample pages for Compass, Locate, BasemapToggle, and ScaleBar widgets #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
magmoe wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add dedicated sample pages for Compass, Locate, BasemapToggle, and ScaleBar widgets #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
793dfff
Add dedicated sample pages for Compass, Locate, BasemapToggle, and Sc…
magmoe Apr 14, 2026
a90f442
Bind select values to backing fields and add aria-hidden to inline SVG
magmoe Apr 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 52 additions & 0 deletions samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/BasemapToggleWidgetPage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
@page "/basemap-toggle-widget"

<PageTitle>Basemap Toggle Widget</PageTitle>
<h1>Basemap Toggle Widget</h1>

<div class="links-div">
<a class="btn btn-secondary" target="_blank" href="https://developers.arcgis.com/javascript/latest/sample-code/widgets-basemaptoggle/">ArcGIS Sample</a>
<a class="btn btn-primary" target="_blank" href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-BasemapToggle.html">BasemapToggle API Reference</a>
</div>
<p class="instructions">
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.
</p>

<div class="form-group" style="margin-bottom: 1rem;">
<label>Basemap Pair:
<select class="form-select" style="display:inline-block; width: auto;" value="@_pairIndex" @onchange="OnPairChanged">
<option value="0">Satellite / Streets</option>
<option value="1">Topographic / Dark Gray</option>
<option value="2">Navigation / Imagery</option>
<option value="3">OSM Standard / Terrain</option>
</select>
</label>
Comment thread
magmoe marked this conversation as resolved.
</div>

<MapView @key="@_pairIndex" Longitude="-118.24" Latitude="34.05" Zoom="12" Class="map-view">
<Map>
<Basemap>
<BasemapStyle Name="@_pairs[_pairIndex].Primary" />
</Basemap>
</Map>
<BasemapToggleWidget NextBasemapStyle="@_pairs[_pairIndex].Secondary"
Position="OverlayPosition.BottomRight" />
</MapView>

@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");
}
}
42 changes: 42 additions & 0 deletions samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/CompassWidgetPage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
@page "/compass-widget"

<PageTitle>Compass Widget</PageTitle>
<h1>Compass Widget</h1>

<div class="links-div">
<a class="btn btn-secondary" target="_blank" href="https://developers.arcgis.com/javascript/latest/sample-code/widgets-compass/">ArcGIS Sample</a>
<a class="btn btn-primary" target="_blank" href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Compass.html">Compass API Reference</a>
</div>
<p class="instructions">
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.
</p>

<div class="form-group" style="display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
<label>Rotate Map:</label>
<button class="btn btn-secondary btn-small" @onclick="@(() => SetRotation(45))">45&deg;</button>
<button class="btn btn-secondary btn-small" @onclick="@(() => SetRotation(90))">90&deg;</button>
<button class="btn btn-secondary btn-small" @onclick="@(() => SetRotation(180))">180&deg;</button>
<button class="btn btn-secondary btn-small" @onclick="@(() => SetRotation(270))">270&deg;</button>
<button class="btn btn-accent btn-small" @onclick="@(() => SetRotation(0))">Reset North</button>
<span style="margin-left: 1rem; opacity: 0.7;">Current: @(_rotation)&deg;</span>
</div>

<MapView @key="@_rotation" Longitude="-118.805" Latitude="34.027" Zoom="13" Rotation="@_rotation" Class="map-view">
<Map>
<Basemap>
<BasemapStyle Name="BasemapStyleName.ArcgisTopographic" />
</Basemap>
</Map>
<CompassWidget Position="OverlayPosition.TopLeft" />
</MapView>

@code {
private double _rotation = 45;

private void SetRotation(double degrees)
{
_rotation = degrees;
}
}
56 changes: 56 additions & 0 deletions samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/LocateWidgetPage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
@page "/locate-widget"

<PageTitle>Locate Widget</PageTitle>
<h1>Locate Widget</h1>

<div class="links-div">
<a class="btn btn-secondary" target="_blank" href="https://developers.arcgis.com/javascript/latest/sample-code/widgets-locate/">ArcGIS Sample</a>
<a class="btn btn-primary" target="_blank" href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Locate.html">Locate API Reference</a>
</div>
<p class="instructions">
The Locate widget uses the browser's Geolocation API to find and zoom to the user's current position.
Click the <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" style="vertical-align: middle;" aria-hidden="true" focusable="false">
<circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5" fill="none"/>
<circle cx="8" cy="8" r="1.5" fill="currentColor"/>
<line x1="8" y1="0" x2="8" y2="3" stroke="currentColor" stroke-width="1.5"/>
<line x1="8" y1="13" x2="8" y2="16" stroke="currentColor" stroke-width="1.5"/>
<line x1="0" y1="8" x2="3" y2="8" stroke="currentColor" stroke-width="1.5"/>
<line x1="13" y1="8" x2="16" y2="8" stroke="currentColor" stroke-width="1.5"/>
</svg> 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.
</p>

<div style="display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-bottom: 1rem;">
<div class="form-group">
<label>Zoom Scale:
<select class="form-select" style="display:inline-block; width: auto;" value="@_scale" @onchange="OnScaleChanged">
<option value="1500">1,500 (Street level)</option>
<option value="5000">5,000 (Neighborhood)</option>
<option value="25000">25,000 (City)</option>
<option value="100000">100,000 (Region)</option>
</select>
</label>
</div>
</div>

<MapView @key="@_widgetKey" Longitude="-98.5" Latitude="39.8" Zoom="4" Class="map-view">
<Map>
<Basemap>
<BasemapStyle Name="BasemapStyleName.ArcgisNavigation" />
</Basemap>
</Map>
<LocateWidget Position="OverlayPosition.TopLeft"
Scale="@_scale"
PopupEnabled="true" />
</MapView>

@code {
private int _scale = 1500;
private int _widgetKey;

private void OnScaleChanged(ChangeEventArgs e)
{
_scale = int.Parse(e.Value?.ToString() ?? "1500");
_widgetKey++;
}
}
63 changes: 63 additions & 0 deletions samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/ScaleBarWidgetPage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
@page "/scale-bar-widget"

<PageTitle>Scale Bar Widget</PageTitle>
<h1>Scale Bar Widget</h1>

<div class="links-div">
<a class="btn btn-secondary" target="_blank" href="https://developers.arcgis.com/javascript/latest/sample-code/widgets-scalebar/">ArcGIS Sample</a>
<a class="btn btn-primary" target="_blank" href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-ScaleBar.html">ScaleBar API Reference</a>
</div>
<p class="instructions">
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.
</p>

<div style="display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-bottom: 1rem;">
<div class="form-group">
<label>Unit:
<select class="form-select" style="display:inline-block; width: auto;" value="@_unit" @onchange="OnUnitChanged">
<option value="Imperial">Imperial (miles/feet)</option>
<option value="Metric">Metric (km/m)</option>
<option value="Dual">Dual (both)</option>
</select>
</label>
</div>
<div class="form-group">
<label>Style:
<select class="form-select" style="display:inline-block; width: auto;" value="@_style" @onchange="OnStyleChanged">
<option value="Ruler">Ruler</option>
<option value="Line">Line</option>
</select>
</label>
Comment thread
magmoe marked this conversation as resolved.
</div>
</div>

<MapView @key="@_widgetKey" Longitude="-98.5" Latitude="39.8" Zoom="4" Class="map-view">
<Map>
<Basemap>
<BasemapStyle Name="BasemapStyleName.ArcgisTopographic" />
</Basemap>
</Map>
<ScaleBarWidget Position="OverlayPosition.BottomLeft"
Unit="@_unit"
Style="@_style" />
</MapView>

@code {
private ScaleUnit _unit = ScaleUnit.Imperial;
private ScaleBarWidgetStyle _style = ScaleBarWidgetStyle.Ruler;
private int _widgetKey;

private void OnUnitChanged(ChangeEventArgs e)
{
_unit = Enum.Parse<ScaleUnit>(e.Value?.ToString() ?? "Imperial");
_widgetKey++;
}

private void OnStyleChanged(ChangeEventArgs e)
{
_style = Enum.Parse<ScaleBarWidgetStyle>(e.Value?.ToString() ?? "Ruler");
Comment on lines +54 to +60
_widgetKey++;
}
}
2 changes: 1 addition & 1 deletion samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/UniqueValueRenderers.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Comment on lines 62 to 64
field: "highway", defaultLabel: "Service",
legendOptions: new UniqueValueRendererLegendOptions("Route Type"));
Expand Down
4 changes: 4 additions & 0 deletions samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Shared/NavMenu.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"),
Expand Down