arcgis-map

Collection containing a flat list of all the created LayerViews related to the basemap, operational layers, and group layers in this view.

See also

• LayerView

Since

ArcGIS Maps SDK for JavaScript 4.34

A collection of analyses associated with the view.

// Adds an analysis to the View
view.analyses.add(elevationProfileAnalysis);

// Removes an analysis from the View
view.analyses.remove(elevationProfileAnalysis);

Since

ArcGIS Maps SDK for JavaScript 4.34

Indicates whether animations are disabled in the view. This includes animated symbols (animated CIMSymbol, PictureMarkerSymbol from a GIF/animated PNG), animated renderers (FlowRenderer), animated layers (MediaLayer, VideoLayer), and animations triggered by view navigation (for example, goTo()). Setting this property to true disables all animations in the view.

Since

ArcGIS Maps SDK for JavaScript 4.34

The ARIA attributes for the view container. Provides accessibility information to assistive technologies such as screen readers. Supports the following properties: label, description, describedByElements, and labelledByElements.

Since

ArcGIS Maps SDK for JavaScript 5.0

The attribution items displayed in the view's attribution.

Since

ArcGIS Maps SDK for JavaScript 5.0

The light or dark mode used to display the attribution. By default, the mode is inherited from the Calcite's mode. You can override the value to style the attribution alongside the map or scene content.

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 background color of the Map component.

let view = new MapView({
  container: "viewDiv",
  map: map,
  background: { // autocasts new ColorBackground()
    color: "magenta" // autocasts as new Color()
  }
});

Specifies a basemap for the map. The basemap is a set of layers that give geographic context to the view and the other operational layers in the map. It can either be set using a basemap ID string (see values), Basemap or BasemapStyle.

Read more

Represents the view for a single basemap after it has been added to the map.

Since

ArcGIS Maps SDK for JavaScript 5.0

Indicates if the view component can zoom in.

Since

ArcGIS Maps SDK for JavaScript 5.0

Indicates if the view component can zoom out.

Represents the view's center point; when setting the center, you may pass a Point instance, numbers representing a longitude/latitude pair ([-100.4593, 36.9014]), or a string attribute representing a longitude/latitude pair ("-100.4593, 36.9014"). Setting the center immediately changes the current view. For animating the view, see this component's goTo() method.

The returned Point object is always in the spatial reference of the view and may be modified internally. To persist the returned object, create a clone using clone() method.

Notes

• If the spatial reference of center set in the constructor does not match the spatialReference of the view, then the projectOperator will be loaded dynamically.
• At runtime, the projectOperator must be loaded when setting the center to a spatial reference that doesn't match the view spatial reference. You can check if the projectOperator is loaded prior to setting the center by calling isLoaded() method. If it is not yet loaded, you can call load() method.

<arcgis-map zoom="4" center="-98, 39"></arcgis-map>

// Sets the initial center point of the map component to lon/lat coordinates
// lon/lat will be projected to match the spatial reference of the view
const viewElement = document.querySelector("arcgis-map");
viewElement.center = [-98, 39]; // lon, lat

// Updates the view's center point to a pre-determined Point object
let centerPoint = new Point({
  x: 12804.24,
  y: -1894032.09,
  spatialReference: {
    wkid: view.spatialReference  // wkid 2027
  }
});
const viewElement = document.querySelector("arcgis-map");
view.center = centerPoint;

// the point's spatialReference does not match the view's spatialReference
// the projectOperator will be used to project the point to match
// the view's spatialReference
const centerPoint = new Point({
  x: -8746995,
  y: 4352308,
  spatialReference: {
    wkid: 8857
  }
});
if (!projectOperator.isLoaded()) {
  await projectOperator.load();
}
const viewElement = document.querySelector("arcgis-map");
viewElement.center = centerPoint;

Specifies constraints to scale, zoom, and rotation that may be applied to the map.

See also

• TileInfo#create()

• Zoom and LODs

