Hi,
I am working with ArcGIS javascript 4.x. In my current requirement I need to add bookmark to my map but in 4.x version of Javascript I am not able to capture the extent as well as the default bookmark functionality is not available.
Any leads on this will be of great help.
Thanks
Aditya Kumar
Solved! Go to Solution.
Hi Robert,
adding a new bookmark function is working perfectly. but
Can't able to see any pencil icon on the page...
can you please tell me where it is...
Are you sure you got the code from the latest post and not the first post I made on that thread?
Yes Sir, Confirmed.. am asking about the latest one.. you post that one at Nov 20, 2017 8.29 AM...
cant able to see edit icon...
I must have done another version in another thread.
<!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>
Thanks a lot Robert.. Really appreciate that you share this here.. I tried this code, now its working perfectly.. adding bookmark with editing..
Thank You
Raj
Thanks alot Robert. Code is working well.
JS API 4.8 added a Bookmark Widget
- Bookmarks | API Reference | ArcGIS API for JavaScript 4.8
- Bookmarks widget | ArcGIS API for JavaScript 4.8