ArcGIS API For Js 4.x Need event while save bookmarks

[SaiPeketi]

Hi, Could anyone please suggest me for the event to store the bookmarks in the session cookies. I'm able to see in 3.x https://developers.arcgis.com/javascript/3/jssamples/exp_bookmarks_stored_client_side.html. Is anyway to call a function that what it stored the bookmarks,

Thanks,

Sai

[Justin_Greco · Accepted solution]

There is bookmark-edit event for the Bookmarks widget, which is triggered when a bookmark is modified (name changed, extent changed), but there isn't an event for when a bookmark is added or removed.  You will need to use the after-changes event on the widgets bookmarks collection.

const storeBookmarks = (bookmarks) => {
  window.localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
};
require(["esri/views/MapView", "esri/WebMap", "esri/widgets/Bookmarks"], (MapView, WebMap, Bookmarks) => {
  const webmap = new WebMap({
    portalItem: {
      id: "70b726074af04a7e9839d8a07f64c039"
    }
  });

  const view = new MapView({
    map: webmap,
    container: "viewDiv"
  });

  const bookmarks = new Bookmarks({
    view: view,
    editingEnabled: true,
  });
  //load bookmarks from local storage
  if (window.localStorage.getItem('bookmarks')) {
    const bms = JSON.parse(window.localStorage.getItem('bookmarks'));
    bms?.forEach(bm => bm.viewpoint.targetGeometry.type = 'extent');
    bookmarks.bookmarks = bms;
  }
  view.ui.add(bookmarks, 'top-right');
  //store bookmarks when added or removed or reordered
  bookmarks.bookmarks.on('after-changes', () => storeBookmarks(bookmarks.bookmarks));
  //store boomarks when a bookmark is edited
  bookmarks.on('bookmark-edit', () => storeBookmarks(bookmarks.bookmarks));
});   

[SaiPeketi]

Thanks, @Justin_Greco . I'm able to save the bookmarks and refresh the browser to see the bookmarks but one issue is that it's going to the extent which I was set in the bookmark only it's zoom to that location.

Attached the code pen, in the sample i was set chicago as center of bookmark and refresh the app then it's going to scale of chicago but now it's showing Kansas as center.
https://codepen.io/SaiAnand-Peketi/pen/OJqErda

[Justin_Greco]

@SaiPeketi I updated the code above.  It was throwing an error that the geometry type wasn't being specified since its autocasting the targetGeometry of the viewpoint of the bookmarks.  When loading the bookmarks, I am just looping through the bookmarks and setting the targetGeometry type to extent.

  //load bookmarks from local storage
  if (window.localStorage.getItem('bookmarks')) {
    const bms = JSON.parse(window.localStorage.getItem('bookmarks'));
    bms?.forEach(bm => bm.viewpoint.targetGeometry.type = 'extent');
    bookmarks.bookmarks = bms;
  }

[SaiPeketi]

Thanks, @Justin_Greco. It's working fine now.