view.constraints = {
  geometry: { // Constrain lateral movement to Lower Manhattan
    type: "extent",
    xmin: -74.020,
    ymin:  40.700,
    xmax: -73.971,
    ymax:  40.73
  },
  minScale: 500000, // User cannot zoom out beyond a scale of 1:500,000
  maxScale: 0, // User can overzoom tiles
  rotationEnabled: false // Disables map rotation
};

// This snippet shows how to set the MapView scale 1:1 while generating additional LODs for the MapView.constraints.
const spatialReference = new SpatialReference({
  wkid: 2154
});
const center = new Point({
  x: 0,
  y: 0,
  spatialReference
});

// Create LODs from level 0 to 31
const tileInfo = TileInfo.create({
  spatialReference,
  numLODs: 32
});
const lods = tileInfo.lods;

let view = new MapView({
  container: "viewDiv",
  map,
  scale: 1,
  center,
  spatialReference,
  constraints: {
    lods: lods,
    snapToZoom: false
  }
});

Indicates whether a layer's displayFilterInfo is honored when rendering layers in the view. If false, display filters are ignored and all features are rendered.

The extent represents the visible portion of a map within the view as an instance of Extent. Setting the extent immediately changes the view without animation. To animate the view, see this component's goTo() method. When the view is rotated, the extent does not update to include the newly visible portions of the map.

Notes

• If the spatial reference of extent set does not match the spatialReference of the view, then the projectOperator will be loaded dynamically.
• At runtime, the projectOperator must be loaded when setting the extent to a spatial reference that doesn't match the view spatial reference. You can check if the projectOperator is loaded prior to setting the extent by calling isLoaded() method. If it is not yet loaded, you can call the load method.

A rejected view indicates a fatal error making it unable to display.

See also

• tryFatalErrorRecovery()

reactiveUtils.when(
  () => view.fatalError,
  () => {
    console.error("Fatal Error! View has lost its WebGL context. Attempting to recover...");
    view.tryFatalErrorRecovery();
  }
);

Applies a display filter on the view for a specific set of floor levels. It can filter the map display on floor-aware layers by zero or more level IDs.

Gamepad input specific configuration settings.

Allows for adding graphics directly to the default graphics in the View.

See also

• Graphic

• GraphicsLayer

• Intro to graphics

// Adds a graphic to the View
graphics.add(pointGraphic);

// Removes a graphic from the View
graphics.remove(pointGraphic);

Specifies the surface properties for the map.

See also

• ElevationLayer

• Ground

// Use the world elevation service
const map = new Map({
  basemap: "topo-vector",
  ground: "world-elevation"
});

// Create a map with the world elevation layer overlaid by a custom elevation layer
const worldElevation = new ElevationLayer({
  url: "//elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"
});
const customElevation = new ElevationLayer({
  url: "https://my.server.com/arcgis/rest/service/MyElevationService/ImageServer"
});
const map = new Map({
  basemap: "topo-vector",
  ground: new Ground({
   layers: [ worldElevation, customElevation ]
  })
});

Since

ArcGIS Maps SDK for JavaScript 5.0

Indicates whether the attribution is hidden in the view.

Esri requires that when you use an ArcGIS Online basemap in your app, the map must include Esri attribution and you must be licensed to use the content. For detailed guidelines on working with attribution, please visit the official attribution in your app documentation. For information on terms of use, see the Terms of Use FAQ.

Since

ArcGIS Maps SDK for JavaScript 4.32

Represents a collection of HighlightOptions objects which can be used to highlight features throughout an application. Highlighting works by applying highlight options to one or more features. You can configure these options (such as color or opacity) to define how a feature will be visually emphasized.

A maximum of six HighlightOptions objects are supported in the collection, and they can be added, removed, and reordered freely. Their order in the collection determines priority, with the last object having the highest priority. If you apply more than one highlight to a feature, the one that is last within the collection will be applied. The HighlightOptions object must be part of this collection in order to be applied to features.

