Description
The Bookmark widget can be configured to allow users to create, update and delete bookmarks.
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Bookmark Widget (Editable)</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/themes/calcite/dijit/calcite.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/themes/calcite/esri/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
.bookmark-container {
position: absolute;
top: 100px;
left: 15px;
padding: 1rem;
background: #ffffff;
border-radius: 4px;
border: 1px solid #eeeeee;
}
</style>
<script src="https://js.arcgis.com/3.46/"></script>
<script>
require([
"esri/map",
"esri/dijit/Bookmarks",
"dojo/domReady!"
],
function (Map, Bookmarks){
var map = new Map("map", {
basemap: "topo-vector",
center: [-100, 40],
zoom: 4
});
// Create the bookmark widget
// specify "editable" as true to enable editing
var bookmarks = new Bookmarks({
map: map,
bookmarks: [],
editable: true
}, "bookmarks");
// Bookmark data objects
var bookmarkJSON = {
first: {
"extent": {
"xmin": -12975100,
"ymin": 3993900,
"xmax": -12964100,
"ymax": 4019500,
"spatialReference": {
"wkid": 102100,
"latestWkid": 3857
}
},
"name": "Palm Springs, CA"
},
second: {
"extent": {
"xmin": -13052100,
"ymin": 4024900,
"xmax": -13041100,
"ymax": 4050500,
"spatialReference": {
"wkid": 102100,
"latestWkid": 3857
}
},
"name": "Redlands, California"
},
third: {
"extent": {
"xmin": -13048800,
"ymin": 3844800,
"xmax": -13037800,
"ymax": 3870400,
"spatialReference": {
"wkid": 102100,
"latestWkid": 3857
}
},
"name": "San Diego, CA"
},
};
// Add bookmarks to the widget
Object.keys(bookmarkJSON).forEach(function (bookmark){
bookmarks.addBookmark(bookmarkJSON[bookmark]);
});
});
</script>
</head>
<body class="calcite">
<div id="map"></div>
<div class="bookmark-container">
<div id="bookmarks"></div>
</div>
</body>
</html>