nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Bookmarks and calling code from different modules

deleted-user-yA_w_FC9FKe5

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

Finde mehr Beiträge mit dem Tag

Accepted answers

kenbuja

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>

All comments

kenbuja

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.

kenbuja

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

deleted-user-yA_w_FC9FKe5

Thanks that was very usefull

kenbuja

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

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

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.