Bookmarks

deleted-user-yA_w_FC9FKe5 · ‎03-07-2014

I saw a couple of bookmark examples but my problem lies in that I don't want my bookmarks all listed in my main html file. I have over 700 bookmarks. Is it possible to use the bookmarks widget or something else and call the bookmarks from another file?

SteveCole · ‎03-07-2014

One option might be to store your bookmark information in a standalone table that's tucked inside one of your published services and then just use a queryTask on the table to retrieve the needed information (e.g. "NAME='Times Square'").

Steve

DavideLimosani · ‎03-07-2014

if you want to put your bookmarks in another file you can do something like this:

html file:

<!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>

bookmarks.js file:


// 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);

Davide