To highlight a feature, use the highlight() method on the relevant LayerView instance. To apply specific HighlightOptions, include the name in the highlight() method's options parameter. If no name is provided, the feature will use the default highlight options.

The table below shows the default highlight options in the View's highlights collection if the collection has not been modified:

Highlight options name	Description	Default settings
default	The default highlight options. Used when layerView.highlight() is called without specifying any particular highlight options.	{ name: "default", color: "cyan", haloOpacity: 1, fillOpacity: 0.25, shadowColor: "black", shadowOpacity: 0.4, shadowDifference: 0.2}
temporary	The temporary highlight options, pre-configured for common use cases such as hovering over a feature in the view.	{ name: "temporary", color: "yellow", haloOpacity: 1, fillOpacity: 0.25, shadowColor: "black", shadowOpacity: 0.4, shadowDifference: 0.2 }

See also

• Sample: Highlight features by geometry

• Sample: Highlight point features

// Use the default highlights collection to apply a highlight to features when you hover over them

// A handler can be used to remove any previous highlight when applying a new one
let hoverHighlight;

view.on("pointer-move", (event) => {
  // Search for the first feature in the featureLayer at the hovered location
  view.hitTest(event, { include: featureLayer }).then((response) => {
    if (response.results[0]) {
       const graphic = response.results[0].graphic;
       view.whenLayerView(graphic.layer).then((layerView) => {
         // Remove any previous highlight, if it exists
         hoverHighlight?.remove();
         // Highlight the hit features with the temporary highlight options, which are pre-configured for this use case
         hoverHighlight = layerView.highlight(graphic, { name: "temporary"});
       });
    }
  });
});

// Override the default highlights collection

const view = new MapView({
  map: map,
  container: "viewDiv",

  // Set the highlight options to be used in the view
  highlights: [
    { name: "default", color: "orange" },
    { name: "temporary", color: "magenta" },
    { name: "table", color: "cyan", fillOpacity: 0.5, haloOpacity: 0}
  ]
});

// Add highlight options to the collection after initialization

const selectionHighlightOptions = {
  name: "selection",
  color: "#ff00ff", // bright fuchsia
  haloOpacity: 0.8,
  fillOpacity: 0.2
};

// Add the options to the highlights collection at the first position
view.highlights.add(selectionGroup, 0);

Indicates whether the view is being interacted with (for example, when panning or via an interactive tool).

Since

ArcGIS Maps SDK for JavaScript 4.31

Contains indoor positioning system information for the map.

The ID of a WebMap from ArcGIS Online or ArcGIS Enterprise portal.

To configure the portal url you must set the portalUrl property on config before the Map component loads.

A collection containing a hierarchical list of all the created LayerViews of the operational layers in the map.

See also

• LayerView

Since

ArcGIS Maps SDK for JavaScript 4.34

An array of objects that encountered an error while loading the component or any of its dependencies (e.g., basemap, ground, layers, tables). You may inspect the errors by accessing each object's loadError property.

The magnifier allows for showing a portion of the view as a magnifier image on top of the view.

An instance of a Map object to display in the view.

Indication whether the view is being navigated (for example when panning).

Options to configure the navigation behavior of the View.

// Disable the gamepad usage, single touch panning, panning momentum and mouse wheel zooming.
const view = new MapView({
  container: "viewDiv",
  map: new Map({
    basemap: "satellite"
  }),
  center: [176.185, -37.643],
  zoom: 13,
  navigation: {
    gamepad: {
      enabled: false
    },
    actionMap: {
      dragSecondary: "none", // Disable rotating the view with the right mouse button
      mouseWheel: "none" // Disable zooming with the mouse wheel
    },
    browserTouchPanEnabled: false,
    momentumEnabled: false,
  }
});

Padding to make the map's center and extent work off a subsection of the full map. This is particularly useful when layering UI elements or semi-transparent content on top of portions of the map.

See also

• Sample: Map padding

