<!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="http://js.arcgis.com/3.8/js/dojo/dijit/themes/nihilo/nihilo.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css"> <style> 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; } #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://js.arcgis.com/3.8/"></script> <script type="text/javascript" src="bookmarks.js"> </script> <script> dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("esri.map"); dojo.require("esri.dijit.Bookmarks"); var map; function init() { map = new esri.Map("map", { basemap: "topo", center: [-100, 40], zoom: 4 }); // Create the bookmark widget // specify "editable" as true to enable editing var bookmarkWidget = new esri.dijit.Bookmarks({ map: map, bookmarks: [], editable: true }, dojo.byId('bookmark')); dojo.forEach(bookmarks, function (bookmark, i) { console.log("bookmark", bookmark); bookmarkWidget.addBookmark(bookmark); }); } //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>
// Add bookmarks to the widget bookmarks=[]; 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" } bookmarks.push(bookmarkCA); bookmarks.push(bookmarkPA);
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
