Hi ,
Is there a way that while creating the div , the user can provide name to the div as well as delete.
Similar to Edit bookmarks | ArcGIS API for JavaScript 3.22 .
Thanks
Aditya
Solved! Go to Solution.
Aditya,
If you keep this up you are going to have me recreate the whole widget in 4.x...
<!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 {
pointer-events: none;
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;
}
.esriBookmarkEditBox {
position: fixed;
font-size: 14px;
height: 34px;
width: 200px;
z-index: 999;
padding: 0;
margin: 0 10px;
border: 0;
border-bottom: 1px solid #007ac2;
background: #fff
}
.esriBookmarkEditBox:focus {
outline: none
}
.esriBookmarkRemoveImage,
.esriBookmarkEditImage {
float: right;
width: 30px;
cursor: pointer;
font-family: "CalciteWebCoreIcons";
speak: none;
font-size: 16px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-indent: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 26px;
text-align: center;
}
.esriBookmarkItem:before {
float: left;
font-family: "CalciteWebCoreIcons";
speak: none;
font-size: 16px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-indent: 0;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "";
color: inherit;
line-height: 26px;
margin-right: 5px;
}
.esriBookmarkRemoveImage:before {
content: "\e600";
}
.esriBookmarkEditImage:before {
content: "\e61b";
}
.esriAddBookmark:before {
content: "\e620";
}
.esriBookmarkItem:after {
content: "";
display: table;
clear: both;
}
</style>
<script>
var extents = [];
require([
"esri/Map",
"esri/views/MapView",
"dojo/dom",
"dojo/dom-class",
"dojo/query",
"dojo/on",
"esri/geometry/Extent",
"dojo/dom-construct",
"dojo/dom-geometry",
"dojo/keys",
"dojo/json",
"dojo/_base/lang",
"dojo/domReady!"
], function(
Map, MapView, dom, domClass, dojoQuery, on, Extent, domConstruct, domGeom, keys, JSON, lang
) {
var map = new Map({
basemap: "gray"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-119.4179, 36.7783],
zoom: 6
});
// Bookmark data objects
var bookmarkJSON = {
first: {
"extent": {
"xmin": -12975151.579395358,
"ymin": 3993919.9969406975,
"xmax": -12964144.647322308,
"ymax": 4019507.292159126,
"spatialReference": {
"wkid": 102100,
"latestWkid": 3857
}
},
"name": "Palm Springs, CA"
},
second: {
"extent": {
"xmin": -13052123.666878553,
"ymin": 4024962.9850527253,
"xmax": -13041116.734805504,
"ymax": 4050550.280271154,
"spatialReference": {
"wkid": 102100,
"latestWkid": 3857
}
},
"name": "Redlands, California"
},
third: {
"extent": {
"xmin": -13048836.874662295,
"ymin": 3844839.127898948,
"xmax": -13037829.942589246,
"ymax": 3870426.4231173764,
"spatialReference": {
"wkid": 102100,
"latestWkid": 3857
}
},
"name": "San Diego, CA"
},
};
function initBookmarksWidget() {
var bmDiv = dom.byId("bookmarksDiv");
domClass.add(bmDiv, "bookmark-container");
var bookmarksdiv = domConstruct.create("div", {
class: "esriBookmarks"
}, bmDiv);
var bmlistdiv = domConstruct.create("div", {
class: "esriBookmarkList",
style: {
width: '250px'
}
}, bookmarksdiv);
var bmTable = domConstruct.create("div", {
class: "esriBookmarkTable"
}, bmlistdiv);
var bmadditemdiv = domConstruct.create("div", {
class: "esriBookmarkItem esriAddBookmark"
}, bookmarksdiv);
var addbmlabeldiv = domConstruct.create("div", {
class: "esriBookmarkLabel",
innerHTML: "Add Bookmark"
},bmadditemdiv);
on(bmadditemdiv, "click", bookmarkEvent);
on(bmadditemdiv, "mouseover", addMouseOverClass);
on(bmadditemdiv, "mouseout", removeMouseOverClass);
//process the bookmarkJSON
Object.keys(bookmarkJSON).forEach(function (bookmark){
var bmName = bookmarkJSON[bookmark].name || "Bookmark " + (index + 1).toString();
var theExtent = Extent.fromJSON(bookmarkJSON[bookmark].extent);
var bmTable = dojoQuery(".esriBookmarkTable")[0];
var item = domConstruct.toDom('<div class="esriBookmarkItem" data-fromuser="false" data-extent="' + theExtent.xmin + ',' + theExtent.ymin + ',' + theExtent.xmax + ',' + theExtent.ymax + ',' + theExtent.spatialReference.wkid +
'"><div class="esriBookmarkLabel">' + bmName + '</div><div title="Remove" class="esriBookmarkRemoveImage"></div><div title="Edit" class="esriBookmarkEditImage"></div></div>');
domConstruct.place(item, bmTable, "last");
on(dojoQuery(".esriBookmarkRemoveImage", item)[0], "click", removeBookmark);
on(dojoQuery(".esriBookmarkEditImage", item)[0], "click", editBookmark);
on(item, "click", bookmarkEvent);
on(item, "mouseover", addMouseOverClass);
on(item, "mouseout", removeMouseOverClass);
bookmarkJSON[bookmark];
});
//process the local storage bookmarks
readBookmarks();
}
initBookmarksWidget();
function addMouseOverClass(evt) {
evt.stopPropagation();
domClass.add(evt.currentTarget, "esriBookmarkHighlight");
}
function removeMouseOverClass(evt) {
evt.stopPropagation();
domClass.remove(evt.currentTarget, "esriBookmarkHighlight");
}
function removeBookmark(evt) {
evt.stopPropagation();
var bmItem = evt.target.parentNode;
var bmEditItem = dojoQuery(".esriBookmarkEditBox")[0];
if (bmEditItem) {
domConstruct.destroy(bmEditItem);
}
domConstruct.destroy(bmItem);
setTimeout(writeCurrentBookmarks, 200);
}
function writeCurrentBookmarks() {
extents = [];
var bmTable = dojoQuery(".esriBookmarkTable")[0];
var bookMarkItems = dojoQuery(".esriBookmarkItem", bmTable);
bookMarkItems.forEach(function(item) {
if(item.dataset.fromuser){
var extArr = item.dataset.extent.split(",");
var theExt = new Extent({
xmin: extArr[0],
ymin: extArr[1],
xmax: extArr[2],
ymax: extArr[3],
spatialReference: {
wkid: parseInt(extArr[4])
}
});
var sExt = {
extent: theExt,
name: dojoQuery(".esriBookmarkLabel", item)[0].innerHTML
}
extents.push(sExt);
}
});
var stringifedExtents = JSON.stringify(extents);
localStorage.setItem("myBookmarks", stringifedExtents);
}
function editBookmark(evt) {
evt.stopPropagation();
var bmItem = evt.target.parentNode;
var bmItemName = dojoQuery(".esriBookmarkLabel", bmItem)[0].innerHTML;
var output = domGeom.position(bmItem, true);
var editItem = domConstruct.toDom('<input class="esriBookmarkEditBox" style="top: ' + (output.y + 1) + 'px; left: ' + output.x + 'px;">');
editItem.value = bmItemName;
var bmTable = dojoQuery(".esriBookmarkTable")[0];
domConstruct.place(editItem, bmTable);
on(editItem, "keypress", function(evt) {
var charOrCode = evt.charCode || evt.keyCode
if (charOrCode === keys.ENTER) {
dojoQuery(".esriBookmarkLabel", bmItem)[0].innerHTML = editItem.value;
domConstruct.destroy(editItem);
writeCurrentBookmarks();
}
});
editItem.focus();
}
function bookmarkEvent(evt) {
if (domClass.contains(evt.target, "esriAddBookmark")) {
var bmTable = dojoQuery(".esriBookmarkTable")[0];
var item = domConstruct.toDom('<div class="esriBookmarkItem" data-fromuser="true" 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 title="Remove" class="esriBookmarkRemoveImage"></div><div title="Edit" class="esriBookmarkEditImage"></div></div>');
domConstruct.place(item, bmTable, "last");
var output = domGeom.position(item, true);
var editItem = domConstruct.toDom('<input class="esriBookmarkEditBox" style="top: ' + (output.y + 1) + 'px; left: ' + output.x + 'px;">');
domConstruct.place(editItem, bmTable);
on(editItem, "keypress", function(evt) {
var charOrCode = evt.charCode || evt.keyCode
if (charOrCode === keys.ENTER) {
dojoQuery(".esriBookmarkLabel", item)[0].innerHTML = editItem.value;
domConstruct.destroy(editItem);
sExt = {
name: editItem.value,
extent: view.extent
}
extents.push(sExt);
var stringifedExtents = JSON.stringify(extents);
localStorage.setItem("myBookmarks", stringifedExtents);
}
});
on(dojoQuery(".esriBookmarkRemoveImage", item)[0], "click", removeBookmark);
on(dojoQuery(".esriBookmarkEditImage", item)[0], "click", editBookmark);
on(item, "click", bookmarkEvent);
on(item, "mouseover", addMouseOverClass);
on(item, "mouseout", removeMouseOverClass);
editItem.focus();
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 {
if (!localStorage.getItem("myBookmarks")) {
return;
}
var extentArray = JSON.parse(localStorage.getItem("myBookmarks"));
if (!extentArray) {
return;
}
extentArray.map(function(extentJSON, index) {
var bmName = extentJSON.name || "Bookmark " + (index + 1).toString();
var theExtent = Extent.fromJSON(extentJSON.extent);
extents.push(extentJSON);
var bmTable = dojoQuery(".esriBookmarkTable")[0];
var item = domConstruct.toDom('<div class="esriBookmarkItem" data-fromuser="true" data-extent="' + theExtent.xmin + ',' + theExtent.ymin + ',' + theExtent.xmax + ',' + theExtent.ymax + ',' + theExtent.spatialReference.wkid +
'"><div class="esriBookmarkLabel">' + bmName + '</div><div title="Remove" class="esriBookmarkRemoveImage"></div><div title="Edit" class="esriBookmarkEditImage"></div></div>');
domConstruct.place(item, bmTable, "last");
on(dojoQuery(".esriBookmarkRemoveImage", item)[0], "click", removeBookmark);
on(dojoQuery(".esriBookmarkEditImage", item)[0], "click", editBookmark);
on(item, "click", bookmarkEvent);
on(item, "mouseover", addMouseOverClass);
on(item, "mouseout", removeMouseOverClass);
})
} catch (e) {
console.warn("Could not parse bookmark JSON", e.message);
}
}
});
</script>
</head>
<body class="calcite">
<div id="viewDiv">
<div id="bookmarksDiv">
</div>
</div>
</body>
</html>
Aditya,
If you keep this up you are going to have me recreate the whole widget in 4.x...
<!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 {
pointer-events: none;
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;
}
.esriBookmarkEditBox {
position: fixed;
font-size: 14px;
height: 34px;
width: 200px;
z-index: 999;
padding: 0;
margin: 0 10px;
border: 0;
border-bottom: 1px solid #007ac2;
background: #fff
}
.esriBookmarkEditBox:focus {
outline: none
}
.esriBookmarkRemoveImage,
.esriBookmarkEditImage {
float: right;
width: 30px;
cursor: pointer;
font-family: "CalciteWebCoreIcons";
speak: none;
font-size: 16px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-indent: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 26px;
text-align: center;
}
.esriBookmarkItem:before {
float: left;
font-family: "CalciteWebCoreIcons";
speak: none;
font-size: 16px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-indent: 0;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "";
color: inherit;
line-height: 26px;
margin-right: 5px;
}
.esriBookmarkRemoveImage:before {
content: "\e600";
}
.esriBookmarkEditImage:before {
content: "\e61b";
}
.esriAddBookmark:before {
content: "\e620";
}
.esriBookmarkItem:after {
content: "";
display: table;
clear: both;
}
</style>
<script>
var extents = [];
require([
"esri/Map",
"esri/views/MapView",
"dojo/dom",
"dojo/dom-class",
"dojo/query",
"dojo/on",
"esri/geometry/Extent",
"dojo/dom-construct",
"dojo/dom-geometry",
"dojo/keys",
"dojo/json",
"dojo/_base/lang",
"dojo/domReady!"
], function(
Map, MapView, dom, domClass, dojoQuery, on, Extent, domConstruct, domGeom, keys, JSON, lang
) {
var map = new Map({
basemap: "gray"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-119.4179, 36.7783],
zoom: 6
});
// Bookmark data objects
var bookmarkJSON = {
first: {
"extent": {
"xmin": -12975151.579395358,
"ymin": 3993919.9969406975,
"xmax": -12964144.647322308,
"ymax": 4019507.292159126,
"spatialReference": {
"wkid": 102100,
"latestWkid": 3857
}
},
"name": "Palm Springs, CA"
},
second: {
"extent": {
"xmin": -13052123.666878553,
"ymin": 4024962.9850527253,
"xmax": -13041116.734805504,
"ymax": 4050550.280271154,
"spatialReference": {
"wkid": 102100,
"latestWkid": 3857
}
},
"name": "Redlands, California"
},
third: {
"extent": {
"xmin": -13048836.874662295,
"ymin": 3844839.127898948,
"xmax": -13037829.942589246,
"ymax": 3870426.4231173764,
"spatialReference": {
"wkid": 102100,
"latestWkid": 3857
}
},
"name": "San Diego, CA"
},
};
function initBookmarksWidget() {
var bmDiv = dom.byId("bookmarksDiv");
domClass.add(bmDiv, "bookmark-container");
var bookmarksdiv = domConstruct.create("div", {
class: "esriBookmarks"
}, bmDiv);
var bmlistdiv = domConstruct.create("div", {
class: "esriBookmarkList",
style: {
width: '250px'
}
}, bookmarksdiv);
var bmTable = domConstruct.create("div", {
class: "esriBookmarkTable"
}, bmlistdiv);
var bmadditemdiv = domConstruct.create("div", {
class: "esriBookmarkItem esriAddBookmark"
}, bookmarksdiv);
var addbmlabeldiv = domConstruct.create("div", {
class: "esriBookmarkLabel",
innerHTML: "Add Bookmark"
},bmadditemdiv);
on(bmadditemdiv, "click", bookmarkEvent);
on(bmadditemdiv, "mouseover", addMouseOverClass);
on(bmadditemdiv, "mouseout", removeMouseOverClass);
//process the bookmarkJSON
Object.keys(bookmarkJSON).forEach(function (bookmark){
var bmName = bookmarkJSON[bookmark].name || "Bookmark " + (index + 1).toString();
var theExtent = Extent.fromJSON(bookmarkJSON[bookmark].extent);
var bmTable = dojoQuery(".esriBookmarkTable")[0];
var item = domConstruct.toDom('<div class="esriBookmarkItem" data-fromuser="false" data-extent="' + theExtent.xmin + ',' + theExtent.ymin + ',' + theExtent.xmax + ',' + theExtent.ymax + ',' + theExtent.spatialReference.wkid +
'"><div class="esriBookmarkLabel">' + bmName + '</div><div title="Remove" class="esriBookmarkRemoveImage"></div><div title="Edit" class="esriBookmarkEditImage"></div></div>');
domConstruct.place(item, bmTable, "last");
on(dojoQuery(".esriBookmarkRemoveImage", item)[0], "click", removeBookmark);
on(dojoQuery(".esriBookmarkEditImage", item)[0], "click", editBookmark);
on(item, "click", bookmarkEvent);
on(item, "mouseover", addMouseOverClass);
on(item, "mouseout", removeMouseOverClass);
bookmarkJSON[bookmark];
});
//process the local storage bookmarks
readBookmarks();
}
initBookmarksWidget();
function addMouseOverClass(evt) {
evt.stopPropagation();
domClass.add(evt.currentTarget, "esriBookmarkHighlight");
}
function removeMouseOverClass(evt) {
evt.stopPropagation();
domClass.remove(evt.currentTarget, "esriBookmarkHighlight");
}
function removeBookmark(evt) {
evt.stopPropagation();
var bmItem = evt.target.parentNode;
var bmEditItem = dojoQuery(".esriBookmarkEditBox")[0];
if (bmEditItem) {
domConstruct.destroy(bmEditItem);
}
domConstruct.destroy(bmItem);
setTimeout(writeCurrentBookmarks, 200);
}
function writeCurrentBookmarks() {
extents = [];
var bmTable = dojoQuery(".esriBookmarkTable")[0];
var bookMarkItems = dojoQuery(".esriBookmarkItem", bmTable);
bookMarkItems.forEach(function(item) {
if(item.dataset.fromuser){
var extArr = item.dataset.extent.split(",");
var theExt = new Extent({
xmin: extArr[0],
ymin: extArr[1],
xmax: extArr[2],
ymax: extArr[3],
spatialReference: {
wkid: parseInt(extArr[4])
}
});
var sExt = {
extent: theExt,
name: dojoQuery(".esriBookmarkLabel", item)[0].innerHTML
}
extents.push(sExt);
}
});
var stringifedExtents = JSON.stringify(extents);
localStorage.setItem("myBookmarks", stringifedExtents);
}
function editBookmark(evt) {
evt.stopPropagation();
var bmItem = evt.target.parentNode;
var bmItemName = dojoQuery(".esriBookmarkLabel", bmItem)[0].innerHTML;
var output = domGeom.position(bmItem, true);
var editItem = domConstruct.toDom('<input class="esriBookmarkEditBox" style="top: ' + (output.y + 1) + 'px; left: ' + output.x + 'px;">');
editItem.value = bmItemName;
var bmTable = dojoQuery(".esriBookmarkTable")[0];
domConstruct.place(editItem, bmTable);
on(editItem, "keypress", function(evt) {
var charOrCode = evt.charCode || evt.keyCode
if (charOrCode === keys.ENTER) {
dojoQuery(".esriBookmarkLabel", bmItem)[0].innerHTML = editItem.value;
domConstruct.destroy(editItem);
writeCurrentBookmarks();
}
});
editItem.focus();
}
function bookmarkEvent(evt) {
if (domClass.contains(evt.target, "esriAddBookmark")) {
var bmTable = dojoQuery(".esriBookmarkTable")[0];
var item = domConstruct.toDom('<div class="esriBookmarkItem" data-fromuser="true" 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 title="Remove" class="esriBookmarkRemoveImage"></div><div title="Edit" class="esriBookmarkEditImage"></div></div>');
domConstruct.place(item, bmTable, "last");
var output = domGeom.position(item, true);
var editItem = domConstruct.toDom('<input class="esriBookmarkEditBox" style="top: ' + (output.y + 1) + 'px; left: ' + output.x + 'px;">');
domConstruct.place(editItem, bmTable);
on(editItem, "keypress", function(evt) {
var charOrCode = evt.charCode || evt.keyCode
if (charOrCode === keys.ENTER) {
dojoQuery(".esriBookmarkLabel", item)[0].innerHTML = editItem.value;
domConstruct.destroy(editItem);
sExt = {
name: editItem.value,
extent: view.extent
}
extents.push(sExt);
var stringifedExtents = JSON.stringify(extents);
localStorage.setItem("myBookmarks", stringifedExtents);
}
});
on(dojoQuery(".esriBookmarkRemoveImage", item)[0], "click", removeBookmark);
on(dojoQuery(".esriBookmarkEditImage", item)[0], "click", editBookmark);
on(item, "click", bookmarkEvent);
on(item, "mouseover", addMouseOverClass);
on(item, "mouseout", removeMouseOverClass);
editItem.focus();
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 {
if (!localStorage.getItem("myBookmarks")) {
return;
}
var extentArray = JSON.parse(localStorage.getItem("myBookmarks"));
if (!extentArray) {
return;
}
extentArray.map(function(extentJSON, index) {
var bmName = extentJSON.name || "Bookmark " + (index + 1).toString();
var theExtent = Extent.fromJSON(extentJSON.extent);
extents.push(extentJSON);
var bmTable = dojoQuery(".esriBookmarkTable")[0];
var item = domConstruct.toDom('<div class="esriBookmarkItem" data-fromuser="true" data-extent="' + theExtent.xmin + ',' + theExtent.ymin + ',' + theExtent.xmax + ',' + theExtent.ymax + ',' + theExtent.spatialReference.wkid +
'"><div class="esriBookmarkLabel">' + bmName + '</div><div title="Remove" class="esriBookmarkRemoveImage"></div><div title="Edit" class="esriBookmarkEditImage"></div></div>');
domConstruct.place(item, bmTable, "last");
on(dojoQuery(".esriBookmarkRemoveImage", item)[0], "click", removeBookmark);
on(dojoQuery(".esriBookmarkEditImage", item)[0], "click", editBookmark);
on(item, "click", bookmarkEvent);
on(item, "mouseover", addMouseOverClass);
on(item, "mouseout", removeMouseOverClass);
})
} catch (e) {
console.warn("Could not parse bookmark JSON", e.message);
}
}
});
</script>
</head>
<body class="calcite">
<div id="viewDiv">
<div id="bookmarksDiv">
</div>
</div>
</body>
</html>