A Popup widget object that displays general content or attributes from layers in the map. Consider using the popupElement (beta), which represents the Popup component, instead.

By default, the popup property is an empty object that allows you to set the popup options. A Popup instance is automatically created and assigned to the view's popup when the user clicks on the view and popupEnabled is true, when the openPopup() method is called, or when some widgets need the popup, such as Search. If popup is null, the popup instance will not be created.

See also

• popupElement

• popupDisabled

• openPopup()

Since

ArcGIS Maps SDK for JavaScript 5.0

beta

Indicates whether the popup component (beta) is enabled as the default popup. When set to true, the popupElement property (representing the component) will be used for popups instead of the popup property (representing the widget).

Note: This is a beta feature and may change in future releases. At version 6.0, the Popup component will be used by default instead of the Popup widget and the popup-component-enabled attribute will no longer be necessary.

See also

• popupElement

<arcgis-map item-id="WEBMAP-ID" popup-component-enabled></arcgis-map>

Controls whether the default popup opens automatically when users click on the view. This controls both the popupElement and popup properties. When set to true, the popup will not open on click or when triggered programmatically.

See also

• openPopup()

Since

ArcGIS Maps SDK for JavaScript 5.0

beta

A reference to the current arcgis-popup (beta). The popupComponentEnabled property must be set to true to use this property.

Note: This is a beta feature and may change in future releases.

See also

• popupComponentEnabled

<arcgis-map item-id="WEBMAP-ID" popup-component-enabled></arcgis-map>
<script type="module">
const viewElement = document.querySelector("arcgis-map");
await viewElement.viewOnReady();
viewElement.popupElement.dockEnabled = true;
viewElement.popupElement.dockOptions = {
    buttonEnabled: false,
    breakpoint: false,
    position: "top-right",
};
</script>

When true, this property indicates whether the view has successfully satisfied all dependencies, signaling that the following conditions are met:

• The view has a map. If map is a WebMap, then the map must be loaded.
• The view has a spatialReference, a center, and a scale. These also can be inferred by setting an extent.

When a view becomes ready it will resolve itself and invoke the callback defined in viewOnReady() where code can execute on a working view.

See also

• when()

Defines which anchor stays still while resizing the browser window. The default, center, ensures the view's center point remains constantly visible as the window size changes. The other options allow the respective portion of the view to remain visible when the window's size is changed.

Represents the current value of one pixel in the unit of the view's spatialReference. The value of resolution is calculated by dividing the view's extent width by its width.

The clockwise rotation of due north in relation to the top of the view in degrees. The view may be rotated by directly setting the rotation or by using the following mouse event: Right-click + Drag. Map rotation may be disabled by setting the rotationEnabled property in constraints to false. See the code snippet below for an example of this.

// Due north is rotated 90 degrees, pointing to the right side of the view
view.rotation = 90;

// Due north is rotated 180 degrees, pointing to the bottom of the view
view.rotation = 180;

// Due north is rotated 270 degrees, pointing to the left side of the view
view.rotation = 270;

// Due north is rotated 0 degrees, pointing to the top of the view (the default)
view.rotation = 0; // 360 or multiple of 360 (e.g. 720) works here as well.

// Disables map rotation
view.constraints = {
  rotationEnabled: false
};

Represents the map scale at the center of the view. Setting the scale immediately changes the view. For animating the view, see this component's goTo() method.

Since

ArcGIS Maps SDK for JavaScript 5.0

beta

The default SelectionManager for this view. Used to manage selections of features across layers.

The spatial reference of the view. This indicates the projected or geographic coordinate system used to locate geographic features in the map. You can change the spatialReference of the view after it is initialized by either directly changing this property, or by changing the basemap from the arcgis-basemap-gallery and arcgis-basemap-toggle components. Set spatialReferenceLocked property to true to prevent users from changing the view's spatial reference at runtime.

