Accessor

Since

ArcGIS Maps SDK for JavaScript 4.7

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

Set to true once the initialize function has executed.

Since

ArcGIS Maps SDK for JavaScript 4.21

Creates a subclass of the class calling this method.

See also

• Guide - Implementing Accessor

Gets the value stored for a property. It can be used when creating a class extending Accessor to get the value stored internally without calling the property getter. For example, this may be used to return a default value for a property when the property is accessed before a value is set on it.

Sets the stored value of a property. Calling _set directly updates the stored value and skip checks like defined in the @property() decoration like readOnly or type. This is typically used to update the stored value in a property setter, or to update a read only property.

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();

Since

ArcGIS Maps SDK for JavaScript 4.25

Returns true if a named group of handles exist.

Marks a property has changed. The next time the property is accessed, the getter for that property will be invoked. If the property is watched, the watcher callbacks will be called if the new value of the property has effectively changed.

Since

ArcGIS Maps SDK for JavaScript 4.25

Removes a group of handles owned by the object.

Sets the value of a property.

Call set() with a property name and a value to change the value of the property.

// setting the basemap of the map
map.set("basemap", "topo-vector");
// is equivalent to
map.basemap = "topo-vector";

// currying set
let updateViewScale = view.set.bind(view, "scale");
updateViewScale(5000);

set() can be called with the path to a property and a value. The property is not set if a property in the path doesn't exist.

// updating the title of the basemap
map.set("basemap.title", "World Topographic Map");

// is equivalent to
if (map.basemap != null) {
  map.basemap.title = "World Topographic Map";
}

An object with key-value pairs may be passed into set() to update multiple properties at once.

// setting a viewpoint on the view
view.set({
  center: [-4.4861, 48.3904],
  scale: 5000
});

// currying set
let updateView = view.set.bind(view);

updateView({
  center: [-4.4861, 48.3904],
  scale: 5000
});

Watches for property changes on the instance. For additional capabilities when observing changes on properties, see reactiveUtils.

Watching for property changes is essential for tracking changes on objects. To start watching for changes on a property, call watch() with the property name and a callback function that will execute each time the property changes.

let handle = mapview.watch("scale", function(newValue, oldValue, propertyName, target) {
  console.log(propertyName + " changed from " + oldValue + " to " + newValue);
});

To stop watching for changes, call the remove() method on the object that watch() returns.

handle.remove();

It is important to store the resulting objects from watch() to properly clean up the references.

let viewHandles = [];
function setView(view) {
  // remove the handles for the current view.
  viewHandles.forEach(function(handle) {
    handle.remove();
  });
  viewHandles.length = 0;

  this.view = view;

  // watch for properties on the newly set view.
  if (view) {
    viewHandles.push(
      view.watch("scale", scaleWatcher);
    );
  }
}

setView(mapView);
setView(null);

Like get() and set(), it is possible to watch for a property deep in the object hierarchy by passing a path. If a property in the path doesn't exist the watch callback is called with undefined.

let view = new SceneView({
  map: new Map({
    basemap: "streets-vector"
  })
});

view.watch("map.basemap.title", (newValue, oldValue) => {
  console.log("basemap's title changed from " + oldValue + " to " + newValue);
});

view.map.basemap = "topo-vector";
// output: "basemap's title changed from Streets to Topographic"

view.map = null;
// output: "basemap's title changed from Topographic to undefined"

Pass a comma delimited list of property paths, or an array of property paths, to watch multiple properties with the same callback. Use the third parameter of the callback call to determine what property changed.

view.watch("center, scale, rotation", (newValue, oldValue, propertyName) => {
  console.log(propertyName + " changed");
});

// equivalent of
view.watch(["center", "scale", "rotation"], (newValue, oldValue, propertyName) => {
  console.log(propertyName + " changed");
});

// equivalent of
let callback = (newValue, oldValue, propertyName) => {
  console.log(propertyName + " changed");
}
view.watch("center", callback);
view.watch("scale", callback);
view.watch("rotation", callback);

Accessor doesn't call the watch callbacks for a property immediately after its value changes. Instead, when a property's value changes and if that property is watched, Accessor schedules a notification which is then processed at a later time. Properties that change frequently like view.scale can be watched without having to throttle the callback.

// Divides the view.scale three times
view.watch("scale", (newValue, oldValue) => {
  console.log("view's scale changed from " + oldValue + " to " + newValue);
});
console.log("current view scale: " + view.scale);
view.scale = view.scale / 2;
view.scale = view.scale / 2;
view.scale = view.scale / 2;
console.log("current view scale: " + view.scale);

// output the following:
// current view scale: 36978595.474472
// current view scale: 4622324.434309
// view's scale changed from 36978595.474472 to 4622324.434309