md5_example.markdown

MVA Application - Divergent Files Review

Overview

This document is designed to present a basic overview of files contained within the larger WDNR Marine Spatial Planning (MSP) codebase, that were modified for the purposes of the WDNR Marine Vegetation Atlas (MVA). Additionally, newly created files, specific to the MVA, will be reviewed.

Files Modified/Created

Following are bulleted lists of files modified and newly created. Please see below for detailed notes.

Modified

• index.html
• scripts/index.js

Created

• config/config_mva.js: MSP-Formatted Configuration File. This file governs the addition of layers to the application's table of contents.
• scripts/chosen.jquery.min.js: Code for the jQuery plugin, 'Chosen', which provides styled multi-selects with auto-completion.
• scripts/vegQuery.js: Code for the vegetation query (search) tool.
• scripts/vegQueryChoices.js: Configuration file for the search tool. This file primarilly contains mappings between the ArcGIS online feature service on a per-layer basis. This file also contains specific arrays which indicate which particular fields of a given layer should be exposed to the user as queryable fields.
• style/chosen.css: Default styling provided as part of the Chosen jQuery plugin.
• style/vegQuery.css: Styling for the search tool interface and results tab.
• images/identitydownloaded.jpg: Simple revised logo for the MVA application. Note that this file overwrites the existing MSP application logo.

Detailed Changes

index.html

1. Addition of css files, chosen.css and vegQuery.css.

<link href="style/locationInfo.css" rel="stylesheet" type="text/css" />
<link href="style/chosen.css" rel="stylesheet" type="text/css" /> <!-- Add -->
<link href="style/index.css" rel="stylesheet" type="text/css" />
...
<link href="style/layerSorter.css" rel="stylesheet" type="text/css" />
<link href="style/vegQuery.css" rel="stylesheet" type="text/css" /> <!-- Add -->

2. Add queryTab and resultsTab div elements to mapControlsPane div.

<div id="mapControlsPane">
    <div id="tabs">
        <div id="legendTab" title="Legend">
            <div id="legend">
            </div>
        </div>
        <div id="layersTab" title="Data" class="datatab">
            <div class="searchLayersBox">
                <br />
                <input id="tags" onfocus="if (this.value=='Search') this.value = ''"
                    type="text" value="Search" class="rounded" />
                <a id="tagsButton" class="btn" href="#"><i class="icon-remove"></i></a>
                <br />
                <br />
            </div>
            <ul id="layerList">
            </ul>
        </div>
        <div id="activeTab" title="Active">
            <div id="toolsAccordion">
            </div>
        </div>
        <!-- Note that we comment out scenariosTab -->
        <!-- <div id="scenariosTab" title="Scenarios">
            <div id="basemapGallery"></div>
        </div> -->
        <! -- Add MVA Specific tabs -->
        <div id="queryTab" title="Search">
            <div id="Div2"></div>
        </div>
        <div id="resultsTab" title="Results">
            <div id="Div3"></div>
        </div>
    </div>
</div>

index.js

1. Within the function setupLayout(), add references to the new tabs for the search tool and results tab.

(function (tabOrder) {
    var i, l, name;

    for (i = 0, l = tabOrder.length; i < l; i += 1) {
        name = tabOrder[i];
        if (/Data/i.test(name)) {
            tabs.addChild(new dijit.layout.ContentPane({ title: "Data", id: "layersTab", onShow: setUpDataTab }, "layersTab"));
        } else if (/Active/i.test(name)) {
            tabs.addChild(new dijit.layout.ContentPane({ title: "Active (1)", onShow: setUpActiveTab }, "activeTab"));
        } else if (/Legend/i.test(name)) {
            tabs.addChild(new dijit.layout.ContentPane({ title: "Legend", onShow: setupLegend }, "legendTab"));
        //} else if (/Scenarios/i.test(name)) {
            //    tabs.addChild(new dijit.layout.ContentPane({ title: "Scenarios", id: "scenariosTab" }, "scenariosTab"));
        } else if (/Search/i.test(name)) {
            tabs.addChild(new dijit.layout.ContentPane({ title: "Search", id: "queryTab" }, "queryTab")); // Add Search Tab
        } else if (/Results/i.test(name)) {
            tabs.addChild(new dijit.layout.ContentPane({ title: "Results", id: "resultsTab" }, "resultsTab")); // Add Results Tab
        } else if (/Basemap/i.test(name)) {
            tabs.addChild(new dijit.layout.ContentPane({ title: "Basemap", id: "basemapTab" }, "basemapTab"));
        } else if (/Tools/i.test(name)) {
            toolsTab = new dijit.layout.ContentPane({ title: "Tools" }, "toolsTab");
            tabs.addChild(toolsTab);
        } else if (/Airspace\s*Calculator/i.test(name)) {
            // Add elements that will become the tab to the dom.
            $("<div id='airspaceCalculatorTab'><section><h1>Airspace Calculator (Prototype)</h1><div id='airspaceCalculator'></div></section></div>").appendTo("#tabs");
            tabs.addChild(new dijit.layout.ContentPane({
                title: "Airspc. Calc.",
                tooltip: "Airspace Calculator (Prototype)",
                id: "airspaceCalculatorTab",
                onShow: setupAirspaceCalculator
            }, "airspaceCalculatorTab"));
        } else if (/FAA\s*FAR\s*77/i.test(name)) {
            $("<div id='faaFar77Tab'><div id='faaFar77'></div></div>").appendTo("#tabs");
            tabs.addChild(new dijit.layout.ContentPane({
                title: "FAA FAR 77",
                id: "faaFar77Tab",
                onShow: setupFaaFar77
            }, "faaFar77Tab"));
        }
    }
}(wadnr.config.tabOrder || ["Data", "Active (1)", "Legend", "Search", "Results"])); // Add Search and Results Tab references.