multiple bookmark dropdowns

CharlesDawley · ‎12-18-2011

I'm alittle confused as how to add multiple dropdown bookmark menus.

Using the example what exactly do I need to duplicate as too have 2 dropdown menus right next to each other?

I seem to be able to add a second dropdown but it is not pulling from the array..

<!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 - Read-only Bookmarks</title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.6/js/dojo/dijit/themes/nihilo/nihilo.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.6/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-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;
        padding-left:20px;
      }

      #bookmarks-wrapper {
        position: absolute;
        z-index: 40;
        top: 15px;
        right: 30px;
        background: transparent;
        font-size: 12pt;
        color: #444;
      }

      #bookmarks-wrapper2 {
        position: absolute;
        z-index: 40;
        top: 15px;
        right: 150px;
        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 };</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.6"></script>
    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.form.DropDownButton");
      dojo.require("esri.map");
      dojo.require("esri.dijit.Bookmarks");      
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Dialog");
      dojo.require("dijit.form.TextBox");
     
     
      var map, bookmarks;
      //var map, bookmarks2;
      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);

        // Bookmarks can be specified as an array of objects with the structure:
        // { extent: <esri.geometry.Extent>, name: <some string> }
        var bookmarks = [{
          "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"
        }];

// Bookmarks can be specified as an array of objects with the structure:
        // { extent: <esri.geometry.Extent>, name: <some string> }
        var bookmarks2 = [{
          "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"
        }];


        // Create the bookmark widget
        bookmarks = new esri.dijit.Bookmarks({
          map: map,
          bookmarks: bookmarks
        }, dojo.byId('bookmarks'));                    
      }



      //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">Read-only bookmarks</div>



 <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 id="bookmarks-wrapper2">
          <div data-dojo-type="dijit.form.DropDownButton">
            <span>Bookmarks2</span>
            <div data-dojo-type="dijit.TooltipDialog">
              <div id="bookmarks2"></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>

SiqiLi · ‎12-19-2011

You need to:
(1) Define another global variable called "bookmarks2". For example:

   var map, bookmarks, bookmarks2;

(2) Create this bookmarks2 object and set its properties. Bind it to dojo.byId('bookmarks2').

bookmarks2 = new esri.dijit.Bookmarks({
          map: map,
          bookmarks: bookmarks2
        }, dojo.byId('bookmarks2'));

Here is the whole revised code for your reference:

<!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 - Read-only Bookmarks</title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.6/js/dojo/dijit/themes/nihilo/nihilo.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.6/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-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;
        padding-left:20px;
      }

      #bookmarks-wrapper {
        position: absolute;
        z-index: 40;
        top: 15px;
        right: 30px;
        background: transparent;
        font-size: 12pt;
        color: #444;
      }

      #bookmarks-wrapper2 {
        position: absolute;
        z-index: 40;
        top: 15px;
        right: 150px;
        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 };</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.6"></script>
    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.form.DropDownButton");
      dojo.require("esri.map");
      dojo.require("esri.dijit.Bookmarks");      
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Dialog");
      dojo.require("dijit.form.TextBox");
     
      var map, bookmarks, bookmarks2;   
      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);

        // Bookmarks can be specified as an array of objects with the structure:
        // { extent: <esri.geometry.Extent>, name: <some string> }
        var bookmarks = [{
          "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"
        }];

// Bookmarks can be specified as an array of objects with the structure:
        // { extent: <esri.geometry.Extent>, name: <some string> }
        var bookmarks2 = [{
          "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"
        }];


        // Create the bookmark widget
        bookmarks = new esri.dijit.Bookmarks({
          map: map,
          bookmarks: bookmarks
        }, dojo.byId('bookmarks'));     

 bookmarks2 = new esri.dijit.Bookmarks({
          map: map,
          bookmarks: bookmarks2
        }, dojo.byId('bookmarks2')); 
      }

      //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">Read-only bookmarks</div>

 <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 id="bookmarks-wrapper2">
          <div data-dojo-type="dijit.form.DropDownButton">
            <span>Bookmarks2</span>
            <div data-dojo-type="dijit.TooltipDialog">
              <div id="bookmarks2"></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>

CharlesDawley · ‎12-20-2011

excellent!

Now is there a tool that will easily give me the extent for a location?

thanks!

SiqiLi · ‎12-20-2011

excellent!

Now is there a tool that will easily give me the extent for a location?

thanks!

Yes, the following sample:
http://help.arcgis.com/en/webapi/javascript/arcgis/demos/map/map_currentextent.html