Solved! Go to Solution.
define([], function () { return { list: [{ "extent": { "spatialReference": { "wkid": 102100 }, "xmin": -14201669, "ymin": 4642975, "xmax": -13021482, "ymax": 5278931 }, "name": "Northern California" }, { "extent": { "spatialReference": { "wkid": 102100 }, "xmin": -8669334, "ymin": 4982379, "xmax": -8664724, "ymax": 4984864 }, "name": "Central Pennsylvania" }, { "extent": { "spatialReference": { "wkid": 102100 }, "xmin": -13587617, "ymin": 4564540, "xmax": -13587178, "ymax": 4564976 }, "name": "BroadWay Plaza!" }, ] }; });
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Bookmark Widget(Read-only Bookmarks)</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-left: 15px; background-color: #444; color: #fff; font-size: 16pt; text-align: left; font-weight: bold; height: 55px; } #subheader { font-size: small; color: #cfcfcf; text-align: left; } #bookmarks-wrapper { position: absolute; z-index: 40; top: 15px; right: 30px; background: transparent; font-size: 12pt; color: #444; } .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; } </style> <script> var dojoConfig = { parseOnLoad: true, packages: [ { name: "modules", location: location.pathname.replace(/\/[^/]+$/, "") + "/modules" } ] }; </script> <script src="http://js.arcgis.com/3.8/"></script> <script> var map, bookmarks; require(["esri/map", "esri/dijit/Bookmarks", "modules/Bookmarks", "dojo/dom", "dojo/domReady!"], function (map, Bookmarks, modBookmarks, dom) { map = new map("map", { basemap: "topo", center: [-100, 40], zoom: 4 }); // Create the bookmark widget bookmarks = new Bookmarks({ map: map, bookmarks: modBookmarks.list }, dom.byId('bookmarks')); }); </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">Read-only bookmarks</div> <!-- Bookmarks widget inside a Drop Down Button --> <div id="bookmarks-wrapper"> <div data-dojo-type="dijit/form/DropDownButton"> <span>Bookmarks</span> <div data-dojo-type="dijit/TooltipDialog"> <div id="bookmarks"></div> </div> </div> </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> <!-- end drop shadow divs --> </div> </div> </body> </html>
define([], function () { return { list: [{ "extent": { "spatialReference": { "wkid": 102100 }, "xmin": -14201669, "ymin": 4642975, "xmax": -13021482, "ymax": 5278931 }, "name": "Northern California" }, { "extent": { "spatialReference": { "wkid": 102100 }, "xmin": -8669334, "ymin": 4982379, "xmax": -8664724, "ymax": 4984864 }, "name": "Central Pennsylvania" }, { "extent": { "spatialReference": { "wkid": 102100 }, "xmin": -13587617, "ymin": 4564540, "xmax": -13587178, "ymax": 4564976 }, "name": "BroadWay Plaza!" }, ] }; });
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Bookmark Widget(Read-only Bookmarks)</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-left: 15px; background-color: #444; color: #fff; font-size: 16pt; text-align: left; font-weight: bold; height: 55px; } #subheader { font-size: small; color: #cfcfcf; text-align: left; } #bookmarks-wrapper { position: absolute; z-index: 40; top: 15px; right: 30px; background: transparent; font-size: 12pt; color: #444; } .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; } </style> <script> var dojoConfig = { parseOnLoad: true, packages: [ { name: "modules", location: location.pathname.replace(/\/[^/]+$/, "") + "/modules" } ] }; </script> <script src="http://js.arcgis.com/3.8/"></script> <script> var map, bookmarks; require(["esri/map", "esri/dijit/Bookmarks", "modules/Bookmarks", "dojo/dom", "dojo/domReady!"], function (map, Bookmarks, modBookmarks, dom) { map = new map("map", { basemap: "topo", center: [-100, 40], zoom: 4 }); // Create the bookmark widget bookmarks = new Bookmarks({ map: map, bookmarks: modBookmarks.list }, dom.byId('bookmarks')); }); </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">Read-only bookmarks</div> <!-- Bookmarks widget inside a Drop Down Button --> <div id="bookmarks-wrapper"> <div data-dojo-type="dijit/form/DropDownButton"> <span>Bookmarks</span> <div data-dojo-type="dijit/TooltipDialog"> <div id="bookmarks"></div> </div> </div> </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> <!-- end drop shadow divs --> </div> </div> </body> </html>
require(["esri/map", "esri/dijit/Bookmarks", "modules/Bookmarks", "dojo/dom", "dojo/_base/array", "dojo/_base/lang", "dojo/domReady!"], function (map, Bookmarks, modBookmarks, dom, array, lang) { map = new map("map", { basemap: "topo", center: [-100, 40], zoom: 4 }); var bookmark_list = []; array.forEach(modBookmarks.list, function (item) { lang.mixin(item.extent, { "spatialReference": { "wkid": 102100 } }); bookmark_list.push(item); }); // Create the bookmark widget bookmarks = new Bookmarks({ map: map, bookmarks: bookmark_list }, dom.byId('bookmarks')); });
Thanks that was very usefull