Select to view content in your preferred language

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

490
4
Jump to solution
02-02-2024 12:02 PM
SaiPeketi
New Contributor III

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

Tags (3)
0 Kudos
1 Solution

Accepted Solutions
Justin_Greco
Occasional Contributor III

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

 

 

 

View solution in original post

4 Replies
Justin_Greco
Occasional Contributor III

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
New Contributor III

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

0 Kudos
Justin_Greco
Occasional Contributor III

@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
New Contributor III

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

0 Kudos