Zoom to extent of all features | Sample | ArcGIS Maps SDK for JavaScript

### getGuideStart Source: https://developers.arcgis.com/javascript/latest/references/charts-components/model/radar-chart-model/radar-chart-model Gets the start value of a guide, supporting Date, number, or string types, with optional index and orientation. ```APIDOC ## getGuideStart ### Description Gets the start value of a guide. Supports Date, number, or string return types. ### Method `getGuideStart(index?: number, orientation?: GuideOrientation): Date | number | string | null` ### Parameters #### Path Parameters - **index** (number) - Optional - Default `0`. The index of the guide in the list of guides for the given axis orientation. - **orientation** (GuideOrientation) - Optional - Default `y`. The axis orientation of the guide. ### Returns - **Date | number | string | null** - The start value of the guide. ``` -------------------------------- ### getGuideStart Source: https://developers.arcgis.com/javascript/latest/references/charts-components/model/gauge-model/gauge-model Retrieves the start value of a specified guide. This inherited method provides access to the starting boundary of a guide. ```APIDOC ## getGuideStart ### Description Inherited from: ModelWithGuides Gets the start value of a guide. ### Signature `getGuideStart(index?: number, orientation?: GuideOrientation): Date | number | string | null` ### Parameters #### Path Parameters - **index** (number) - Optional - Default `0`. The index of the guide in the list of guides for the given axis orientation. - **orientation** (GuideOrientation) - Optional - Default `y`. The axis orientation of the guide. ### Returns Date | number | string | null ``` -------------------------------- ### Full HTML Example with Feature Layer and Zooming Source: https://developers.arcgis.com/javascript/latest/sample-code/featurelayer-queryextent/live This is a complete HTML example demonstrating how to set up a scene, add a FeatureLayer, and implement zooming to the layer's extent based on definition expressions. It includes necessary imports and component setup. ```html Zoom to extent of all features | Sample | ArcGIS Maps SDK for JavaScript

Click on a parcel polygon to display its area and perimeter.

``` -------------------------------- ### Setup and Initialization Source: https://developers.arcgis.com/javascript/latest/tutorials/find-spatial-relationships Sets up the map, graphics layer, and loads necessary modules for spatial relationship analysis. Includes a predefined polyline graphic. ```javascript const [ Graphic, Map, containsOperator, crossesOperator, disjointOperator, equalsOperator, intersectsOperator, overlapsOperator, touchesOperator, withinOperator, GraphicsLayer, ] = await $arcgis.import([ "@arcgis/core/Graphic.js", "@arcgis/core/Map.js", "@arcgis/core/geometry/operators/containsOperator.js", "@arcgis/core/geometry/operators/crossesOperator.js", "@arcgis/core/geometry/operators/disjointOperator.js", "@arcgis/core/geometry/operators/equalsOperator.js", "@arcgis/core/geometry/operators/intersectsOperator.js", "@arcgis/core/geometry/operators/overlapsOperator.js", "@arcgis/core/geometry/operators/touchesOperator.js", "@arcgis/core/geometry/operators/withinOperator.js", "@arcgis/core/layers/GraphicsLayer.js", ]); const viewElement = document.querySelector("arcgis-map"); const arcgisSketch = document.querySelector("arcgis-sketch"); const list = document.querySelector("#list"); const graphicsLayer = new GraphicsLayer(); viewElement.map = new Map({ basemap: "arcgis/topographic", layers: [graphicsLayer], }); const polyline = { type: "polyline", paths: [ [-13227000.704542402, 4032506.197638312], [-13223540.698857695, 4034443.92109266], [-13222135.94452635, 4032506.197638312], [-13222135.94452635, 4033494.9524006792], [-13221470.479577951, 4033494.9524006792], ], spatialReference: { wkid: 102100, }, }; const simpleLineSymbol = { type: "simple-line", width: 2, }; const polylineGraphic = new Graphic({ geometry: polyline, symbol: simpleLineSymbol, }); graphicsLayer.add(polylineGraphic); // Create a polygon geometry const polygon = { type: "polygon", rings: [ [-13228098.704542402, 4035365.9427463487], [-13226362.225451587, 4035365.9427463487], [-13226362.225451587, 4032059.2948176656], [-13228098.704542402, 4032059.2948176656], [-13228098.704542402, 4035365.9427463487], ], spatialReference: { wkid: 102100, }, }; const simpleFillSymbol = { ``` -------------------------------- ### Set up map and query options Source: https://developers.arcgis.com/javascript/latest/tutorials/query-a-feature-layer-sql Initializes the map, sets up a dropdown for SQL WHERE clauses, and defines the feature layer URL. It also includes event listeners for user interaction. ```html ArcGIS Maps SDK for JavaScript Tutorials: Query a feature layer (SQL)

