topic Re: Bookmark in arcgis Javascript 4.x in ArcGIS JavaScript Maps SDK Questions

Bookmark in arcgis Javascript 4.x

ADITYAKUMAR1 — Sat, 18 Nov 2017 06:40:39 GMT

Hi,

I am working with ArcGIS javascript 4.x. In my current requirement I need to add bookmark to my map but in 4.x version of Javascript I am not able to capture the extent as well as the default bookmark functionality is not available.

Any leads on this will be of great help.

Thanks

Aditya Kumar

Re: Bookmark in arcgis Javascript 4.x

RobertScheitlin__GISP — Sun, 12 Dec 2021 04:05:49 GMT

Aditya,

Until the 4.x api get a bookmark widget you will have to manually build one. Here is a sample for that (I just manually grabbed div layout and css rules from 3.x api):

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Bookmarks - 4.5</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
  <script src="https://js.arcgis.com/4.5/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    .bookmark-container {
      position: absolute;
      top: 100px;
      left: 15px;
      padding: 1rem;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #eeeeee;
      box-sizing: border-box;
    }

    .esriBookmarks {
      width: 100%;
      position: relative;
    }

    .esriBookmarkTable {
      border-spacing: 0;
      border-collapse: collapse;
    }

    .esriBookmarkItem {
      padding: 5px 10px;
      width: 100%;
      border: 1px solid transparent;
      height: 36px;
      cursor: pointer;
    }

    .esriBookmarkLabel {
      position: relative;
      float: left;
      overflow: hidden;
      line-height: 26px;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: left;
      vertical-align: middle;
      margin-left: 0;
      user-select: none;
      pointer-events: none;
    }

    .esriBookmarkHighlight {
      background-color: #e2f1fb;
    }

    *, *:before, *:after {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
  </style>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "dojo/dom-class",
      "dojo/query",
      "dojo/on",
      "esri/geometry/Extent",
      "dojo/domReady!"
    ], function(
      Map, MapView, domClass, dojoQuery, on, Extent
    ) {

      var map = new Map({
        basemap: "gray"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-119.4179, 36.7783],
        zoom: 6
      });

      var bookMarkItems = dojoQuery(".esriBookmarkItem");
      bookMarkItems.forEach(function(bookMarkItem){
        on(bookMarkItem, "click", followBookmark);
        on(bookMarkItem, "mouseover", addMouseOverClass);
        on(bookMarkItem, "mouseout", removeMouseOverClass);
      });

      function addMouseOverClass(evt) {
        domClass.add(evt.target, "esriBookmarkHighlight");
      }

      function removeMouseOverClass(evt) {
        domClass.remove(evt.target, "esriBookmarkHighlight");
      }

      function followBookmark(evt) {
        var extArr = evt.target.dataset.extent.split(",");
        view.goTo(new Extent({xmin: extArr[0], ymin: extArr[1], xmax: extArr[2], ymax: extArr[3], spatialReference: {wkid: parseInt(extArr[4])}}),
          {duration: 2000});
      }

    });
  </script>
</head>

<body>
  <div id="viewDiv">
    <div class="bookmark-container">
      <div class="esriBookmarks" id="bookmarks">
        <div class="esriBookmarkList">
          <div class="esriBookmarkTable">
            <div class="esriBookmarkItem" data-extent="-12975151.579395358,3993919.9969406975,-12964144.647322308,4019507.292159126,102100">
              <div class="esriBookmarkLabel">Palm Springs, CA</div>
            </div>
            <div class="esriBookmarkItem" data-extent="-13052123.666878553,4024962.9850527253,-13041116.734805504,4050550.280271154,102100">
              <div class="esriBookmarkLabel">Redlands, Ca</div>
            </div>
            <div class="esriBookmarkItem" data-extent="-13048836.874662295,3844839.127898948,-13037829.942589246,3870426.4231173764,102100">
              <div class="esriBookmarkLabel">San Diego, CA</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Bookmark in arcgis Javascript 4.x

ADITYAKUMAR1 — Mon, 20 Nov 2017 06:55:56 GMT

Thanks a lot Robert, the example is really helpful but I am not able to capture the extent.

