Bookmark in arcgis Javascript 4.x

ADITYAKUMAR1 · ‎11-17-2017

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

RobertScheitlin__GISP · ‎11-18-2017

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎11-18-2017

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

ADITYAKUMAR1 · ‎11-19-2017

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

RobertScheitlin__GISP · ‎11-20-2017

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?

ADITYAKUMAR1 · ‎11-20-2017

Yes Robert

RobertScheitlin__GISP · ‎11-20-2017

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

ADITYAKUMAR1 · ‎11-20-2017

Hey Robert,

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

RobertScheitlin__GISP · ‎11-21-2017

Aditya,

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

Rocky_ · ‎07-31-2018

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

RobertScheitlin__GISP · ‎07-31-2018

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.