topic Re: Sometimes the home button does not load on the map in ArcGIS JavaScript Maps SDK Questions

Sometimes the home button does not load on the map

EdwardSohn1 — Tue, 17 Dec 2013 14:51:33 GMT

Following is the code that loads the home button on the map:
but sometimes the home button does not load.
(This also happens to the geolocation button as well).
Please see attached screenshot. This is where the home button and the geoloc button "did" load.
But sometimes these buttons do not load (just missing). Otherwise the application functions normally.

This seems to happen initially when the browser is started. And once the refresh browser button is hit, usually the home/geoloc buttons do load. Sometimes however, this condition persists until after several refreshes.

Other times other parts of the UI fail to load (such as the tools buttons, and even sections of the basemap).

Users can hit refresh browser to load the map completely, but would like to avoid this scenario.

var homeButton = $('<div class="esriSimpleSliderIncrementButton"><img style="vertical-align: -2px;" src="map.web/resources/icons/mapcommand-home.png"></div>');

homeButton.fastClick(function () {
if( homeClickCallback && typeof homeClickCallback == 'function' )
homeClickCallback(map._params.extent);
else
map.setExtent(map._params.extent);
});

$(map.container).find('.esriSimpleSlider div:nth-child(1)').after(homeButton);

///////////////////////////////////////////////////////////////////////////////////////

Also this may be related issue but sometimes get the javascript error:

"require is not defined" at (and I may not be doing the following correctly but...):
This happened sporadically (very rarely) and seem independent of the above behavior however:

