ArcGIS for JavaScript Cheat Sheet

cheat-sheet-arcgis-js-api.md

Add Tooltip to Feature in GraphicsLayer

Note: Works with ArcGIS for JavaScript 3.35, should work with 4.x

let layer = new GraphicsLayer();

layer.on("graphic-node-add", (event) => {

  const title = document.createElementNS("http://www.w3.org/2000/svg", "title");
  
  const isRestaurant = event.graphic.attributes.isRestaurant;
  if (isRestaurant) {
    event.node.setAttribute("style", "cursor: help;");
    title.innerHTML = event.graphic.attributes.name;
  }
  event.node.appendChild(title);

});

Make sure GraphicsLayer is always on top

Note: Works with ArcGIS for JavaScript 3.35, should work with 4.x

// _map is an instance of esri.map
// _layer is an instance of GraphicsLayer
// _initGraphicsLayer and _reorderGraphicsLayer are private functions of an object
// ...
_initGraphicsLayer: function () {
  // ...
  this._map.on("update-end", () => {
    this._reorderGraphicsLayer();
  });
},
_reorderGraphicsLayer: function () {
  const layers = this._map.getLayersVisibleAtScale(this._map.getScale());
  this._map.reorderLayer(this._layer, layers.length);
},
// ...

Load Feature using a Map Point

// map is an instance of esri.map
map.on("click", event => {
  fetch(`${mapServiceUrl}/query?` + new URLSearchParams({
   geometryType: "esriGeometryPoint",
   geometry: JSON.stringify(event.mapPoint),
   spatialRel: "esriSpatialRelWithin",
   f: "JSON",
   outSR: point.spatialReference.wkid,
   outField: "ObjectID,Field1,Field2",
  }))
    .then(response => response.json)
    .then(features => console.log(features));
});