Re: Bookmark in arcgis Javascript 4.x

RobertScheitlin__GISP — Mon, 20 Nov 2017 11:16:52 GMT

Aditya,

So you need the user to be able to add a bookmark at runtime or do you just need code so that you can populate the extent attribute in my code?

Re: Bookmark in arcgis Javascript 4.x

ADITYAKUMAR1 — Mon, 20 Nov 2017 15:29:36 GMT

Yes Robert

Re: Bookmark in arcgis Javascript 4.x

RobertScheitlin__GISP — Sun, 12 Dec 2021 04:05:52 GMT

Here is an update:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Bookmarks - 4.5</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
  <script src="https://js.arcgis.com/4.5/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    .bookmark-container {
      position: absolute;
      top: 100px;
      left: 15px;
      padding: 1rem;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #eeeeee;
      box-sizing: border-box;
    }

    .esriBookmarks {
      width: 100%;
      position: relative;
    }

    .esriBookmarkTable {
      border-spacing: 0;
      border-collapse: collapse;
    }

    .esriBookmarkItem {
      padding: 5px 10px;
      width: 100%;
      border: 1px solid transparent;
      height: 36px;
      cursor: pointer;
    }

    .esriBookmarkItem > *{
      pointer-events: none;
    }

    .esriBookmarkLabel {
      position: relative;
      float: left;
      overflow: hidden;
      line-height: 26px;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: left;
      vertical-align: middle;
      margin-left: 0;
      user-select: none;
    }

    .esriBookmarkHighlight {
      background-color: #e2f1fb;
    }

    *, *:before, *:after {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }

    .esriAddBookmark {
      color: #6e6e6e;
    }
  </style>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "dojo/dom-class",
      "dojo/query",
      "dojo/on",
      "esri/geometry/Extent",
      "dojo/dom-construct",
      "dojo/domReady!"
    ], function(
      Map, MapView, domClass, dojoQuery, on, Extent, domConstruct
    ) {

      var map = new Map({
        basemap: "gray"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-119.4179, 36.7783],
        zoom: 6
      });

      var bookMarkItems = dojoQuery(".esriBookmarkItem");
      bookMarkItems.forEach(function(bookMarkItem){
        on(bookMarkItem, "click", bookmarkEvent);
        on(bookMarkItem, "mouseover", addMouseOverClass);
        on(bookMarkItem, "mouseout", removeMouseOverClass);
      });

      function addMouseOverClass(evt) {
        domClass.add(evt.target, "esriBookmarkHighlight");
      }

      function removeMouseOverClass(evt) {
        domClass.remove(evt.target, "esriBookmarkHighlight");
      }

      function bookmarkEvent(evt) {
        if (domClass.contains(evt.target, "esriAddBookmark")){
          var bmTable = dojoQuery(".esriBookmarkTable")[0];
          var item = domConstruct.toDom('<div class="esriBookmarkItem" data-extent="' + view.extent.xmin+','+view.extent.ymin+','+view.extent.xmax+','+view.extent.ymax+','+view.extent.spatialReference.wkid + '"><div class="esriBookmarkLabel">New Bookmark</div></div>');
          domConstruct.place(item, bmTable, "last");
          on(item, "click", bookmarkEvent);
          on(item, "mouseover", addMouseOverClass);
          on(item, "mouseout", removeMouseOverClass);
          return;
        }

        var extArr = evt.target.dataset.extent.split(",");
        view.goTo(new Extent({xmin: extArr[0], ymin: extArr[1], xmax: extArr[2], ymax: extArr[3], spatialReference: {wkid: parseInt(extArr[4])}}),
          {duration: 2000});
      }

    });
  </script>
</head>

