Any reason why a basemap might not draw at first?

952
11
Jump to solution
10-01-2013 09:16 AM
TracySchloss
Frequent Contributor
I have several projects that have the basemap defined as part of the map constructor.  I have a project I'm reworking in the AMD style, so I'm going through, changing the code as best I can.  Maybe I've hit a gotcha on this one that I'm not aware of. 

The definition for the map is

  highlightMarkerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 22,    new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,    new Color([255,255,0]), 2),    new Color([255,255,0,0.5]));    var popup = new Popup({      markerSymbol: highlightMarkerSymbol,     fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,      new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,      new Color([255,200,0]), 2), new Color([255,255,0,0.50]))     }, dojo.create("div"));           map = new Map("mapDiv", {        infoWindow: popup,       basemap: "topo",       center: [-92.593, 38.5],       zoom: 7     });   


After this I load a few different layers.  I'm also defining a basemapGallery to let the users change the background.  All my layers load fine and I'm not getting any errors.  When my page first loads, there is no basemap displayed, it's just blank.  If I zoom in a couple of times, then it draws.  If I use my tool to change the basemap, it also works fine.  I tried a few different basemaps, not just topo, with the same results. 

Can anyone provide some insight as to why the basemap might not draw at first?  I have this same syntax in other projects and it works just fine in them!
0 Kudos
1 Solution

Accepted Solutions
KellyHutchins
Esri Frequent Contributor
I took a quick look at your attached code and noticed that in the  map's onLoad you are creating a scalebar then calling startup. The scalebar widget doesn't have a startup method so try commenting out that line and see if it resolves the basemap loading issue.

View solution in original post

0 Kudos
11 Replies
KellyHutchins
Esri Frequent Contributor
If you run the app with developer tools open do you see any errors in the console? Do you have a simple test case that shows the problem?
0 Kudos
TracySchloss
Frequent Contributor
I have quite a bit of code I'm still trying to convert to AMD, but no errors on the map object.  It's possible that something else that isn't right yet is having a cascading effect.  It seems weird that something completely unrelated like an  trying to fix my 'onClick' function on a button could keep a basemap from loading.
0 Kudos
TracySchloss
Frequent Contributor
I'd been using Firefox.  I get this error in Chrome:
dojo/parser  parse() error SyntaxError {} [VM] init.js (597):34
Resource interpreted as Script but transferred with MIME type text/plain: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer?f=json&callback=dojo...".

I have a proxy set up and this path is in it.

The other thing I'm probably getting goofed up with is setting up the parser.

I have a djConfig defined as parseOnLoad:false and then after requiring dojo/parser, I have a statement parser.parse.  But something I read said I was supposed to have parserOnLoad set to true if I was going to define any of my widgets declaratively.  I have several in this code.  But when I take out parser.parse and switch parseOnLoad back to true, that didn't work either.
0 Kudos
KellyHutchins
Esri Frequent Contributor
I think the best way for you to debug this issue is to build a simple test app that just contains the popup and basemap code. If that works then we'll know that we need to focus on other parts of your code. The issue you are having could be something as simple as forgetting to require a module. You may also want to step through your code using the debugging tools to get more information about where the app is failing.
0 Kudos
TracySchloss
Frequent Contributor
That would be a good suggestion, if I didn't already have mulitple working examples stripped down that do that already.  I just need to keep plugging away on this.  I feel like I have to begin converting my code to AMD, but it's really been a hassle so far.  I had a non-AMD version that works just fine.
0 Kudos
JonathanUihlein
Esri Regular Contributor
Any chance you could create a jsfiddle that shows the problem?

I, like you, suspect it has to do with the parser, or rather, when the parser is invoked.
0 Kudos
TracySchloss
Frequent Contributor
Maybe.  I've not used that before and have no account.  It has data that I'm not ready to release to the public yet and it would be quite a bit of work to come up with substitute data sets.  I've spent enough time on it today that it's broken more now that it was a few hours ago.  That's what I get for trying to tidy up my code and bring it up to date.  When it was sloppier, it worked better. 

Plus, I consider myself a GIS person, not a programmer, so I hate for people to look at my code!
0 Kudos
JonathanUihlein
Esri Regular Contributor
No worries!
I completely understand where you are coming from.
If you want to send non-sensitive code to me via private message, I could potentially look it over.

Otherwise, in an attempt to help, I created a quick sample based on the code you posted that may or may not be helpful in identifying the best place to invoke the parser.

It's hard to help further without any new code.

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
      <title>testing</title>
      <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">
      <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css" />
      <style type="text/css">
         html, body, #mapDiv {
         padding: 0;
         margin: 0;
         height: 100%;
         }
      </style>
      <script src="http://js.arcgis.com/3.7/"></script>
      <script>
        
         
         require([
          
          "dojo/ready", 
          "dojo/parser",
          "dojo/dom-construct",
          "dojo/_base/Color",
         
          "esri/graphic",
          "esri/map", 
          "esri/dijit/Popup",
          "esri/geometry/Point",
         
          "esri/symbols/SimpleFillSymbol",
          "esri/symbols/SimpleLineSymbol",
          "esri/symbols/SimpleMarkerSymbol",
          
         ], function(
          ready, 
          parser,
          domConstruct,
          Color,
          
          Graphic,
          Map,
          Popup,
          Point,
          
          SimpleFillSymbol,
          SimpleLineSymbol,
          SimpleMarkerSymbol
         ) { 
          // Variables
          var map;
          var highlightMarkerSymbol;
           var popup;
                
          // Set up

          popup = new Popup({
           titleInBody: false
          },domConstruct.create("div"));
         
          map = new Map("mapDiv", {
            infoWindow: popup,
            basemap: "topo",
            center: [-92.593, 38.5],
            zoom: 7
          });

          highlightMarkerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 22, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255,255,0]), 2), new Color([255,255,0,0.5]));
          
          ready(function () {
           // parse the fully loaded DOM
           parser.parse();
           
           //do stuff
           map.on("click", function(evt){
            // remove old graphics from map
            map.graphics.graphics.forEach(function(g){
             if(g.visible == true)
              map.graphics.remove(g);
            });
            // create simple symbol
            var point = new Point(evt.mapPoint.getLongitude(), evt.mapPoint.getLatitude());
            var graphic = new Graphic(point, highlightMarkerSymbol);
            
            // add the graphic and show the popup
            map.graphics.add(graphic);
            map.infoWindow.setTitle("test");
            map.infoWindow.setContent("test");
            map.infoWindow.show(point); 
           });
          });
         });
      </script>
   </head>
   <body class="claro">
      <div id="mapDiv"></div>
   </body>
</html>
0 Kudos
TracySchloss
Frequent Contributor
As mysteriously as it started, it stopped doing this.  THEN when I made a copy of this project for another one and replaced mostly just my layers to be added and TOC layer, it's happening again.  I'm noticing that not only is the basemap not loading, but the keyboard/mouse navigation I typically use (hold down the shift, draw a box to zoom in) isn't working either.   Somewhere there's an issue with the map load event.  Once I zoom around using the slider or the mouse wheel, I have a basemap from then on.  I have noticed that with just panning, it still doesn't draw, I must zoom either in or out. 

I've tried firefox, ie and chrome.  Same behavior and no errors in any of them!  I haven't been using the basemap property too long for the map constructor and I only have a couple AMD style under my belt.  I used to manually create a layer for the basemap and add it the same way I load all my local layers.  It seems so handy to define it as part of the map definition, but if I'm going to have this strange behavior,  maybe I shouldn't use it.
0 Kudos