Use dark colors for code blocks Copy
1
import "@arcgis/map-components/components/arcgis-grid-controls";No specific import is needed for this component.
The Grid Controls component provides a user interface (UI) for configuring and displaying a two-dimensional grid. The grid displayed provides a network of horizontal and vertical lines used to divide the view into equal cells. With support for snapping, the grid lines can be used as a reference when drawing features. Note: grid controls are embedded in snapping controls for Sketch and Editor by default.
Known limitations
Property
autoDestroyDisabled: boolean
If true, the component will not be destroyed automatically when it is disconnected from the document. This is useful when you want to move the component to a different place on the page, or temporarily hide it. If this is set, make sure to call the destroy method when you are done to prevent memory leaks.
The custom color used for drawing the grid, if any.
readonlyProperty
displayEnabled: boolean
Returns true if the grid is enabled for display. Use trySetDisplayEnabled to enable or disable grid display.
Property
dynamicScaling: boolean
Returns true if the grid is set to scale dynamically. When dynamic scaling is enabled, grid cells are added or removed to ensure that grid cells are a reasonable size on screen as the user zooms. The way additional grid lines are shown is controlled by the majorLineInterval property.
effectiveSpacingAfterDynamicScaling: number
Returns the actual spacing of grid lines after dynamic scaling has been applied at the current scale.
Controls the color of the major grid lines. Minor grid lines are a slightly transparent version of this color.
readonlyProperty
gridControlsEnabled: boolean
Returns true if the grid is in a valid state for manually setting grid properties or starting an interactive placement.
gridOutOfScale: boolean
True if the grid is currently not displayed (and therefore also not a valid snap target), because dynamicScaling is off and the grid cells are too small to render at the current scale.
Property
hideColorSelection: boolean
Controls display of the color and theme selection options.
Property
hideDynamicScaleToggle: boolean
Controls display of the dynamic scaling toggle. Dynamic scaling adjusts the size of the grid to work well regardless of view scale.
Property
hideGridEnabledToggle: boolean
Controls display of the grid enabled toggle. This toggle controls whether the grid is displayed.
Property
hideGridSnapEnabledToggle: boolean
Controls display of the grid snapping enabled toggle. This toggle controls whether snapping is enabled.
Property
hideLineIntervalInput: boolean
Controls display of the line interval input field for setting the interval between major grid lines.
Property
hideNumericInputs: boolean
Controls display of the numeric input fields for setting grid spacing and rotation.
Property
hideOutOfScaleWarning: boolean
Controls display of the out of scale warning. This warning is displayed when the grid is not shown because it would be too small at the current scale and dynamic scaling is disabled.
Property
hidePlacementButtons: boolean
Controls display of the grid placement buttons. These buttons allow the user to start interactive configuration of the grid.
Property
hideRotateWithMapToggle: boolean
Controls display of the rotate with map toggle. This toggle controls whether the grid rotates with the map.
Property
icon: string
Icon which represents the component. Typically used when the component is controlled by another component (e.g. by the Expand component).
interactivePlacementState: "interactive" | "place" | "rotate"
Sets the interactive placement state, either starting or ending a draw operation that implicitly adjusts the grid. Interactive placement allows the user to define the center of the grid, then the scale and rotation of the grid by drawing a second point. Setting this to "place" allows the user to move the grid center only. Setting this to "rotate" keeps the scale and center of the grid constant while rotating the grid by defining a second point.
Property
label: string
The component's default label.
majorLineInterval: number
Controls the number of grid cells shown between major grid lines. Can be anything between 1 and 15. No minor grid lines are shown when this is set to 1.
Property
messageOverrides: Record<string, unknown>
Replace localized message strings with your own strings.
Note: Individual message keys may change between releases.
Property
placementDisabled: boolean
Use this property to disable the interactive grid placement buttons as needed. An example use case might be to block interaction while another interactive operation (e.g. sketching) is in progress.
position: "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"
Property
By assigning the id attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
Property
rotateWithMap: boolean
Controls whether the grid rotates with the map, or stays fixed to the screen.
rotation: number
Rotation of the grid in radians. NOTE: UI controls convert to and from degrees automatically.
Property
snappingEnabled: boolean
Controls snapping behavior if snappingOptions has been defined. If snappingOptions have been defined, disabling or enabling grid snapping will also disable or enable grid display.
Property
The SnappingOptions that will be controlled by this component if the snapping toggle is enabled for display. If SnappingOptions are provided, grid display will be automatically enabled or disabled to match snapping state.
spacing: number
Length of a grid cell. Grid cells are always square. Defined in unit.
Property
theme: "custom" | "dark" | "light"
The color scheme used to display the grid. This will be light, dark, or custom. When theme is set to custom, the customColor is shown, otherwise a default light or dark theme color is used.
Property
unit: "centimeters" | "decimeters" | "feet" | "inches" | "kilometers" | "meters" | "miles" | "millimeters" | "nautical-miles" | "us-feet" | "yards"
Unit of measure (foot, meter, etc) used when defining the spacing grid cell. Note that units are defined relatively to the map's spatial reference length unit, which will not correspond to geographic distance unless using a special-purpose basemap within a supported target area.
When using Web Mercator, the projection defines the length of a meter in projection system units; this length is equal to a geographic meter only at the equator. On screen, the size of the grid cells is constant from the equator to the poles, but the real-world size of the grid cell is much larger further from the equator.
The length of the grid cells can usefully correspond to a geographic length when the Grid is used with an appropriate spatial reference (for example a local system or a State Plane system) within the reference's area of interest.
No slots to display.
Events Event TypearcgisPropertyChange CustomEvent<{ name: "rotation" | "theme" | "customColor" | "rotateWithMap" | "spacing" | "majorLineInterval" | "gridColor" | "displayEnabled" | "gridOutOfScale" | "dynamicScaling" | "gridControlsEnabled" | "interactivePlacementState" | "snappingEnabled" | "effectiveSpacingAfterDynamicScaling"; }> arcgisReady CustomEvent<void> arcgisPropertyChange
Event
arcgisPropertyChange: CustomEvent<{ name: "rotation" | "theme" | "customColor" | "rotateWithMap" | "spacing" | "majorLineInterval" | "gridColor" | "displayEnabled" | "gridOutOfScale" | "dynamicScaling" | "gridControlsEnabled" | "interactivePlacementState" | "snappingEnabled" | "effectiveSpacingAfterDynamicScaling"; }>
Emitted when the value of a property is changed. Use this to listen to changes to properties.
bubblesEvents triggered on this element will be propagated to their outermost elements.
composedThe event is composable and will propagate across the shadow DOM into the standard DOM.
cancelableThe event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisReadyEvent
arcgisReady: CustomEvent<void>
Emitted when the component associated with a map or scene view is is ready to be interacted with.
bubblesEvents triggered on this element will be propagated to their outermost elements.
composedThe event is composable and will propagate across the shadow DOM into the standard DOM.
cancelableThe event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
Methods componentOnReadyMethod
componentOnReady(): Promise<void>
Create a promise that resolves once component is fully loaded.
ExampleUse dark colors for code blocks Copy
1
2
3
4
const arcgisGridControls = document.querySelector("arcgis-grid-controls");
document.body.append(arcgisGridControls);
await arcgisGridControls.componentOnReady();
console.log("arcgis-grid-controls is ready to go!");Method
destroy(): Promise<void>
Permanently destroy the component.
Method
trySetDisplayEnabled(enabled: boolean): void
Call this to turn the grid on/off.
Parameters Parameter Type Optional?enabled
boolean
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4