Bookmarks and calling code from different modules

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

I have been doing some developement in Silverlight and Flex for awhile now. However, Javascript and HTML5 really seem the way to go now that my company has invested in a bunch of iPads. So I am trying to learn as I go. I have a couple of questions.

1.) I would rather not have all of my code in one place. I will have a lot of bookmarks. How can I call these from another file?
2.) Can I just set the spatialreference once for my bookmarks instead of every single time?

        // --->Bookmarks
        var bookmarks_list = [{
          "extent": {"spatialReference": {"wkid": 102100},"xmin":-13587617,"ymin":4564540,"xmax":-13587178,"ymax":4564976},
          "name": "BroadWay Plaza!"},

    {"extent": {"spatialReference": {"wkid":102100},"xmin":-13837359,"ymin":4507794,"xmax":-13501037,"ymax":4866253},
          "name": "Bay Area North District"
        }];
//------>End of bookmarks

KenBuja · ‎03-20-2014

Here's one way to do it. You can use a module that contains the booksmarks. Here is a tutorial about creating modules. Create a separate Javascript file called "Bookmarks.js" in a directory called modules. That files looks like this

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!"         }, ]     }; });

You can use that module in the code like this (adapted from the Bookmark Sample😞

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

View solution in original post

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

I have a feeling someone knows the answer to this question but they are not sharing.

KenBuja · ‎03-20-2014

Here's one way to do it. You can use a module that contains the booksmarks. Here is a tutorial about creating modules. Create a separate Javascript file called "Bookmarks.js" in a directory called modules. That files looks like this

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!"         }, ]     }; });

You can use that module in the code like this (adapted from the Bookmark Sample😞

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

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

Thanks that was very usefull

KenBuja · ‎03-20-2014

To do this without having the spatial reference in each bookmark, you have to add some extra code to add it.

        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'));
            });

KenBuja · ‎03-20-2014

Thanks that was very usefull

Glad to help. Don't forget to mark the post as answered to help those who are searching on this question.