require(["dojo"], function (dojo) {
                dojo.addOnLoad(
                    function () {
                        require([
                                "dojo/i18n!./map.web/resources/nls/template.js?v=" + version,
                                "storymaps/ui/loadingIndicator/LoadingIndicator",
                                "esri/urlUtils",
                                "esri/layers/GraphicsLayer",
                                "esri/layers/FeatureLayer",
                                "storymaps/utils/Helper",
                                "dijit/TooltipDialog",
                                "esri/renderers/SimpleRenderer",
                                "esri/tasks/query",
                                "esri/lang",
                                "dojo/dom-style",
                                "dijit/popup",
                                "esri/graphic",
                                "esri/dijit/BasemapGallery",
                                "esri/dijit/Scalebar",
                                "dojo/fx/Toggler",
                                "dojo/fx",
                                "dojo/dom",
                                "dojo/on",
                                "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane", "esri/arcgis/utils", "dojo/parser",
                                "templateConfig/commonConfig.js?v=" + version,
                                "dojo/domReady!",
                                "dojo/ready"
                        ], function (
                                _i18n,
                                LoadingIndicator,
                                urlUtils,
                                GraphicsLayer,
                                FeatureLayer,
                                Helper,
                                TooltipDialog,
                                SimpleRenderer,
                                _query,
                                esriLang,
                                domStyle,
                                dijitPopup,
                                Graphic,
                                BasemapGallery,
                                Scalebar,
                                Toggler,
                                coreFx,
                                dom,
                                on
                            ) { ....

Re: Sometimes the home button does not load on the map

EdwardSohn1 — Tue, 17 Dec 2013 17:14:40 GMT

This "may" have to do with loading of jquery libraries.

Was doing

loadJS('map.web/lib/_jquery-1.10.2.min.js');
somewhere in the body of the home page.

Moved it to the header:

<script src="map.web/lib/_jquery-1.10.2.min.js"></script>

Re: Sometimes the home button does not load on the map

EdwardSohn1 — Tue, 17 Dec 2013 21:05:05 GMT

Actually the issue also had to do with underlying javascript implementation with deferreds.
The events for adding those home/geoloc buttons had to be put after the map loaded.

Re: Sometimes the home button does not load on the map

EdwardSohn1 — Wed, 18 Dec 2013 17:01:37 GMT

These steps resolved some of the issues. The issue with some of the images not loading (including dojo buttons) still appear to happen sometimes.... and goes away after refreshing.

Re: Sometimes the home button does not load on the map

JonathanUihlein — Sun, 12 Dec 2021 04:55:39 GMT

Your dependencies aren't loaded in the correct order.

For example, you attempt to load "esri/arcgis/utils", "dojo/parser" and "dojo/ready" but there's no variable assignment in the following function.

Also, is there a particular reason you have this bit of code:

require(["dojo"], function (dojo) {
                dojo.addOnLoad(
                    function () {
                        require([...

Re: Sometimes the home button does not load on the map

KenBuja — Thu, 19 Dec 2013 12:24:57 GMT

Your dependencies aren't loaded in the correct order.

For example, you attempt to load "esri/arcgis/utils", "dojo/parser" and "dojo/ready" but there's no variable assignment in the following function.

The variable names in the function have to be in the same order as modules in the require (which they appear to be in this case), but the modules loaded in the require part don't necessarily need a variable name in the function. These just have to come after the last module with a variable name.

Re: Sometimes the home button does not load on the map

JonathanUihlein — Thu, 19 Dec 2013 12:51:02 GMT

The variable names in the function have to be in the same order as modules in the require (which they appear to be in this case), but the modules loaded in the require part don't necessarily need a variable name in the function. These just have to come after the last module with a variable name.

I believe you need a variable name in the function if you intend to invoke the module directly in code (which sohnem2 did, as apparent by his code).

Do you have any advice for sohnem2, Ken?

Re: Sometimes the home button does not load on the map

KenBuja — Thu, 19 Dec 2013 13:30:14 GMT

I'm not seeing any code that makes reference to those modules.

Re: Sometimes the home button does not load on the map

JonathanUihlein — Thu, 19 Dec 2013 13:42:16 GMT

I'm not seeing any code that makes reference to those modules.

I'm not sure that's advice for sohnem2.

Thank you for your valuable contribution to this thread; we both appreciate it.

Re: Sometimes the home button does not load on the map

EdwardSohn1 — Thu, 19 Dec 2013 14:46:18 GMT

I changed to:

                dojo.addOnLoad(
                    function () {
                        require([
                                "dojo/i18n!./map.web/resources/nls/template.js?v=" + version,
                                "storymaps/ui/loadingIndicator/LoadingIndicator",
                                "esri/urlUtils",
                                "esri/layers/GraphicsLayer",
                                "esri/layers/FeatureLayer",
                                "storymaps/utils/Helper",
                                "dijit/TooltipDialog",
                                "esri/renderers/SimpleRenderer",
                                "esri/tasks/query",
                                "esri/lang",
                                "dojo/dom-style",
                                "dijit/popup",
                                "esri/graphic",
                                "esri/dijit/BasemapGallery",
                                "esri/dijit/Scalebar",
                                "dojo/fx/Toggler",
                                "dojo/fx",
                                "dojo/dom",
                                "dojo/on",
                                "dijit/layout/BorderContainer",
                                "dijit/layout/ContentPane",
                                "dijit/TitlePane",
                                "esri/arcgis/utils",
                                "dojo/parser",
                                "templateConfig/commonConfig.js?v=" + version,
                                "dojo/domReady!",
                                "dojo/ready"
                        ], function (
                                _i18n,
                                LoadingIndicator,
                                urlUtils,
                                GraphicsLayer,
                                FeatureLayer,
                                Helper,
                                TooltipDialog,
                                SimpleRenderer,
                                _query,
                                esriLang,
                                domStyle,
                                dijitPopup,
                                Graphic,
                                BasemapGallery,
                                Scalebar,
                                Toggler,
                                coreFx,
                                dom,
                                on,
                                BorderContainer,
                                ContentPane,
                                TitlePane,
                                arcgisUtils,
                                Parser,
                                templateConfig,
                                domReady,
                                ready
                            ) {

added additional variables, (and yes those additional variables are not being called in the function so may not be needed). Also took out the first require.

I still get the loading issue, please see attached image. This is sporadic and goes away if user just refreshes the browser. I would like it to load properly at first however.

Re: Sometimes the home button does not load on the map

KenBuja — Thu, 19 Dec 2013 15:23:05 GMT

Could it be a problem in connecting to the Esri's JSAPI? Take a look at this post to see if this solution works for you.