Store bookmark in cookies

ADITYAKUMAR1 · ‎11-28-2017

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

ThomasSolow · ‎11-28-2017

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

View solution in original post

RodrigoFelga · ‎11-28-2017

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?

ADITYAKUMAR1 · ‎11-28-2017

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

ThomasSolow · ‎11-28-2017

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

ADITYAKUMAR1 · ‎11-29-2017

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>

RobertScheitlin__GISP · ‎11-29-2017

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

ADITYAKUMAR1 · ‎11-29-2017

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

Aditya Kumar

RobertScheitlin__GISP · ‎11-30-2017

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