Splash Screen for Javascript Land Use Comments Map

JHayes · ‎06-20-2011

Hello,

I'm a beginning developer and we've augmented the Land Use Public Comment Map to gather comments from the public on a new long range planning project. It's working well. However, I would like to add the splash screen from the new Land Use Public Notifications map. I'm assuming it's a matter of finding the lines of code and pasting them in the correct position - but I'm hoping someone can give me a hand. I noticed where the code references the splash screen in the default.htm and the config.txt. I pasted those 2 sections into my app but no luck. I looked in the forums and sample too. Can anyone give me a hand?

Thanks,
Joe

StephenLead · ‎06-20-2011

Hi Joseph,

Great question. (To make it easier to answer on these forums, it helps if you can put the URLs of the samples you're referencing. As far as I can tell, you're talking about the samples at http://www.arcgis.com/home/item.html?id=59e7183e19e743f4810a01a7384ac68a and http://www.arcgis.com/home/item.html?id=d8b5cd47ecfe47489548714502eb7969)

On the Notification map, they are reading in the text for the popup using the syntax below. I'm not familiar with this myself, so hopefully someone more experienced can explain how it works.

Here's the relevant code from the default.htm page:

//Function to initialize the map and read data from Configuration file
        function Init() {

            ShowLoadingMessage('Loading...');

            esri.config.defaults.io.proxyUrl = "proxy.ashx";
            esri.config.defaults.io.alwaysUseProxy = false;
            esri.config.defaults.io.timeout = 600000;    //timeout for querytask
            dojo.xhrGet({
                url: "Config.txt",
                handleAs: "json",
                preventCache: true,
                load: function (responseObject, ioArgs) {

                    dojo.byId('divLoadMessage').innerHTML = responseObject.SplashScreenMessage;
                    dijit.byId('dialogLoadMessage').show();

If you're happy to hard-code the message, you could simply use the last two lines of the code above, inserting your own variable for SplashScreenMessage.

var myMessage = "welcome blurb for your site";
dojo.byId('divLoadMessage').innerHTML = myMessage;
dijit.byId('dialogLoadMessage').show();

You also need to add the relevant DIVs to your page, as seen towards the end of the default.htm page:

        <div id="dialogLoadMessage" dojotype="dijit.Dialog" style="width: 350px;">
            <table>
                <tr>
                    <td>
                        <div id="divLoadMessage" style="background: black; color: White;">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <div class="divOk" onclick="dijit.byId('dialogLoadMessage').hide();">
                            OK</div>
                    </td>
                </tr>
            </table>
        </div>

They are also slightly dimming the map while the dialog is open. I can't see how they're doing it after a quick glance, but there are plenty of simple ways to do it using jQuery, as in this sample.

JHayes · ‎06-21-2011

Steve,

Thanks for the tip on adding links to the code examples, and the help with this problem. I'll get going and let you know how it works out.

Joe

JHayes · ‎06-21-2011

Steve,

You've done it. I used your suggestions and added those lines of code code to the default.htm starting with this one:

dojo.byId('divLoadMessage').innerHTML = responseObject.SplashScreenMessage;
dijit.byId('dialogLoadMessage').show();

It now looks like this in the Public Comment App:

esri.config.defaults.io.proxyUrl = "proxy.ashx";
            esriConfig.defaults.io.alwaysUseProxy = false;
            dojo.xhrGet({
                url: "Config.txt",
                handleAs: "json",
                preventCache: true,
                load: function (responseObject, ioArgs) {
                    var mapExtent = responseObject.DefaultExtent;
                    var zoomExtent = mapExtent.split(",");
                    var startExtent = new esri.geometry.Extent(parseFloat(zoomExtent[0]), parseFloat(zoomExtent[1]), parseFloat(zoomExtent[2]), parseFloat(zoomExtent[3]), new esri.SpatialReference({ wkid: 2269 }));
                    map = new esri.Map("map");
      dojo.byId('divLoadMessage').innerHTML = responseObject.SplashScreenMessage;
                    dijit.byId('dialogLoadMessage').show();

                    hasCustomRenderer = responseObject.CustomRenderer;
                    rendererColor = responseObject.RendererColor;

                    map.setExtent(startExtent);
                    locatorURL = responseObject.Locator;
                    defaultAddress = responseObject.DefaultAddress;
                    helpFileURL = responseObject.helpURL;
                    defaultCmnt = responseObject.DefaultCmnt;
                    devPlanLayerURL = responseObject.DevPlanLayer;
                    commentLayerURL = responseObject.CommentLayer;

And I added 'div' code to the bottom of the default.htm page as you suggested.

        <div id="dialogLoadMessage" dojotype="dijit.Dialog" style="width: 350px;">
            <table>
                <tr>
                    <td>
                        <div id="divLoadMessage" style="background: black; color: White;">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <div class="divOk" onclick="dijit.byId('dialogLoadMessage').hide();">
                            OK</div>
                    </td>
                </tr>
            </table>
            </div>
        <div id="dojoStandBy" dojotype="dojox.widget.Standby" color="black">
        </div>
    </div>
</body>
</html>

The only part we missed was adding the 'SplashScreenMessage' code to the config.txt file. It now looks like this:

'CustomRenderer' : false,
 'RendererColor' : "#1C86EE",
 'SplashScreenMessage' : "<big><b>Land Use Public Notification</b> <br/> <hr/> <br/>The 
<b>Land Use Public Notification</b> application allows local government staff to identify properties 
within a given distance (buffer) of a subject property and generate mailing labels and/or a 
structured text file for owners and occupants that fall within the buffer.<br/><br/>This application 
is typically used by local planning and zoning officials, but can be used by any agency looking to 
notify property owners and occupants of a formal action being taken. The process of public
 notification allows adjoining or nearby property owners, and others, the opportunity to look at a
 proposed development, consider the likely impacts the proposal may have on them, and provide
 comment (either positive or negative) about the proposal prior to a decision being made.<big/><br/><br/>",
 'BaseMapLayers' : [
   {"Key": "parcelMap", "ThumbnailSource": "images/Parcel map.png", "Name" : "Parcels", MapURL:
 "http://webags.co.washington.or.us/ArcGIS/rest/services/Washco_primary_basemap_SP/MapServer"},
   {"Key": "hybridMap", "ThumbnailSource": "images/Imagery Hybrid.png", "Name" : "Imagery", MapURL:
 "http://webags.co.washington.or.us/ArcGIS/rest/services/Washco_orthos2008_StatePlane/MapServer"}
  ]
}

So thanks a lot Steve. You really helped my colleague and I figure this out. Also, the splash screen automatically dims on its own - Bonus!

Sincerely,
Joe

StephenLead · ‎06-21-2011

No probs, glad you got it sorted.