<body class="calcite">
  <div id="viewDiv">
    <div class="bookmark-container">
      <div class="esriBookmarks" id="bookmarks">
        <div class="esriBookmarkList">
          <div class="esriBookmarkTable">
            <div class="esriBookmarkItem" data-extent="-12975151.579395358,3993919.9969406975,-12964144.647322308,4019507.292159126,102100">
              <div class="esriBookmarkLabel">Palm Springs, CA</div>
            </div>
            <div class="esriBookmarkItem" data-extent="-13052123.666878553,4024962.9850527253,-13041116.734805504,4050550.280271154,102100">
              <div class="esriBookmarkLabel">Redlands, Ca</div>
            </div>
            <div class="esriBookmarkItem" data-extent="-13048836.874662295,3844839.127898948,-13037829.942589246,3870426.4231173764,102100">
              <div class="esriBookmarkLabel">San Diego, CA</div>
            </div>
          </div>
        </div>
        <div class="esriBookmarkItem esriAddBookmark">
          <span style="float:left; line-height:26px; padding-right: 4px;" class="esri-icon-plus" aria-label="add icon"></span>
          <div class="esriBookmarkLabel">Add Bookmark</div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Bookmark in arcgis Javascript 4.x

ADITYAKUMAR1 — Tue, 21 Nov 2017 05:32:34 GMT

Hey Robert,

Thanks a lot. This is exactly what I was looking for.

Re: Bookmark in arcgis Javascript 4.x

RobertScheitlin__GISP — Tue, 21 Nov 2017 12:27:28 GMT

Aditya,

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

Re: Bookmark in arcgis Javascript 4.x

Rocky_ — Tue, 31 Jul 2018 17:03:43 GMT

This is helpful for me. but Robert can you tell me how user can add names to these bookmarks...?

Re: Bookmark in arcgis Javascript 4.x

RobertScheitlin__GISP — Tue, 31 Jul 2018 18:56:43 GMT

RAJ,

When using the LAST code I posted to this thread you can edit a bookmark by clicking in the pencil icon or you can add a new bookmark my clicking the Add Boobkmark.

Re: Bookmark in arcgis Javascript 4.x

Rocky_ — Tue, 31 Jul 2018 19:20:18 GMT

Hi Robert,

adding a new bookmark function is working perfectly. but

Can't able to see any pencil icon on the page...

can you please tell me where it is...

Re: Bookmark in arcgis Javascript 4.x

RobertScheitlin__GISP — Tue, 31 Jul 2018 19:36:56 GMT

Are you sure you got the code from the latest post and not the first post I made on that thread?

Re: Bookmark in arcgis Javascript 4.x

Rocky_ — Tue, 31 Jul 2018 19:56:10 GMT

Yes Sir, Confirmed.. am asking about the latest one.. you post that one at Nov 20, 2017 8.29 AM...

cant able to see edit icon...

Re: Bookmark in arcgis Javascript 4.x

RobertScheitlin__GISP — Sun, 12 Dec 2021 04:05:57 GMT

