Magnifier

view.when(() => {
  view.magnifier.visible = true;

  const offset = view.magnifier.size / 2;
  view.magnifier.offset = { x: offset, y: offset };

  //The magnifier will be displayed whenever the cursor hovers over the map.
  view.on("pointer-move", function (event) {
    view.magnifier.position = { x: event.x, y: event.y };
  });
});

Property Overview

Property Details

declaredClass Stringreadonly inherited

The name of the class. The declared class name is formatted as esri.folder.className.

factor Number

Controls the amount of magnification to display. The larger the value, the more augmented the magnified image appears.

Default Value:1.5

maskEnabled Boolean

Indicates whether the mask image is enabled.

Default Value:true

maskUrl String

The mask url points to an image that determines the visible area of the magnified image (alpha channel). A default built-in circle mask with a diameter equal to the size of the magnifier is used when the maskUrl is null.

Default Value:null

offset ScreenPoint

The offset of the magnifier in pixels. The offset allows to adjust where the magnifier is drawn relative to its position.

Example

const offset = view.magnifier.size / 2;
view.magnifier.offset = { x: offset, y: offset };

overlayEnabled Boolean

Indicates whether the overlay image is enabled.

Default Value:true

overlayUrl String

The overlay url points to an image that is displayed on top of the magnified image. Note that the overlay image is not affected by the maskUrl. A default built-in image of a magnifier glass is used when the overlayUrl is null.

Default Value:null

position ScreenPoint

The position of the magnifier in pixels. The magnifier will not be displayed if the position is null.

Default Value:null

size Number

The size of the magnifier in pixels.

Default Value:120

visible Boolean

Indicates whether the magnifier is visible.

Default Value:true

Method Overview

Method Details

addHandles(handleOrHandles, groupKey)inherited

Since: ArcGIS Maps SDK for JavaScript 4.25

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

handleOrHandles WatchHandle|WatchHandle[] Handles marked for removal once the object is destroyed.

groupKey * optional Key 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.

hasHandles(groupKey){Boolean}inherited

Since: ArcGIS Maps SDK for JavaScript 4.25

Returns true if a named group of handles exist.

Parameter

groupKey * optional A group key.

Returns

Type	Description
Boolean	Returns true 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");
}

removeHandles(groupKey)inherited

Since: ArcGIS Maps SDK for JavaScript 4.25

Removes a group of handles owned by the object.

Parameter

groupKey * optional A 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");

Type Definitions

ScreenPoint

An object representing the location on the screen. The Magnifier.position represents an actual point on the screen, while the Magnifier.offset represents a location relative to the position of the magnifier.

Properties

x Number The x coordinate.

y Number The y coordinate.