Prior to changing the spatial reference, check if the projectOperator is loaded by calling projectOperator.isLoaded() method. If it is not yet loaded, call projectOperator.load() method. If the projectOperator is not loaded, the view's center will default to [0, 0] in the new spatial reference of the view and a console error will be thrown.

Notes

• LayerViews not compatible with the view's spatial reference are not displayed. In such case, the layer view's suspended property is true and spatialReferenceSupported property is false.
• When setting view's spatial reference, the center, extent or viewpoint properties are projected to the new spatial reference. The scale and rotation properties are adjusted to keep the content of the map at the same size and orientation on screen.
• To ensure TileLayers and VectorTileLayers are displayed in a basemap correctly, the spatialReference of the view must be set match their tileInfo's spatial reference.
• Switching spatial reference with an imageCoordinateSystem is not supported.

See also

• spatialReferenceLocked

const viewElement = document.querySelector("arcgis-map");
// check if the projectOperator is loaded
if (!projectOperator.isLoaded()) {
  // load the projectOperator if it is not loaded
  projectOperator.load().then(() => {
   // change the spatial reference of the map component to equal earth projection
    viewElement.spatialReference = new SpatialReference({
      wkid: 54035 //equal earth projection
    });
  });
} else {
  // the projectOperator is already loaded.
  // change the spatial reference of the view to equal earth projection
  viewElement.spatialReference = new SpatialReference({
    wkid: 54035 //equal earth projection
  });
}

Since

ArcGIS Maps SDK for JavaScript 4.34

Indicates if the map's spatialReference can be changed after it is ready. The default is false, indicating the map's spatialReference can be changed at runtime. When true, basemaps with spatial references that do not match the map's spatial reference will be disabled in arcgis-basemap-gallery and arcgis-basemap-toggle components and the map's spatialReference cannot be changed at runtime.

Indication whether the view is animating, being navigated with or resizing.

Indicates if the view is visible on the page.

This property specifies the base colors used by some components to render graphics and labels.

See also

• Theme

• Sample - Color theming for interactive tools

// Update the theme to use purple graphics
// and slightly transparent green text
view.theme = new Theme({
  accentColor: "purple",
  textColor: [125, 255, 13, 0.9]
});

The view's time extent. Time-aware layers display their temporal data that falls within the view's time extent. Setting the view's time extent is similar to setting the spatial extent because once the time extent is set, the view updates automatically to conform to the change.

// Create a csv layer from an online spreadsheet.
let csvLayer = new CSVLayer({
  url: "http://test.com/daily-magazines-sold-in-new-york.csv",
  timeInfo: {
    startField: "SaleDate" // The csv field contains date information.
  }
});

// Create a mapview showing sales for the last week of March 2019 only.
const view = new MapView({
  map: map,
  container: "viewDiv",
  timeExtent: {
    start: new Date("2019, 2, 24"),
    end:   new Date("2019, 2, 31")
  }
});

Defines the time zone of the view. The time zone property determines how dates and times are represented to the user, but the underlying data is unchanged.

See also

• wikipedia - List of tz database time zones

// Date and time will be displayed in Pacific/Auckland (NZ) time zone
const view = new MapView({
  map: map,
  container: "viewDiv",
  timeZone: "Pacific/Auckland"
});

Indicates whether the view is being updated by additional data requests to the network, or by processing received data.

The MapView instance created and managed by the component. Accessible once the component is fully loaded.

Represents the current view as a Viewpoint or point of observation on the view. Setting the viewpoint immediately changes the current view. For animating the view, see this component's goTo() method.

Since

ArcGIS Maps SDK for JavaScript 4.31

The visibleArea represents the visible portion of a Map within the view as an instance of a Polygon. This is similar to the view MapView#extent but is a more accurate representation of the visible area especially when the view is rotated. An example use of the visible area is to spatially filter visible features in a layer view query.

See also

• MapView#extent