``` -------------------------------- ### Full HTML Example with Map and Event Listener Source: https://developers.arcgis.com/javascript/latest/sample-code/intro-map-components/live A complete HTML file demonstrating the initialization of a 2D map component and waiting for it to be ready using an event listener. ```html Intro to map components - Create a 2D map | Sample | ArcGIS Maps SDK for JavaScript

``` -------------------------------- ### setGuideStart Source: https://developers.arcgis.com/javascript/latest/references/charts-components/model/mixins/model-with-guides Sets the start value of a guide. This defines the beginning of a guide's range on the chart. ```APIDOC ## setGuideStart ### Description Sets the start value of a guide. ### Method `setGuideStart(start: Date | number | string | null, index?: number, orientation?: GuideOrientation): void` ### Parameters #### Path Parameters - **start** (Date | number | string | null) - Required - New start value to set. - **index** (number) - Optional - Default `0`. The index of the guide in the list of guides for the given axis orientation. - **orientation** (GuideOrientation) - Optional - Default `y`. The axis orientation of the guide. ### Returns void ``` -------------------------------- ### setup Source: https://developers.arcgis.com/javascript/latest/references/charts-components/model/heat-chart-model/heat-chart-model Initializes the Heat Chart Model with provided parameters and configuration. ```APIDOC ## setup ### Description Initializes the Heat Chart Model with provided parameters and configuration. ### Method setup ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body - **params** (ModelParams>) - Required - The parameters and configuration for the heat chart model. ### Request Example ```json { "params": { "config": { "type": "HeatChart", "series": [ { "name": "Series 1", "data": [ [0, 0, 10], [1, 1, 20] ] } ] } } } ``` ### Response #### Success Response (200) - **void** - This method does not return a value. #### Response Example ```json null ``` ``` -------------------------------- ### Get Version Identifier from GUID Source: https://developers.arcgis.com/javascript/latest/references/core/versionManagement/VersionManagementService Retrieves the VersionIdentifier object using the version's GUID. ```javascript versionManagementService.getVersionIdentifierFromGuid(guid); ``` -------------------------------- ### getGuideLabelText Source: https://developers.arcgis.com/javascript/latest/references/charts-components/model/mixins/model-with-guides Gets the text label for a specific guide on a chart. You can specify the guide by its index and orientation. ```APIDOC ## getGuideLabelText ### Description Gets the guide label text. Allows retrieval of the text associated with a specific guide, identified by its index and orientation. ### Method `getGuideLabelText(index?: number, orientation?: GuideOrientation): string | undefined` ### Parameters #### Path Parameters - **index** (number) - Optional - Default `0`. The index of the guide in the list of guides for the given axis orientation. - **orientation** (GuideOrientation) - Optional - Default `y`. The axis orientation of the guide. ### Returns `string | undefined` - The text label of the guide, or undefined if not found. ``` -------------------------------- ### Initialize and Use Fullscreen Component Source: https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-fullscreen This example demonstrates how to select the Fullscreen component, append it to the body, and wait for it to be ready before interacting with it. This pattern is useful for ensuring the component is fully loaded and initialized. ```javascript const arcgisFullscreen = document.querySelector("arcgis-fullscreen"); document.body.append(arcgisFullscreen); await arcgisFullscreen.componentOnReady(); console.log("arcgis-fullscreen is ready to go!"); ``` -------------------------------- ### setup Source: https://developers.arcgis.com/javascript/latest/references/charts-components/model/chart-model/chart-model Initiates and completes the asynchronous setup process for the chart model. This method must be called before using the model. ```APIDOC ## setup ### Description Completes the async setup process for the chart model. Must be called before using the model. ### Method `setup(params: ModelParams): Promise` ### Parameters #### Path Parameters - **params** (ModelParams) - Required - The parameters to be used to set up the chart model. ### Returns - Promise ``` -------------------------------- ### getGuideStyle Source: https://developers.arcgis.com/javascript/latest/references/charts-components/model/gauge-model/gauge-model Gets the visual style of a specified guide. This inherited method returns symbol information for rendering the guide. ```APIDOC ## getGuideStyle ### Description Inherited from: ModelWithGuides Gets the guide style. ### Signature `getGuideStyle(index?: number, orientation?: GuideOrientation): ISimpleFillSymbol | ISimpleLineSymbol | undefined` ### Parameters #### Path Parameters - **index** (number) - Optional - Default `0`. The index of the guide in the list of guides for the given axis orientation. - **orientation** (GuideOrientation) - Optional - Default `y`. The axis orientation of the guide. ### Returns ISimpleFillSymbol | ISimpleLineSymbol | undefined ``` -------------------------------- ### getGuideLabelText Source: https://developers.arcgis.com/javascript/latest/references/charts-components/model/gauge-model/gauge-model Gets the text label for a specified guide. This inherited method is useful for accessing and displaying guide labels. ```APIDOC ## getGuideLabelText ### Description Inherited from: ModelWithGuides Gets the guide label text. ### Signature `getGuideLabelText(index?: number, orientation?: GuideOrientation): string | undefined` ### Parameters #### Path Parameters - **index** (number) - Optional - Default `0`. The index of the guide in the list of guides for the given axis orientation. - **orientation** (GuideOrientation) - Optional - Default `y`. The axis orientation of the guide. ### Returns string | undefined ``` -------------------------------- ### Full Example with Shadow Cast Configuration and UI Source: https://developers.arcgis.com/javascript/latest/sample-code/shadow-cast/live A complete HTML and JavaScript example demonstrating the integration and configuration of the Shadow Cast component, including UI elements to toggle scenarios. ```html Shadow Cast component | Sample | ArcGIS Maps SDK for JavaScript

