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
You might be better off using localStorage for this.
<SPAN class="keyword token">var</SPAN> extents <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="comment token">// pretend this is an array of extents</SPAN> <SPAN class="comment token">// turn our array into a string.</SPAN> <SPAN class="comment token">// we can only store strings in localStorage</SPAN> <SPAN class="keyword token">var</SPAN> stringifiedExtents <SPAN class="operator token">=</SPAN> JSON<SPAN class="punctuation token">.</SPAN><SPAN class="token function">stringify</SPAN><SPAN class="punctuation token">(</SPAN>extents<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN>extent <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> extent<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toJSON</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// store in local storage</SPAN> localStorage<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setItem</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"myBookmarks"</SPAN><SPAN class="punctuation token">,</SPAN> stringifedExtents<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// read from localStorage</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">readBookmarks</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">try</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> extentArray <SPAN class="operator token">=</SPAN> JSON<SPAN class="punctuation token">.</SPAN><SPAN class="token function">parse</SPAN><SPAN class="punctuation token">(</SPAN>localStorage<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getItem</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"myBookmarks"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// use the Extent.fromJSON method to get an Esri Extent from </SPAN> <SPAN class="comment token">// the JSON you stored. This is the way to do this in 4.X</SPAN> <SPAN class="keyword token">return</SPAN> extentArray<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN>extentJSON <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> Extent<SPAN class="punctuation token">.</SPAN><SPAN class="token function">fromJSON</SPAN><SPAN class="punctuation token">(</SPAN>extentJSON<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">catch</SPAN><SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">warn</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"Could not parse bookmark JSON"</SPAN><SPAN class="punctuation token">,</SPAN> e<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Great, then don’t forget to mark this question as answered.
Thanks a lot Robert, this is what I was looking for.
Aditya Kumar
Aditya,
Here is what you are wanting:
<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN>DOCTYPE html<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>html<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>head<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>meta charset<SPAN class="operator token">=</SPAN><SPAN class="string token">"utf-8"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>meta name<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewport"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"initial-scale=1,maximum-scale=1,user-scalable=no"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>title<SPAN class="operator token">></SPAN>Bookmarks <SPAN class="operator token">-</SPAN> <SPAN class="number token">4.5</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F4.5%2Fesri%2Fcss%2Fmain.css" target="_blank">https://js.arcgis.com/4.5/esri/css/main.css</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F4.5%2F" target="_blank">https://js.arcgis.com/4.5/</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN> html<SPAN class="punctuation token">,</SPAN> body<SPAN class="punctuation token">,</SPAN> #viewDiv <SPAN class="punctuation token">{</SPAN> padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN> width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">.</SPAN>bookmark<SPAN class="operator token">-</SPAN>container <SPAN class="punctuation token">{</SPAN> position<SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN> top<SPAN class="punctuation token">:</SPAN> 15px<SPAN class="punctuation token">;</SPAN> left<SPAN class="punctuation token">:</SPAN> 65px<SPAN class="punctuation token">;</SPAN> padding<SPAN class="punctuation token">:</SPAN> 1rem<SPAN class="punctuation token">;</SPAN> background<SPAN class="punctuation token">:</SPAN> #ffffff<SPAN class="punctuation token">;</SPAN> border<SPAN class="operator token">-</SPAN>radius<SPAN class="punctuation token">:</SPAN> 4px<SPAN class="punctuation token">;</SPAN> border<SPAN class="punctuation token">:</SPAN> 1px solid #eeeeee<SPAN class="punctuation token">;</SPAN> box<SPAN class="operator token">-</SPAN>sizing<SPAN class="punctuation token">:</SPAN> border<SPAN class="operator token">-</SPAN>box<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">.</SPAN>esriBookmarks <SPAN class="punctuation token">{</SPAN> width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN> position<SPAN class="punctuation token">:</SPAN> relative<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">.</SPAN>esriBookmarkTable <SPAN class="punctuation token">{</SPAN> border<SPAN class="operator token">-</SPAN>spacing<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> border<SPAN class="operator token">-</SPAN>collapse<SPAN class="punctuation token">:</SPAN> collapse<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">.</SPAN>esriBookmarkItem <SPAN class="punctuation token">{</SPAN> padding<SPAN class="punctuation token">:</SPAN> 5px 10px<SPAN class="punctuation token">;</SPAN> width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN> border<SPAN class="punctuation token">:</SPAN> 1px solid transparent<SPAN class="punctuation token">;</SPAN> height<SPAN class="punctuation token">:</SPAN> 36px<SPAN class="punctuation token">;</SPAN> cursor<SPAN class="punctuation token">:</SPAN> pointer<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">.</SPAN>esriBookmarkItem<SPAN class="operator token">></SPAN><SPAN class="operator token">*</SPAN> <SPAN class="punctuation token">{</SPAN> pointer<SPAN class="operator token">-</SPAN>events<SPAN class="punctuation token">:</SPAN> none<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">.</SPAN>esriBookmarkLabel <SPAN class="punctuation token">{</SPAN> position<SPAN class="punctuation token">:</SPAN> relative<SPAN class="punctuation token">;</SPAN> float<SPAN class="punctuation token">:</SPAN> left<SPAN class="punctuation token">;</SPAN> overflow<SPAN class="punctuation token">:</SPAN> hidden<SPAN class="punctuation token">;</SPAN> line<SPAN class="operator token">-</SPAN>height<SPAN class="punctuation token">:</SPAN> 26px<SPAN class="punctuation token">;</SPAN> white<SPAN class="operator token">-</SPAN>space<SPAN class="punctuation token">:</SPAN> nowrap<SPAN class="punctuation token">;</SPAN> text<SPAN class="operator token">-</SPAN>overflow<SPAN class="punctuation token">:</SPAN> ellipsis<SPAN class="punctuation token">;</SPAN> text<SPAN class="operator token">-</SPAN>align<SPAN class="punctuation token">:</SPAN> left<SPAN class="punctuation token">;</SPAN> vertical<SPAN class="operator token">-</SPAN>align<SPAN class="punctuation token">:</SPAN> middle<SPAN class="punctuation token">;</SPAN> margin<SPAN class="operator token">-</SPAN>left<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> user<SPAN class="operator token">-</SPAN>select<SPAN class="punctuation token">:</SPAN> none<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">.</SPAN>esriBookmarkHighlight <SPAN class="punctuation token">{</SPAN> background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> #e2f1fb<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="operator token">*</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="operator token">*</SPAN><SPAN class="punctuation token">:</SPAN>before<SPAN class="punctuation token">,</SPAN> <SPAN class="operator token">*</SPAN><SPAN class="punctuation token">:</SPAN>after <SPAN class="punctuation token">{</SPAN> <SPAN class="operator token">-</SPAN>moz<SPAN class="operator token">-</SPAN>box<SPAN class="operator token">-</SPAN>sizing<SPAN class="punctuation token">:</SPAN> border<SPAN class="operator token">-</SPAN>box<SPAN class="punctuation token">;</SPAN> <SPAN class="operator token">-</SPAN>webkit<SPAN class="operator token">-</SPAN>box<SPAN class="operator token">-</SPAN>sizing<SPAN class="punctuation token">:</SPAN> border<SPAN class="operator token">-</SPAN>box<SPAN class="punctuation token">;</SPAN> box<SPAN class="operator token">-</SPAN>sizing<SPAN class="punctuation token">:</SPAN> border<SPAN class="operator token">-</SPAN>box<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">.</SPAN>esriAddBookmark <SPAN class="punctuation token">{</SPAN> color<SPAN class="punctuation token">:</SPAN> #6e6e6e<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="keyword token">var</SPAN> extents <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN> <SPAN class="string token">"esri/Map"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/WebScene"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/views/SceneView"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/dom-class"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/query"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/on"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/geometry/Extent"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/dom-construct"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/json"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/domReady!"</SPAN> <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN> Map<SPAN class="punctuation token">,</SPAN> WebScene<SPAN class="punctuation token">,</SPAN> MapView<SPAN class="punctuation token">,</SPAN> SceneView<SPAN class="punctuation token">,</SPAN> domClass<SPAN class="punctuation token">,</SPAN> dojoQuery<SPAN class="punctuation token">,</SPAN> on<SPAN class="punctuation token">,</SPAN> Extent<SPAN class="punctuation token">,</SPAN> domConstruct<SPAN class="punctuation token">,</SPAN> JSON <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> webScene <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">WebScene</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> portalItem<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// autocasts as new PortalItem()</SPAN> id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"b1f8fb3b2fd14cc2a78728de108776b0"</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// create the scene view</SPAN> <SPAN class="keyword token">var</SPAN> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SceneView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN> map<SPAN class="punctuation token">:</SPAN> webScene<SPAN class="punctuation token">,</SPAN> environment<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> lighting<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> directShadowsEnabled<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">readBookmarks</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> bookMarkItems <SPAN class="operator token">=</SPAN> <SPAN class="token function">dojoQuery</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">".esriBookmarkItem"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> bookMarkItems<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>bookMarkItem<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN>bookMarkItem<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> bookmarkEvent<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN>bookMarkItem<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"mouseover"</SPAN><SPAN class="punctuation token">,</SPAN> addMouseOverClass<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN>bookMarkItem<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"mouseout"</SPAN><SPAN class="punctuation token">,</SPAN> removeMouseOverClass<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">addMouseOverClass</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> domClass<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esriBookmarkHighlight"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">removeMouseOverClass</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> domClass<SPAN class="punctuation token">.</SPAN><SPAN class="token function">remove</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esriBookmarkHighlight"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">bookmarkEvent</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>domClass<SPAN class="punctuation token">.</SPAN><SPAN class="token function">contains</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esriAddBookmark"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> bmTable <SPAN class="operator token">=</SPAN> <SPAN class="token function">dojoQuery</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">".esriBookmarkTable"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> item <SPAN class="operator token">=</SPAN> domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toDom</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'<div class="esriBookmarkItem" data-extent="'</SPAN> <SPAN class="operator token">+</SPAN> view<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN>xmin <SPAN class="operator token">+</SPAN> <SPAN class="string token">','</SPAN> <SPAN class="operator token">+</SPAN> view<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN>ymin <SPAN class="operator token">+</SPAN> <SPAN class="string token">','</SPAN> <SPAN class="operator token">+</SPAN> view<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN>xmax <SPAN class="operator token">+</SPAN> <SPAN class="string token">','</SPAN> <SPAN class="operator token">+</SPAN> view<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN>ymax <SPAN class="operator token">+</SPAN> <SPAN class="string token">','</SPAN> <SPAN class="operator token">+</SPAN> view<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN>spatialReference<SPAN class="punctuation token">.</SPAN>wkid <SPAN class="operator token">+</SPAN> <SPAN class="string token">'"><div class="esriBookmarkLabel">New Bookmark</div></div>'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> extents<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN>view<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> stringifedExtents <SPAN class="operator token">=</SPAN> JSON<SPAN class="punctuation token">.</SPAN><SPAN class="token function">stringify</SPAN><SPAN class="punctuation token">(</SPAN>extents<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> localStorage<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setItem</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"myBookmarks"</SPAN><SPAN class="punctuation token">,</SPAN> stringifedExtents<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">place</SPAN><SPAN class="punctuation token">(</SPAN>item<SPAN class="punctuation token">,</SPAN> bmTable<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"last"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN>item<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> bookmarkEvent<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN>item<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"mouseover"</SPAN><SPAN class="punctuation token">,</SPAN> addMouseOverClass<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN>item<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"mouseout"</SPAN><SPAN class="punctuation token">,</SPAN> removeMouseOverClass<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">return</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">var</SPAN> extArr <SPAN class="operator token">=</SPAN> evt<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">.</SPAN>dataset<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN><SPAN class="token function">split</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">","</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">goTo</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Extent</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> xmin<SPAN class="punctuation token">:</SPAN> extArr<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> ymin<SPAN class="punctuation token">:</SPAN> extArr<SPAN class="punctuation token">[</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> xmax<SPAN class="punctuation token">:</SPAN> extArr<SPAN class="punctuation token">[</SPAN><SPAN class="number token">2</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> ymax<SPAN class="punctuation token">:</SPAN> extArr<SPAN class="punctuation token">[</SPAN><SPAN class="number token">3</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> spatialReference<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> wkid<SPAN class="punctuation token">:</SPAN> <SPAN class="token function">parseInt</SPAN><SPAN class="punctuation token">(</SPAN>extArr<SPAN class="punctuation token">[</SPAN><SPAN class="number token">4</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> duration<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">2000</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">readBookmarks</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">try</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> extentArray <SPAN class="operator token">=</SPAN> JSON<SPAN class="punctuation token">.</SPAN><SPAN class="token function">parse</SPAN><SPAN class="punctuation token">(</SPAN>localStorage<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getItem</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"myBookmarks"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>extentArray<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">return</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> extentArray<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>extentJSON<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> theExtent <SPAN class="operator token">=</SPAN> Extent<SPAN class="punctuation token">.</SPAN><SPAN class="token function">fromJSON</SPAN><SPAN class="punctuation token">(</SPAN>extentJSON<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> extents<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN>theExtent<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> bmTable <SPAN class="operator token">=</SPAN> <SPAN class="token function">dojoQuery</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">".esriBookmarkTable"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> item <SPAN class="operator token">=</SPAN> domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toDom</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'<div class="esriBookmarkItem" data-extent="'</SPAN> <SPAN class="operator token">+</SPAN> theExtent<SPAN class="punctuation token">.</SPAN>xmin <SPAN class="operator token">+</SPAN> <SPAN class="string token">','</SPAN> <SPAN class="operator token">+</SPAN> theExtent<SPAN class="punctuation token">.</SPAN>ymin <SPAN class="operator token">+</SPAN> <SPAN class="string token">','</SPAN> <SPAN class="operator token">+</SPAN> theExtent<SPAN class="punctuation token">.</SPAN>xmax <SPAN class="operator token">+</SPAN> <SPAN class="string token">','</SPAN> <SPAN class="operator token">+</SPAN> theExtent<SPAN class="punctuation token">.</SPAN>ymax <SPAN class="operator token">+</SPAN> <SPAN class="string token">','</SPAN> <SPAN class="operator token">+</SPAN> theExtent<SPAN class="punctuation token">.</SPAN>spatialReference<SPAN class="punctuation token">.</SPAN>wkid <SPAN class="operator token">+</SPAN> <SPAN class="string token">'"><div class="esriBookmarkLabel">New Bookmark</div></div>'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">place</SPAN><SPAN class="punctuation token">(</SPAN>item<SPAN class="punctuation token">,</SPAN> bmTable<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"last"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN>item<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> bookmarkEvent<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN>item<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"mouseover"</SPAN><SPAN class="punctuation token">,</SPAN> addMouseOverClass<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN>item<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"mouseout"</SPAN><SPAN class="punctuation token">,</SPAN> removeMouseOverClass<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="comment token">//return extentArray.map(extentJSON => Extent.fromJSON(extentJSON));</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">catch</SPAN><SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">warn</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"Could not parse bookmark JSON"</SPAN><SPAN class="punctuation token">,</SPAN> e<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>head<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>body <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewDiv"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"bookmark-container"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esriBookmarks"</SPAN> id<SPAN class="operator token">=</SPAN><SPAN class="string token">"bookmarks"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esriBookmarkList"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esriBookmarkTable"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN><SPAN class="operator token">--</SPAN> <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esriBookmarkItem"</SPAN> data<SPAN class="operator token">-</SPAN>extent<SPAN class="operator token">=</SPAN><SPAN class="string token">"-12975151.579395358,3993919.9969406975,-12964144.647322308,4019507.292159126,102100"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esriBookmarkLabel"</SPAN><SPAN class="operator token">></SPAN>Palm Springs<SPAN class="punctuation token">,</SPAN> CA<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esriBookmarkItem"</SPAN> data<SPAN class="operator token">-</SPAN>extent<SPAN class="operator token">=</SPAN><SPAN class="string token">"-13052123.666878553,4024962.9850527253,-13041116.734805504,4050550.280271154,102100"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esriBookmarkLabel"</SPAN><SPAN class="operator token">></SPAN>Redlands<SPAN class="punctuation token">,</SPAN> Ca<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esriBookmarkItem"</SPAN> data<SPAN class="operator token">-</SPAN>extent<SPAN class="operator token">=</SPAN><SPAN class="string token">"-13048836.874662295,3844839.127898948,-13037829.942589246,3870426.4231173764,102100"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esriBookmarkLabel"</SPAN><SPAN class="operator token">></SPAN>San Diego<SPAN class="punctuation token">,</SPAN> CA<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN> <SPAN class="operator token">--</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esriBookmarkItem esriAddBookmark"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>span style<SPAN class="operator token">=</SPAN><SPAN class="string token">"float:left; line-height:26px; padding-right: 4px;"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esri-icon-plus"</SPAN> aria<SPAN class="operator token">-</SPAN>label<SPAN class="operator token">=</SPAN><SPAN class="string token">"add icon"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esriBookmarkLabel"</SPAN><SPAN class="operator token">></SPAN>Add Bookmark<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>body<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>html<SPAN class="operator token">></SPAN> <SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
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>
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; }
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?
Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
