Store bookmark in cookies

347
7
Jump to solution
11-28-2017 07:39 AM
Highlighted
Occasional Contributor

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

Reply
0 Kudos
1 Solution

Accepted Solutions
Highlighted
Regular Contributor

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
Highlighted
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?

Highlighted
Occasional Contributor

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

Reply
0 Kudos
Highlighted
Regular Contributor

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

Highlighted
Occasional Contributor

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>

Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
Highlighted
Occasional Contributor

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

Aditya Kumar

Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

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