Community
Select to view content in your preferred language

JSAPI, rename Dojo namespace, questions

3731
3
04-20-2015 03:54 PM
ChrisRomsos
by
Deactivated User
‎04-20-2015 03:54 PM

Hi,

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:

http://talon.coas.oregonstate.edu/demo/atlas.html

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

Rename Dojo namespace | ArcGIS API for JavaScript

helped quite a bit.

However, a few issues I'm up against now:

1) zoom sliders won't show

2) can't add more than one map layer (have tried addLayers() method with no luck).

Any thoughts?

0 Kudos
3 Replies
ChrisRomsos
by
Deactivated User
‎04-20-2015 04:14 PM

A copy of my html and js follows.

<!DOCTYPE HTML>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title>Demo: OCNMS Atlas Layout with Dijit</title>

        <link rel="stylesheet" href="http://talon.coas.oregonstate.edu/demo/style.css" media="screen">

        <link rel="stylesheet" href="https://community.esri.com//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dijit/themes/claro/claro.css" media="screen">

  <!-- load Dojo 1.8.0 from google CDN -->

        <script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js" data-dojo-config="async:true, parseOnLoad:true"></script>

  <!-- Load ESRI JSAPI 1.6 which includes Dojo 1.4.0 -->

  <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">

  <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css" />

  <script type = "text/javascript">

  djConfig = {

     scopeMap: [

       [ "dojo", "esriDojo" ],

       [ "dijit", "esriDijit" ],

       [ "dojox", "esriDojox" ]

     ]

   };

  </script>

  <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>

  <script type="text/javascript" src="http://talon.coas.oregonstate.edu/demo/atlas.js"></script>

  <script>

  djConfig = dojo.config;

  esriDojo.require("esri.map","esri.layers.agsdynamic","esri.toolbars.navigation");

  dojo.require("dijit.layout.ContentPane");

  </script>

    </head>

    <body class="claro">

        <div

            id="appLayout" class="demoLayout"

            data-dojo-type="dijit/layout/BorderContainer"

            data-dojo-props="design: 'headline'">

            <div

                id="myTabs"

                class="MapArea"

                data-dojo-type="dijit/layout/TabContainer"

                data-dojo-props="region: 'center', tabPosition: 'bottom'">

                <div id="map1"

  style="width:100%; height:1000px; border:1px solid #000;"

                        data-dojo-type="dijit/layout/ContentPane"

                        data-dojo-props="title: 'Seabed Habitats'">

                </div>

                <div id="map2"

  style="width:100%; height:1000px; border:1px solid #000;"

                        data-dojo-type="dijit/layout/ContentPane"

                        data-dojo-props="title: 'Seabed Imagery'">

                </div>

                <div id="map3"

  style="width:100%; height:1000px; border:1px solid #000;"

                        data-dojo-type="dijit/layout/ContentPane"

                        data-dojo-props="title: 'Bathymetry'">

                </div>

                <div id="map4"

  style="width:100%; height:1000px; border:1px solid #000;"

                        data-dojo-type="dijit/layout/ContentPane"

                        data-dojo-props="title: 'Structure'">

                </div>

            </div>

            <div id="edge1"

                class="edgePanel"

                data-dojo-type="dijit/layout/ContentPane"

                data-dojo-props="region: 'top'">Header content (top)

            </div>

            <div

                id="leftCol"

                class="edgePanel"

                data-dojo-type="dijit/layout/ContentPane"

                data-dojo-props="region: 'left', splitter: true"

                href="content.html">

            </div>

    </body>

</html>

*********************JavaScript Below ***********************

