Add dedicated sample pages for Compass, Locate, BasemapToggle, and ScaleBar widgets #14
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| @page "/basemap-toggle-widget" | ||
| @inherits SamplePage | ||
|
|
||
| <PageTitle>Basemap Toggle Widget</PageTitle> | ||
| <h1>Basemap Toggle Widget</h1> | ||
|
|
||
| <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"> | ||
| <div class="spaced-row"> | ||
| <label for="pair-select">Basemap Pair:</label> | ||
| <select id="pair-select" @bind="_pairIndex"> | ||
| <option value="0">Satellite / Colored Pencil</option> | ||
| <option value="1">Topographic / Dark Gray</option> | ||
| <option value="2">Navigation / Imagery</option> | ||
| <option value="3">OSM Standard / Terrain</option> | ||
| </select> | ||
| </div> | ||
| </div> | ||
|
|
||
| @* @key forces the MapView to remount when the basemap pair changes. The primary | ||
| <BasemapStyle Name="..."> swap inside <Map> is not propagated reactively today, | ||
| so a remount is the simplest way to demonstrate different pairs. *@ | ||
| <MapView 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 { | ||
| public override List<NavMenu.PageLink> 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), | ||
| ]; | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| @page "/compass-widget" | ||
| @inherits SamplePage | ||
|
|
||
| <PageTitle>Compass Widget</PageTitle> | ||
| <h1>Compass Widget</h1> | ||
|
|
||
| <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 spaced-row"> | ||
| <label>Rotate Map:</label> | ||
| <button class="btn btn-secondary btn-small" @onclick="@(() => SetRotation(45))">45°</button> | ||
| <button class="btn btn-secondary btn-small" @onclick="@(() => SetRotation(90))">90°</button> | ||
| <button class="btn btn-secondary btn-small" @onclick="@(() => SetRotation(180))">180°</button> | ||
| <button class="btn btn-secondary btn-small" @onclick="@(() => SetRotation(270))">270°</button> | ||
| <button class="btn btn-accent btn-small" @onclick="@(() => SetRotation(0))">Reset North</button> | ||
| <span>Current: @(_rotation)°</span> | ||
| </div> | ||
|
Contributor
There was a problem hiding this comment. see notes on ScaleBar page about styling
Contributor
There was a problem hiding this comment. in this case, you can combine |
||
|
|
||
| <MapView @ref="_mapView" Longitude="-118.805" Latitude="34.027" Zoom="13" Rotation="@_rotation" | ||
| OnExtentChanged="OnViewExtentChanged" Class="map-view"> | ||
| <Map> | ||
| <Basemap> | ||
| <BasemapStyle Name="BasemapStyleName.ArcgisTopographic" /> | ||
| </Basemap> | ||
| </Map> | ||
| <CompassWidget Position="OverlayPosition.TopLeft" /> | ||
| </MapView> | ||
|
|
||
| @code { | ||
| public override List<NavMenu.PageLink> 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(); | ||
| } | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| @page "/locate-widget" | ||
| @inherits SamplePage | ||
|
|
||
| <PageTitle>Locate Widget</PageTitle> | ||
| <h1>Locate Widget</h1> | ||
|
|
||
| <p class="instructions"> | ||
| The Locate widget uses the browser's Geolocation API to find and navigate to your current position. | ||
| Click the <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" class="inline-icon" 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. 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. | ||
| </p> | ||
|
|
||
| <div class="form-group"> | ||
| <div class="spaced-row"> | ||
| <label for="scale-select">Scale:</label> | ||
| <select id="scale-select" @bind="_scale"> | ||
| <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> | ||
| </div> | ||
|
Contributor
There was a problem hiding this comment. see ScaleBar page style notes |
||
| </div> | ||
|
|
||
| <MapView 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 { | ||
| public override List<NavMenu.PageLink> 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; | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .inline-icon { | ||
| vertical-align: middle; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| @page "/scale-bar-widget" | ||
| @inherits SamplePage | ||
|
|
||
| <PageTitle>Scale Bar Widget</PageTitle> | ||
| <h1>Scale Bar Widget</h1> | ||
|
|
||
| <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 class="form-group"> | ||
| <div class="spaced-row"> | ||
| <label for="unit-select">Unit:</label> | ||
| <select id="unit-select" @bind="_unit"> | ||
| <option value="@ScaleUnit.Imperial">Imperial (miles/feet)</option> | ||
| <option value="@ScaleUnit.Metric">Metric (km/m)</option> | ||
| <option value="@ScaleUnit.Dual">Dual (both)</option> | ||
| </select> | ||
| </div> | ||
| <div class="spaced-row"> | ||
| <label for="style-select">Style:</label> | ||
| <select id="style-select" @bind="_style"> | ||
| <option value="@ScaleBarWidgetStyle.Ruler">Ruler</option> | ||
| <option value="@ScaleBarWidgetStyle.Line">Line</option> | ||
| </select> | ||
| </div> | ||
| </div> | ||
|
|
||
| <MapView 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 { | ||
| public override List<NavMenu.PageLink> 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; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| {"revision":3,"enabled":true,"preview":true,"root":{"items":[]}} |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
See my changes moving
links-divlinks toPageLinksin the@codeblock. I would like you to update the other 4 samples in the same way.