<!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);
Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
