Store bookmark in cookies

1425
7
Jump to solution
11-28-2017 07:39 AM
ADITYAKUMAR1
Occasional Contributor III

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

0 Kudos
1 Solution

Accepted Solutions
ThomasSolow
Occasional Contributor III

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

7 Replies
RodrigoFelga
New Contributor III

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

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

0 Kudos
ThomasSolow
Occasional Contributor III

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

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>

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

var extArr = evt.target.dataset.extent.split(",");
// console.log(evt.target.dataset.extent);


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>

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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

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

Aditya Kumar

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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