require(["dojo/parser",

        "dijit/layout/BorderContainer",

        "dijit/layout/TabContainer",

        "dijit/layout/ContentPane",

        "dojo/html",

        "dojo/dom",

        "dojo/on",

        "dojo/domReady!",

        "dojo",

        "dijit/registry"],

function(parser,BorderContainer,TabContainer,ContentPane,html,dom,on,domReady,dojo,registry){

    dojo.subscribe("myTabs-selectChild", function(selected){

        if(selected.title == "Seabed Habitats"){

            var node = dojo.byId("leftCol").innerHTML = "Seabed Habitats Narrative"

            //var cPane = registry.byId("leftCol");

            //cPane.attr("href", "content2.html")

            //cPane.refresh()

            }

        if(selected.title == "Seabed Imagery"){

            var node = dojo.byId("leftCol").innerHTML = "Seabed Imagery Narrative"

            }

        if(selected.title == "Bathymetry"){

            var node = dojo.byId("leftCol").innerHTML = "Bathymetry Narrative"

            }

        if(selected.title == "Structure"){

            var node = dojo.byId("leftCol").innerHTML = "Structure Narrative"

            }

        console.log(selected.title);

    });

});   

function init1() {

var extent = new esri.geometry.Extent(-126.5,47.00,-123.0,48.65, new esri.SpatialReference({wkid:4326}));

var map1 = new esri.Map("map1", {extent:esri.geometry.geographicToWebMercator(extent)});

var tiledMapServiceLayer1 = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer");

var overlayHabitats = new esri.layers.ArcGISDynamicMapServiceLayer("http://bhc.coas.oregonstate.edu/arcgis/rest/services/2014_BOEM/Seafloor_Induration_WA_OR_NCA/MapServ...");  

map1.addLayers([tiledMapServiceLayer1, overlayHabitats]);

map1.showZoomSlider()

};

function init2() {

var extent = new esri.geometry.Extent(-126.5,47.00,-123.0,48.65, new esri.SpatialReference({wkid:4326}));

var map2 = new esri.Map("map2", {extent:esri.geometry.geographicToWebMercator(extent)});

var tiledMapServiceLayer2 = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer");

map2.addLayer(tiledMapServiceLayer2);

};

function init3() {

var extent = new esri.geometry.Extent(-126.5,47.00,-123.0,48.65, new esri.SpatialReference({wkid:4326}));

var map3 = new esri.Map("map3", {extent:esri.geometry.geographicToWebMercator(extent)});

var tiledMapServiceLayer3 = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer");

map3.addLayer(tiledMapServiceLayer3);

};

function init4() {

var extent = new esri.geometry.Extent(-126.5,47.00,-123.0,48.65, new esri.SpatialReference({wkid:4326}));

var map4 = new esri.Map("map4", {extent:esri.geometry.geographicToWebMercator(extent)});

var tiledMapServiceLayer4 = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer");

map4.addLayer(tiledMapServiceLayer4);

};

esriDojo.addOnLoad(init1);

esriDojo.addOnLoad(init2);

esriDojo.addOnLoad(init3);

esriDojo.addOnLoad(init4);

0 Kudos
ChrisRomsos
by
Deactivated User
‎04-22-2015 12:01 PM

Well, first off...

Apologies for the broken link.  I forgot to change a firewall rule so anyone who tried the link couldn't see the site.

Next,

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.

So,

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:

I have a TabContainer located in the center region.

The TabContainer includes 4 "tabs", each a ContentPane.

So, roughly..

<div data-dojo-type="dijit/layout/TabConainer">

  <div id="map1" data-dojo-type="dijit/layout/CotentPane"></div>

  <div id="map2" data-dojo-type="dijit/layout/CotentPane"></div>

  <div id="map3" data-dojo-type="dijit/layout/CotentPane"></div>

  <div id="map4" data-dojo-type="dijit/layout/CotentPane"></div>

</div>

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.

When the page loads I get what is expected for the first tab.

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.

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.

This link should work now.  Sorry for the oversight earlier.

http://talon.coas.oregonstate.edu/demo/atlas.html

To summarize:

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?

Thanks, Chris

0 Kudos
ChrisRomsos
by
Deactivated User
‎04-22-2015 12:14 PM

Update:

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.

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.

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.

Chris

0 Kudos