topic Store bookmark in cookies in ArcGIS JavaScript Maps SDK Questions

Store bookmark in cookies

ADITYAKUMAR1 — Tue, 28 Nov 2017 15:39:32 GMT

Can anyone help me with the storage of map extent in cookies in ArcGIS JavaScript 4.x?

I am not able to store the extent in cookies.

Thanks

Aditya

Re: Store bookmark in cookies

RodrigoFelga — Tue, 28 Nov 2017 15:57:09 GMT

Can you provide some sample of your code? How you are trying to store the data in cookies? Have you tried to call toJSON of the extent and then stringfy that data to store?

Re: Store bookmark in cookies

ThomasSolow — Sun, 12 Dec 2021 02:16:33 GMT

You might be better off using localStorage for this.

var extents = [...] // pretend this is an array of extents

// turn our array into a string.
// we can only store strings in localStorage
var stringifiedExtents = JSON.stringify(extents.map(extent => extent.toJSON());

// store in local storage
localStorage.setItem("myBookmarks", stringifedExtents);

// read from localStorage
function readBookmarks(){
  try {
    var extentArray = JSON.parse(localStorage.getItem("myBookmarks"));
    // use the Extent.fromJSON method to get an Esri Extent from 
    // the JSON you stored.  This is the way to do this in 4.X
    return extentArray.map(extentJSON => Extent.fromJSON(extentJSON));
  } catch(e) {
    console.warn("Could not parse bookmark JSON", e);
  }
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Store bookmark in cookies

ADITYAKUMAR1 — Wed, 29 Nov 2017 04:38:15 GMT

Hi Rodgiro,

As of now I am not storing it in cookies. Its just as provided by one of my friend .

function bookmarkEvent(evt) {
if (domClass.contains(evt.target, "esriAddBookmark")) {
var bmTable = dojoQuery(".esriBookmarkTable")[0];
var item = domConstruct.toDom('<div class="esriBookmarkItem" data-extent="' + sceneview.extent.xmin + ',' + sceneview.extent.ymin + ',' + sceneview.extent.xmax + ',' + sceneview.extent.ymax + ',' + sceneview.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;
}

Thanks

Aditya Kumar

Re: Store bookmark in cookies

ADITYAKUMAR1 — Wed, 29 Nov 2017 12:27:48 GMT

Here is code on which I am working. I am able to store the code in local storage but not able to pull the data.

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

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

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

var webScene = new WebScene({
portalItem: { // autocasts as new PortalItem()
id: "b1f8fb3b2fd14cc2a78728de108776b0"
}
});

// create the scene view
var view = new SceneView({
container: "viewDiv",
map: webScene,
environment: {
lighting: {
directShadowsEnabled: false
}
}
});

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(".esriBookmarkItem")[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>');
//console.log(view.extent.xmin);
var extents = [];
extents.push(view.extent.xmin,view.extent.ymin,view.extent.xmax,view.extent.xmax,view.extent.spatialReference.wkid);
var stringifedExtents = JSON.stringify(extents);
localStorage.setItem("myBookmarks", stringifedExtents);
extentArray = JSON.parse(localStorage.getItem("myBookmarks"));
console.log(extentArray);

domConstruct.place(item, bmTable, "last");

on(item, "click", bookmarkEvent);
on(item, "mouseover", addMouseOverClass);
on(item, "mouseout", removeMouseOverClass);
return;
}

});
</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: Store bookmark in cookies

RobertScheitlin__GISP — Sun, 12 Dec 2021 02:16:37 GMT

Aditya,

Here is what you are wanting:

<!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: 15px;
      left: 65px;
      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>
    var extents = [];
    require([
      "esri/Map",
      "esri/WebScene",
      "esri/views/MapView",
      "esri/views/SceneView",
      "dojo/dom-class",
      "dojo/query",
      "dojo/on",
      "esri/geometry/Extent",
      "dojo/dom-construct",
      "dojo/json",
      "dojo/domReady!"
    ], function(
      Map, WebScene, MapView, SceneView, domClass, dojoQuery, on, Extent, domConstruct, JSON
    ) {
      var webScene = new WebScene({
        portalItem: { // autocasts as new PortalItem()
          id: "b1f8fb3b2fd14cc2a78728de108776b0"
        }
      });
      // create the scene view
      var view = new SceneView({
        container: "viewDiv",
        map: webScene,
        environment: {
          lighting: {
            directShadowsEnabled: false
          }
        }
      });
      readBookmarks();
      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>');
          extents.push(view.extent);
          var stringifedExtents = JSON.stringify(extents);
          localStorage.setItem("myBookmarks", stringifedExtents);

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

      function readBookmarks(){
        try {
          var extentArray = JSON.parse(localStorage.getItem("myBookmarks"));
          if(!extentArray){
            return;
          }
          extentArray.map(function(extentJSON){
            var theExtent = Extent.fromJSON(extentJSON);
            extents.push(theExtent);
            var bmTable = dojoQuery(".esriBookmarkTable")[0];
            var item = domConstruct.toDom('<div class="esriBookmarkItem" data-extent="' + theExtent.xmin + ',' + theExtent.ymin + ',' + theExtent.xmax + ',' + theExtent.ymax + ',' + theExtent.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 extentArray.map(extentJSON => Extent.fromJSON(extentJSON));
        } catch(e) {
          console.warn("Could not parse bookmark JSON", e);
        }
      }
    });
  </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: Store bookmark in cookies

ADITYAKUMAR1 — Thu, 30 Nov 2017 04:32:39 GMT

Thanks a lot Robert, this is what I was looking for.

Aditya Kumar

Re: Store bookmark in cookies

RobertScheitlin__GISP — Thu, 30 Nov 2017 13:00:34 GMT

Great, then don’t forget to mark this question as answered.