I must have done another version in another thread.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Bookmarks - 4.5</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
  <script src="https://js.arcgis.com/4.5/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    .bookmark-container {
      position: absolute;
      top: 100px;
      left: 15px;
      padding: 1rem;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #eeeeee;
      box-sizing: border-box;
    }

    .esriBookmarks {
      width: 100%;
      position: relative;
    }

    .esriBookmarkTable {
      border-spacing: 0;
      border-collapse: collapse;
    }

    .esriBookmarkItem {
      padding: 5px 10px;
      width: 100%;
      border: 1px solid transparent;
      height: 36px;
      cursor: pointer;
    }

    .esriBookmarkItem>* {
      /*pointer-events: none;*/
    }

    .esriBookmarkLabel {
      pointer-events: none;
      position: relative;
      float: left;
      overflow: hidden;
      line-height: 26px;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: left;
      vertical-align: middle;
      margin-left: 0;
      user-select: none;
    }

    .esriBookmarkHighlight {
      background-color: #e2f1fb;
    }

    *,
    *:before,
    *:after {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }

    .esriAddBookmark {
      color: #6e6e6e;
    }

    .esriBookmarkEditBox {
      position: fixed;
      font-size: 14px;
      height: 34px;
      width: 200px;
      z-index: 999;
      padding: 0;
      margin: 0 10px;
      border: 0;
      border-bottom: 1px solid #007ac2;
      background: #fff
    }

    .esriBookmarkEditBox:focus {
      outline: none
    }

    .esriBookmarkRemoveImage,
    .esriBookmarkEditImage {
      float: right;
      width: 30px;
      cursor: pointer;
      font-family: "CalciteWebCoreIcons";
      speak: none;
      font-size: 16px;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      text-indent: 0;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      line-height: 26px;
      text-align: center;
    }

    .esriBookmarkItem:before {
      float: left;
      font-family: "CalciteWebCoreIcons";
      speak: none;
      font-size: 16px;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      text-indent: 0;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      content: "";
      color: inherit;
      line-height: 26px;
      margin-right: 5px;
    }

    .esriBookmarkRemoveImage:before {
      content: "\e600";
    }

    .esriBookmarkEditImage:before {
      content: "\e61b";
    }

    .esriAddBookmark:before {
      content: "\e620";
    }

    .esriBookmarkItem:after {
      content: "";
      display: table;
      clear: both;
    }
  </style>

  <script>
    var extents = [];
    require([
      "esri/Map",
      "esri/views/MapView",
      "dojo/dom",
      "dojo/dom-class",
      "dojo/query",
      "dojo/on",
      "esri/geometry/Extent",
      "dojo/dom-construct",
      "dojo/dom-geometry",
      "dojo/keys",
      "dojo/json",
      "dojo/_base/lang",
      "dojo/domReady!"
    ], function(
      Map, MapView, dom, domClass, dojoQuery, on, Extent, domConstruct, domGeom, keys, JSON, lang
    ) {

      var map = new Map({
        basemap: "gray"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-119.4179, 36.7783],
        zoom: 6
      });

      // Bookmark data objects
      var bookmarkJSON = {
        first: {
          "extent": {
            "xmin": -12975151.579395358,
            "ymin": 3993919.9969406975,
            "xmax": -12964144.647322308,
            "ymax": 4019507.292159126,
            "spatialReference": {
              "wkid": 102100,
              "latestWkid": 3857
            }
          },
          "name": "Palm Springs, CA"
        },
        second: {
          "extent": {
            "xmin": -13052123.666878553,
            "ymin": 4024962.9850527253,
            "xmax": -13041116.734805504,
            "ymax": 4050550.280271154,
            "spatialReference": {
              "wkid": 102100,
              "latestWkid": 3857
            }
          },
          "name": "Redlands, California"
        },
        third: {
          "extent": {
            "xmin": -13048836.874662295,
            "ymin": 3844839.127898948,
            "xmax": -13037829.942589246,
            "ymax": 3870426.4231173764,
            "spatialReference": {
              "wkid": 102100,
              "latestWkid": 3857
            }
          },
          "name": "San Diego, CA"
        },
      };


      function initBookmarksWidget() {
        var bmDiv = dom.byId("bookmarksDiv");
        domClass.add(bmDiv, "bookmark-container");
        var bookmarksdiv = domConstruct.create("div", {
          class: "esriBookmarks"
        }, bmDiv);
        var bmlistdiv = domConstruct.create("div", {
          class: "esriBookmarkList",
          style: {
            width: '250px'
          }
        }, bookmarksdiv);
        var bmTable = domConstruct.create("div", {
          class: "esriBookmarkTable"
        }, bmlistdiv);
        var bmadditemdiv = domConstruct.create("div", {
          class: "esriBookmarkItem esriAddBookmark"
        }, bookmarksdiv);
        var addbmlabeldiv = domConstruct.create("div", {
          class: "esriBookmarkLabel",
          innerHTML: "Add Bookmark"
        },bmadditemdiv);
        on(bmadditemdiv, "click", bookmarkEvent);
        on(bmadditemdiv, "mouseover", addMouseOverClass);
        on(bmadditemdiv, "mouseout", removeMouseOverClass);

        //process the bookmarkJSON
        Object.keys(bookmarkJSON).forEach(function (bookmark){
          var bmName = bookmarkJSON[bookmark].name || "Bookmark " + (index + 1).toString();
          var theExtent = Extent.fromJSON(bookmarkJSON[bookmark].extent);
          var bmTable = dojoQuery(".esriBookmarkTable")[0];
          var item = domConstruct.toDom('<div class="esriBookmarkItem" data-fromuser="false" data-extent="' + theExtent.xmin + ',' + theExtent.ymin + ',' + theExtent.xmax + ',' + theExtent.ymax + ',' + theExtent.spatialReference.wkid +
            '"><div class="esriBookmarkLabel">' + bmName + '</div><div title="Remove" class="esriBookmarkRemoveImage"></div><div title="Edit" class="esriBookmarkEditImage"></div></div>');
          domConstruct.place(item, bmTable, "last");
          on(dojoQuery(".esriBookmarkRemoveImage", item)[0], "click", removeBookmark);
          on(dojoQuery(".esriBookmarkEditImage", item)[0], "click", editBookmark);
          on(item, "click", bookmarkEvent);
          on(item, "mouseover", addMouseOverClass);
          on(item, "mouseout", removeMouseOverClass);
          bookmarkJSON[bookmark];
        });

        //process the local storage bookmarks
        readBookmarks();
      }

      initBookmarksWidget();

      function addMouseOverClass(evt) {
        evt.stopPropagation();
        domClass.add(evt.currentTarget, "esriBookmarkHighlight");
      }

      function removeMouseOverClass(evt) {
        evt.stopPropagation();
        domClass.remove(evt.currentTarget, "esriBookmarkHighlight");
      }

      function removeBookmark(evt) {
        evt.stopPropagation();
        var bmItem = evt.target.parentNode;

        var bmEditItem = dojoQuery(".esriBookmarkEditBox")[0];
        if (bmEditItem) {
          domConstruct.destroy(bmEditItem);
        }
        domConstruct.destroy(bmItem);

        setTimeout(writeCurrentBookmarks, 200);
      }

      function writeCurrentBookmarks() {
        extents = [];
        var bmTable = dojoQuery(".esriBookmarkTable")[0];
        var bookMarkItems = dojoQuery(".esriBookmarkItem", bmTable);
        bookMarkItems.forEach(function(item) {
          if(item.dataset.fromuser){
            var extArr = item.dataset.extent.split(",");
            var theExt = new Extent({
              xmin: extArr[0],
              ymin: extArr[1],
              xmax: extArr[2],
              ymax: extArr[3],
              spatialReference: {
                wkid: parseInt(extArr[4])
              }
            });
            var sExt = {
              extent: theExt,
              name: dojoQuery(".esriBookmarkLabel", item)[0].innerHTML
            }
            extents.push(sExt);
          }
        });
        var stringifedExtents = JSON.stringify(extents);
        localStorage.setItem("myBookmarks", stringifedExtents);
      }

      function editBookmark(evt) {
        evt.stopPropagation();
        var bmItem = evt.target.parentNode;
        var bmItemName = dojoQuery(".esriBookmarkLabel", bmItem)[0].innerHTML;
        var output = domGeom.position(bmItem, true);
        var editItem = domConstruct.toDom('<input class="esriBookmarkEditBox" style="top: ' + (output.y + 1) + 'px; left: ' + output.x + 'px;">');
        editItem.value = bmItemName;
        var bmTable = dojoQuery(".esriBookmarkTable")[0];
        domConstruct.place(editItem, bmTable);
        on(editItem, "keypress", function(evt) {
          var charOrCode = evt.charCode || evt.keyCode
          if (charOrCode === keys.ENTER) {
            dojoQuery(".esriBookmarkLabel", bmItem)[0].innerHTML = editItem.value;
            domConstruct.destroy(editItem);
            writeCurrentBookmarks();
          }
        });
        editItem.focus();
      }

      function bookmarkEvent(evt) {
        if (domClass.contains(evt.target, "esriAddBookmark")) {
          var bmTable = dojoQuery(".esriBookmarkTable")[0];
          var item = domConstruct.toDom('<div class="esriBookmarkItem" data-fromuser="true" data-extent="' + view.extent.xmin + ',' + view.extent.ymin + ',' + view.extent.xmax + ',' + view.extent.ymax + ',' + view.extent.spatialReference.wkid +
            '"><div class="esriBookmarkLabel">New Bookmark</div><div title="Remove" class="esriBookmarkRemoveImage"></div><div title="Edit" class="esriBookmarkEditImage"></div></div>');

          domConstruct.place(item, bmTable, "last");
          var output = domGeom.position(item, true);
          var editItem = domConstruct.toDom('<input class="esriBookmarkEditBox" style="top: ' + (output.y + 1) + 'px; left: ' + output.x + 'px;">');
          domConstruct.place(editItem, bmTable);
          on(editItem, "keypress", function(evt) {
            var charOrCode = evt.charCode || evt.keyCode
            if (charOrCode === keys.ENTER) {
              dojoQuery(".esriBookmarkLabel", item)[0].innerHTML = editItem.value;
              domConstruct.destroy(editItem);
              sExt = {
                name: editItem.value,
                extent: view.extent
              }
              extents.push(sExt);
              var stringifedExtents = JSON.stringify(extents);
              localStorage.setItem("myBookmarks", stringifedExtents);
            }
          });
          on(dojoQuery(".esriBookmarkRemoveImage", item)[0], "click", removeBookmark);
          on(dojoQuery(".esriBookmarkEditImage", item)[0], "click", editBookmark);
          on(item, "click", bookmarkEvent);
          on(item, "mouseover", addMouseOverClass);
          on(item, "mouseout", removeMouseOverClass);
          editItem.focus();
          return;
        }

        var extArr = evt.target.dataset.extent.split(",");
        view.goTo(new Extent({
          xmin: extArr[0],
          ymin: extArr[1],
          xmax: extArr[2],
          ymax: extArr[3],
          spatialReference: {
            wkid: parseInt(extArr[4])
          }
        }), {
          duration: 2000
        });
      }

      function readBookmarks() {
        try {
          if (!localStorage.getItem("myBookmarks")) {
            return;
          }
          var extentArray = JSON.parse(localStorage.getItem("myBookmarks"));
          if (!extentArray) {
            return;
          }
          extentArray.map(function(extentJSON, index) {
            var bmName = extentJSON.name || "Bookmark " + (index + 1).toString();
            var theExtent = Extent.fromJSON(extentJSON.extent);
            extents.push(extentJSON);
            var bmTable = dojoQuery(".esriBookmarkTable")[0];
            var item = domConstruct.toDom('<div class="esriBookmarkItem" data-fromuser="true" data-extent="' + theExtent.xmin + ',' + theExtent.ymin + ',' + theExtent.xmax + ',' + theExtent.ymax + ',' + theExtent.spatialReference.wkid +
              '"><div class="esriBookmarkLabel">' + bmName + '</div><div title="Remove" class="esriBookmarkRemoveImage"></div><div title="Edit" class="esriBookmarkEditImage"></div></div>');
            domConstruct.place(item, bmTable, "last");
            on(dojoQuery(".esriBookmarkRemoveImage", item)[0], "click", removeBookmark);
            on(dojoQuery(".esriBookmarkEditImage", item)[0], "click", editBookmark);
            on(item, "click", bookmarkEvent);
            on(item, "mouseover", addMouseOverClass);
            on(item, "mouseout", removeMouseOverClass);
          })
        } catch (e) {
          console.warn("Could not parse bookmark JSON", e.message);
        }
      }

    });
  </script>
</head>

<body class="calcite">
  <div id="viewDiv">
    <div id="bookmarksDiv">
    </div>
  </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Bookmark in arcgis Javascript 4.x

Rocky_ — Tue, 31 Jul 2018 20:09:02 GMT

Thanks a lot Robert.. Really appreciate that you share this here.. I tried this code, now its working perfectly.. adding bookmark with editing..

Thank You

Raj

Re: Bookmark in arcgis Javascript 4.x

JohnGrayson — Wed, 01 Aug 2018 23:30:34 GMT

JS API 4.8 added a Bookmark Widget
- Bookmarks | API Reference | ArcGIS API for JavaScript 4.8
- Bookmarks widget | ArcGIS API for JavaScript 4.8

Re: Bookmark in arcgis Javascript 4.x

MOHAMMADNASIM — Wed, 06 Mar 2019 08:04:05 GMT

Thanks alot Robert. Code is working well.