Creating a web mapping application in Javascript/Dojo: When I load the app in a

Question

0

Asked: June 13, 20262026-06-13T10:41:52+00:00 2026-06-13T10:41:52+00:00

Creating a web mapping application in Javascript/Dojo: When I load the app in a

0

Creating a web mapping application in Javascript/Dojo:

When I load the app in a browser it loads the html elements but then stops processing. I have to refresh the browser to get it to load the rest of the page and the javascript.

I have done testing and debugging all day and figured out I had my external JS files in the wrong spot (I’m a rookie). Fixed that and the app loads great…EXCEPT one of my files isn’t getting read correctly, or at all.

When I move the contents of the external JS file in question to the main code in the default, the functionality that they contain, work fine… BUT the map requires the refresh again.

Stumped. Below is the code in the external JS file that is causing my issue. I can’t figure out why it is a problem because the functions work as expected when it is not external.

Any help is greatly appreciated.

//Toggles
function basemapToggle() {
                basemaptoggler = new dojo.fx.Toggler({
                    node: "basemaptoggle",
                    showFunc : dojo.fx.wipeIn,
                    showDuration: 1000,
                    hideDuration: 1000,
                    hideFunc : dojo.fx.wipeOut
                })
            }
            dojo.addOnLoad(basemapToggle);

            function layerToggle() {
                layertoggler = new dojo.fx.Toggler({
                    node: "layertoggle",
                    showFunc : dojo.fx.wipeIn,
                    showDuration: 750,
                    hideDuration: 750,
                    hideFunc : dojo.fx.wipeOut
                })
            }
            dojo.addOnLoad(layerToggle);

            function legendToggle() {
                legendtoggler = new dojo.fx.Toggler({
                    node: "legendtoggle",
                    showFunc : dojo.fx.wipeIn,
                    hideFunc : dojo.fx.wipeOut
                })
            }
            dojo.addOnLoad(legendToggle);

EDIT

Edited to show additional code. Genuinely stumped by this. Would love to get some feedback. I’ve tried moving it to the main file, reformatting the functions and all of those things work, except they require the refresh. I’m also losing some information on a refresh. Very odd behavior. Any good way to track this down?

    <!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=8, IE=9" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>

        <link rel="Stylesheet" href="ZoningClassifications.css" />
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css">
        <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/esri/dijit/css/Popup.css">
        <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dojox/grid/resources/Grid.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dojox/grid/resources/claroGrid.css">
    <style type="text/css"> 
    </style> 

        <script src="JS/layers.js"></script>
        <script src="JS/search.js"></script>
        <script src="JS/basemapgallery.js"></script>
        <script src="JS/toggles.js"></script>
        <script src="JS/identify.js"></script>
        <script type="text/javascript"> 
      var djConfig = {
        parseOnLoad: true
      };
    </script> 
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script>
    <script type="text/javascript"> 

            dojo.require("dijit.dijit"); // optimize: load dijit layer
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("dijit.TitlePane");
      dojo.require("esri.dijit.BasemapGallery");
      dojo.require("esri.arcgis.utils");
            dojo.require("esri.tasks.locator");
            dojo.require("esri.dijit.Legend");
            dojo.require("esri.dijit.Popup");
            dojo.require("dijit.form.Button");
            dojo.require("dojo.fx");
            dojo.require("dijit.Dialog");
            dojo.require("dojo.ready");
      dojo.require("dijit.TooltipDialog");
            dojo.require("dojox.grid.DataGrid");
      dojo.require("dojo.data.ItemFileReadStore");
      dojo.require("esri.tasks.find");

      var map, locator, layer, visible = [];
            var legendLayers = [];
            var resizeTimer;
            var identifyTask,identifyParams;
            var findTask, findParams;
            var basemaptoggler = null;
            var layertoggler = null;
            var legendtoggler = null;
            var findTaskParcel, findParamsParcel;
      // var gridParcel, storeParcel;

EDIT 2

I’ve completely rewritten the app placing all the code (except the css) in the main default.html file. I tested piece by piece to make sure it functioned how I want. Adding the toggles code is the only code that throws it and causes the extra refresh.

So for now I am using dijit.TitlePane to hold the drop down elements (basemap gallery, layers, legend). However with this you can not change the look and feel to make them images, which is my end goal.

Can anybody suggest an alternative so I can use 3 different images so that when you click on the image and drop down menu opens holding the basemap gallery, layer list and legend?

EDIT 3

It’ll probably help to show the code I use to call the toggle functions: I suspect this might be where my issues are.

<!--Legend-->
    <div id="subheader">
  <div style="position:absolute; right:60px; top:10px; z-Index:98;">
            <div id="legendbutton">
        <button dojoType="dijit.form.Button" baseClass="tomButton" title="Show Legend">
            <img src="images/Legend.png" />
                <script type="dojo/method" event="onClick">
                    legendtoggler[(dojo.style("legendtoggle","display") == "none") ? 'show':'hide']();
                </script>
        </button>
                <div id="legendtoggle" dojoType="dijit.layout.ContentPane" style="border: 1px solid black; display: none">
                    <div id="legendDiv"></div>
                </div>
            </div>
<!--Layer Toggle-->
            <div id="layerbutton">
                <button dojoType="dijit.form.Button" baseClass="tomButton" border="0" title="Toggle Layers">
                    <img src="images/layers.png"/>
                        <script type="dojo/method" event="onClick">
                            layertoggler[(dojo.style("layertoggle","display") == "none") ? 'show':'hide']();
                        </script>
                </button>
                    <div id="layertoggle" dojoType="dijit.layout.ContentPane" style="border: 1px solid black; display: none">
                        <span id="layer_list"><input type='checkbox' class='list_item' id='0' value=0 onclick='updateLayerVisibility();'
                        </span>
                    </div>
            </div>
<!--Basemap Gallery-->
            <div id="basemapbutton">
                <button dojoType="dijit.form.Button" baseClass="tomButton" title="Switch Basemap">
                    <img src="images/imgBaseMap.png"/>
                        <script type="dojo/method" event="onClick">

                        </script>
                </button>
                    <div id="basemaptoggle" dojoType="dijit.layout.ContentPane" style="#900;display: none;">
                        <span id="basemapGallery">
                        </span>
                    </div>
            </div>

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-06-13T10:41:53+00:00

As a Workaround here is something similar I did:

http://www.martindueren.de/paperwriting/

The Icons on the right hand side of the app make dijit.TitlePanes wipe in and out. The effect used for this can be found on this page:

http://dojotoolkit.org/documentation/tutorials/1.8/effects/

The code for this would be something like this:

<button id="slideAwayButton">Slide block away</button>
<button id="slideBackButton">Slide block back</button>

<div id="slideTarget" class="red-block slide">
    A red block
</div>
<script>
    require(["dojo/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) {
        var slideAwayButton = dom.byId("slideAwayButton"),
            slideBackButton = dom.byId("slideBackButton"),
            slideTarget = dom.byId("slideTarget");

        on(slideAwayButton, "click", function(evt){
            fx.slideTo({ node: slideTarget, left: "200", top: "200" }).play();
        });
        on(slideBackButton, "click", function(evt){
            fx.slideTo({ node: slideTarget, left: "0", top: "100" }).play();
        });
    });
</script>

Feel free to look at my source-code and copy stuff from it! If I understood you correctly this is exactly what you need too.

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

Creating a web mapping application in Javascript/Dojo: When I load the app in a

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply