Magnifier

AMD: require(["esri/views/Magnifier"], (Magnifier) => { /* code goes here */ });
ESM: import Magnifier from "@arcgis/core/views/Magnifier";
Class: esri/views/Magnifier
Inheritance: Magnifier Accessor
Since: ArcGIS API for JavaScript 4.19

The Magnifier allows end users to show a portion of the view as a magnified image. An instance of this class can be accessed through either MapView.magnifier or SceneView.magnifier.

magnifier-overlay

As you can see in the screenshot above, the Magnifier utilizes a default overlay image of a magnifier glass. The overlay image is set using the overlayUrl property. You can disable the overlay image by setting the Magnifier.overlayEnabled to false. The following demonstrates using a Magnifier without an overlay image.

magnifier-no-overlay

The Magnifier contains a default mask image, which is set using the maskUrl, and determines the visible area of the magnified image. Be default, the magnified area is in the shape of a circle. The following demonstrates an example of a mask image set in the shape of a square. Note that the overlayEnabled was set to false in this example as well to hide the overlay image, and only display the magnified area.

magnifier-maskUrl

See also:
Example:
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 };
  });
});

Constructors

new Magnifier(properties)
Parameter:
properties Object
optional

See the properties for a list of all the properties that may be passed into the constructor.

Property Overview

Any properties can be set, retrieved or listened to. See the Working with Properties topic.
Show inherited properties Hide inherited properties
Name Type Summary Class
Stringmore details

The name of the class.

more detailsAccessor
Numbermore details

Controls the amount of magnification to display.

more detailsMagnifier
Booleanmore details

Indicates whether the mask image is enabled.

more detailsMagnifier
Stringmore details

The mask url points to an image that determines the visible area of the magnified image (alpha channel).

more detailsMagnifier
ScreenPointmore details

The offset of the magnifier in pixels.

more detailsMagnifier
Booleanmore details

Indicates whether the overlay image is enabled.

more detailsMagnifier
Stringmore details

The overlay url points to an image that is displayed on top of the magnified image.

more detailsMagnifier
ScreenPointmore details

The position of the magnifier in pixels.

more detailsMagnifier
Numbermore details

The size of the magnifier in pixels.

more detailsMagnifier
Booleanmore details

Indicates whether the magnifier is visible.

more detailsMagnifier

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

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.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.