Represents the level of detail (LOD) at the center of the map. A zoom level (or scale) is a number that defines how large or small the contents of a map appear in a Map component. Zoom level is a number usually between 0 (global view) and 23 (very detailed view) and is used as a shorthand for predetermined scale values. A value of -1 means the map has no LODs. When setting the zoom value, the component converts it to the corresponding scale, or interpolates it if the zoom is a fractional number.

Setting the zoom immediately changes the current view. For animating the view, see this component's goTo() method. Setting this property in conjunction with center is a convenient way to set the initial extent of the view.

Closes the popup.

Creates a promise that resolves once the component is fully loaded.

const arcgisMap = document.querySelector("arcgis-map");
document.body.append(arcgisMap);
await arcgisMap.componentOnReady();
console.log("arcgis-map is ready to go!");

Destroys the view, and any associated resources, including its map, popup, and UI elements.

Sets the view to a given target.

Returns hit test results from each layer that intersects the specified screen coordinates. The results are organized as an array of objects containing different result types.

The following layer types will return all features if a hit is made on intersecting features: FeatureLayer, CatalogLayer, CSVLayer, GeoJSONLayer, GeoRSSLayer, GraphicsLayer, KMLLayer, MapNotesLayer, OGCFeatureLayer, StreamLayer, SubtypeSublayer, VectorTileLayer, and WFSLayer.

The ParquetLayer hit result returns only the topmost feature when the hit occurs on overlapping features in a ParquetLayer.

The VectorTileLayer hit test result contains an array of objects containing a graphic. The graphic returns attributes of a style layer. In addition, the graphic's origin contains the style layer's id and layer index within the vector tile style. Spatial information about the actual feature represented in the style layer is returned only if the style layer is a symbol layer. Otherwise, the graphic's geometry is null.

The MediaLayer hit test result contains all media elements if the hit is made on intersecting elements. The RouteLayer hit test result contains all route elements if the hit is made on intersecting elements.

If the polygon feature's symbol style is set to none, the hitTest method will not return results when the fill is clicked. However, it will return results when the outline is clicked. To get results when clicking the fill, set the color to a transparent color instead.

viewElement.addEventListener("arcgisViewClick", (event) => {
   viewElement.hitTest(event.detail).then((response) => {
      const result = response.results[0];
      if (result?.type === "graphic") {
         const { longitude, latitude } = result.mapPoint;
         console.log(`Hit graphic at (${longitude}, ${latitude})`, result.graphic);
      } else {
         console.log("Did not hit any graphic");
      }
   });
});

// get screenpoint from view's click event
viewElement.addEventListener("arcgisViewClick", async (event) => {
  // Search for all media elements only on included mediaLayer at the clicked location
  const response = await viewElement.hitTest(event.detail, {
    include: {mediaLayer}
  });
  // if media elements are returned from the mediaLayer, do something with results
  if (response.results.length){
    // do something
    console.log(response.results.length, "elements returned");
  }
});

Opens the popup at the given location with content defined either explicitly with content or driven from the PopupTemplate of input features.

Create a screenshot of the current view.

Call this method to clear any fatal errors resulting from a lost WebGL context.

Since

ArcGIS Maps SDK for JavaScript 4.33

viewOnReady() may be leveraged once an instance of the component and its underlying view is created and ready. This method takes two input parameters, a callback function and an errback function, and returns a promise. The callback executes when the promise resolves, and the errback executes if the promise is rejected.

See also

• Watch for changes - waiting for components or views to be ready

const viewElement = document.querySelector("arcgis-map");
await viewElement.viewOnReady();
// The view is now ready to be used.
viewElement.map.add(new FeatureLayer({...}));

Since

ArcGIS Maps SDK for JavaScript 4.34

Gets the analysis view created for the given analysis object.

Read more

Gets the LayerView created on the view for the given layer.

Read more

Since

ArcGIS Maps SDK for JavaScript 5.0

Zooms in the view component by a factor of 2.

Since

ArcGIS Maps SDK for JavaScript 5.0

Zooms out the view component by a factor of 2.