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

API 3.4 Upgrade. Map tiles not appearing on startup

JoanneMcGraw

Hello all,

I've just tried to upgrade my application from 3.3 to 3.4 and find that my map is no longer being populated with tiles (even the ArcGIS Online tiles for the basemap). However, after the page and map is "loaded", if I zoom in/out in the map once the tiles subsequently load fine.

To "upgrade", I simply changed the two CSS links and one script url I was using as follows:

    : <link href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css" rel="stylesheet"> <link href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css" rel="stylesheet">     : <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.4"> </script>     :

I couldn't find anything in the "What's New..." documentation to suggest anything else I might be required to do or why this might be happening, except potentially the changes for AMD. However, I went through the requests being sent from the browser (using Fiddler) and all the necessary JavaScript files appear to be getting requested and returned (I can't say I went through every single one though). Also, the documentation suggests the "legacy module requires" should still work for now. So, I'm assuming that is not the problem.

When I look at the HTML that is generated by using 3.3 vs. 3.4, the first real difference I see is that the style attribute for the "Core_Map-body_layer0" DIV includes a "display: block" styling that does not appear in the 3.4 HTML generated. After that, of course, the 3.3 HTML has all the IMGs for the tiles and the 3.4 HTML does not.

Any ideas why the tiles for the map might not be getting requested on startup with the 3.4 libraries? Something to look into?

I've cleared my browser cache but that didn't help.

Cheers,
jtm

Vind meer berichten getagd met

Accepted answers

JoanneMcGraw

Well, in lieu of any other suggestions, and in case anyone else is struggling with the same thing or something similar, I've come up with the following solution.

Before I create the map, I introduce a listener to the document for the "DOMNodeInserted" event. Every time a new element is added to the page, I check to see if it's id contains "-body_zoom_slider" (although in my case I'm able to be more specific as you can see in the code, but that's the important part) and its target's nodeName is "TABLE". If so, I introduce the tabindex attribute value of "-1" as desired and then remove the listener to stop reviewing elements as they are added.

If you have jQuery available, you can so this with:

        $(document).bind('DOMNodeInserted', this.setTabIndexOnSlider);          setTabIndexOnSlider: function(event){             if (event.target.id === "Core_Map-body_zoom_slider" &&                 event.target.nodeName === "TABLE"){                 var dom = Ext.getDom("Core_Map-body_zoom_slider");                 if (dom != null){                     var divs = dom.getElementsByTagName("div");                     for (var i=0, max=divs.length; i < max; i++) {                         if (divs.className.indexOf("dijitSliderImageHandle") > -1){                             divs.setAttribute("tabindex", "-1");                         }                     }                     $(document).unbind('DOMNodeInserted', this.setTabIndexOnSlider);                 }             }         }

Or, if you use ExtJs (as we do):

        Ext.getDoc().on("DOMNodeInserted", this.setTabIndexOnSlider);          setTabIndexOnSlider: function(event){             if (event.target.id === "Core_Map-body_zoom_slider" &&                 event.target.nodeName === "TABLE"){                 var dom = Ext.getDom("Core_Map-body_zoom_slider");                 if (dom != null){                     var divs = dom.getElementsByTagName("div");                     for (var i=0, max=divs.length; i < max; i++) {                         if (divs.className.indexOf("dijitSliderImageHandle") > -1){                             divs.setAttribute("tabindex", "-1");                         }                     }                     Ext.getDoc().un("DOMNodeInserted", this.setTabIndexOnSlider);                 }             }         }

Cheers,
jtm

All comments

JoanneMcGraw

        $(document).bind('DOMNodeInserted', this.setTabIndexOnSlider);          setTabIndexOnSlider: function(event){             if (event.target.id === "Core_Map-body_zoom_slider" &&                 event.target.nodeName === "TABLE"){                 var dom = Ext.getDom("Core_Map-body_zoom_slider");                 if (dom != null){                     var divs = dom.getElementsByTagName("div");                     for (var i=0, max=divs.length; i < max; i++) {                         if (divs.className.indexOf("dijitSliderImageHandle") > -1){                             divs.setAttribute("tabindex", "-1");                         }                     }                     $(document).unbind('DOMNodeInserted', this.setTabIndexOnSlider);                 }             }         }

Or, if you use ExtJs (as we do):

        Ext.getDoc().on("DOMNodeInserted", this.setTabIndexOnSlider);          setTabIndexOnSlider: function(event){             if (event.target.id === "Core_Map-body_zoom_slider" &&                 event.target.nodeName === "TABLE"){                 var dom = Ext.getDom("Core_Map-body_zoom_slider");                 if (dom != null){                     var divs = dom.getElementsByTagName("div");                     for (var i=0, max=divs.length; i < max; i++) {                         if (divs.className.indexOf("dijitSliderImageHandle") > -1){                             divs.setAttribute("tabindex", "-1");                         }                     }                     Ext.getDoc().un("DOMNodeInserted", this.setTabIndexOnSlider);                 }             }         }

Cheers,
jtm

JoanneMcGraw

Well, I've answered my own question (again). The "Core_Map-body_zoom_slider" DIV has not always been added by the time the Map's "onUpdateEnd" event is triggered.

In case you are interested, I am trying to set a tabindex attribute to "-1" on the Core_Map-body_zoom_slider's dijitSliderImageHandle so that the user cannot use the keyboard to "tab" to the slider. Doing so suggests, when that element is visually identified as having focus, that the up/down arrows should zoom in/out on the map...because it is the slider that looks to have focus. In reality, up and down arrows, at that time, indicate panning north/south on the map.

Anyway, all that's really irrelevant. I'm left with the problem of knowing when that zoom slider object has appeared in the dom. And that fact that it is now appearing at a different time then it did with 3.3.

Is there an event triggered when all the associated components of a map (e.g., the slider bar, scalebar, etc.) are finished being inserted in the dom?

Cheers,
jtm

JoanneMcGraw

The "Core_Map-body_zoom_slider" DIV appears to have been added by the time the Map's "onUpdateEnd" event has triggered. Can I depend on that always being the case? Or, is the "thread" that inserts the slider separate from the Update events and this just happens to be the case in my particular scenario at this moment?

JoanneMcGraw

The problem appears to be within my application code. There seems to be a difference in how/when the "Core_Map-body_zoom_slider" is being added to the map between 3.3 and 3.4. Is it possible the Map's "onLoad" event is being triggered before the slider has been added to the map now?

We manipulate the Core_Map-body_zoom_slider's HTML after it has been added to the page to support WCAG requirements but, because that HTML doesn't seem to be there at that time anymore the manipulation is failing. If I simply comment out that manipulation, the map loads fine.

So, subsequent question...what event can I listen for and know that the slider bar's HTML has been added to the page?

Cheers,
jtm

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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