Getting 304 errors with OverviewMap

PattyJula · ‎12-10-2013

Hi, I have a feature layer and scale bar working properly in a web page with the JavaScript API. When I add an Overview Map, I get 304 errors and can only see an info box when I open the page. My code is below.

<!DOCTYPE html> <html>   <head>      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">     <title>LA Collisions</title>     <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">      <style>          html, body, map { height: 100%; margin: 0; padding: 0; }           #info {          background: #fff;          box-shadow: 0 0 5px #888;          left: 5em;          padding: 0.5em;          position: absolute;           top: 1em;          z-index: 40;       }     </style>      <script>var dojoConfig = { parseOnLoad: true }</script>     <script src="http://js.arcgis.com/3.7/"></script>     <script>        var map;        require([          "esri/map",          "dijit/layout/BorderContainer",          "dijit/layout/ContentPane",          "esri/dijit/InfoWindowLite",         "esri/InfoTemplate",         "esri/layers/FeatureLayer",         "dojo/dom-construct",         "esri/dijit/OverviewMap",          "esri/dijit/Scalebar",         "dojo/parser",         "dojo/domReady!"        ], function (            Map,           InfoWindowLite,           InfoTemplate,           FeatureLayer,           domConstruct,           OverviewMap,    Scalebar,           parser       ) {         parser.parse();         var  map = new Map("map", {           basemap: "topo",           center: [-118.5, 34],           zoom: 11         });                 var scalebar = new Scalebar({           map: map,           // "dual" displays both miles and kilmometers           // "english" is the default, which displays miles           // use "metric" for kilometers           scalebarUnit: "dual"         });        var infoWindow = new InfoWindowLite(null, domConstruct.create("div", null, null, map.root));         infoWindow.startup();         map.setInfoWindow(infoWindow);          var template = new InfoTemplate();         template.setTitle("<b>${OMEGA_NAME}</b>");         template.setContent("<b>Collision Count:</b> ${COUNT_}</br>  <b>Area (square miles):</b> ${AREA_MI}</br>");          //add a layer to the map         var featureLayer = new FeatureLayer("http://arcgis-pjula1gistusc-772545567.us-west-1.elb.amazonaws.com/arcgis/rest/services/LAPD_collisions2/MapServer/0", {            mode: FeatureLayer.MODE_ONDEMAND,           infoTemplate:template,           outFields: ["OMEGA_NAME","REP_DIS", "COUNT_", "AREA_MI", "COLL_RATE"],           opacity:.60         });          map.addLayer(featureLayer);         });          var overviewMapDijit = new OverviewMap({            map: map,           visible: true         });         overviewMapDijit.startup();       });       </script>   </head>     <body>      <div id="info">         Click on a reporting district in Los Angeles to get more information.       </div>   <body class="claro">       <div data-dojo-type="dijit/layout/BorderContainer"           data-dojo-props="design:'headline', gutters:false"          style="width: 100%; height: 100%; margin: 0;">        <div id="map"             data-dojo-type="dijit/layout/ContentPane"             data-dojo-props="region:'center'"             style="overflow:hidden;">    </body>  </html>

Does anyone see what I'm missing? I'm using ArcGIS 10.2 and JavaScript 3.7. The feature layer will probably not be visible when you run this code. Thanks! Patty

JonathanUihlein · ‎12-11-2013

Your dependancies are in the wrong order:

       "esri/map",          "dijit/layout/BorderContainer",          "dijit/layout/ContentPane",          "esri/dijit/InfoWindowLite",         "esri/InfoTemplate",         "esri/layers/FeatureLayer",         "dojo/dom-construct",         "esri/dijit/OverviewMap",          "esri/dijit/Scalebar",         "dojo/parser",         "dojo/domReady!"        ], function (            Map,           InfoWindowLite,           InfoTemplate,           FeatureLayer,           domConstruct,           OverviewMap,    Scalebar,           parser       ) {

Change to:

       "esri/map",          "esri/dijit/InfoWindowLite",         "esri/InfoTemplate",         "esri/layers/FeatureLayer",         "dojo/dom-construct",         "esri/dijit/OverviewMap",          "esri/dijit/Scalebar",         "dojo/parser",         "dijit/layout/BorderContainer",          "dijit/layout/ContentPane",          "dojo/domReady!"        ], function (            Map,           InfoWindowLite,           InfoTemplate,           FeatureLayer,           domConstruct,           OverviewMap,    Scalebar,           parser       ) {

View solution in original post

JeffPace · ‎12-11-2013

try this, i think you are missing the "attachTo"

 var overviewMapDijit = new OverviewMap({
                                        map: map,
                                        attachTo: "bottom-left",
                                        color: " #D84E13",
                                        opacity: .40,
                                        maximizeButton:true
                                    });
                                    overviewMapDijit.startup();

PattyJula · ‎12-11-2013

Thanks for the response, Jeff. Yes, I think I was missing the "attachTo" as well. I have added it. I still can only see a few text boxes on the page.

If anyone has other suggestions, please let me know.

Thanks, Patty

JonathanUihlein · ‎12-11-2013

Your dependancies are in the wrong order:

       "esri/map",          "dijit/layout/BorderContainer",          "dijit/layout/ContentPane",          "esri/dijit/InfoWindowLite",         "esri/InfoTemplate",         "esri/layers/FeatureLayer",         "dojo/dom-construct",         "esri/dijit/OverviewMap",          "esri/dijit/Scalebar",         "dojo/parser",         "dojo/domReady!"        ], function (            Map,           InfoWindowLite,           InfoTemplate,           FeatureLayer,           domConstruct,           OverviewMap,    Scalebar,           parser       ) {

Change to:

       "esri/map",          "esri/dijit/InfoWindowLite",         "esri/InfoTemplate",         "esri/layers/FeatureLayer",         "dojo/dom-construct",         "esri/dijit/OverviewMap",          "esri/dijit/Scalebar",         "dojo/parser",         "dijit/layout/BorderContainer",          "dijit/layout/ContentPane",          "dojo/domReady!"        ], function (            Map,           InfoWindowLite,           InfoTemplate,           FeatureLayer,           domConstruct,           OverviewMap,    Scalebar,           parser       ) {

PattyJula · ‎12-11-2013

That fixed it. Thank you very much, Jon!

JeffPace · ‎12-12-2013

That fixed it. Thank you very much, Jon!

also take a look at your code, you have two opening <body> tags

PattyJula · ‎12-12-2013

also take a look at your code, you have two opening <body> tags

You are right, thanks for pointing that out, Jeff.

PattyJula · ‎03-13-2014

Hi all, I have a follow up question. I'm a bit stuck on how to order the dependencies with the JavaScript API. I can get the hover sample working, but when I try to combine it with the geocode an address sample and call a tiled and dynamic layer, the popup does not display. Is there documentation I am missing on how to order the dependencies? I'll probably open a new post if I don't receive a response by tomorrow, since I need to get the the hover tool working for my work.

Thanks!
Patty

JeffPace · ‎03-14-2014

the order does not matter, it all loads asynchronously. As above what matters is the order relative to the order in the declare. It has to match perfectly, otherwise you are aliasing the wrong library.

A word of caution, these forums are very casual. They are not official support. If you need an answer "right away", your only option is to call support.

PattyJula · ‎03-14-2014

the order does not matter, it all loads asynchronously. As above what matters is the order relative to the order in the declare. It has to match perfectly, otherwise you are aliasing the wrong library.

A word of caution, these forums are very casual. They are not official support. If you need an answer "right away", your only option is to call support.

Thanks, Jeff. I will review to see if they match and will call support if I can't get it sorted out. Cheers, Patty