ESM: import LinkChartView from "@arcgis/core/views/LinkChartView.js";
CDN: const LinkChartView = await $arcgis.import("@arcgis/core/views/LinkChartView.js");
Class: @arcgis/core/views/LinkChartView
Since: ArcGIS Maps SDK for JavaScript 4.31
LinkChartView is a 2D view that displays a WebLinkChart. A LinkChartView instance must be created to render a WebLinkChart. For a map to be visible to the user in the DOM, a LinkChartView must be created and reference a minimum of two objects: a WebLinkChart instance and a DOM element. Each is set in the map and container properties respectively.
Example
// Create a new LinkChartView
const view = new LinkChartView({
container: "viewDiv",
map: new WebLinkChart({
portalItem: {
id: "e62b3b3c9e37400d91648fb0a8801e8a",
}
})
});
Constructors
new LinkChartView(properties)
Parameter
optionalSee the properties for a list of all the properties that may be passed into the constructor.
Show inherited properties Hide inherited properties
Name Type Summary Class allLayerViews Collection<LayerView>Collection containing a flat list of all the created LayerViews related to the basemap, operational layers, and group layers in this view.
View animation ViewAnimation|null|undefinedRepresents an ongoing view animation initialized by goTo().
View2D background ColorBackground|null|undefinedThe background color of the MapView.
View2D basemapView BasemapViewRepresents the view for a single basemap after it has been added to the map.
View breakpoints ObjectA convenience property used for defining the breakpoints on the height and width of the view.
View2D center PointRepresents the view's center point; when setting the center, you may pass a Point instance or an array of numbers representing a longitude/latitude pair ([-100.4593, 36.9014]
).
Specifies constraints to scale, zoom, and rotation that may be applied to the MapView.
View2D container HTMLDivElement|null|undefinedThe id
or node representing the DOM element containing the view.
The name of the class.
Accessor displayFilterEnabled BooleanIndicates whether displayFilters are honored across all layers in the view.
View extent ExtentThe extent represents the visible portion of a map within the view as an instance of Extent.
View2D fatalError Error|null|undefinedA fatal error returned when the view loses its WebGL context.
View floors Collection<string>Applies a display filter on the view for a specific set of floor levels.
View2D focused BooleanIndicates if the browser focus is on the view.
View2D graphics Collection<Graphic>Allows for adding graphics directly to the default graphics in the View.
View height NumberThe height of the view in pixels read from the view container element.
View2D heightBreakpoint StringA convenience property indicating the general size of the view's height.
View2D highlightOptions HighlightOptionsOptions for configuring the highlight.
View2D highlights Collection<HighlightOptions>Represents a collection of HighlightOptions objects which can be used to highlight features throughout an application.
View input InputOptions to configure input handling of the View.
View interacting BooleanIndication whether the view is being interacted with (for example when panning or by an interactive tool).
View layerViews Collection<LayerView>A collection containing a hierarchical list of all the created LayerViews of the operational layers in the map.
View magnifier MagnifierThe magnifier allows for showing a portion of the view as a magnifier image on top of the view.
View map WebLinkChart|null|undefinedThe WebLinkChart displayed in the view.
LinkChartView navigating BooleanIndication whether the view is being navigated (for example when panning).
View navigation NavigationOptions to configure the navigation behavior of the View.
View orientation StringA convenience property indicating the view's orientation.
View2D padding ObjectUse the padding property to make the center, and extent, etc.
View popup Popup|null|undefinedA Popup object that displays general content or attributes from layers in the map.
View2D popupEnabled BooleanControls whether the popup opens when users click on the view.
View2D ready BooleanWhen true
, this property indicates whether the view successfully satisfied all dependencies, signaling that the following conditions are met.
Provides more granular information about the view's process of becoming ready.
View resizeAlign StringDefines which anchor stays still while resizing the browser window.
View2D resizing BooleanIndicates if the view is being resized.
View2D resolution NumberRepresents the size of one pixel in map units.
View2D rotation NumberThe clockwise rotation of due north in relation to the top of the view in degrees.
View2D scale NumberRepresents the map scale at the center of the view.
View2D size Number[]An array containing the width and height of the view in pixels, e.g.
View2D spatialReference SpatialReferenceThe spatial reference of the view.
View2D spatialReferenceLocked BooleanIndicates if the MapView's spatialReference can be changed after it is initialized.
View2D stationary BooleanIndication whether the view is animating, being navigated with or resizing.
View suspended BooleanIndicates if the view is visible on the page.
View2D theme Theme|null|undefinedThis property specifies the base colors used by some widgets and components to render graphics and labels.
View tileInfo TileInfo|null|undefinedThe tiling scheme information of the view.
View2D timeExtent TimeExtent|null|undefinedThe view's time extent.
View timeZone StringDefines the time zone of the view.
View2D ui DefaultUIExposes the default widgets available in the view and allows you to toggle them on and off.
View2D updating BooleanIndicates whether the view is being updated by additional data requests to the network, or by processing received data.
View viewpoint ViewpointRepresents the current view as a Viewpoint or point of observation on the view.
View2D visibleArea Polygon|null|undefinedThe visibleArea represents the visible portion of a map within the view as an instance of a Polygon.
View2D width NumberThe width of the view in pixels read from the view container element.
View2D widthBreakpoint StringA convenience property indicating the general size of the view's width.
View2D zoom NumberRepresents the level of detail (LOD) at the center of the view.
View2D Property DetailsCollection containing a flat list of all the created LayerViews related to the basemap, operational layers, and group layers in this view.
Represents an ongoing view animation initialized by goTo(). You may watch this property to be notified of the animation's state.
Example
reactiveUtils.watch(
() => view.animation,
(response) => {
if(response?.state === "running"){
console.log("Animation in progress");
} else{
console.log("No animation");
}
}
);
The background color of the MapView. If the view's map changes, the view's background
is reset to the map's background, even if the user set it previously.
Example
let view = new MapView({
container: "viewDiv",
map: map,
background: { // autocasts new ColorBackground()
color: "magenta" // autocasts as new Color()
}
});
Represents the view for a single basemap after it has been added to the map.
Inherited
Property breakpoints Object
A convenience property used for defining the breakpoints on the height and width of the view. The sizes specified here determine the values of the widthBreakpoint and heightBreakpoint properties depending on the view's size.
Setting up breakpoints can aid in responsive app design. It does this by watching width and height breakpoints. This is helpful as it removes the need for multiple @media
calls. Instead of listening for the view's size and/or resizes property, you can set up a watch handler for either the widthBreakpoint or heightBreakpoint properties of the view.
Please refer to the styling guide for additional information on working with this.
Example
// Instead of watching the size or resizing properties
reactiveUtils.watch(() => view.size, () => {});
reactiveUtils.watch(() => view.resizing, () => {});
// Set up a watch handle for breakpoint
reactiveUtils.watch(
() => view.widthBreakpoint,
(breakpoint) => {
switch (breakpoint) {
case "xsmall":
// do something
break;
case "small":
case "medium":
case "large":
case "xlarge":
// do something else
break;
default:
}
}
);
Represents the view's center point; when setting the center, you may pass a Point instance or an array of numbers representing a longitude/latitude pair ([-100.4593, 36.9014]
). Setting the center immediately changes the current view. For animating the view, see goTo().
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 Point.clone().
Notes
center
set in the constructor does not match the spatialReference of the view, then projection engine will be loaded dynamically.center
to a spatial reference that doesn't match the view spatial reference. You can check if the projection engine is loaded prior to setting the center by calling projection.isLoaded(). If it is not yet loaded, you can call projection.load().Examples
// Sets the initial center point of the view to lon/lat coordinates
// lon/lat will be projected to match the spatial reference of the view
let view = new MapView({
center: [-112, 38]
});
// Updates the view's center point to a pre-determined Point object
let pt = new Point({
x: 12804.24,
y: -1894032.09,
spatialReference: {
wkid: view.spatialReference // wkid 2027
}
});
view.center = pt;
const centerPoint = new Point({
x: -8746995,
y: 4352308,
spatialReference: {
wkid: 8857
}
});
if (!projection.isLoaded()) {
// load the projection engine if it is not loaded
await projection.load();
}
view.center = centerPoint;
Specifies constraints to scale, zoom, and rotation that may be applied to the MapView. The constraints.lods
should be set in the MapView constructor, if the map does not have a basemap or when the basemap does not have tileInfo. See Zoom and LODs section to learn more how MapView's zoom and LODs work. See the object specification below.
An array of LODs. If not specified, this value is read from the Map. It is possible to generate additional LODs via the TileInfo.create() method. This is useful in cases where the default amount of LODs provided are not sufficient. One example of when this is needed is when setting the view scale 1:1. Additionally, this property may be autocast.
The area in which the user is allowed to navigate laterally. Only Extent and Polygon geometry types are supported. Z-values are ignored. This property is honored by interactive MapView navigation and goTo(). This property may be autocast.
The minimum scale the user is allowed to zoom to within the view.
The maximum scale the user is allowed to zoom to within the view. Setting this value to 0
allows the user to overzoom layer tiles.
The minimum zoom level the user is allowed to zoom to within the view.
The maximum zoom level the user is allowed to zoom to within the view. Setting this value to 0
allows the user to over-zoom layer tiles.
Default Value:true
When true
, the view snaps to the next LOD when zooming in or out. When false
, the zoom is continuous. This does not apply when zooming in/out using two finger pinch in/out.
Default Value:true
Indicates whether the user can rotate the map.
A read-only property that specifies the levels of detail (LODs) read from the Map.
A read-only property that specifies the minimum zoom level the user is allowed to zoom to within the view.
A read-only property that specifies the maximum zoom level the user is allowed to zoom to within the view.
A read-only property that specifies the minimum scale the user is allowed to zoom to within the view.
A read-only property that specifies the maximum scale the user is allowed to zoom to within the view.
Examples
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
}
});
The id
or node representing the DOM element containing the view. This is typically set in the view's constructor.
Examples
// Sets container to the DOM id
let view = new MapView({
container: "viewDiv" // ID of the HTML element that holds the view
});
// Sets container to the node
let viewNode = document.getElementById("viewDiv");
let view = new SceneView({
container: viewNode
});
Inherited
Property declaredClass Stringreadonly
The name of the class. The declared class name is formatted as esri.folder.className
.
Inherited
Property displayFilterEnabled Boolean
Since: ArcGIS Maps SDK for JavaScript 4.32 View since 4.0, displayFilterEnabled added at 4.32.
Indicates whether displayFilters are honored across all layers in the view. If false
, display filters are ignored on all layers and all features are rendered. To ignore display filters on a per-layer basis, set the layer's displayFilterEnabled property to false
.
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 goTo(). When the view is rotated, the extent does not update to include the newly visible portions of the map.
The returned Extent object is an internal reference which may be modified internally. To persist the returned object, create a copy using Extent.clone().
Notes
extent
set in the constructor does not match the spatialReference of the view, then projection engine will be loaded dynamically.extent
to a spatial reference that doesn't match the view spatial reference. You can check if the projection engine is loaded prior to setting the extent by calling projection.isLoaded(). If it is not yet loaded, you can call projection.load().Default Value:null
Example
// the projection engine must be loaded in the app if the spatial reference
// of the view does not match the spatial reference of the extent
const extent = new Extent({
xmin: -13056650,
ymin: 6077558,
xmax: -13055709,
ymax: 6077938,
spatialReference: new SpatialReference({wkid:3857})
});
view.extent = extent; // Updates the view without animation
A fatal error returned when the view loses its WebGL context. Watch this property to properly handle the error and attempt to recover the WebGL context.
Example
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.
Inherited
Property focused Booleanreadonly
Indicates if the browser focus is on the view.
Allows for adding graphics directly to the default graphics in the View.
Examples
// Adds a graphic to the View
view.graphics.add(pointGraphic);
// Removes a graphic from the View
view.graphics.remove(pointGraphic);
Inherited
Property height Numberreadonly
The height of the view in pixels read from the view container element.
The view container needs to have a height greater than 0 to be displayed.
Inherited
Property heightBreakpoint String
A convenience property indicating the general size of the view's height. This value is determined based on where the view's height falls in the ranges defined in the breakpoints property. See the table below for a list of possible values. Use the breakpoints property to override the default thresholds.
Please refer to the styling guide for additional information on working with this.
Possible Value Description Default thresholds (pixels) xsmall The height of the view is smaller than the value set in thexsmall
breakpoint. < 545 small The height of the view is between the values set in the xsmall
and small
breakpoints. 545 - 768 medium The height of the view is between the values set in the small
and medium
breakpoints. 769 - 992 large The height of the view is between the values set in the medium
and large
breakpoints. 993 - 1200 xlarge The height of the view is larger than the value set in the large
breakpoint. > 1200
Possible Values:"xsmall" |"small" |"medium" |"large" |"xlarge"
Example
reactiveUtils.watch(
() => view.heightBreakpoint === "xsmall",
() => {
// clear the view's default UI components if
// the app is used on a mobile device
view.ui.components = [];
}
);
Options for configuring the highlight. Use the highlight method on the appropriate LayerView to highlight a feature. The layerView's highlightOptions
will take precedence over the MapView's highlightOptions
if both properties are set.
Example
const view = new MapView({
map: map,
highlightOptions: {
color: [255, 255, 0, 1],
haloOpacity: 0.9,
fillOpacity: 0.2
}
});
Since: ArcGIS Maps SDK for JavaScript 4.32 View since 4.0, highlights added at 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.
In a 2D MapView, a layerView's highlightOptions will take precedence over the MapView's highlights
if both properties are set.
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 whenlayerView.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 }
Examples
// 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);
Inherited
Property input Inputreadonly
Options to configure input handling of the View.
Example
// Make gamepad events to emit independently of focus.
view.input.gamepad.enabledFocusMode = "none";
Inherited
Property interacting Booleanreadonly
Indication whether the view is being interacted with (for example when panning or by an interactive tool).
Inherited
Property magnifier Magnifierreadonly
The magnifier allows for showing a portion of the view as a magnifier image on top of the view.
Inherited
Property navigating Booleanreadonly
Indication whether the view is being navigated (for example when panning).
Options to configure the navigation behavior of the View.
Example
// 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,
}
});
Inherited
Property orientation Stringreadonly
A convenience property indicating the view's orientation. See the table below for a list of possible values.
Please refer to the styling guide for additional information on working with this.
Possible Value Description landscape The width of the view is greater than its height. portrait The width of the view is equal to or smaller than its height.Possible Values:"landscape" |"portrait"
Inherited
Property padding Object
Use the padding property to make the center, and extent, etc. work off a subsection of the full view. This is particularly useful when layering UI elements or semi-transparent content on top of portions of the view. See the view padding sample for an example of how this works.
The left padding (in pixels).
optionalThe top padding (in pixels).
optionalThe right padding (in pixels).
optionalThe bottom padding (in pixels).
Default Value:{left: 0, top: 0, right: 0, bottom: 0}
A Popup object that displays general content or attributes from layers in the map.
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.
Examples
// Set the view's popup to a new Popup instance.
// The popup will show anytime a popup is called such as when selecting features or displaying a Search result.
view.popup = new Popup();
// Set the popup to a PopupOptions object with popup properties set such as the dock options.
// The popup will show anytime a popup is called.
view.popup = {
dockEnabled: true,
dockOptions: {
position: "top-left",
breakpoint: false
}
};
// Set the popup to null. This disables the popup so it will never show up.
view.popup = null;
Inherited
Property popupEnabled Boolean
Controls whether the popup opens when users click on the view.
When true
, a Popup instance is created and assigned to view.popup the first time the user clicks on the view, unless popup is null
. The popup then processes the click event.
When false
, the click event is ignored and popup is not created for features but will open for other scenarios that use a popup, such as displaying Search results.
Example
// Disable the popup from automatically appearing and
// open the popup manually using a click event.
view.popupEnabled = false;
view.on("click", (event)=> {
view.openPopup({
// Set properties for the manually opened popup
...
});
});
Inherited
Property ready Booleanreadonly
When true
, this property indicates whether the view successfully satisfied all dependencies, signaling that the following conditions are met.
0
.When a view becomes ready it will resolve itself and invoke the callback defined in when() where code can execute on a working view. Subsequent changes to a view's readiness would typically be handled by watching view.ready
and providing logic for cases where the map or container change.
Default Value:false
Inherited
Property readyState Stringreadonly
Since: ArcGIS Maps SDK for JavaScript 4.32 View since 4.0, readyState added at 4.32.
Provides more granular information about the view's process of becoming ready. This property helps manage view properties when the view fails to become ready, such as when the basemap fails to load.
The following are the possible expected values and their descriptions:
Value Descriptionloading
The view is currently loading information from the map. ready
The view is ready. This is similar to the ready
property. missing-map
The view is missing a map. Set the view's map property. missing-container
The view is missing a container. Set the view's container property. empty-map
The view's map has no layers. Add layers to the map. rendering-error
The view failed to render. This is similar to the fatalError
property. map-content-error
The view failed to find information from the map and couldn't derive the spatialReference. Verify that the map
correctly loaded with the loadError
property, as well as its basemap, and the first layer in the map's layers collection. Alternatively, set a valid center
, scale
, and spatialReference
.
Possible Values:"loading" |"missing-map" |"missing-container" |"empty-map" |"map-content-error" |"rendering-error" |"ready"
Examples
// Watch the view's readyState immediately after its initialization.
reactiveUtils.watch(
() => view.readyState,
(state) => {
switch (state) {
case "missing-map":
// Map is missing. Set a default map.
view.map = new Map({ basemap: "streets" });
break;
}
},
{
initial: true // fire the callback immediately after initialization.
}
);
const view = new MapView({
container: "viewDiv",
map: new Map({
basemap: {
baseLayers: [
new TileLayer({
url: "my-failing-tiled-service"
})
]
}
});
reactiveUtils.watch(() => view.readyState, (state) => {
switch (state) {
case "map-content-error":
// Defaults to a different map in case of failure
view.map = new Map({ basemap: "streets" });
break;
case "rendering-error":
view.tryFatalErrorRecovery();
break;
default:
console.log("View is not ready:", state);
}
});
Inherited
Property resizeAlign String
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.
Possible Values:"center" |"left" |"right" |"top" |"bottom" |"top-left" |"top-right" |"bottom-left" |"bottom-right"
Inherited
Property resizing Booleanreadonly
Indicates if the view is being resized.
Inherited
Property resolution Numberreadonly
Represents the size of one pixel in map units. The value of resolution can be found by dividing the extent width by the view's width.
Inherited
Property rotation Number
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.
Examples
// 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
};
Inherited
Property scale Number
Represents the map scale at the center of the view. Setting the scale immediately changes the view. For animating the view, see goTo().
Example
view.scale = 24000; // Sets the map scale in the view's center to 1:24,000
Inherited
Property size Number[]readonly
An array containing the width and height of the view in pixels, e.g. [width, height]
.
The spatial reference of the view. This indicates the projected or geographic coordinate system used to locate geographic features in the map. Starting at version 4.23, you can change the spatialReference of the MapView after it is initialized by either directly changing this property, or by changing the basemap from the BasemapGallery or BasemapToggle widgets. 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 projection engine is loaded by calling projection.isLoaded(). If it is not yet loaded, call projection.load() method. If the projection engine 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.
Examples
// check if the projection engine is loaded
if (!projection.isLoaded()) {
// load the projection engine if it is not loaded
projection.load().then(() => {
// change the spatial reference of the view to equal earth projection
view.spatialReference = new SpatialReference({
wkid: 54035 //equal earth projection
});
});
} else {
// the projection engine is already loaded.
// change the spatial reference of the view to equal earth projection
view.spatialReference = new SpatialReference({
wkid: 54035 //equal earth projection
});
}
const basemap = await changeBasemap();
const spatialReference = await findSpatialReference(basemap);
// check if basemap has the same spatial reference as the view if they are not equal
// then check if the projection engine is loaded. load the projection engine if it is not loaded.
// If loaded, then simply change view.spatialReference to match the basemap spatialReference
if (spatialReference && !view.spatialReference.equals(spatialReference)) {
if (!projection.isLoaded()) {
// load the projection engine if it is not loaded
await projection.load();
}
view.spatialReference = spatialReference;
}
// change the basemap
map.basemap = basemap;
async function changeBasemap() {
let basemap;
if (map.basemap.title === "OpenStreetMap Vector Basemap (Blueprint - WGS84)"){
basemap = new Basemap({
portalItem: { // Spilhaus - one ocean basemap
id: "5639ccf22d4c4830ab815c4f9c9319bb"
}
});
} else {
basemap = osm84;
}
return basemap;
}
async function findSpatialReference(basemap) {
await basemap.load();
if (basemap.spatialReference) {
return basemap.spatialReference;
}
const layer = basemap.baseLayers.at(0);
if (!layer) {
return null;
}
await layer.load();
return layer.spatialReference;
}
Inherited
Property spatialReferenceLocked Boolean
Indicates if the MapView's spatialReference can be changed after it is initialized. The default is false
indicating the view's spatialReference can be changed at runtime. When true
, basemaps with spatial references that do not match the MapView's spatial reference will be disabled in BasemapGallery and BasemapToggle widgets and the view spatialReference cannot be changed at runtime.
Inherited
Property stationary Booleanreadonly
Indication whether the view is animating, being navigated with or resizing.
Inherited
Property suspended Booleanreadonly
Indicates if the view is visible on the page. When true
, the view is not visible and it stops rendering and updating data. Set to true
when one of the following conditions are met:
display
is set to none
(display:none
).When the view container's css style visibility
is set to hidden
, this property is set to false
, and the view is hidden but it stills renders and updates data.
This property specifies the base colors used by some widgets and components to render graphics and labels. This only affects those components that would otherwise use the default orange pattern.
Example
// 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 tiling scheme information of the view.
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.
Example
// 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")
}
});
Inherited
Property timeZone String
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. Changing the time zone will have the following effect:
ChangeTimeZone($feature.dateField, "system")
) to display dates in another time zone regardless of web map time zone. Alternatively they can construct Date values in the context of a specific time zone (e.g. Date(2013, 1, 1, 10, 00, 00, 00, "UTC")
).date
and timestamp-offset
fields, will be displayed in the view's time zone by default in the following widgets: Bookmarks, Editor, Feature, FeatureForm, Features, FeatureTable, Legend, Popup and TimeSlider.The time zone can be set to one of the following values:
Possible Values
Value Description system Dates and times will be displayed in the time zone of the device or browser. unknown Dates and times will be displayed based on the time zone that has been defined for the layer. No adjustments are made to the display of date info. TimeSlider is disabled. Specified IANA time zone Dates and times will be displayed in the specified IANA time zone. See wikipedia - List of tz database time zones.Example
// Date and time will be displayed in Pacific/Auckland (NZ) time zone
const view = new MapView({
map: map,
container: "viewDiv",
timeZone: "Pacific/Auckland"
});
Exposes the default widgets available in the view and allows you to toggle them on and off. See DefaultUI for more details.
Examples
let toggle = new BasemapToggle({
view: view,
nextBasemap: "hybrid"
});
// Adds an instance of BasemapToggle widget to the
// top right of the view.
view.ui.add(toggle, "top-right");
// Moves the zoom and BasemapToggle widgets to the
// bottom left of the view.
view.ui.move([ "zoom", toggle ], "bottom-left");
// Removes all the widgets from the bottom left of the view
view.ui.empty("bottom-left");
// Removes the compass widget from the view
view.ui.remove("compass");
// Removes all default UI components, except Attribution.
// Passing an empty array will remove all components.
view.ui.components = [ "attribution" ];
Inherited
Property updating Booleanreadonly
Indicates whether the view is being updated by additional data requests to the network, or by processing received data.
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 goTo().
The returned Viewpoint object is an internal reference which may be modified internally. To persist the returned object, create a copy using Viewpoint.clone().
Notes
viewpoint
set in the constructor does not match the spatialReference of the view, then projection engine will be loaded dynamically.viewpoint.targetGeometry
to a spatial reference that doesn't match the view spatialReference. You can check if the projection engine is loaded prior to setting the viewpoint.targetGeometry by calling projection.isLoaded(). If it is not yet loaded, you can call projection.load().The visibleArea represents the visible portion of a map within the view as an instance of a Polygon. This is similar to the view 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.
Inherited
Property width Numberreadonly
The width of the view in pixels read from the view container element.
The view container needs to have a width greater than 0 to be displayed.
Inherited
Property widthBreakpoint String
A convenience property indicating the general size of the view's width. This value is determined based on where the view's width falls in the ranges defined in the breakpoints property. See the table below for a list of possible values. Use the breakpoints property to override the default thresholds.
Please refer to the styling guide for additional information on working with this.
Possible Value Description Default thresholds (pixels) xsmall The width of the view is smaller than the value set in thexsmall
breakpoint. < 545 small The width of the view is between the values set in the xsmall
and small
breakpoints. 545 - 768 medium The width of the view is between the values set in the small
and medium
breakpoints. 769 - 992 large The width of the view is between the values set in the medium
and large
breakpoints. 993 - 1200 xlarge The width of the view is larger than the value set in the large
breakpoint. > 1200
Possible Values:"xsmall" |"small" |"medium" |"large" |"xlarge"
Example
reactiveUtils.when(
() => view.widthBreakpoint === "xsmall",
() => {
// clear the view's default UI components if
// the app is used on a mobile device
view.ui.components = [];
}
);
Inherited
Property zoom Number
Represents the level of detail (LOD) at the center of the view. A zoom level or scale is a number that defines how large or small the contents of a map appear in a map view. 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 view has no LODs. When setting the zoom value, map view converts it to the corresponding scale, or interpolates it if the zoom is a fractional number. MapView can display maps with different projections at a full range of scales, and so use scale rather than zoom level.
Setting the zoom immediately changes the current view. For animating the view, see goTo(). Setting this property in conjunction with center is a convenient way to set the initial extent of the view.
Examples
view.zoom = 3; // Sets the LOD to 3 (small map scale)
view.zoom = 18; // Sets the LOD to 18 (large map scale)
// Set the zoom level and center in the constructor
let view = new MapView({
zoom: 10,
center: [-120, 34],
map: map
});
Show inherited methods Hide inherited methods
Method DetailsInherited
Method addHandles(handleOrHandles, groupKey)
Adds one or more handles which are to be tied to the lifecycle of the object. The handles will be removed when the object is destroyed.
// Manually manage handles
const handle = reactiveUtils.when(
() => !view.updating,
() => {
wkidSelect.disabled = false;
},
{ once: true }
);
this.addHandles(handle);
// Destroy the object
this.destroy();
Parameters
Handles marked for removal once the object is destroyed.
groupKey *
optionalKey identifying the group to which the handles should be added. All the handles in the group can later be removed with Accessor.removeHandles(). If no key is provided the handles are added to a default group.
Inherited
Method closePopup()
Closes the popup.
Example
// Closes the popup if it's open
if(view.popup.visible){
view.closePopup();
}
Inherited
Method destroy()
Destroys the view, and any associated resources, including its map, popup, and UI elements. These can no longer be used once the view has been destroyed. To prevent these components from being destroyed, remove them from the view before calling destroy()
.
// remove popup and legend from the view so that they are not destroyed
const popup = view.popup;
view.popup = null;
view.ui.remove(legend);
// unset map from the view so that it is not destroyed
const map = view.map;
view.map = null;
// destroy the view and any remaining associated resources
view.destroy();
Inherited
Method emit(type, event){Boolean}
Emits an event on the instance. This method should only be used when creating subclasses of this class.
Parameters
The name of the event.
optionalThe event payload.
Returns
Type Description Booleantrue
if a listener was notified
Inherited
Method goTo(target, options){Promise}
Sets the view to a given target. The target parameter can be one of the following:
[longitude, latitude]
pair of coordinatestarget
, center
, scale
and rotation
properties (with target
being any of the types listed above). The center
property is provided as a convenience to animate the MapView.center and is equivalent to specifying the target
with the center Point.This function returns a promise which resolves as soon as the new view has been set to the target. If the transition is animated, then the ongoing animation can be obtained using MapView.animation. If setting the view to the new target fails, the promise returned by the goTo() method rejects with an error. Use a catch statement, to handle the error:
view.goTo({
center: [-126, 49]
})
.catch(function(error) {
if (error.name != "AbortError") {
console.error(error);
}
});
If a tiled map service is used as the basemap and snapToZoom
property is set to true
in constraints, the goTo
method will zoom in to fit the defined target
. If snapToZoom
property is set to false
, the goTo
method will zoom to the exact target
.
Since 4.30: The goTo
method now respects the user's preference for reduced motion. By default, goTo()
will animate, but when the user expresses a preference for reduced motion, goTo()
will navigate to the specified target without animation. It is possible to override the user's preference for reduced motion by configuring esriConfig.respectPrefersReducedMotion or on a per-call basis by specifying the animate
property. However, if you override the user's preference for reduced motion, you should consider slowing down animations by adjusting the speedFactor
or duration
in the options
parameter, or provide users with a way to slow down or stop the animation. Refer to implementing reduced motion in your applications for more information.
Parameters
The target location/viewpoint to animate to. When using an object for target
, use the properties in GoToTarget2D.
Animation options for controlling the duration and easing of the animation. See the properties defined in GoToOptions2D for object specifications.
Returns
Type Description Promise A promise that resolves when the view's extent updates to the extent defined intarget
.
Examples
let pt = new Point({
latitude: 49,
longitude: -126
});
// go to the given point
view.goTo(pt);
let opts = {
duration: 5000 // Duration of animation will be 5 seconds
};
// go to point at LOD 15 with custom duration
view.goTo({
target: pt,
zoom: 15
}, opts);
// go to same point using center and zoom
view.goTo({
center: [-126, 49],
zoom: 15
});
Inherited
Method hasEventListener(type){Boolean}
Indicates whether there is an event listener on the instance that matches the provided event name.
Returns
Type Description Boolean Returns true if the class supports the input event.Inherited
Method hasHandles(groupKey){Boolean}
Returns true if a named group of handles exist.
Parameter
groupKey *
optionalA group key.
Returns
Type Description Boolean Returnstrue
if a named group of handles exist.
Example
// Remove a named group of handles if they exist.
if (obj.hasHandles("watch-view-updates")) {
obj.removeHandles("watch-view-updates");
}
hitTest(screenPoint, options){Promise<HitTestResult>}static
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.
Parameters
Specification
The screen coordinates (or native mouse event) of the click on the view.
optionalOptions to specify what is included in or excluded from the hitTest. Supported since 4.16.
Returns
Inherited
Method isFulfilled(){Boolean}
isFulfilled()
may be used to verify if creating an instance of the class is fulfilled (either resolved or rejected). If it is fulfilled, true
will be returned.
Returns
Type Description Boolean Indicates whether creating an instance of the class has been fulfilled (either resolved or rejected).Inherited
Method isRejected(){Boolean}
isRejected()
may be used to verify if creating an instance of the class is rejected. If it is rejected, true
will be returned.
Returns
Type Description Boolean Indicates whether creating an instance of the class has been rejected.Inherited
Method isResolved(){Boolean}
isResolved()
may be used to verify if creating an instance of the class is resolved. If it is resolved, true
will be returned.
Returns
Type Description Boolean Indicates whether creating an instance of the class has been resolved.Inherited
Method on(type, modifiersOrHandler, handler){Object}
Registers an event handler on the instance. Call this method to hook an event with a listener. See the Events summary table for a list of listened events.
Parameters
The name of the event or events to listen for.
Additional modifier keys to filter events. Please see Key Values for possible values. All the standard key values are supported. Alternatively, if no modifiers are required, the function will call when the event fires.
The following events don't support modifier keys: blur
, focus
, layerview-create
, layerview-destroy
, resize
.
The function to call when the event is fired, if modifiers were specified.
Returns
Type Description Object Returns an event handler with aremove()
method that can be called to stop listening for the event. Property Type Description remove Function When called, removes the listener from the event.
Example
view.on("click", function(event){
// event is the event handle returned after the event fires.
console.log(event.mapPoint);
});
// Fires `pointer-move` event when user clicks on "Shift"
// key and moves the pointer on the view.
view.on("pointer-move", ["Shift"], function(event){
let point = view2d.toMap({x: event.x, y: event.y});
bufferPoint(point);
});
Inherited
Method openPopup(options){Promise}
Opens the popup at the given location with content defined either explicitly with content
or driven from the PopupTemplate of input features. This method sets the popup's visible property to true
. Users can alternatively open the popup by directly setting the visible property to true
.
A Popup instance is created and assigned to popup the first time openPopup()
is called, unless popup is null
. The popup then processes the click event.
When calling this method, to prevent the popup from opening when clicking on the view, set popupEnabled to false
to stop event propagation on the view.
The popup will only display if the view's size constraints in dockOptions are met or the location property is set to a geometry.
Parameters
Specification
optionalDefines the location and content of the popup when opened.
Specification
optionalSets the title of the popup.
optionalSets the content of the popup.
optionalSets the popup's location, which is the geometry used to position the popup.
optionalDefault Value: false
When true
, indicates the popup should fetch the content of this feature and display it. If no PopupTemplate exists, a default template is created for the layer if defaultPopupTemplateEnabled = true
. In order for this option to work, there must be a valid view
and location
set.
Sets the popup's features, which populate the title and content of the popup based on each graphic's PopupTemplate.
optionalSets pending promises on the popup. The popup will display once the promises resolve. Each promise must resolve to an array of Graphics.
optionalDefault Value: false
This property enables multiple features in a popup to display in a list rather than displaying the first selected feature. Setting this to true
allows the user to scroll through the list of features returned from the query and choose the selection they want to display within the popup.
Default Value: false
When true
, indicates the popup should update its location for each paginated feature based on the selectedFeature's geometry.
Default Value: false
When true
, indicates that only the popup header will display.
Default Value: false
When true
, indicates that the focus should be on the popup after it has been opened.
Returns
Type Description Promise Resolves when the popup is opened. CallingopenPopup()
or closePopup()
again rejects the Promise.
Examples
// Opens a popup manually depending on where the user clicks with specified title and content.
view.on("click", (event)=>{
view.openPopup({
location: event.mapPoint,
title: "You clicked here",
content: "This is a point of interest"
});
});
// Opens popup at the location of the click event and displays
// content for the selected features if a popupTemplate is defined.
view.on("click", (event)=>{
view.openPopup({
location: event.mapPoint,
fetchFeatures: true
});
});
// Opens popup with the properties specified at the location of the click event
// and updates the popup location based on the selected feature's geometry.
view.openPopup({
title: "You clicked here",
content: "This is a point of interest",
location: event.mapPoint,
updateLocationEnabled: true
});
// Opens popup with the specified array of graphics and displays the
// features in a list (feature menu) at the location of the first graphic in the array.
view.openPopup({
features: graphics,
featureMenuOpen: true,
location: graphics[0].geometry
});
Inherited
Method removeHandles(groupKey)
Removes a group of handles owned by the object.
Parameter
groupKey *
optionalA group key or an array or collection of group keys to remove.
Example
obj.removeHandles(); // removes handles from default group
obj.removeHandles("handle-group");
obj.removeHandles("other-handle-group");
Inherited
Method toMap(screenPoint){Point}
Converts the given screen point to a map point. The screen point represents a point in terms of pixels relative to the top-left corner of the view.
Returns
Type Description Point The map point corresponding to the given screen point.Converts the given map point to a screen point. The screen point represents a point in terms of pixels relative to the top-left corner of the view.
Returns
Example
// get the screen point for the specified map point.
const mapPoint = {
x: -49.97,
y: 41.73,
spatialReference:{
wkid: 4326
}
};
const screenPoint = mapView.toScreen(mapPoint);
Inherited
Method tryFatalErrorRecovery()
Call this method to clear any fatal errors resulting from a lost WebGL context.
Example
reactiveUtils.when(
() => view.fatalError,
() => view.tryFatalErrorRecovery()
);
Inherited
Method when(callback, errback){Promise}
when()
may be leveraged once an instance of the class is created. This method takes two input parameters: a callback
function and an errback
function. The callback
executes when the instance of the class loads. The errback
executes if the instance of the class fails to load.
Parameters
optionalThe function to call when the promise resolves.
optionalThe function to execute when the promise fails.
Returns
Type Description Promise Returns a new promise for the result ofcallback
that may be used to chain additional functions.
Example
// Although this example uses MapView, any class instance that is a promise may use when() in the same way
let view = new MapView();
view.when(function(){
// This function will execute once the promise is resolved
}, function(error){
// This function will execute if the promise is rejected due to an error
});
Inherited
Method whenLayerView(layer){Promise<LayerView>}
Gets the LayerView created on the view for the given layer. The returned promise resolves when the layer view for the given layer has been created, or rejects with an error (for example if the layer is not part of the view, or if the layer type is not supported in this view).
Parameter
The layer for which to obtain its LayerView.
Returns
Type Description Promise<LayerView> Resolves to an instance of LayerView for the specified layer.Example
// Create a feature layer from a url pointing to a Feature Service
let layer = new FeatureLayer(url);
map.add(layer);
view.whenLayerView(layer)
.then(function(layerView) {
// The layerview for the layer
})
.catch(function(error) {
// An error occurred during the layerview creation
});
Show inherited events Hide inherited events
Name Type Summary Class blur {target: View,native: Object,defer: EventDefer}Fires when browser focus is moved away from the view.
View click {mapPoint: Point,x: Number,y: Number,button: Number,buttons: 0|1|2,type: "click",stopPropagation: Function,timestamp: Number,native: Object,defer: EventDefer}Fires after a user clicks on the view.
View double-click {mapPoint: Point,x: Number,y: Number,button: Number,buttons: 0|1|2,type: "double-click",stopPropagation: Function,timestamp: Number,native: Object,defer: EventDefer}Fires after double-clicking on the view.
View drag {action: "start"|"added"|"update"|"removed"|"end",x: Number,y: Number,origin: Object,origin.x: Number,origin.y: Number,button: 0|1|2,buttons: Number,type: "drag",radius: Number,angle: Number,stopPropagation: Function,timestamp: Number,native: Object,defer: EventDefer}Fires during a pointer drag on the view.
View focus {target: View,native: Object,defer: EventDefer}Fires when browser focus is on the view.
View hold {mapPoint: Point,x: Number,y: Number,button: 0|1|2,buttons: Number,type: "hold",stopPropagation: Function,timestamp: Number,native: Object,defer: EventDefer}Fires after holding either a mouse button or a single finger on the view for a short amount of time.
View immediate-click {mapPoint: Point,x: Number,y: Number,button: 0|1|2,buttons: Number,type: "immediate-click",stopPropagation: Function,timestamp: Number,native: Object,defer: EventDefer}Fires right after a user clicks on the view.
View immediate-double-click {mapPoint: Point,x: Number,y: Number,button: 0|1|2,buttons: Number,type: "immediate-double-click",stopPropagation: Function,timestamp: Number,native: Object,defer: EventDefer}Is emitted after two consecutive immediate-click events.
View key-down {repeat: Boolean,key: String,type: "key-down",stopPropagation: Function,timestamp: Number,native: Object,defer: EventDefer}Fires after a keyboard key is pressed.
View key-up {type: "key-up",key: String,stopPropagation: Function,timestamp: Number,native: Object,defer: EventDefer}Fires after a keyboard key is released.
View layerview-create {layer: Layer,layerView: LayerView}Fires after each layer in the map has a corresponding LayerView created and rendered in the view.
View layerview-create-error {layer: Layer,error: Error}Fires when an error occurs during the creation of a LayerView after a layer has been added to the map.
View layerview-destroy {layer: Layer,layerView: LayerView}Fires after a LayerView is destroyed and is no longer rendered in the view.
View mouse-wheel {x: Number,y: Number,deltaY: Number,type: "mouse-wheel",stopPropagation: Function,timestamp: Number,native: Object,defer: EventDefer}Fires when a wheel button of a pointing device (typically a mouse) is scrolled on the view.
View pointer-down {pointerId: Number,pointerType: "mouse"|"touch",x: Number,y: Number,button: Number,buttons: Number,type: "pointer-down",stopPropagation: Function,timestamp: Number,native: Object,defer: EventDefer}Fires after a mouse button is pressed, or a finger touches the display.
View pointer-enter {pointerId: Number,pointerType: "mouse"|"touch",x: Number,y: Number,button: Number,buttons: Number,type: "pointer-enter",stopPropagation: Function,timestamp: Number,native: Object,defer: EventDefer}Fires after a mouse cursor enters the view, or a display touch begins.
View pointer-leave {pointerId: Number,pointerType: "mouse"|"touch",x: Number,y: Number,button: Number,buttons: Number,type: "pointer-leave",stopPropagation: Function,timestamp: Number,native: Object,defer: EventDefer}Fires after a mouse cursor leaves the view, or a display touch ends.
View pointer-move {pointerId: Number,pointerType: "mouse"|"touch",x: Number,y: Number,button: Number,buttons: Number,type: "pointer-move",stopPropagation: Function,timestamp: Number,native: Object,defer: EventDefer}Fires after the mouse or a finger on the display moves.
View pointer-up {pointerId: Number,pointerType: "mouse"|"touch",x: Number,y: Number,button: Number,buttons: Number,type: "pointer-up",stopPropagation: Function,timestamp: Number,native: Object,defer: EventDefer}Fires after a mouse button is released, or a display touch ends.
View resize {oldWidth: Number,oldHeight: Number,width: Number,height: Number}Fires when the view's size changes.
View Event DetailsInherited
Event blur
Fires when browser focus is moved away from the view.
The view that the browser focus is moved away from.
A standard DOM KeyboardEvent.
A function that can be called to defer event propagation until the passed in asynchronous function is completed. Calling defer will stall the entire event pipeline and should be used with caution.
Inherited
Event click
Fires after a user clicks on the view. This event emits slightly slower than an immediate-click event to make sure that a double-click event isn't triggered instead. The immediate-click event can be used for responding to a click event without delay.
The point location of the click on the view in the spatial reference of the map.
x NumberThe horizontal screen coordinate of the click on the view.
y NumberThe vertical screen coordinate of the click on the view.
button NumberIndicates which mouse button was clicked.
buttons NumberIndicates the current mouse button state.
Value Description 0 left click (or touch) 1 middle click 2 right click type StringThe event type.
The value is always "click".
stopPropagation FunctionPrevents the event bubbling up the event chain.
timestamp NumberTime stamp (in milliseconds) at which the event was emitted.
native ObjectA standard DOM PointerEvent.
defer EventDeferA function that can be called to defer event propagation until the passed in asynchronous function is completed. Calling defer will stall the entire event pipeline and should be used with caution.
Examples
// Set up a click event handler and retrieve the screen point
view.on("click", function(event) {
// the hitTest() checks to see if any graphics in the view
// intersect the given screen x, y coordinates
view.hitTest(event)
.then(getGraphics);
});
view.on("click", function(event) {
// you must overwrite default click-for-popup
// behavior to display your own popup
view.popupEnabled = false;
// Get the coordinates of the click on the view
let lat = Math.round(event.mapPoint.latitude * 1000) / 1000;
let lon = Math.round(event.mapPoint.longitude * 1000) / 1000;
view.popup.open({
// Set the popup's title to the coordinates of the location
title: "Reverse geocode: [" + lon + ", " + lat + "]",
location: event.mapPoint // Set the location of the popup to the clicked location
content: "This is a point of interest" // content displayed in the popup
});
});
Inherited
Event double-click
Fires after double-clicking on the view.
The point location of the click on the view in the spatial reference of the map.
x NumberThe horizontal screen coordinate of the click on the view.
y NumberThe vertical screen coordinate of the click on the view.
button NumberIndicates which mouse button was clicked.
buttons NumberIndicates the current mouse button state.
Value Description 0 left click (or touch) 1 middle click 2 right click type StringThe event type.
The value is always "double-click".
stopPropagation FunctionPrevents the event bubbling up the event chain.
timestamp NumberTime stamp (in milliseconds) at which the event was emitted.
native ObjectA standard DOM PointerEvent.
defer EventDeferA function that can be called to defer event propagation until the passed in asynchronous function is completed. Calling defer will stall the entire event pipeline and should be used with caution.
Example
view.on("double-click", function(event) {
// The event object contains the mapPoint and the screen coordinates of the location
// that was clicked.
console.log("screen point", event.x, event.y);
console.log("map point", event.mapPoint);
});
Inherited
Event drag
Fires during a pointer drag on the view.
Indicates the state of the drag. The two values added
and removed
indicate a change in the number of pointers involved.
Possible Values:"start"|"added"|"update"|"removed"|"end"
x NumberThe horizontal screen coordinate of the pointer on the view.
y NumberThe vertical screen coordinate of the pointer on the view.
origin ObjectScreen coordinates of the start of the drag.
The horizontal screen coordinate of the pointer on the view.
y NumberThe vertical screen coordinate of the pointer on the view.
Indicates which mouse button was clicked at the start of the drag. See MouseEvent.button.
Value Description 0 left mouse button (or touch) 1 middle mouse button 2 right mouse button buttons NumberIndicates which mouse buttons are pressed when the event is triggered. See MouseEvent.buttons.
type StringThe event type.
The value is always "drag".
radius NumberThe radius of a sphere around the multiple pointers involved in this drag. Or 0 while only a single pointer is used.
angle NumberAmount of rotation (in degrees) since the last event of type start
.
Prevents the event bubbling up the event chain.
timestamp NumberTime stamp (in milliseconds) at which the event was emitted.
native ObjectA standard DOM MouseEvent.
defer EventDeferA function that can be called to defer event propagation until the passed in asynchronous function is completed. Calling defer will stall the entire event pipeline and should be used with caution.
Example
view.on("drag", function(event){
// Print out the current state of the
// drag event.
console.log("drag state", event.action);
});
Inherited
Event focus
Fires when browser focus is on the view.
The view that the browser focus is currently on.
A standard DOM KeyboardEvent.
A function that can be called to defer event propagation until the passed in asynchronous function is completed. Calling defer will stall the entire event pipeline and should be used with caution.
Inherited
Event hold
Fires after holding either a mouse button or a single finger on the view for a short amount of time.
The point location of the click on the view in the spatial reference of the map.
x NumberThe horizontal screen coordinate of the hold on the view.
y NumberThe vertical screen coordinate of the hold on the view.
button NumberIndicates which mouse button was held down. See MouseEvent.button.
Value Description 0 left mouse button (or touch) 1 middle mouse button 2 right mouse button buttons NumberIndicates which mouse buttons are pressed when the event is triggered. See MouseEvent.buttons.
type StringThe event type.
The value is always "hold".
stopPropagation FunctionPrevents the event bubbling up the event chain.
timestamp NumberTime stamp (in milliseconds) at which the event was emitted.
native ObjectA standard DOM PointerEvent.
defer EventDeferA function that can be called to defer event propagation until the passed in asynchronous function is completed. Calling defer will stall the entire event pipeline and should be used with caution.
Example
view.on("hold", function(event) {
// The event object contains the mapPoint and the screen coordinates of the location
// that was clicked.
console.log("hold at screen point", event.x, event.y);
console.log("hold at map point", event.mapPoint);
});
Inherited
Event immediate-click
Fires right after a user clicks on the view. In contrast to the click event, the immediate-click
event is emitted as soon as the user clicks on the view, and is not inhibited by a double-click event. This event is useful for interactive experiences that require feedback without delay.
The point location of the click on the view in the spatial reference of the map.
x NumberThe horizontal screen coordinate of the click on the view.
y NumberThe vertical screen coordinate of the click on the view.
button NumberIndicates which mouse button was clicked. See MouseEvent.button.
Value Description 0 left click (or touch) 1 middle click 2 right click buttons NumberIndicates which buttons are pressed when the event is triggered. See MouseEvent.buttons.
type StringThe event type.
The value is always "immediate-click".
stopPropagation FunctionPrevents the event bubbling up the event chain. Inhibits the associated click and double-click events.
timestamp NumberTime stamp (in milliseconds) at which the event was emitted.
native ObjectA standard DOM PointerEvent.
defer EventDeferA function that can be called to defer event propagation until the passed in asynchronous function is completed. Calling defer will stall the entire event pipeline and should be used with caution.
Example
// Set up an immediate-click event handler and retrieve the screen point
view.on("immediate-click", function(event) {
// the hitTest() checks to see if any graphics in the view
// intersect the given screen x, y coordinates
view.hitTest(event)
.then(getGraphics);
});
Inherited
Event immediate-double-click
Is emitted after two consecutive immediate-click events. In contrast to double-click, an immediate-double-click
cannot be prevented by use of stopPropagation
on the immediate-click event and can therefore be used to react to double-clicking independently of usage of the immediate-click event.
The point location of the click on the view in the spatial reference of the map.
x NumberThe horizontal screen coordinate of the click on the view.
y NumberThe vertical screen coordinate of the click on the view.
button NumberIndicates which mouse button was clicked. See MouseEvent.button.
Value Description 0 left click (or touch) 1 middle click 2 right click buttons NumberIndicates which buttons are pressed when the event is triggered. See MouseEvent.buttons.
type StringThe event type.
The value is always "immediate-double-click".
stopPropagation FunctionPrevents the event bubbling up the event chain.
timestamp NumberTime stamp (in milliseconds) at which the event was emitted.
native ObjectA standard DOM PointerEvent.
defer EventDeferA function that can be called to defer event propagation until the passed in asynchronous function is completed. Calling defer will stall the entire event pipeline and should be used with caution.
Inherited
Event key-down
Fires after a keyboard key is pressed.
Indicates whether this is the first event emitted due to the key press, or a repeat.
The key value that was pressed, according to the MDN full list of key values.
The event type.
The value is always "key-down".
Prevents the event bubbling up the event chain.
Time stamp (in milliseconds) at which the event was emitted.
A standard DOM KeyboardEvent.
A function that can be called to defer event propagation until the passed in asynchronous function is completed. Calling defer will stall the entire event pipeline and should be used with caution.
Example
// Zoom in when user clicks on "a" button
// Zoom out when user clicks on "s" button
view.on("key-down", function(event){
console.log("key-down", event);
if (event.key === "a"){
let zm = view.zoom + 1;
view.goTo({
target: view.center,
zoom: zm
});
}
else if(event.key == "s"){
let zm = view.zoom - 1;
view.goTo({
target: view.center,
zoom: zm
});
}
});
Inherited
Event key-up
Fires after a keyboard key is released.
The event type.
The value is always "key-up".
The key value that was released, according to the MDN full list of key values.
Prevents the event bubbling up the event chain.
Time stamp (in milliseconds) at which the event was emitted.
A standard DOM KeyboardEvent.
A function that can be called to defer event propagation until the passed in asynchronous function is completed. Calling defer will stall the entire event pipeline and should be used with caution.
Inherited
Event layerview-create
Fires after each layer in the map has a corresponding LayerView created and rendered in the view.
The layer in the map for which the layerView
was created.
The LayerView rendered in the view representing the layer in layer
.
Example
// This function fires each time a layer view is created for a layer in
// the map of the view.
view.on("layerview-create", function(event) {
// The event contains the layer and its layer view that has just been
// created. Here we check for the creation of a layer view for a layer with
// a specific id, and log the layer view
if (event.layer.id === "satellite") {
// The LayerView for the desired layer
console.log(event.layerView);
}
});
Inherited
Event layerview-create-error
Fires when an error occurs during the creation of a LayerView after a layer has been added to the map.
The layer in the map for which the view emitting this event failed to create a layer view.
An error object describing why the layer view could not be created.
Example
// This function fires each time an error occurs during the creation of a layerview
view.on("layerview-create-error", function(event) {
console.error("LayerView failed to create for layer with the id: ", event.layer.id);
});
Inherited
Event layerview-destroy
Fires after a LayerView is destroyed and is no longer rendered in the view. This happens for example when a layer is removed from the map of the view.
The layer in the map for which the layerView
was destroyed.
The LayerView that was destroyed in the view.
Inherited
Event mouse-wheel
Fires when a wheel button of a pointing device (typically a mouse) is scrolled on the view.
The horizontal screen coordinate of the click on the view.
The vertical screen coordinate of the click on the view.
Number representing the vertical scroll amount.
The event type.
The value is always "mouse-wheel".
Prevents the event bubbling up the event chain.
Time stamp (in milliseconds) at which the event was emitted.
A standard DOM WheelEvent.
A function that can be called to defer event propagation until the passed in asynchronous function is completed. Calling defer will stall the entire event pipeline and should be used with caution.
Example
view.on("mouse-wheel", function(event){
// deltaY value is positive when wheel is scrolled up
// and it is negative when wheel is scrolled down.
console.log(event.deltaY);
});
Inherited
Event pointer-down
Fires after a mouse button is pressed, or a finger touches the display.
Uniquely identifies a pointer between multiple down, move, and up events. Ids might get reused after a pointer-up event.
Indicates the pointer type.
Possible Values:"mouse"|"touch"
The horizontal screen coordinate of the pointer on the view.
The vertical screen coordinate of the pointer on the view.
Indicates which mouse button was clicked.
Indicates which mouse buttons are pressed when the event is triggered. See MouseEvent.buttons.
The event type.
The value is always "pointer-down".
Prevents the event bubbling up the event chain.
Time stamp (in milliseconds) at which the event was emitted.
A standard DOM PointerEvent.
A function that can be called to defer event propagation until the passed in asynchronous function is completed. Calling defer will stall the entire event pipeline and should be used with caution.
Inherited
Event pointer-enter
Fires after a mouse cursor enters the view, or a display touch begins.
Uniquely identifies a pointer between multiple events. Ids might get reused after a pointer-up event.
Indicates the pointer type.
Possible Values:"mouse"|"touch"
The horizontal screen coordinate of the pointer on the view.
The vertical screen coordinate of the pointer on the view.
Indicates which mouse button was clicked.
Indicates which mouse buttons are pressed when the event is triggered. See MouseEvent.buttons.
The event type.
The value is always "pointer-enter".
Prevents the event bubbling up the event chain.
Time stamp (in milliseconds) at which the event was created.
A standard DOM PointerEvent.
A function that can be called to defer event propagation until the passed in asynchronous function is completed. Calling defer will stall the entire event pipeline and should be used with caution.
Inherited
Event pointer-leave
Fires after a mouse cursor leaves the view, or a display touch ends.
Uniquely identifies a pointer between multiple events. Ids might get reused after a pointer-up event.
Indicates the pointer type.
Possible Values:"mouse"|"touch"
The horizontal screen coordinate of the pointer on the view.
The vertical screen coordinate of the pointer on the view.
Indicates which mouse button was clicked.
Indicates which mouse buttons are pressed when the event is triggered. See MouseEvent.buttons.
The event type.
The value is always "pointer-leave".
Prevents the event bubbling up the event chain.
Time stamp (in milliseconds) at which the event was created.
A standard DOM PointerEvent.
A function that can be called to defer event propagation until the passed in asynchronous function is completed. Calling defer will stall the entire event pipeline and should be used with caution.
Inherited
Event pointer-move
Fires after the mouse or a finger on the display moves.
Uniquely identifies a pointer between multiple down, move, and up events. Ids might get reused after a pointer-up event.
Indicates the pointer type.
Possible Values:"mouse"|"touch"
The horizontal screen coordinate of the pointer on the view.
The vertical screen coordinate of the pointer on the view.
Indicates which mouse button was clicked.
Indicates which mouse buttons are pressed when the event is triggered. See MouseEvent.buttons.
The event type.
The value is always "pointer-move".
Prevents the event bubbling up the event chain.
Time stamp (in milliseconds) at which the event was created.
A standard DOM PointerEvent.
A function that can be called to defer event propagation until the passed in asynchronous function is completed. Calling defer will stall the entire event pipeline and should be used with caution.
Example
// Fires `pointer-move` event when user clicks on "Shift"
// key and moves the pointer on the view.
view.on('pointer-move', ["Shift"], function(event){
let point = view.toMap({x: event.x, y: event.y});
bufferPoint(point);
});
Inherited
Event pointer-up
Fires after a mouse button is released, or a display touch ends.
Uniquely identifies a pointer between multiple down, move, and up events. Ids might get reused after a pointer-up event.
Indicates the pointer type.
Possible Values:"mouse"|"touch"
The horizontal screen coordinate of the pointer on the view.
The vertical screen coordinate of the pointer on the view.
Indicates which mouse button was clicked.
Indicates which mouse buttons are pressed when the event is triggered. See MouseEvent.buttons.
The event type.
The value is always "pointer-up".
Prevents the event bubbling up the event chain. Inhibits the associated immediate-click, click and double-click events.
Time stamp (in milliseconds) at which the event was created.
A standard DOM PointerEvent.
A function that can be called to defer event propagation until the passed in asynchronous function is completed. Calling defer will stall the entire event pipeline and should be used with caution.
Inherited
Event resize
Fires when the view's size changes.
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