topic Re: JSAPI, rename Dojo namespace, questions in ArcGIS Server with JavaScript API Questions

topic Re: JSAPI, rename Dojo namespace, questions in ArcGIS Server with JavaScript API Questions https://community.esri.com/t5/arcgis-server-with-javascript-api-questions/jsapi-rename-dojo-namespace-questions/m-p/783518#M196 <HTML><HEAD></HEAD><BODY><P>Well, first off...</P><P>Apologies for the broken link.  I forgot to change a firewall rule so anyone who tried the link couldn't see the site.</P><P></P><P>Next,</P><P>I scrapped most of what I had, took a look at the example provided for "layout_MapContainerSplitLeft".  Realized that I didn't need to load multiple versions of dojo and rename any namespaces.  I just needed to start over, fix some css and do a bit more research on each piece I was trying to implement. </P><P></P><P>So,</P><P>My application is working much better now.  I can almost go back to developing content!  One thing that has me scratching my head is this:</P><P></P><P>I have a TabContainer located in the center region.</P><P>The TabContainer includes 4 "tabs", each a ContentPane.</P><P></P><P>So, roughly..</P><P></P><P><div data-dojo-type="dijit/layout/TabConainer"></P><P>  <div id="map1" data-dojo-type="dijit/layout/CotentPane"></div></P><P>  <div id="map2" data-dojo-type="dijit/layout/CotentPane"></div></P><P>  <div id="map3" data-dojo-type="dijit/layout/CotentPane"></div></P><P>  <div id="map4" data-dojo-type="dijit/layout/CotentPane"></div></P><P></div></P><P></P><P>I add a map to each ContentPane using dojo.ready(init1) where init1 (2,3,4) is my function specifying the map, center, zoom level, basemaps, dynamic layers, etc.</P><P></P><P>When the page loads I get what is expected for the first tab.</P><P>However, when I select any other tab (2,3, or 4) I get the new map with the correct basemap & dynamic layers but I don't get the expected ZOOM level or the expected extent/center.</P><P></P><P>Am I missing something relate to how the maps are added to the ContentPanes?  Each tab should have a map at the same zoom level and centered on the same location.</P><P></P><P>This link should work now.  Sorry for the oversight earlier.</P><P><A href="http://talon.coas.oregonstate.edu/demo/atlas.html" title="http://talon.coas.oregonstate.edu/demo/atlas.html">http://talon.coas.oregonstate.edu/demo/atlas.html</A> </P><P></P><P>To summarize:</P><P>When the page loads the focus appears to be on the first tab and the map loads as expected (centered off the Olympic Coast of Washington State).  Toggling to other tabs centers the new maps to a new location and sets the zoom level to REALLY REALLY zoomed in.  Also, the new and incorrect centers and zoom levels seem to be consistent.  I can reload the page and I know where the other tabs will center and zoom in to before I click them.  Why do my specified zoom levels and map centers seem to be ignored or modified when I select a new tab?</P><P></P><P>Thanks, Chris</P></BODY></HTML> Wed, 22 Apr 2015 19:01:00 GMT ChrisRomsos 2015-04-22T19:01:00Z JSAPI, rename Dojo namespace, questions https://community.esri.com/t5/arcgis-server-with-javascript-api-questions/jsapi-rename-dojo-namespace-questions/m-p/783516#M194 <HTML><HEAD></HEAD><BODY><P>Hi,</P><P></P><P>I've been trying to implement a few maps within a tabbed dojo layout (TabContainer & ContentPane(s)).  So far I've got this much working:</P><P></P><P><A href="http://talon.coas.oregonstate.edu/demo/atlas.html" title="http://talon.coas.oregonstate.edu/demo/atlas.html">http://talon.coas.oregonstate.edu/demo/atlas.html</A> </P><P></P><P>I ran into some issues where the ESRI JSAPI didn't include features I needed or desired for the tabbed layout.  So the instructions at </P><P></P><P><A href="http://125.221.225.113/arcgis_js_api/sdk/jssamples/mapconfig_customdojo.html" title="http://125.221.225.113/arcgis_js_api/sdk/jssamples/mapconfig_customdojo.html">Rename Dojo namespace | ArcGIS API for JavaScript</A> </P><P></P><P>helped quite a bit.</P><P></P><P>However, a few issues I'm up against now:</P><P>1) zoom sliders won't show</P><P>2) can't add more than one map layer (have tried addLayers() method with no luck).</P><P></P><P>Any thoughts?</P></BODY></HTML> Mon, 20 Apr 2015 22:54:52 GMT https://community.esri.com/t5/arcgis-server-with-javascript-api-questions/jsapi-rename-dojo-namespace-questions/m-p/783516#M194 ChrisRomsos 2015-04-20T22:54:52Z Re: JSAPI, rename Dojo namespace, questions https://community.esri.com/t5/arcgis-server-with-javascript-api-questions/jsapi-rename-dojo-namespace-questions/m-p/783517#M195 <HTML><HEAD></HEAD><BODY><P>A copy of my html and js follows.</P><P></P><P><!DOCTYPE HTML></P><P><html lang="en"></P><P>    <head></P><P>        <meta charset="utf-8"></P><P>        <title>Demo: OCNMS Atlas Layout with Dijit</title></P><P><SPAN>        <link rel="stylesheet" href="</SPAN><A class="jive-link-external-small" href="http://talon.coas.oregonstate.edu/demo/style.css" rel="nofollow" target="_blank">http://talon.coas.oregonstate.edu/demo/style.css</A><SPAN>" media="screen"></SPAN></P><P>        <link rel="stylesheet" href="https://community.esri.com//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dijit/themes/claro/claro.css" media="screen"></P><P></P><P>  </P><P>        <script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js" data-dojo-config="async:true, parseOnLoad:true"></script></P><P></P><P></P><P>  </P><P><SPAN>  <link rel="stylesheet" href="</SPAN><A class="jive-link-external-small" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css" rel="nofollow" target="_blank">http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css</A><SPAN>"></SPAN></P><P><SPAN>  <link rel="stylesheet" href="</SPAN><A class="jive-link-external-small" href="http://js.arcgis.com/3.13/esri/css/esri.css" rel="nofollow" target="_blank">http://js.arcgis.com/3.13/esri/css/esri.css</A><SPAN>" /></SPAN></P><P></P><P>  <script type = "text/javascript"></P><P>  djConfig = {</P><P>     scopeMap: [</P><P>       [ "dojo", "esriDojo" ],</P><P>       [ "dijit", "esriDijit" ],</P><P>       [ "dojox", "esriDojox" ]</P><P>     ]</P><P>   };</P><P>  </script></P><P><SPAN>  <script src="</SPAN><A class="jive-link-external-small" href="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8" rel="nofollow" target="_blank">http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8</A><SPAN>"></script></SPAN></P><P><SPAN>  <script type="text/javascript" src="</SPAN><A class="jive-link-external-small" href="http://talon.coas.oregonstate.edu/demo/atlas.js" rel="nofollow" target="_blank">http://talon.coas.oregonstate.edu/demo/atlas.js</A><SPAN>"></script></SPAN></P><P>  <script></P><P>  djConfig = dojo.config;</P><P>  esriDojo.require("esri.map","esri.layers.agsdynamic","esri.toolbars.navigation");</P><P>  dojo.require("dijit.layout.ContentPane");</P><P>  </script></P><P>    </head></P><P>    <body class="claro"></P><P>        <div </P><P>            id="appLayout" class="demoLayout"</P><P>            data-dojo-type="dijit/layout/BorderContainer"</P><P>            data-dojo-props="design: 'headline'"></P><P>            <div </P><P>                id="myTabs"</P><P>                class="MapArea"</P><P>                data-dojo-type="dijit/layout/TabContainer"</P><P>                data-dojo-props="region: 'center', tabPosition: 'bottom'"></P><P>                <div id="map1"</P><P>  style="width:100%; height:1000px; border:1px solid #000;"</P><P>                        data-dojo-type="dijit/layout/ContentPane"</P><P>                        data-dojo-props="title: 'Seabed Habitats'"></P><P>                </div></P><P>                <div id="map2"</P><P>  style="width:100%; height:1000px; border:1px solid #000;"</P><P>                        data-dojo-type="dijit/layout/ContentPane"</P><P>                        data-dojo-props="title: 'Seabed Imagery'"></P><P></P><P>                </div></P><P>                <div id="map3"</P><P>  style="width:100%; height:1000px; border:1px solid #000;"</P><P>                        data-dojo-type="dijit/layout/ContentPane"</P><P>                        data-dojo-props="title: 'Bathymetry'"></P><P>                </div></P><P>                <div id="map4"</P><P>  style="width:100%; height:1000px; border:1px solid #000;"</P><P>                        data-dojo-type="dijit/layout/ContentPane"</P><P>                        data-dojo-props="title: 'Structure'"></P><P>                </div></P><P>            </div></P><P>            <div id="edge1"</P><P>                class="edgePanel"</P><P>                data-dojo-type="dijit/layout/ContentPane"</P><P>                data-dojo-props="region: 'top'">Header content (top)</P><P>            </div></P><P>            <div </P><P>                id="leftCol" </P><P>                class="edgePanel"</P><P>                data-dojo-type="dijit/layout/ContentPane"</P><P>                data-dojo-props="region: 'left', splitter: true"</P><P>                href="content.html"></P><P>            </div></P><P>    </body></P><P></html></P><P>*********************JavaScript Below ***********************</P><P>require(["dojo/parser",</P><P>        "dijit/layout/BorderContainer",</P><P>        "dijit/layout/TabContainer",</P><P>        "dijit/layout/ContentPane",</P><P>        "dojo/html",</P><P>        "dojo/dom",</P><P>        "dojo/on",</P><P>        "dojo/domReady!",</P><P>        "dojo",</P><P>        "dijit/registry"],</P><P></P><P></P><P>function(parser,BorderContainer,TabContainer,ContentPane,html,dom,on,domReady,dojo,registry){</P><P></P><P></P><P>    dojo.subscribe("myTabs-selectChild", function(selected){</P><P>        if(selected.title == "Seabed Habitats"){</P><P>            var node = dojo.byId("leftCol").innerHTML = "Seabed Habitats Narrative"</P><P>            //var cPane = registry.byId("leftCol");</P><P>            //cPane.attr("href", "content2.html")</P><P>            //cPane.refresh()</P><P>            }</P><P>        if(selected.title == "Seabed Imagery"){</P><P>            var node = dojo.byId("leftCol").innerHTML = "Seabed Imagery Narrative"</P><P>            }</P><P>        if(selected.title == "Bathymetry"){</P><P>            var node = dojo.byId("leftCol").innerHTML = "Bathymetry Narrative"</P><P>            }</P><P>        if(selected.title == "Structure"){</P><P>            var node = dojo.byId("leftCol").innerHTML = "Structure Narrative"</P><P>            }</P><P>        console.log(selected.title);</P><P>    });</P><P>});    </P><P></P><P></P><P>function init1() {</P><P>var extent = new esri.geometry.Extent(-126.5,47.00,-123.0,48.65, new esri.SpatialReference({wkid:4326}));</P><P>var map1 = new esri.Map("map1", {extent:esri.geometry.geographicToWebMercator(extent)});</P><P><SPAN>var tiledMapServiceLayer1 = new esri.layers.ArcGISTiledMapServiceLayer("</SPAN><A class="jive-link-external-small" href="http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer" rel="nofollow" target="_blank">http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer</A><SPAN>");</SPAN></P><P><SPAN>var overlayHabitats = new esri.layers.ArcGISDynamicMapServiceLayer("</SPAN><A class="jive-link-external-small" href="http://bhc.coas.oregonstate.edu/arcgis/rest/services/2014_BOEM/Seafloor_Induration_WA_OR_NCA/MapServer" rel="nofollow" target="_blank">http://bhc.coas.oregonstate.edu/arcgis/rest/services/2014_BOEM/Seafloor_Induration_WA_OR_NCA/MapServer</A><SPAN>");   </SPAN></P><P>map1.addLayers([tiledMapServiceLayer1, overlayHabitats]);</P><P>map1.showZoomSlider()</P><P>};</P><P>function init2() {</P><P>var extent = new esri.geometry.Extent(-126.5,47.00,-123.0,48.65, new esri.SpatialReference({wkid:4326}));</P><P>var map2 = new esri.Map("map2", {extent:esri.geometry.geographicToWebMercator(extent)});</P><P><SPAN>var tiledMapServiceLayer2 = new esri.layers.ArcGISTiledMapServiceLayer("</SPAN><A class="jive-link-external-small" href="http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer" rel="nofollow" target="_blank">http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer</A><SPAN>");</SPAN></P><P>map2.addLayer(tiledMapServiceLayer2);</P><P>};</P><P>function init3() {</P><P>var extent = new esri.geometry.Extent(-126.5,47.00,-123.0,48.65, new esri.SpatialReference({wkid:4326}));</P><P>var map3 = new esri.Map("map3", {extent:esri.geometry.geographicToWebMercator(extent)});</P><P><SPAN>var tiledMapServiceLayer3 = new esri.layers.ArcGISTiledMapServiceLayer("</SPAN><A class="jive-link-external-small" href="http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer" rel="nofollow" target="_blank">http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer</A><SPAN>");</SPAN></P><P>map3.addLayer(tiledMapServiceLayer3);</P><P>};</P><P>function init4() {</P><P>var extent = new esri.geometry.Extent(-126.5,47.00,-123.0,48.65, new esri.SpatialReference({wkid:4326}));</P><P>var map4 = new esri.Map("map4", {extent:esri.geometry.geographicToWebMercator(extent)});</P><P><SPAN>var tiledMapServiceLayer4 = new esri.layers.ArcGISTiledMapServiceLayer("</SPAN><A class="jive-link-external-small" href="http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer" rel="nofollow" target="_blank">http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer</A><SPAN>");</SPAN></P><P>map4.addLayer(tiledMapServiceLayer4);</P><P>};</P><P>esriDojo.addOnLoad(init1);</P><P>esriDojo.addOnLoad(init2);</P><P>esriDojo.addOnLoad(init3);</P><P>esriDojo.addOnLoad(init4);</P></BODY></HTML> Mon, 20 Apr 2015 23:14:45 GMT https://community.esri.com/t5/arcgis-server-with-javascript-api-questions/jsapi-rename-dojo-namespace-questions/m-p/783517#M195 ChrisRomsos 2015-04-20T23:14:45Z Re: JSAPI, rename Dojo namespace, questions https://community.esri.com/t5/arcgis-server-with-javascript-api-questions/jsapi-rename-dojo-namespace-questions/m-p/783518#M196 <HTML><HEAD></HEAD><BODY><P>Well, first off...</P><P>Apologies for the broken link.  I forgot to change a firewall rule so anyone who tried the link couldn't see the site.</P><P></P><P>Next,</P><P>I scrapped most of what I had, took a look at the example provided for "layout_MapContainerSplitLeft".  Realized that I didn't need to load multiple versions of dojo and rename any namespaces.  I just needed to start over, fix some css and do a bit more research on each piece I was trying to implement. </P><P></P><P>So,</P><P>My application is working much better now.  I can almost go back to developing content!  One thing that has me scratching my head is this:</P><P></P><P>I have a TabContainer located in the center region.</P><P>The TabContainer includes 4 "tabs", each a ContentPane.</P><P></P><P>So, roughly..</P><P></P><P><div data-dojo-type="dijit/layout/TabConainer"></P><P>  <div id="map1" data-dojo-type="dijit/layout/CotentPane"></div></P><P>  <div id="map2" data-dojo-type="dijit/layout/CotentPane"></div></P><P>  <div id="map3" data-dojo-type="dijit/layout/CotentPane"></div></P><P>  <div id="map4" data-dojo-type="dijit/layout/CotentPane"></div></P><P></div></P><P></P><P>I add a map to each ContentPane using dojo.ready(init1) where init1 (2,3,4) is my function specifying the map, center, zoom level, basemaps, dynamic layers, etc.</P><P></P><P>When the page loads I get what is expected for the first tab.</P><P>However, when I select any other tab (2,3, or 4) I get the new map with the correct basemap & dynamic layers but I don't get the expected ZOOM level or the expected extent/center.</P><P></P><P>Am I missing something relate to how the maps are added to the ContentPanes?  Each tab should have a map at the same zoom level and centered on the same location.</P><P></P><P>This link should work now.  Sorry for the oversight earlier.</P><P><A href="http://talon.coas.oregonstate.edu/demo/atlas.html" title="http://talon.coas.oregonstate.edu/demo/atlas.html">http://talon.coas.oregonstate.edu/demo/atlas.html</A> </P><P></P><P>To summarize:</P><P>When the page loads the focus appears to be on the first tab and the map loads as expected (centered off the Olympic Coast of Washington State).  Toggling to other tabs centers the new maps to a new location and sets the zoom level to REALLY REALLY zoomed in.  Also, the new and incorrect centers and zoom levels seem to be consistent.  I can reload the page and I know where the other tabs will center and zoom in to before I click them.  Why do my specified zoom levels and map centers seem to be ignored or modified when I select a new tab?</P><P></P><P>Thanks, Chris</P></BODY></HTML> Wed, 22 Apr 2015 19:01:00 GMT https://community.esri.com/t5/arcgis-server-with-javascript-api-questions/jsapi-rename-dojo-namespace-questions/m-p/783518#M196 ChrisRomsos 2015-04-22T19:01:00Z Re: JSAPI, rename Dojo namespace, questions https://community.esri.com/t5/arcgis-server-with-javascript-api-questions/jsapi-rename-dojo-namespace-questions/m-p/783519#M197 <HTML><HEAD></HEAD><BODY><P>Update:</P><P>Using the Java Console it looks like on the page load everything I set in my map functions is correct or maintained for each Content Pane.</P><P></P><P>When I toggle to an alternate tab I can see the zoom level change in the console!  So, the expected or correct values are changed when I change the focus to the other content panes.</P><P></P><P>After than I can move about among the tabs and return to a tab and the map is centered and zoomed to where I left it.</P><P></P><P>Chris</P></BODY></HTML> Wed, 22 Apr 2015 19:14:06 GMT https://community.esri.com/t5/arcgis-server-with-javascript-api-questions/jsapi-rename-dojo-namespace-questions/m-p/783519#M197 ChrisRomsos 2015-04-22T19:14:06Z