Scenario A

Scenario B

``` -------------------------------- ### Guide Methods Source: https://developers.arcgis.com/javascript/latest/references/charts-components/model/histogram-model/histogram-model Methods for retrieving information about guides on the histogram, including their text, name, start value, style, and visibility. ```APIDOC ## getGuideLabelText ### Description Gets the guide label text. ### Signature `getGuideLabelText(index?: number, orientation?: GuideOrientation): string | undefined` ### Parameters #### Path Parameters - **index** (number) - Optional - Default `0`. The index of the guide in the list of guides for the given axis orientation. - **orientation** (GuideOrientation) - Optional - Default `y`. The axis orientation of the guide. ### Returns `string | undefined` ## getGuideName ### Description Gets the name of a guide. ### Signature `getGuideName(index?: number, orientation?: GuideOrientation): string | undefined` ### Parameters #### Path Parameters - **index** (number) - Optional - Default `0`. The index of the guide in the list of guides for the given axis orientation. - **orientation** (GuideOrientation) - Optional - Default `y`. The axis orientation of the guide. ### Returns `string | undefined` ## getGuideStart ### Description Gets the start value of a guide. ### Signature `getGuideStart(index?: number, orientation?: GuideOrientation): Date | number | string | null` ### Parameters #### Path Parameters - **index** (number) - Optional - Default `0`. The index of the guide in the list of guides for the given axis orientation. - **orientation** (GuideOrientation) - Optional - Default `y`. The axis orientation of the guide. ### Returns `Date | number | string | null` ## getGuideStyle ### Description Gets the guide style. ### Signature `getGuideStyle(index?: number, orientation?: GuideOrientation): ISimpleFillSymbol | ISimpleLineSymbol | undefined` ### Parameters #### Path Parameters - **index** (number) - Optional - Default `0`. The index of the guide in the list of guides for the given axis orientation. - **orientation** (GuideOrientation) - Optional - Default `y`. The axis orientation of the guide. ### Returns `ISimpleFillSymbol | ISimpleLineSymbol | undefined` ## getGuideVisibility ### Description Gets whether a guide is visible. ### Signature `getGuideVisibility(index?: number, orientation?: GuideOrientation): boolean` ### Parameters #### Path Parameters - **index** (number) - Optional - Default `0`. The index of the guide in the list of guides for the given axis orientation. - **orientation** (GuideOrientation) - Optional - Default `y`. The axis orientation of the guide. ### Returns `boolean` ``` -------------------------------- ### interval Property Source: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-ShadowCast-DiscreteOptions.html Gets or sets the time interval in milliseconds for displaying individual shadows, starting from the start time of day. ```APIDOC ### interval Property Type number Individual shadows are displayed at this time interval, starting with the start time of day. The interval is expressed in milliseconds. If set to 0, we'll use the smallest possible interval, up to a maximum of 255 samples. Default value 1 * 3600 * 1000 ``` -------------------------------- ### Setup Application and Event Handlers Source: https://developers.arcgis.com/javascript/latest/sample-code/featurelayerview-query-geometry Initializes the map, layers, and widgets. Sets up event listeners for user interactions like sketching and map movements to trigger queries and updates. ```javascript const [ SketchViewModel, Polyline, Point, Graphic, Map, FeatureLayer, GraphicsLayer, geodeticLengthOperator, geodesicBufferOperator, reactiveUtils, promiseUtils, ] = await $arcgis.import([ "@arcgis/core/widgets/Sketch/SketchViewModel.js", "@arcgis/core/geometry/Polyline.js", "@arcgis/core/geometry/Point.js", "@arcgis/core/Graphic.js", "@arcgis/core/Map.js", "@arcgis/core/layers/FeatureLayer.js", "@arcgis/core/layers/GraphicsLayer.js", "@arcgis/core/geometry/operators/geodeticLengthOperator.js", "@arcgis/core/geometry/operators/geodesicBufferOperator.js", "@arcgis/core/core/reactiveUtils.js", "@arcgis/core/core/promiseUtils.js", ]); let centerGraphic, edgeGraphic, polylineGraphic, bufferGraphic, labelGraphic, centerGeometryAtStart; let count = 0; const unit = { unit: "kilometers" }; const graphicsLayer = new GraphicsLayer(); const bufferLayer = new GraphicsLayer({ blendMode: "color-burn" }); const featureLayer = new FeatureLayer({ portalItem: { id: "83c37666a059480bb8a7cb73f449ff52" }, outFields: ["*"] }); const viewElement = document.querySelector("arcgis-map"); viewElement.map = new Map({ basemap: "dark-gray-vector", layers: [featureLayer, bufferLayer, graphicsLayer], }); viewElement.constraints = { maxScale: 0, minScale: 300000 }; viewElement.popup = { alignment: "top-left", viewModel: { includeDefaultActions: false }, }; await viewElement.viewOnReady(); const featureLayerView = await viewElement.whenLayerView(featureLayer); const statDefinitions = createStatDefinitions(); setUpApp(); // Debounce the onMove event to avoid querying the layer too frequently const debounceOnMove = promiseUtils.debounce(async (vertices) => { const buffer = await calculateBuffer(vertices); const newData = await queryLayerViewAgeStats(buffer); updateChart(newData); }); // sketchViewModel to update the buffer graphic to resize the buffer const sketchViewModel = new SketchViewModel({ view: viewElement.view, layer: graphicsLayer, }); sketchViewModel.on("update", (event) => { handleSketchUpdate(event, debounceOnMove); }); // Update the buffer graphic when user drags the center or edge point // called from the drawBufferPolygon function to calculate the buffer async function calculateBuffer(vertices) { polylineGraphic.geometry = new Polyline({ paths: vertices, spatialReference: viewElement.spatialReference, }); const length = await geodeticLengthOperator.execute(polylineGraphic.geometry, unit); const buffer = await geodesicBufferOperator.execute(centerGraphic.geometry, length, unit); bufferGraphic.geometry = buffer; labelGraphic.geometry = edgeGraphic.geometry; labelGraphic.symbol = createLabelSymbol(length); return buffer; } // Query the layer view to get the age statistics as user moves or resizes the buffer async function queryLayerViewAgeStats(buffer) { const query = featureLayerView.layer.createQuery(); query.outStatistics = statDefinitions; query.geometry = buffer; const results = await featureLayerView.queryFeatures(query); const attributes = results.features[0].attributes; const femaleAgeData = []; const maleAgeData = []; for (let key in attributes) { if (key.includes("FEM")) { femaleAgeData.push(attributes[key]); } else { maleAgeData.push(-Math.abs(attributes[key])); } } ``` -------------------------------- ### getGuideStyle Source: https://developers.arcgis.com/javascript/latest/references/charts-components/model/mixins/model-with-y-guides Gets the guide style. Inherited from ModelWithGuides. ```APIDOC ## getGuideStyle ### Description Gets the guide style. ### Signature `getGuideStyle(index?: number, orientation?: GuideOrientation): ISimpleFillSymbol | ISimpleLineSymbol | undefined` ### Parameters #### Path Parameters - **index** (number) - Optional - Default `0`. The index of the guide in the list of guides for the given axis orientation. - **orientation** (GuideOrientation) - Optional - Default `y`. The axis orientation of the guide. ### Returns `ISimpleFillSymbol | ISimpleLineSymbol | undefined` ``` -------------------------------- ### Initialize and Use VersionManagementService Source: https://developers.arcgis.com/javascript/latest/api-reference/esri-versionManagement-VersionManagementService.html Demonstrates how to initialize a VersionManagementService instance, manage layers, and change their versions. Ensure the service is loaded before calling methods. ```javascript // Initialize the VersionManagementService from a url const versionManagementService = new VersionManagementService({ url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/TestService/VersionManagementServer" }); // The layers that will be managed under the VersionManagementService const layer1 = new FeatureLayer({ url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/TestService/FeatureServer/12" }); const layer2 = new FeatureLayer({ url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/TestService/FeatureServer/13" }); const layers = [layer1, layer2]; // The VersionManagementService must be loaded before any methods can be called await versionManagementService.load(); // Change the version of two layers versionManagementService.changeVersion( layers, { name: "sde.DEFAULT", guid: "{13DEDC17-5867-4DBC-9855-0736C4C57162}"}, { name: "admin.version", guid: "{422D1B63-D795-4478-A4B1-AD6109377074}"} ); ``` -------------------------------- ### Set Guide Style for Box Plot Source: https://developers.arcgis.com/javascript/latest/references/charts-components/model/box-plot-model/box-plot-model Sets the style for a specific guide on a box plot. Use this to define the visual appearance of guides, such as lines or fills. The example shows setting a line style for the second guide (index 1). ```javascript chartModel.setGuideStyle( { type: "esriSLS", color: [0, 200, 0, 255], width: 2, }, 1 ); ``` -------------------------------- ### start Method Source: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-ShadowAccumulation-ShadowAccumulationViewModel.html Starts the widget, initiating automatic shadow accumulation. ```APIDOC ### start Method Signature ` start (): void ` Starts the widget. While running it will automatically perform shadow accumulation. Returns void ``` -------------------------------- ### getGuideEnd Source: https://developers.arcgis.com/javascript/latest/references/charts-components/model/mixins/model-with-y-guides Gets the end value of a guide. Inherited from ModelWithGuides. ```APIDOC ## getGuideEnd ### Description Gets the end value of a guide. ### Signature `getGuideEnd(index?: number, orientation?: GuideOrientation): Date | number | string | null | undefined` ### Parameters #### Path Parameters - **index** (number) - Optional - Default `0`. The index of the guide in the list of guides for the given axis orientation. - **orientation** (GuideOrientation) - Optional - Default `y`. The axis orientation of the guide. ### Returns `Date | number | string | null | undefined` ``` -------------------------------- ### Initialize WebMap and MapView Source: https://developers.arcgis.com/javascript/latest/sample-code/widgets-featuretable-map Sets up the WebMap and MapView instances. The WebMap is loaded from a portal item, and the MapView is configured with a container, map, center, and zoom level. ```javascript const webmap = new WebMap({ portalItem: { id: "56cb159275394410a2a928be9c6f5c2a", }, }); const view = new MapView({ container: "viewDiv", map: webmap, center: [-72.92, 43.28], zoom: 10, popupEnabled: false, }); ``` -------------------------------- ### getGuideLabelText Source: https://developers.arcgis.com/javascript/latest/references/charts-components/model/radar-chart-model/radar-chart-model Gets the text label for a guide, with options for index and orientation. ```APIDOC ## getGuideLabelText ### Description Gets the guide label text. Returns undefined if the label is not set. ### Method `getGuideLabelText(index?: number, orientation?: GuideOrientation): string | undefined` ### Parameters #### Path Parameters - **index** (number) - Optional - Default `0`. The index of the guide in the list of guides for the given axis orientation. - **orientation** (GuideOrientation) - Optional - Default `y`. The axis orientation of the guide. ### Returns - **string | undefined** - The text of the guide label. ``` -------------------------------- ### getGuideStyle Source: https://developers.arcgis.com/javascript/latest/references/charts-components/model/mixins/model-with-guides Gets the style of a guide. Accepts an optional index and orientation. ```APIDOC ## getGuideStyle ### Description Gets the style of a guide. ### Method GET ### Endpoint /guides/style ### Parameters #### Query Parameters - **index** (number) - Optional - The index of the guide. Defaults to 0. - **orientation** (GuideOrientation) - Optional - The axis orientation of the guide. Defaults to 'y'. ### Response #### Success Response (200) - **ISimpleFillSymbol | ISimpleLineSymbol | undefined** - The style of the guide. ``` -------------------------------- ### Initialize Map and Layers Source: https://developers.arcgis.com/javascript/latest/visualization/high-density-data/aggregation Sets up the MapView and WebMap, finds the 'Hexbins' and 'earthquake points' layers, and configures their visibility and scale constraints for aggregation display. ```javascript const view = new MapView({ map: new WebMap({ portalItem: { // autocasts as new PortalItem() id: "4ac45bfebc8647b39efad59cdf0be15a", }, }), constraints: { snapToZoom: false, minScale: 30000000, }, container: "viewDiv", }); await view.when(); const hexbinLayer = view.map.layers.find((layer) => layer.title === "Hexbins"); const earthquakeLayer = view.map.layers.find((layer) => layer.title === "earthquake points"); earthquakeLayer.minScale = 577790; earthquakeLayer.maxScale = 0; earthquakeLayer.visible = true; ``` -------------------------------- ### Initialize Map Layers and Setup Source: https://developers.arcgis.com/javascript/latest/sample-code/geometry-operator-offset-visualizer/live This code snippet initializes the application by waiting for the view to be ready, adding multiple feature layers to the map, and then calling a setup function. ```javascript // Listen for when the view is ready // then start adding layers and setting up the app await viewElement.viewOnReady(); viewElement.map.addMany([ tunisaFeatureLayer, aeniadFeatureLayer, joinTypeDemoLayer, graphicsLayer, joinTypeConstructionLayer, ]); setup(); ``` -------------------------------- ### getGuideAbove Source: https://developers.arcgis.com/javascript/latest/references/charts-components/model/mixins/model-with-y-guides Gets whether the guide should be rendered above other chart elements. Inherited from ModelWithGuides. ```APIDOC ## getGuideAbove ### Description Gets whether the guide should be rendered above the other chart elements. ### Signature `getGuideAbove(index?: number, orientation?: GuideOrientation): boolean` ### Parameters #### Path Parameters - **index** (number) - Optional - Default `0`. The index of the guide in the list of guides for the given axis orientation. - **orientation** (GuideOrientation) - Optional - Default `y`. The axis orientation of the guide. ### Returns `boolean` ``` -------------------------------- ### getGuideEnd Source: https://developers.arcgis.com/javascript/latest/references/charts-components/model/mixins/model-with-guides Gets the end value of a guide. Accepts an optional index and orientation. ```APIDOC ## getGuideEnd ### Description Gets the end value of a guide. ### Method GET ### Endpoint /guides/end ### Parameters #### Query Parameters - **index** (number) - Optional - The index of the guide. Defaults to 0. - **orientation** (GuideOrientation) - Optional - The axis orientation of the guide. Defaults to 'y'. ### Response #### Success Response (200) - **Date | number | string | null | undefined** - The end value of the guide. ```