Hide Table of Contents
View Edit bookmarks sample in sandbox
Edit bookmarks

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>

 
         
Show Modal