The Bookmark widget can be configured to allow users to create, update and delete bookmarks. Configuring a bookmark widget to allow users to edit is as simple as setting editable to true in the options object passed to the bookmark widget constructor.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Bookmark Widget (Editable)</title>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.7/js/dojo/dijit/themes/nihilo/nihilo.css">
<! -- include the CSS for the bookmark widget -->
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.7/js/esri/dijit/css/bookmarks.css">
<style type="text/css">
html, body {
height: 100%; width: 100%;
margin: 0; padding: 0;
}
body{
background-color: #fff; overflow:hidden;
font-family: sans-serif;
}
#header {
padding-top: 4px;
padding-right: 15px;
background-color:#444;
color:#fff;
font-size:16pt; text-align:right;font-weight:bold;
height:55px;
}
#subheader {
font-size:small;
color: #cfcfcf;
text-align:right;
padding-right:20px;
}
#leftPane{
margin: 0;
padding: 5px;
width: 250px;
color: #3C1700;
background-color: #fff;
}
.ds { background: #000; overflow: hidden; position: absolute; z-index: 2; }
#ds-h div { width: 100%; }
#ds-l div { height: 100%; }
#ds .o1 { filter: alpha(opacity=10); opacity: .1; }
#ds .o2 { filter: alpha(opacity=8); opacity: .08; }
#ds .o3 { filter: alpha(opacity=6); opacity: .06; }
#ds .o4 { filter: alpha(opacity=4); opacity: .04; }
#ds .o5 { filter: alpha(opacity=2); opacity: .02; }
#ds .h1 { height: 1px; }
#ds .h2 { height: 2px; }
#ds .h3 { height: 3px; }
#ds .h4 { height: 4px; }
#ds .h5 { height: 5px; }
#ds .v1 { width: 1px; }
#ds .v2 { width: 2px; }
#ds .v3 { width: 3px; }
#ds .v4 { width: 4px; }
#ds .v5 { width: 5px; }
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.7"></script>
<script>
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("dijit.layout.AccordionContainer");
dojo.require("esri.dijit.Bookmarks");
var map;
function init() {
var initialExtent = new esri.geometry.Extent({"xmin":-15949444,"ymin":2286770,"xmax":-6507942,"ymax":7374419,"spatialReference":{"wkid":102100}});
map = new esri.Map("map", {
extent: initialExtent
});
// Resize the map when the browser resizes
dojo.connect(map, 'onLoad', function() {
dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
});
var url = "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer";
var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer(url);
map.addLayer(tiledLayer);
// Create the bookmark widget
// specify "editable" as true to enable editing
var bookmark = new esri.dijit.Bookmarks({
map: map,
bookmarks: [],
editable: true
}, dojo.byId('bookmark'));
// Add bookmarks to the widget
var bookmarkCA = {
"extent": {
"spatialReference": {
"wkid": 102100
},
"xmin":-14201669,
"ymin":4642975,
"xmax":-13021482,
"ymax":5278931
},
"name": "Northern California"
}
var bookmarkPA = {
"extent": {
"spatialReference": {
"wkid":102100
},
"xmin":-8669334,
"ymin":4982379,
"xmax":-8664724,
"ymax":4984864
},
"name": "Central Pennsylvania"
}
bookmark.addBookmark(bookmarkCA);
bookmark.addBookmark(bookmarkPA);
}
//show map on load
dojo.ready(init);
</script>
</head>
<body class="nihilo">
<div id="mainWindow"
data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design:'headline',gutters:false"
style="width: 100%; height: 100%; margin: 0;">
<div id="header"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'top'">
Bookmark Widget Sample
<div id="subheader">Create, update and delete bookmarks</div>
</div>
<div id="leftPane"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'left'">
<div id="bookmark"></div>
</div>
<div id="map" class="shadow"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'center'">
<div id="ds"> <!-- drop shadow divs -->
<div id="ds-h">
<div class="ds h1 o1"></div>
<div class="ds h2 o2"></div>
<div class="ds h3 o3"></div>
<div class="ds h4 o4"></div>
<div class="ds h5 o5"></div>
</div>
<div id="ds-l">
<div class="ds v1 o1"></div>
<div class="ds v2 o2"></div>
<div class="ds v3 o3"></div>
<div class="ds v4 o4"></div>
<div class="ds v5 o5"></div>
</div>
</div> <!-- end drop shadow divs -->
</div>
</div>
</body>
</html>