Source Code Download

This application is written entirely in JavaScript and HTML; the attached files can be used as reference but is not deployable due to CORS HTTP Header policies. The attached JavaScript files show how to successfully integration with various Machine-to-Machine (M2M) API endpoints and how to interpret their resposnes.

<div id="applicationHeader" class="row">
    <div id="interfaceControlsHeader" class="col">
        <div id="interfaceControlTitle" class="row">
            <div class="col" style="font-size: 1.1em; padding-left: 5px;">
                <i id="interfaceControlToggle" role="img" class="fa fa-caret-up fa-lg" title="Hide Controls"></i>
                Interface Controls
            </div>
            <div id="interfaceOptionsButtonContainer" class="col" style="flex: 0 0 140px !important;">
                <i id="resultContainerToggle" role="img" class="far fa-lg fa-laptop-code interfaceControlIcon" data-isOpen="0" title="Show Results Container" style="display: none;"></i>
                <i id="navigatorContainerToggle" role="img" class="far fa-lg fa-steering-wheel interfaceControlIcon" data-isOpen="0" title="Show Scene Navigator"></i>
                <i id="timelineContainerToggle" role="img" class="far fa-lg fa-analytics interfaceControlIcon" data-isOpen="0" title="Show Timeline"></i>
                <i id="preferencesIcon" role="img" class="far fa-lg fa-user-cog interfaceControlIcon" title="Open User Preferences"></i>
            </div>
        </div>
    </div>
    <div id="mapControlHeader" class="col" style="padding: 0;">
        <div class="row" style="margin: -3px 0 0 5px;">
            <div id="currentSceneDate" class="col" style="padding: 0; flex: 0 0 446px !important; border-right: 1px solid #999999; text-align: center;"></div>
            <div id="mouseCoordinateDisplay" class="col" style="padding: 0; flex: 0 0 250px !important; border-right: 1px solid #999999; text-align: center;"></div>
            <div class="zoomInfo col" style="padding: 0; flex: 0 0 100px !important; border-right: 1px solid #999999; text-align: center; display: none;">Zoom:</div>
            <div id="jumpToLinkContainer" class="col" style="padding: 0; flex: 0 0 50px !important; border-right: 1px solid #999999; text-align: center;">
                <i class="far fa-map-marked-alt fa-lg" title="Jump To - Click for options to jump to a specific location/scene" role="img"></i>
            </div>
            <div id="lockSearchLocationContainer" class="col" style="padding: 0; flex: 0 0 50px !important; border-right: 1px solid #999999; text-align: center;">
                <i class="far fa-lock-open-alt fa-lg" title="AOI Unlocked - Click to Lock (to allow panning/zooming without re-searching)" role="img"></i>
            </div>
        </div>
    </div>
</div>
<div id="applicationContainer" class="row">
    <div id="interfaceControlContainer" class="col">
        <div id="datasetControlContainer" class="controlContainer row">
            <div class="col">
                <div class="controlHeader row">
                    <div class="controlTitle col">
                        Selected Data Set(s)
                    </div>
                    <div class="controlToggle col">
                        <i id="addDatasetIcon" role="img" class="far fa-plus-square  fa-lg" title="Click to add a data set" tabindex="0"></i>
                        <i class="fas fa-caret-up controlToggleIcon fa-lg" role="img" title="Click to collapse/expand the data set selector"></i>
                    </div>
                </div>
                <div class="controlBody row" style="padding: 0 5px 5px 5px;">
                    <div class="col" style="margin: 0; padding: 0;">
                        <template id="datasetRowTemplate">
                            <div class="datasetRow" data-datasetId="" data-datasetAlias="">
                                <div class="datasetRowPadding row">
                                    <div class="datasetToggleContainer col">
                                        <i role="img" class="datasetToggle fas fa-toggle-off fa-lg" title="Click to select data set"></i>
                                    </div>
                                    <div class="datasetNameContainer col">
                                        <strong><span class="datasetNameLabel"></span></strong>
                                        <i role="img" class="fa fa-cloud cloudCoverIcon" title="Supports Cloud Cover Filtering" style="display:none"></i>
                                        <i role="img" class="fa fa-cloud noCloudCoverIcon" title="Does Not Support Cloud Cover Filtering" style="display:none; color:#b0afab;"></i>
                                        <i role="img" class="datasetInfoIcon fas fa-info-circle" title="Click to view additional information about this data set"></i> 
                                        <i role="img" class="fa fa-exclamation-triangle datasetMessageIcon" title="Click to view data set messages" style="display:none"></i>
                                    </div>
                                    <div class="datasetExclusionsContainer col">
                                        <i class="fa fa-eraser fa-lg clearExclusionIcon" id="clearHiddenScenes" title="Clear Hidden Scenes" style="display:none"></i>
                                    </div>
                                    <div class="datasetOptionsContainer col">
                                        <div class="datasetColorSwatch" title="This color represents the data set within the result timeline and scene overlays - click to change color" data-hexColor=""></div>
                                    </div>
                                    <div class="datasetCoverageContainer col">
                                        <i role="img" class="far fa-globe-americas fa-lg datasetCoverageToggle" title="Click to show an overlay representing the entire spatial coverage of this data set"></i>
                                    </div>
                                </div>
                                <div class="datasetResultSummary">
                                    <div class="coverageSummary">Approximately <span class="coverageSummarySceneCount"></span> scenes are represented in this data set.</div>
                                    <div class="resultSummary">
                                        <span class="matchedSceneCount"></span> scene(s) match your filter.
                                    </div>
                                </div>
                            </div>
                        </template>
                        <template id="datasetColorPickerModalTemplate">
                            <div class="modal" tabindex="-1" role="dialog">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">Change Data set Color - <span class="datasetColorNameHeading"></span></h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">×</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <p>
                                                Changing the color and clicking save will change the color for all overlays and indicators associated with this data set.
                                            </p>
                                            <div class="datasetColorInputContainer">
                                                <label class="colorInputLabel" for="">Data set Color</label>
                                                <input type="color" class="colorInput" />
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="saveColorButton btn btn-primary">Save Color</button>
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                        <div id="datasetRowContainer">
                            <div style="padding: 5px 0;">
                                No data sets selected, add a data set to continue.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<div id="datasetFilterControlContainer" class="controlContainer row">
            <div class="col">
                <div class="controlHeader row">
                    <div class="controlTitle col">
                        Dataset Metadata Filters
                    </div>
                    <div class="controlToggle col">
                        <i role="img" id="addDatasetFilterIcon" class="far fa-plus-square fa-lg" title="Click to add a metadata filter" tabindex="0"></i>
                        <i role="img" class="fas fa-caret-up fa-lg controlToggleIcon" title="Click to collapse/expand the filter controls"></i>
                    </div>
                </div>
                <div class="controlBody row" style="max-height: 350px;">
                    <div id="datasetFilterContainer" class="col">No filters have been added.</div>
                </div>
                <div class="controlFooter row">
                    <div class="col" style="text-align: right;">
                        <button id="clearDatasetFilterButton" class="btn btn-secondary btn-sm" role="button">Clear</button>
                    </div>
                </div>
            </div>
        </div>

<div id="filterControlContainer" class="controlContainer row">
            <div class="col">
                <div class="controlHeader row">
                    <div class="controlTitle col">
                        Common Metadata Filters
                    </div>
                    <div class="controlToggle col">
                        <i role="img" id="addFilterIcon" class="far fa-plus-square fa-lg" title="Click to add a metadata filter" tabindex="0"></i>
                        <i role="img" class="fas fa-caret-up fa-lg controlToggleIcon" title="Click to collapse/expand the filter controls"></i>
                    </div>
                </div>
                <div class="controlBody row" style="max-height: 350px;">
                    <div id="filterContainer" class="col">No filters have been added.</div>
                </div>
                <div class="controlFooter row">
                    <div class="col" style="text-align: right;">
                        <button id="clearFilterButton" class="btn btn-secondary btn-sm" role="button">Clear</button>
                    </div>
                </div>
            </div>
        </div>

<div id="spatialControlContainer" class="controlContainer row">
            <div class="col">
                <div class="controlHeader row">
                    <div class="controlTitle col">
                        Geographic Filter
                    </div>
                    <div class="controlToggle col" style="text-align: right;">
                        <i class="fas fa-caret-down fa-lg controlToggleIcon" id="spatialToggle" role="img" title="Click to collapse/expand the filter controls"></i>
                    </div>
                </div>
                <div class="controlBody row" style="max-height: 350px;">
                    <div class="col" style="padding: 0;">
                        <div class="row" style="margin: 5px 0 0 0; padding: 0 5px;">
                            <div class="col-4" style="padding: 0;">
                                <label for="geographicFilterType" style="margin: 0; padding-top: 4px">Filter Type</label>
                            </div>
                            <div class="col-8" style="padding: 0; text-align: right;">
                                <select id="geographicFilterType" class="form-control form-control-sm">
                                                                        <option value="map">Map Location</option>
                                </select>
                            </div>
                        </div>

<div id="geographicFilterTypesContainer">
                            <div id="customFilterContainer" class="geographicFilterContainer col">
                                Custom filter - this is where a user can add one or more points, or polygons - Coming Soon
                            </div>
                            <div id="mapFilterContainer" class="geographicFilterContainer col">
                                <label for="mapFilterType" style="margin-bottom: 0;">Find Data Located At</label>
                                <select id="mapFilterType" class="form-control form-control-sm">
                                    <option value="center">Center of Map</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<div class="row" style="height: 50px;"></div>
        <div id="applyFilterButtonDiv" class="row">
            <div class="col" style="margin: 10px; text-align: center;">
                <button id="applyFilterButton" class="btn btn-primary" role="button" style="width: 100%;" title="Click to Apply Filter">Apply Filter</button>
            </div>
        </div>
    </div>
    <div id="resultInterfaceContainer" class="col">
        <div id="mapInterfaceContainer">
            <div id="mapContainer">

</div>
            <div id="mapDisclaimer">
                The provided maps are not for purchase or for download; they are to be used as a guide for reference and search purposes only; they are not owned or managed by the USGS.
            </div>
            <div id="navigatorContainer">
                <div id="navigatorHeader" class="row">
                    <div id="navigatorHeaderTitle" class="col-10">Scene Navigator</div>
                    <div  id="navigatorHeaderOptions" class="col-2">
                        <i role="img" id="exportSearchResultsIcon" class="far fa-file-download fa-lg disabled" title="Log In To Export Search Results"></i>
                        <i role="img" id="closeSceneNavigator" class="far fa-times-square fa-lg" title="Click to Close Scene Navigator"></i>
                    </div>
                </div>
                <div id="navigatorSelection">
                    <div id="navigatorSceneId"></div>
                    <div id="navigatorDataset"></div>
                    <div id="navigatorEmpty">
                        (No Result Data - Select a Data Set)
                    </div>
                    <div id="navigatorFailed" style="display: none;">
                        (No Result Data - Search Failed)
                    </div>
                    <div id="navigatorLoading" style="display: none;">
                        <i class="far fa-spinner fa-spin fa-lg" title="Loading Results"></i> Loading Results
                    </div>
                    <div id="navigatorSceneOptions" class="d-flex justify-content-between" style="display: none;">
                        <div id="navigatorSceneThumbnailContainer" class="col navigatorSceneOption" title="View Browse">
                            <div id="navigatorSceneThumbnail"></div>
                        </div>
                        <div id="navigatorSceneDownload" class="navigatorSceneOption disabled" title="Log In To Download Scene">
                            <i role="img" class="far fa-download fa-lg" title="Log In To Download Scene"></i>
                            Download
                        </div>
                        <div id="navigatorSceneMetadata" class="navigatorSceneOption disabled" title="View Scene Metadata">
                            <i role="img" class="far fa-table fa-lg" title="View Scene Metadata"></i>
                            Metadata
                        </div>
                        <div id="navigatorSceneShare" class="navigatorSceneOption disabled" title="Share Scene">
                            <i role="img" class="far fa-share-alt fa-lg" title="Share Scene"></i>
                            Share
                        </div>

<div id="navigatorSceneHide" class="navigatorSceneOption disabled" title="Log In To Hide Scene">
                            <i role="img" class="far fa-ban fa-lg" title="Log In To Hide Scene"></i>
                            Hide
                        </div>
                    </div>
                </div>
                <div id="navigatorButtons" class="row">
                    <div id="navigatorPrevious" class="col navigationButton disabled" title="Previous Scene Unavailable - No Data">
                        Previous
                    </div>
                    <div id="navigatorSelect" class="col navigationButton disabled" title="Log In To Select Scene">
                        Select Scene
                    </div>
                    <div id="navigatorNext" class="col navigationButton disabled" title="Next Scene Unavailable - No Data">
                        Next
                    </div>
                </div>
            </div>
        </div>
        <div id="activeDownloadsContainer" class="horizontalInfoPanel">
            <div class="infoPanelHeader row">
                <div class="infoPanelTitle col-11">Active Downloads</div>
                <div class="infoPanelControls col-1">
                    <i class="far fa-times-square fa-lg closeInfoPanel" title="Close Active Downloads"></i>
                </div>
            </div>
            <div class="infoPanelContentContainer">
                <div class="infoPanelContent">
                    TODO:: ADD THE TABLE AND CONTROLS
                </div>
            </div>
        </div>
        <div id="sceneBrowseContainer" class="sceneDependent horizontalInfoPanel">
            <div class="infoPanelHeader row">
                <div class="infoPanelTitle col-11">Scene Browse Options</div>
                <div class="infoPanelControls col-1">
                    <i class="far fa-times-square fa-lg closeInfoPanel" title="Close Browse Options"></i>
                </div>
            </div>
            <div class="infoPanelContentContainer">
                <div class="infoPanelContent">
                    <div id="browsePreviewHeader" class="row">
                        <div class="col-1" style="padding: 0;">
                            <i id="previousBrowsePreview" class="far fa-chevron-left fa-lg" title="Previous Browse" data-browseNum="-1"></i>
                        </div>
                        <div id="browsePreviewName" class="col-10" style="padding: 0;" data-browseNum="-1">Browse Name</div>
                        <div class="col-1" style="padding: 0;">
                            <i id="nextBrowsePreview" class="far fa-chevron-right fa-lg" title="Next Browse" data-browseNum="-1"></i>
                        </div>
                    </div>
                    <div id="browsePreviewContainer">                    </div>
                    <div id="browsePreviewButtons">
                        <button type="button" id="useBrowseOverlayButton" class="btn btn-primary browsePreviewButton">Use as Overlay</button>
                    </div>
                </div>
            </div>
        </div>
        <div id="sceneDownloadsContainer" class="sceneDependent horizontalInfoPanel">
            <div class="infoPanelHeader row">
                <div class="infoPanelTitle col-11">Scene Download Options</div>
                <div class="infoPanelControls col-1">
                    <i class="far fa-times-square fa-lg closeInfoPanel" title="Close Download Options"></i>
                </div>
            </div>
            <div class="infoPanelContentContainer">
                <div class="infoPanelLoadingContainer">
                    <i class="far fa-spinner fa-spin fa-lg" title="Loading Content"></i>Loading Download Options...
                </div>
                <div class="infoPanelErrorContainer alert alert-danger">
                    <div class="infoPanelErrorHeader">
                        <i class="fas fa-exclamation-triangle" title="Error"></i> <span class="infoPanelErrorTitle">Unable to Load Download Options</span>
                    </div>
                    <div class="infoPanelErrorText"></div>
                </div>
                <div class="infoPanelContent">
                    <template id="downloadOptionRowTemplate">
                        <div class="downloadOptionRow">
                            <div class="downloadOptionRowHeader row" data-productId="">
                                <div class="downloadOptionRowTitle col-10"></div>
                                <div class="downloadOptionRowControls col-2">
                                    <i class="fas fa-download requestDownload" title="Request Download"></i>
                                    <i class="fas fa-chevron-down secondaryDownloads" title="View Related Downloads"></i>
                                </div>
                            </div>
                            <div class="downloadFilesize"></div>
                            <div class="secondaryDownloadsContainer"></div>
                        </div>
                    </template>
                    <template id="fileGroupTemplate">
                            <div class="filgGroup">
                                <div class="d-flex justify-content-between fileGroup" style="border-bottom: 1px solid #cccccc;margin-bottom:5px;">
                                    <div class="name col" style="padding-top:4px 2px 2px 2px;margin: 2px;"><span class="text1"></span><br /><span class="text2" style="font-style:italic;font-size:13px;"></span></div>
                                    <div class="groupOptions addAllBulkBtn" title="Click to Add All Files to Bulk">Add All Files<br /> to Bulk</div>
                                    <div class="groupOptions downloadAllBtn" title="Click to Download All Files Now">Download All<br /> Files Now</div>
                                    <div class="groupOptions selectFilesBtn activeBtn" data-toggle="modal" title="Click to Select Files" data-backdrop="false">Select<br /> Files</div>
                                </div>
                                <div class="modal fileSelectionModal" tabindex="-1" role="dialog" aria-hidden="true" style="">
                                    <div class="modal-dialog" role="document" style="max-width:600px;font-size: 14px;">
                                        <div class="modal-content" style="border:0px;border-radius: .6rem;">
                                            <div class="modal-header clearfix" style="display:flex;">
                                                <h5 class="modal-title" style="font-weight:500;font-size:1.25rem;"></h5>
                                                <button type="button" class="close closeFileGroupModal" data-dismiss="modal" aria-label="Close" style="font-size:1.5rem; font-weight:700;"><span aria-hidden="true">×</span></button>
                                            </div>
                                            <div class="modal-body" style="max-height: calc(100vh - 210px);overflow-y: auto;">
                                                <p style="margin-bottom: 1rem;">
                                                    Select files from this File Group. Use "Add All Selected to Bulk" to add to a Bulk Order in your Item Basket. Use "Download All Selected Scenes Now" to download all selected files now.
                                                </p>
                                                <div class="fileSelectionOptions" style="float:right;padding:10px 0px;"><span class="enableAllFiles" style="vertical-align:middle;margin-right:5px;">Select All</span>|<span class="disableAllFiles" style="vertical-align:middle;margin-left:5px;margin-right:5px;">Deselect All</span></div>
                                                <div class="fileSelectionContainer">
                                                    <div class="fileSelectionContent"></div>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-success selFilesAddAllBulkBtn">Add All Selected to Bulk</button>
                                                <button type="button" class="btn btn-success selFilesDownloadAllBtn">Download All Selected Now</button>
                                                <button type="button" class="btn btn-secondary closeFileGroupModalBtn" data-dismiss="modal">Close</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    <div id="fileGroupsRows"></div>
                    <div id="downloadOptionRows"></div>
                </div>
            </div>
        </div>
        <div id="sceneMetadataContainer" class="sceneDependent horizontalInfoPanel">
            <div class="infoPanelHeader row">
                <div class="infoPanelTitle col-11">Scene Metadata</div>
                <div class="infoPanelControls col-1">
                    <i class="far fa-times-square fa-lg closeInfoPanel" id="fullMetadataClose" title="Close Metadata"></i>
                </div>
            </div>
            <div class="infoPanelContentContainer">
                <div class="infoPanelLoadingContainer">
                    <i class="far fa-spinner fa-spin fa-lg" title="Loading Content"></i>Loading Metadata...
                </div>
                <div class="infoPanelErrorContainer alert alert-danger">
                    <div class="infoPanelErrorHeader">
                        <i class="fas fa-exclamation-triangle" title="Error"></i> <span class="infoPanelErrorTitle">Unable to Load Metadata</span>
                    </div>
                    <div class="infoPanelErrorText"></div>
                </div>
                <div class="infoPanelContent">
                    <template id="metadataRowTemplate">
                        <div class="metadataRow">
                            <div class="metadataRowHeader row" data-resultFieldId="">
                                <div class="metadataRowTitle col-10"></div>
                                <div class="metadataRowControls col-2">
                                    <i role="img" class="fas fa-info-circle viewDictionary" title="View Data Dictionary"></i>
                                </div>
                            </div>
                            <div class="metadataRowValue"></div>
                        </div>
                    </template>
                    <div id="metadataRows"></div>
                </div>
            </div>
        </div>
        <div id="resultContainer" data-searchId="" data-totalPages="0"></div>
        <template id="resultPageTemplate">
            <div class="resultPage" data-pageNum="" data-sceneCount="" data-minDate="" data-maxDate=""></div>
        </template>
        <template id="resultDataTemplate">
            <div class="resultData row" data-resultNumber="" data-datasetId="" data-entityId="" data-resultDate="">
                <div class="resultThumbnailContainer col-3">
                    <img src="" alt="" class="resultThumbnail" data-browseIndex="-1" />
                </div>
                <div class="resultMetadataContainer col-9">
                    <span class="resultDataset"></span>
                    <span class="resultDisplayId"></span>
                    <span class="resultAcquisition"></span>
                </div>
            </div>
        </template>
        <div id="timelineControlContainer" class="horizontalInfoPanel">
            <div class="infoPanelHeader row timelineOptions">
                <div class="infoPanelTitle col-8">Result Timeline</div>
                <div class="col-3">
                    <select aria-label="Select Result Timeline" id="datePartSelector" name="datePartSelector" class="form-control form-control-sm">
                        <option value="YYYY" selected>Year</option>
                        <option value="YYYY-MM">Month</option>
                        <option value="YYYY-MM-DD">Day</option>
                    </select>
                </div>
                <div class="infoPanelControls col-1">
                    <i role="img" class="far fa-times-square fa-lg closeInfoPanel" title="Close Timeline"></i>
                </div>
            </div>
            <div class="infoPanelContentContainer">
                <div class="infoPanelLoadingContainer" style="display: none;">
                    <i role="img" class="far fa-spinner fa-spin fa-lg" title="Loading Content"></i>Loading Timeline...
                </div>
                <div class="infoPanelErrorContainer alert alert-danger">
                    <div class="infoPanelErrorHeader">
                        <i role="img" class="fas fa-exclamation-triangle" title="Error"></i> <span class="infoPanelErrorTitle">Unable to Load Timeline</span>
                    </div>
                    <div class="infoPanelErrorText"></div>
                </div>
                <div class="infoPanelContent timelineItems">
                    <template id="timelineEmptyRowTemplate">
                        <div class="timelineEmptyDateRow" data-totalSceneCount="0"></div>
                    </template>
                    <template id="timelineRowTemplate">
                        <div class="timelineDateRow" data-datePart="" data-totalSceneCount="0">
                            <div class="timelineDateRowHeader row">
                                <div class="timelineDateRowHeaderLeft col">
                                    <div class="timelineDateRowTitle"></div>
                                    <div class="timelineDateRowResults"></div>
                                </div>
                                <div class="timelineDateRowOptionsContainer col">
                                    <div class="timelineDateRowOptions">
                                        <i class="timelineDateRowSelect far fa-check-square fa-lg" title="Click to view data within this time period"></i>
                                        <i class="timelineDateRowZoomOut far fa-minus-square fa-lg" title="Click to zoom out to a wider time period"></i>
                                        <i class="timelineDateRowZoomIn far fa-plus-square fa-lg" title="Click to view data in this time period"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                    <div id="timelineRowContainer">No Result Data - Select a Data Set</div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="addDatasetModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Data Set</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="standardDatasetFilterContainer" class="row">
                    <div class="col">
                        <label for="datasetCatalog">Data Set Catalog</label>
                        <select id="datasetCatalog">
                            <option value="GV">GloVis</option>
                        </select>
                    </div>
                    <div class="col">
                        <div id="datasetSearchContainer">
                            <label for="datasetFilter">Data Set Filter</label>
                            <input type="text" id="datasetFilter" name="datasetFilter" placeholder="Filter by data set name and keywords" />
                        </div>
                    </div>
                </div>
                <div id="advancedDatasetFilterContainer" class="row">
                    Advanced Filter
                </div>
                <div id="availableDatasetRowContainer"></div>
            </div>
            <div class="modal-footer">
                <i id="takeDatasetTourIcon" class="far fa-question-circle fa-lg" title="Click to take a tour"></i>
                <button type="button" id="addAllDatasetsButton" class="btn btn-primary" data-dismiss="modal">Add All Data Sets</button>
                <button type="button" id="addSelectedDatasetsButton" class="btn btn-primary" data-dismiss="modal">Add Selected Data Sets</button>
                <button type="button" id="datasetSelectionClose" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div id="addDatasetFilterModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Data Set Filter</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="datasetMetadataFilterContainer" class="filterTypeContainer" style="display: inherit;">
                    <div id="filterDatasetSelectionContainer">
                        <div>
                            <label for="filterDatasetSelector">Data Set</label>
                            <select id="filterDatasetSelector" name="filterDatasetSelector" class="form-control form-control-sm"></select>
                        </div>
                        <div id="filterDatasetFieldsContainer">
                            <label for="filterFieldSelector">Field Filter</label>
                            <select id="filterFieldSelector" name="filterFieldSelector" class="form-control form-control-sm"></select>
                        </div>
                    </div>
                    <div id="datasetFilterOptions"></div>
                    <template id="datasetFilterContainerTemplate">
                        <div class="filterTypeContainer datasetActiveFilterContainer" data-datasetId="">
                            <div class="row" style="margin: 0;">
                                <div class="filterDatasetName col-10"></div>
                                <div class="filterDatasetOptions col-2">
                                    <i class="removeDatasetFilters far fa-trash-alt fa-lg" title="Click to remove all filters for this data set"></i>
                                </div>
                            </div>
                            <div class="filterSelections"></div>
                        </div>
                    </template>
                    <template id="datasetFilterOptionTemplate">
                        <div class="datasetFilterOption" data-filterId="">
                            <div class="filterHeader row">
                                <div class="col-10 filterNameContainer">
                                    <span class="filterName"></span>
                                    <i class="far fa-info-circle fa-lg filterDictionaryLink" title="Click to view detailed information about this filter"></i>
                                </div>
                                <div class="col-2 metadataFilterOptions">
                                    <i class="far fa-trash-alt fa-lg removeDatasetFilter" title="Click to Remove Filter"></i>
                                </div>
                            </div>
                            <div class="metadataFilterInputContainer"></div>
                        </div>
                    </template>
                </div>
            </div>
            <div class="modal-footer">
                <button id="addDatasetFilterButton" type="button" class="btn btn-primary">Add Data Set Filter</button>
                <button id="closeDatasetFilterDialogButton" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div id="addFilterModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Filter</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div>
                    <label for="availableFilterTypes">Filter Type</label>
                    <select id="availableFilterTypes" class="form-control">
                        <option value="">(Select One)</option>
                        <option value="acquisitionFilter">Acquisition Date</option>
                        <option value="cloudCoverFilter">Cloud Cover</option>
                        <option value="seasonalFilter">Seasonal (Month Selections)</option>
                        <option value="ingestFilter">Scene Ingest Date</option>
                    </select>
                </div>
                <div id="filterTypeContainers">
                    <div id="acquisitionFilterContainer" class="filterTypeContainer">
                        <div class="row">
                            <div class="filterInputLabel col-10">Acquisition Date Range</div>
                            <div class="filterInputOptions col-2">
                                <i class="far fa-times-square removeFilterInputOption" title="Click to Remove Filter"></i>
                            </div>
                        </div>
                        <div class="filterInputElementContainer">
                            <input id="acquisitionDateRangeStart" name="acquisitionDateRangeStart" class="form-control" type="date" aria-label="Acquisition Date Range Start" /> to <input id="acquisitionDateRangeEnd" name="acquisitionDateRangeEnd" class="form-control" type="date" aria-label="Acquisition Date Range End" />
                        </div>
                    </div>
                    <div id="cloudCoverFilterContainer" class="filterTypeContainer">
                        <div class="row">
                            <div class="filterInputLabel col-10">Cloud Cover <i class="far fa-info-circle" title="This filter will only apply to data sets with data containing cloud cover scores"></i></div>
                            <div class="filterInputOptions col-2">
                                <i class="far fa-times-square removeFilterInputOption" title="Click to Remove Filter"></i>
                            </div>
                        </div>
                        <div class="filterInputElementContainer">
                            <div style="display:table;">
                                <input aria-label="cloudCoverLow" type="number" id="cloudCoverLow" class="form-control" style="display:table-cell; width: 80px;" min=0 max=100>
                                 to  
                                <input aria-label="cloudCoverHigh" type="number" id="cloudCoverHigh" class="form-control" style="display:table-cell; width: 80px;" min=0 max=100>
                            </div>   
                            <div id="cloudCoverSlider">  
                                <div id="cloudSlider"></div> 
                            </div>
                            <div id="unknownCloud"> 
                                <input type="checkbox" id="includeUnknown" name="includeUnknown" style="width: auto" checked>
                                <label for="includeUnknown">Include Unknown</label>
                            </div>
                        </div>
                    </div>
                   
                    <div id="seasonalFilterContainer" class="filterTypeContainer">
                        <div class="row">
                            <div class="filterInputLabel col-10">Seasonal Filter (Month Selections)</div>
                            <div class="filterInputOptions col-2">
                                <i class="far fa-times-square removeFilterInputOption" title="Click to Remove Filter"></i>
                            </div>
                        </div>
                        <div class="filterInputElementContainer">
                            <select id="seasonalFilter" name="seasonalFilter" class="form-control"  aria-label="Season Filter - Select Months" multiple size="6">
                                <option value="1">January</option>
                                <option value="2">February</option>
                                <option value="3">March</option>
                                <option value="4">April</option>
                                <option value="5">May</option>
                                <option value="6">June</option>
                                <option value="7">July</option>
                                <option value="8">August</option>
                                <option value="9">September</option>
                                <option value="10">October</option>
                                <option value="11">November</option>
                                <option value="12">December</option>
                            </select>
                        </div>
                    </div>
                    <div id="ingestFilterContainer" class="filterTypeContainer">
                        <div class="row">
                            <div class="filterInputLabel col-10">Ingest Date Range</div>
                            <div class="filterInputOptions col-2">
                                <i class="far fa-times-square removeFilterInputOption" title="Click to Remove Filter"></i>
                            </div>
                        </div>
                        <div class="filterInputElementContainer">
                            <input id="ingestDateRangeStart" name="ingestDateRangeStart" class="form-control form-control-sm" type="date" aria-label="Ingest Date Range Start" /> to <input id="ingestDateRangeEnd" name="ingestDateRangeEnd" class="form-control form-control-sm" type="date" aria-label="Ingest Date Range End" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="addFilterButton" type="button" class="btn btn-primary">Add Filter</button>
                <button id="closeFilterButton" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div id="datasetMessagesModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document" style="max-width: 600px;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Data Set Messages - <span id="datasetMessagesDatasetLabel"></span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="datasetMessagesContent"></div>
            </div>
            <div class="modal-footer">
                <button id="closeErrorButton" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div id="errorModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document" style="max-width: 600px;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Application Error</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="errorModalContent"></div>
            </div>
            <div class="modal-footer">
                <button id="closeErrorButton" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div id="exportModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document" style="max-width: 600px;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Export Results</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body" style="padding-bottom: 0; padding-top: 0;">
                <div id="exportNameContainer">
                    <label for="exportName">Export Name</label>
                    <input type="text" id="exportName" name="exportName" class="form-control" maxlength="256" placeholder="Optional - Enter a custom name for this export">
                </div>
                <div id="exportTypesContainer">
                    <div class="exportTypeContainer">
                        <button type="button" class="btn btn-primary requestExportButton" title="Click to Request Export" data-exportType="geojson">Export</button>
                        GeoJSON (JSON)
                    </div>
                    <div class="exportTypeContainer">
                        <button type="button" class="btn btn-primary requestExportButton" title="Click to Request Export" data-exportType="kmz_browse">Export</button>
                        KMZ - Browse Included (Zipped KML)
                    </div>
                    <div class="exportTypeContainer">
                        <button type="button" class="btn btn-primary requestExportButton" title="Click to Request Export" data-exportType="kmz_nobrowse">Export</button>
                        KMZ - Browse Not Included (Zipped KML)
                    </div>
                    <div class="exportTypeContainer">
                        <button type="button" class="btn btn-primary requestExportButton" title="Click to Request Export" data-exportType="delimited_comma">Export</button>
                        Comma (,) Delimited Full Metadata (ZIP)
                    </div>
                    <div class="exportTypeContainer">
                        <button type="button" class="btn btn-primary requestExportButton" title="Click to Request Export" data-exportType="delimited_pipe">Export</button>
                        Pipe (|) Delimited Full Metadata (ZIP)
                    </div>
                    <div class="exportTypeContainer">
                        <button type="button" class="btn btn-primary requestExportButton" title="Click to Request Export" data-exportType="csv">Export</button>
                        CSV Formatted Full Metadata (ZIP)
                    </div>
                    <div class="exportTypeContainer">
                        <button type="button" class="btn btn-primary requestExportButton" title="Click to Request Export" data-exportType="shapefile">Export</button>
                        ESRI Shapefile (ZIP)
                    </div>
                    <div class="exportTypeContainer">
                        <button type="button" class="btn btn-primary requestExportButton" title="Click to Request Export" data-exportType="fgdc">Export</button>
                        FGDC (FGDC-STD-001-1998 Version 2) Formatted Metadata XML
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="closeExportButton" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div id="jumpToModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Jump To Location/Scene</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body" style="padding-bottom: 0; padding-top: 0;">
                <p>
                    Jump directly to a specific location or scene, moving the map view to that location and initiating a search.
                </p>
                <div id="jumpToAccordian" style="margin-bottom: 20px;">
                    <div class="card">
                        <div class="card-header" id="headingJumpCurrentLocation">
                            <h5 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapseJumpCurrentLocation" aria-expanded="true" aria-controls="collapseJumpCurrentLocation">
                                    Current Location (based on IP Address)
                                </button>
                            </h5>
                        </div>
                        <div id="collapseJumpCurrentLocation" class="collapse show" aria-labelledby="headingJumpCurrentLocation" data-parent="#jumpToAccordian">
                            <div class="card-body">
                                <div>
                                    Once you click 'Use my Curent Location' the browser will prompt you to share your location. Click 'Allow' to share your location and GloVis will position the map accordingly. 
                                </div>
                                <div>
                                    <small class="text-muted">If the browser doesn't prompt you to share your location, you will have to update your browser settings to allow sites to ask for your location.</small>
                                </div>
                                <button type="button" class="btn btn-primary" id="jumpToCurrent">Use my Current Location</button> 
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header" id="headingJumpLatLng">
                            <h5 class="mb-0">
                                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseJumpLatLng" aria-expanded="false" aria-controls="collapseJumpLatLng">
                                    Lat/Lng
                                </button>
                            </h5>
                        </div>
                        <div id="collapseJumpLatLng" class="collapse" aria-labelledby="headingJumpLatLng" data-parent="#jumpToAccordian">
                            <div class="card-body">
                                <div>
                                    Coordinates should be entered in decimal degree format.
                                </div>
                                <div class="row">
                                    <div class="col-sm"></div>
                                    <div class="dialogInputContainer col-md">
                                        <label for="location_lat">Latitude</label>
                                        <input type="text" id="location_lat" class="form-control" />
                                    </div>
                                    <div class="dialogInputContainer col-md">
                                        <label for="location_lng">Longitude</label>
                                        <input type="text" id="location_lng" class="form-control" />
                                    </div>
                                    <div class="col-sm"></div>
                                </div>
                                <span class="jumpToError" id="errornameLatLng"></span></br>
                                <button type="button" class="btn btn-primary" id="jumpToLatLng">Jump to Location</button> 
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header" id="headingJumpScene">
                            <h5 class="mb-0">
                                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseJumpScene" aria-expanded="false" aria-controls="collapseJumpScene">
                                    Scene ID
                                </button>
                            </h5>
                        </div>
                        <div id="collapseJumpScene" class="collapse" aria-labelledby="headingJumpScene" data-parent="#jumpToAccordian">
                            <div class="card-body">
                                <div class="row">
                                    <div class="dialogInputContainer col-md">
                                        <label for="search_dataset">Data Set</label>
                                        <select id="search_dataset" class="form-control" style="width: 225px;">
                                            <option value="" datasetid="" title="Data Set Selection Required">(Select a Data Set)</option>
                                        </select>
                                    </div>
                                    <div class="dialogInputContainer col-md">
                                        <label for="search_sceneId">Scene ID</label>
                                        <input type="text" id="search_sceneId" class="form-control" style="width: 225px;"/>
                                    </div>
                                    <div class="dialogInputContainer col-md">
                                        <label for="search_idType">ID Field</label>
                                        <select id="search_idType" class="form-control" style="width: 225px;">
                                            <option value="displayId">Display ID</option>
                                        </select>
                                    </div>
                                </div>
                                <span class="jumpToError" id="errornameScene"></span></br>
                                <button type="button" class="btn btn-primary" id="jumpToScene">Jump to Scene</button>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header" id="headingJumpPathRow">
                            <h5 class="mb-0">
                                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseJumpPathRow" aria-expanded="false" aria-controls="collapseJumpPathRow">
                                    WRS Path/Row
                                </button>
                            </h5>
                        </div>
                        <div id="collapseJumpPathRow" class="collapse" aria-labelledby="headingJumpPathRow" data-parent="#jumpToAccordian">
                            <div class="card-body">
                                <div class="row">
                                    <div class="dialogInputContainer col-md">
                                        <label for="location_wrstype">WRS Grid Type</label>
                                        <select id="location_wrstype" class="form-control" style="width: 225px;">
                                            <option value="WRS1">WRS-1</option>
                                            <option selected value="WRS2">WRS-2</option>
                                        </select>
                                    </div>
                                    <div class="dialogInputContainer col-md">
                                        <label for="location_wrspath">Path</label>
                                        <input type="text" id="location_wrspath" class="form-control" style="width: 225px;"/>
                                    </div>
                                    <div class="dialogInputContainer col-md">
                                        <label for="location_wrsrow">Row</label>
                                        <input type="text" id="location_wrsrow" class="form-control" style="width: 225px;"/>
                                    </div>
                                </div>
                                <span class="jumpToError" id="errornamePathRow"></span></br>        
                                <button type="button" class="btn btn-primary" id="jumpToPathRow">Jump to Location</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="jumpToModalClose" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div id="settingsModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">User Preferences</h5>
                <button type="button" class="close settingsModalClose" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body" style="padding-bottom: 0; padding-top: 0;">
                <p id="userPreferencesDisclaimer" style="display: none; margin-top: 10px;">The following preferences will be saved to your ERS user account.</p>
                <p id="userPreferencesLoginDisclaimer" style="display: none; margin-top: 10px;">You must be signed in to save your preferences. Changes may be applied to this browser session.</p>
                <div id="preferencesAccordian" style="margin-bottom: 20px;">
                    <div id="generalPreferencesCard" class="card" style="display: none;">
                        <div class="card-header" id="headingSettingsGeneral">
                            <h5 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapseSettingsGeneral" aria-expanded="true" aria-controls="collapseSettingsGeneral">
                                    General Preferences
                                </button>
                            </h5>
                        </div>
                        <div id="collapseSettingsGeneral" class="collapse show" aria-labelledby="headingSettingsGeneral" data-parent="#preferencesAccordian">
                            <div id="settings_general_preferences" class="settingOptionContainer">
                                <div class="optionLine darkLine clearfix row">
                                    <div class="optionText col-8">Default Data Set<br /><span class="optionDescription">Determines which data set to use when first loading the application</span></div>
                                    <div class="optionValue col-1">
                                        <select class="form-control form-control-sm" id="defaultDataset" aria-label="Default Dataset" style="width: auto;">
                                            <option value="" selected>None</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="optionLine darkLine clearfix row">
                                    <div class="optionText col-9">Co-Discovery Enabled<br /><span class="optionDescription">If enabled, multiple data sets can be searched at once</span></div>
                                    <div class="optionValue col-1">
                                        <input class="form-control form-control-sm" id="preference_codiscovery" aria-label="Enable Co-Discovery Mode" type="checkbox" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header" id="headingSettingsNavigator">
                            <h5 class="mb-0">
                                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseSettingsNavigator" aria-expanded="false" aria-controls="collapseSettingsNavigator">
                                    Scene Navigator / Rolling Browse
                                </button>
                            </h5>
                        </div>
                        <div id="collapseSettingsNavigator" class="collapse" aria-labelledby="headingSettingsNavigator" data-parent="#preferencesAccordian">
                            <div class="optionLine darkLine clearfix row">
                                <label for="rollingBrowseSize" class="col-9">Rolling Browse Size</label>
                                <select id="rollingBrowseSize" class="form-control form-control-sm col-2">
                                    <option value="0">Disabled</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="10" selected>10</option>
                                    <option value="25">25</option>
                                </select>
                            </div>
                            <div class="optionLine darkLine clearfix row">
                                <div class="optionText col-9">Current Browse Opacity (<span id="selectedBrowseOpacity" class="sliderValue"></span>%)<br /><span class="optionDescription">The opacity for the current rolling browse</span></div>
                                <div class="optionValue col-1">
                                    <div id="currentBrowseOpacity" class="opacitySlider" data-initialValue="1" data-currentValue="1"></div>
                                </div>
                            </div>
                            <div class="optionLine darkLine clearfix row">
                                <div class="optionText col-9">Non-Current Rolling Browse Opacity (<span id="browseOpacitySpan" class="sliderValue"></span>%)<br /><span class="optionDescription">The opacity for the non-current rolling browse</span></div>
                                <div class="optionValue col-1">
                                    <div id="browseOpacity" class="opacitySlider" data-initialValue="1" data-currentValue="1"></div>
                                </div>                
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header" id="headingSettingsMapLayer">
                            <h5 class="mb-0">
                                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseSettingsMapLayer" aria-expanded="false" aria-controls="collapseSettingsMapLayer">
                                    Map Layer Preferences
                                </button>
                            </h5>
                        </div>
                        <div id="collapseSettingsMapLayer" class="collapse" aria-labelledby="headingSettingsMapLayer" data-parent="#preferencesAccordian">
                            <div class="settingOptionHeader headerPad">Map Center Point</div>
                            <div class="optionLine lightLine clearfix row">
                                <div class="optionText col-9">Color<br /><span class="optionDescription">The color used for the marker</span></div>
                                <div class="optionValue col-1">
                                    <input type="color" id="centerPoint_strokeColor" value="#000000" aria-label="Center Point Color"/>
                                </div>
                            </div>
                            <div class="optionLine darkLine clearfix row">
                                <div class="optionText col-9">Opacity (<span id="centerOpacity" class="sliderValue"></span>%)<br /><span class="optionDescription">The opacity of the marker</span></div>
                                <div class="optionValue col-1">
                                    <div id="centerPoint_layerStrokeOpacity" class="opacitySlider" data-initialValue="1" data-currentValue="1"></div>
                                </div>
                            </div>

<div class="settingOptionHeader headerPad">Current Scene</div>
                            <div class="optionLine lightLine clearfix row">
                                <div class="optionText col-9">Stroke Color<br /><span class="optionDescription">The color used to outline the polygon</span></div>
                                <div class="optionValue col-1">
                                    <input type="color" id="currentScene_strokeColor" value="#FF0000" aria-label="Current Scene Plygon Color"/>
                                </div>
                            </div>
                            <div class="optionLine lightLine clearfix row">
                                <div class="optionText col-9">Stroke Opacity (<span id="sceneStrokeOpacity" class="sliderValue"></span>%)<br /><span class="optionDescription">The opacity of the polygon outline</span></div>
                                <div class="optionValue col-1">
                                    <div id="currentScene_layerStrokeOpacity" class="opacitySlider" data-initialValue="1" data-currentValue="1"></div>
                                </div>
                            </div>
                            <div class="optionLine darkLine clearfix row">
                                <div class="optionText col-9">Stroke Weight<br /><span class="optionDescription">The thickness of the polygon outline</span></div>
                                <div class="optionValue col-1">
                                    <select id="currentScene_layerStrokeWeight" aria-label="Scene Stroke Weight" style="width: 65px;">
                                        <option value="0">0</option>
                                        <option value="1">1</option>
                                        <option value="2" selected>2</option>
                                        <option value="3">3</option>
                                    </select>
                                </div>
                            </div>

<div class="settingOptionHeader headerPad">Data Set Coverage</div>
                            <div class="optionLine lightLine clearfix row">
                                <div class="optionText col-9">Stroke Opacity (<span id="datasetStrokeOpacity" class="sliderValue"></span>%)<br /><span class="optionDescription">The opacity of the polygon outline</span></div>
                                <div class="optionValue col-1">
                                    <div id="datasetCoverage_layerStrokeOpacity" class="opacitySlider" data-initialValue="1" data-currentValue="1"></div>
                                </div>
                            </div>
                            <div class="optionLine lightLine clearfix row">
                                <div class="optionText col-9">Stroke Weight<br /><span class="optionDescription">The thickness of the polygon outline</span></div>
                                <div class="optionValue col-1">
                                    <select id="datasetCoverage_layerStrokeWeight" aria-label="Dataset Coverage Stroke Weight" style="width: 65px;">
                                        <option value="0">0</option>
                                        <option value="1">1</option>
                                        <option value="2" selected>2</option>
                                        <option value="3">3</option>
                                    </select>
                                </div>
                            </div>
                            <div class="optionLine darkLine clearfix row">
                                <div class="optionText col-9">Fill Opacity (<span id="datasetFillOpacity" class="sliderValue"></span>%)<br /><span class="optionDescription">The opacity of the polygon fill color (does not apply to points)</span></div>
                                <div class="optionValue col-1">
                                    <div id="datasetCoverage_layerFillOpacity" class="opacitySlider" data-initialValue=".3" data-currentValue=".3"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="mapPreferencesCard" class="card" style="display: none;">
                        <div class="card-header" id="headingSettingsMap">
                            <h5 class="mb-0">
                                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseSettingsMap" aria-expanded="false" aria-controls="collapseSettingsMap">
                                    Map Preferences
                                </button>
                            </h5>
                        </div>
                        <div id="collapseSettingsMap" class="collapse" aria-labelledby="headingSettingsMap" data-parent="#preferencesAccordian">
                            <div class="settingOptionHeader headerPad">Default Location</div>
                            <div class="defaultLocationPref">
                                <div class="optionLine lightLine clearfix row">
                                    <div class="dialogInputContainer col-4">
                                        <label for="preference_lat">Latitude</label>
                                        <input class="form-control form-control-sm" type="text" id="preference_lat" value="43.536"/>
                                    </div>
                                    <div class="dialogInputContainer col-5">
                                        <label for="preference_lng">Longitude</label>
                                        <input class="form-control form-control-sm" type="text" id="preference_lng" value="-96.732"/>
                                    </div>
                                    <div class="dialogInputContainer col-1">
                                        <button id="centerLocationButton" class="btn btn-outline-dark" title="Use Current Center Marker Location"><i class="fa fa-lg fa-crosshairs"></i></button>
                                    </div>
                                    <div class="dialogInputContainer col-1">
                                        <button id="browserLocationButton" class="btn btn-outline-dark" title="Use My Current Location"><i class="fa fa-lg fa-location-arrow"></i></button>
                                    </div>
                                </div>
                                <div class="optionLine darkLine clearfix row">
                                    <div class="optionText col-9">Zoom Level<br /><span class="optionDescription">Determines the zoom level of the map when loaded</span></div>
                                    <div class="optionValue col-1">
                                        <select class="form-control form-control-sm" id="zoomLevel" aria-label="Zoom level" style="width: 65px;">
                                                                                        <option value="3">3</option>
                                                                                        <option value="4">4</option>
                                                                                        <option value="5">5</option>
                                                                                        <option value="6">6</option>
                                                                                        <option value="7">7</option>
                                                                                        <option value="8">8</option>
                                                                                        <option value="9">9</option>
                                                                                        <option value="10">10</option>
                                                                                        <option value="11">11</option>
                                                                                        <option value="12">12</option>
                                                                                        <option value="13">13</option>
                                                                                        <option value="14">14</option>
                                                                                        <option value="15">15</option>
                                                                                        <option value="16">16</option>
                                                                                    </select>
                                    </div>
                                </div>
                                <div class="settingOptionHeader headerPad">Map Controls</div>
                                <div class="optionLine lightLine clearfix row">
                                    <div class="optionText col-9">Default Basemap<br /><span class="optionDescription">Determines which basemap style will do used when loaded</span></div>
                                    <div class="optionValue col-1">
                                        <select class="form-control form-control-sm" id="defaultBasemap" aria-label="Default Basemap" style="width: auto;">
                                        </select>
                                    </div>
                                </div>        
                                <div class="optionLine lightLine clearfix row">
                                    <div class="optionText col-9">Show Pointer Coordinates<br /><span class="optionDescription">Determines if the coordinates of the mouse location are displayed on the map</span></div>
                                    <div class="optionValue col-1">
                                        <input class="form-control form-control-sm" id="showMouseCoordinates" aria-label="Show Pointer Coordinates" type="checkbox" checked/>
                                    </div>
                                </div>
                                <div class="optionLine darkLine clearfix row">
                                    <div class="optionText col-9">Show Zoom Level<br /><span class="optionDescription">Determines if the zoom level of the map is displayed on the map</span></div>
                                    <div class="optionValue col-1">
                                        <input class="form-control form-control-sm" id="showZoomLevel" aria-label="Show Zoom Level" type="checkbox" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="resetPreferencesButton" type="button" class="btn btn-secondary mr-auto">Reset to Default</button>
                <span class="prederencesError" id="errornamePreferences"></span></br>
                <button id="savePreferencesButton" type="button" class="btn btn-primary" data-dismiss="modal" style="display: none;">Save</button>
                <button id="applyPreferencesButton" type="button" class="btn btn-primary" data-dismiss="modal">Apply</button>
                <button id="closePreferencesButton" type="button" class="btn btn-secondary settingsModalClose" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

var datasetSearchOptions = {
        catalog: ''
    };

$(document).ready(function(){
        Viewer.data.basemapList = ;
        Viewer.data.keyboardShortcuts = {
    "keyCodes": {
        "32": {
            "keyText": "Space Bar",
            "shortcuts": [
                {
                    "description": "Select/Unselect current scene",
                    "isAlt" : false,
                    "isCtrl": true,
                    "isShift": false,
                    "target_id": "navigatorSelect"  
                }
            ]
        },
        "37": {
            "keyText": "Left Arrow",
            "shortcuts": [
                {
                    "description": "Previous scene",
                    "isAlt" : false,
                    "isCtrl": true,
                    "isShift": false,
                    "target_id": "navigatorPrevious"
                }
            ]
        },
        "39": {
            "keyText": "Right Arrow",
            "shortcuts": [
                {
                    "description": "Next scene",
                    "isAlt" : false,
                    "isCtrl": true,
                    "isShift": false,
                    "target_id": "navigatorNext"
                }
            ]
        },
        "68": {
            "keyText": "d",
            "shortcuts": [
                {
                    "description": "Download the current scene",
                    "isAlt" : false,
                    "isCtrl": true,
                    "isShift": false,
                    "target_id": "navigatorSceneDownload"
                }
            ]
        },
        "69": {
            "keyText": "e", 
            "shortcuts": [
                {
                    "description": "Export scenes",
                    "isAlt" : false,
                    "isCtrl": true,
                    "isShift": false,
                    "target_id": "exportSearchResultsIcon"
                }
            ]
        },
        "72": {
            "keyText": "h", 
            "shortcuts": [
                {
                    "description": "Hide the current scene",
                    "isAlt" : false,
                    "isCtrl": true,
                    "isShift": false,
                    "target_id": "navigatorSceneHide"
                }
            ]
        },
        "77": {
            "keyText": "m",
            "shortcuts": [
                {
                    "description": "View the Full Metadata for the current scene",
                    "isAlt" : false,
                    "isCtrl": true,
                    "isShift": false,
                    "target_id": "navigatorSceneMetadata"
                }
            ]
        }
    }
}
;
        Viewer.attachListeners();
        if (viewerOptions.guestCredentials === undefined) {
            getUserPreference(viewerOptions);
        } else {
            loadDefaultViewer(viewerOptions);
        }
    });

$("#cloudCoverLow").change(function(){
        $("#cloudCoverHigh").attr({"min":$("#cloudCoverLow").val()});
        if ($("#cloudCoverLow").val() <= $("#cloudCoverHigh").val()) {
            $("#cloudSlider").slider("values",0,$("#cloudCoverLow").val());
        }
    });

$("#cloudCoverHigh").change(function(){
        $("#cloudCoverLow").attr({"max":$("#cloudCoverHigh").val()});
        if ($("#cloudCoverLow").val() <= $("#cloudCoverHigh").val()) {
            $("#cloudSlider").slider("values",1,$("#cloudCoverHigh").val());
        }
    });

$('#takeDatasetTourIcon').click(function(){
        Viewer.tours.datasetTour.start();
    });

$('#jumpToCurrent').click(function(){
        navigator.geolocation.getCurrentPosition(function(position)
        {
            Viewer.map.data.lmap.setView(new L.LatLng(position.coords.latitude, position.coords.longitude), Viewer.map.data.lmap.getZoom());
        });

$('#jumpToModalClose').click();
    });

$('#jumpToLatLng').click(function(){
        var latitude = $('#location_lat').val();
        var longitude = $('#location_lng').val();

var response = Viewer.util.validateCoordinateInput(latitude, longitude, 'dd');

if(response.valid === false) {
            $('#errornameLatLng').html(response.message);
        } else {
            Viewer.map.data.lmap.setView(new L.LatLng($('#location_lat').val(), $('#location_lng').val()), Viewer.map.data.lmap.getZoom());
            $('#errornameLatLng').html("");
            $('#jumpToModalClose').click();
        }        
    });

$('#jumpToScene').click(function(){
        var datasetName = $('#search_dataset').val();
        var sceneId = $('#search_sceneId').val();
        var idType = $('#search_idType').val();
        var datasetId = $('#search_dataset option:selected').attr('datasetId');

var resultSearchPayload = {
            datasetName: datasetName,
            entityId: sceneId,
            idType: idType
        };

if (datasetName === "") {
            $('#errornameScene').html("Data Set Selection Required");
        } else {
            Viewer.m2m.executeRequest('scene-metadata', resultSearchPayload, function(response1)
            {
                if (response1.data !== null) {
                    spatial = response1.data.spatialBounds.coordinates[0];
                    sceneTimestamp = response1.data.temporalCoverage.startDate;
                    entityId = response1.data.entityId;
                    
                    latLng = Viewer.util.center(spatial);
                    Viewer.map.data.lmap.setView(new L.LatLng(latLng[1], latLng[0]), Viewer.map.data.lmap.getZoom());

var currentDatePart = $('#datePartSelector').val();
                    if (currentDatePart === 'YYYY') {
                        sceneTimestamp = sceneTimestamp + '-01-01';
                    } else if (currentDatePart === 'YYYY-MM') {
                        sceneTimestamp = sceneTimestamp + '-01';
                    }

setTimeout(function(){
                        if (Viewer.search.data.searchId !== null) {
                            //Query for the page number, then load it
                            var resultSearchPayload = {
                                searchId: Viewer.search.data.searchId,
                                sceneTimestamp: response1.data.temporalCoverage.startDate,
                                maxWaitTime: Viewer.search.data.maxWaitTime
                            };

Viewer.m2m.executeRequest('scene-search-result-search', resultSearchPayload, function(response2)
                            {
                                var $resultPage = $('#resultContainer .resultPage[data-pagenum="' + response2.data.pageNumber + '"]');
                                var $currentScene = $('#resultContainer .resultData.currentScene');
                                if ($currentScene.length === 1) {
                                    $currentScene.trigger({type: 'scene:current-off'});
                                }

//This will turn off all of the rolling browse
                                Viewer.sceneNavigator.updateRollingBrowse();

//We'll clear all results
                                $('#resultContainer').empty();
                                Viewer.sceneNavigator.clear('Moving to requested scene');

var resultPageCallback = function()
                                {
                                    var $resultPage = $('#resultContainer .resultPage[data-pagenum="' + response2.data.pageNumber + '"]');
                                    var $scene = $resultPage.find('.resultData[data-datasetId="' + datasetId + '"][data-entityId="' + entityId + '"]');
                                    $scene.trigger({type: 'scene:current'});
                                }

//Finally, load the new result page
                                Viewer.search.getResultPage(response2.data.pageNumber, false, resultPageCallback, resultPageCallback);

}, function(errorText, errorCode)
                            {
                                console.log(errorText);
                                Viewer.search.clear(errorText);
                                Viewer.timeline.close();
                            });
                        }
                    }, 3000);
                    
                    $('#errornameScene').html("");
                    $('#jumpToModalClose').click();
                } else {
                    $('#errornameScene').html("Scene ID was not found.");
                }
            }, function(errorText, errorCode)
            {
                $('#errornameScene').html("Scene ID was not found.");
            });
        }
    });

$('#jumpToPathRow').click(function(){
        var gridType = $('#location_wrstype').val(); 
        var path = $('#location_wrspath').val(); 
        var row = $('#location_wrsrow').val(); 
        var responseShape = 'point';

var resultSearchPayload = {
            gridType: gridType,
            responseShape: responseShape,
            path: path,
            row: row
        };

Viewer.m2m.executeRequest('grid2ll', resultSearchPayload, function(response)
        {
            if (response.data !== null) {
                Viewer.map.data.lmap.setView(new L.LatLng(response.data.coordinates[0].latitude, response.data.coordinates[0].longitude), Viewer.map.data.lmap.getZoom());
                $('#errornamePathRow').html("");
                $('#jumpToModalClose').click();
            }
        }, function(errorText, errorCode)
        {
            $('#errornamePathRow').html("Unable to find a location.");
        });
    });

$('#centerLocationButton').click(function(){
        centerPoint = Viewer.map.data.centerMarker.getLatLng();

$('#preference_lat').val(centerPoint.lat);
        $('#preference_lng').val(centerPoint.lng);
    });

$('#browserLocationButton').click(function(){
        navigator.geolocation.getCurrentPosition(function(position)
        {
            $('#preference_lat').val(position.coords.latitude);
            $('#preference_lng').val(position.coords.longitude);
        });
    });

$('#applyPreferencesButton').click(function(){
        var preferences = {
            "general" : {"codiscoveryEnabled": $('#preference_codiscovery').is(':checked'), "defaultDataset":$('#defaultDataset').val()},
            "browse" : {"browseSize":$('#rollingBrowseSize').val(),"nonSelectedOpacity":$('#browseOpacitySpan').text(),"selectedOpacity":$('#selectedBrowseOpacity').text()},
            "mapLayer" : {"centerColor":$('#centerPoint_strokeColor').val(),"centerOpacity":$('#centerOpacity').text()},
            "currentScene" : {"strokeColor":$('#currentScene_strokeColor').val(),"strokeOpacity":$('#sceneStrokeOpacity').text(),"strokeWeight":$('#currentScene_layerStrokeWeight').val()},
            "datasetCoverage" : {"strokeOpacity":$('#datasetStrokeOpacity').text(),"strokeWeight":$('#datasetCoverage_layerStrokeWeight').val(),"fillOpacity":$('#datasetFillOpacity').text()},
            "map" : {"lat": ($('#preference_lat').val() == "") ? "43.536" : $('#preference_lat').val(),"lng": ($('#preference_lng').val() == "") ? "-96.732" : $('#preference_lng').val(),"zoomLevel":$('#zoomLevel').val(),"defaultBasemap":$('#defaultBasemap').val(),"showMouse":$('#showMouseCoordinates').is(":checked"),"showZoom":$('#showZoomLevel').is(":checked")}
        };
        
        var updateRollingBrowse = false;
        if (Viewer.data.preferences.browse.nonSelectedOpacity !== preferences.browse.nonSelectedOpacity || Viewer.data.preferences.browse.selectedOpacity !== preferences.browse.selectedOpacity) {
            updateRollingBrowse = true;
        }

Viewer.map.data.centerMarker.setOpacity($('#centerOpacity').text()/100);
        $('#mapCenterPoint').css("color", $('#centerPoint_strokeColor').val());
        Viewer.map.data.footprintStyle.color = $('#currentScene_strokeColor').val();
        Viewer.map.data.footprintStyle.opacity = $('#sceneStrokeOpacity').text()/100;
        Viewer.map.data.footprintStyle.weight = $('#currentScene_layerStrokeWeight').val();
        Viewer.datasets.data.opacity = $('#datasetStrokeOpacity').text()/100;
        Viewer.datasets.data.fillOpacity = $('#datasetFillOpacity').text()/100;
        Viewer.datasets.data.strokeWeight = $('#datasetCoverage_layerStrokeWeight').val();
        Viewer.sceneNavigator.data.rollingBrowseSize = $('#rollingBrowseSize').val();

Viewer.data.preferences = preferences;
        if (updateRollingBrowse) {
            Viewer.sceneNavigator.updateRollingBrowse();
        }

$('#closePreferencesButton').click();
    });

$('#savePreferencesButton').click(function(){
        var preferences = {
            "general" : {"codiscoveryEnabled": $('#preference_codiscovery').is(':checked'), "defaultDataset":$('#defaultDataset').val()},
            "browse" : {"browseSize":$('#rollingBrowseSize').val(),"nonSelectedOpacity":$('#browseOpacitySpan').text(),"selectedOpacity":$('#selectedBrowseOpacity').text()},
            "mapLayer" : {"centerColor":$('#centerPoint_strokeColor').val(),"centerOpacity":$('#centerOpacity').text()},
            "currentScene" : {"strokeColor":$('#currentScene_strokeColor').val(),"strokeOpacity":$('#sceneStrokeOpacity').text(),"strokeWeight":$('#currentScene_layerStrokeWeight').val()},
            "datasetCoverage" : {"strokeOpacity":$('#datasetStrokeOpacity').text(),"strokeWeight":$('#datasetCoverage_layerStrokeWeight').val(),"fillOpacity":$('#datasetFillOpacity').text()},
            "map" : {"lat": ($('#preference_lat').val() == "") ? "43.536" : $('#preference_lat').val(),"lng": ($('#preference_lng').val() == "") ? "-96.732" : $('#preference_lng').val(),"zoomLevel":$('#zoomLevel').val(),"defaultBasemap":$('#defaultBasemap').val(),"showMouse":$('#showMouseCoordinates').is(":checked"),"showZoom":$('#showZoomLevel').is(":checked")}
        };

var resultSearchPayload = {
            systemId: '',
            userPreferences: preferences
        };
    
        Viewer.m2m.executeRequest('user-preference-set', resultSearchPayload, function(response)
        {
            if (response.data !== null) {
                var updateRollingBrowse = false;
                if (Viewer.data.preferences.browse.nonSelectedOpacity !== preferences.browse.nonSelectedOpacity || Viewer.data.preferences.browse.selectedOpacity !== preferences.browse.selectedOpacity) {
                    updateRollingBrowse = true;
                }

Viewer.map.data.centerMarker.setOpacity($('#centerOpacity').text()/100);
                $('#mapCenterPoint').css("color", $('#centerPoint_strokeColor').val());
                Viewer.map.data.footprintStyle.color = $('#currentScene_strokeColor').val();
                Viewer.map.data.footprintStyle.opacity = $('#sceneStrokeOpacity').text()/100;
                Viewer.map.data.footprintStyle.weight = $('#currentScene_layerStrokeWeight').val();
                Viewer.datasets.data.opacity = $('#datasetStrokeOpacity').text()/100;
                Viewer.datasets.data.fillOpacity = $('#datasetFillOpacity').text()/100;
                Viewer.datasets.data.strokeWeight = $('#datasetCoverage_layerStrokeWeight').val();
                Viewer.sceneNavigator.data.rollingBrowseSize = $('#rollingBrowseSize').val();
                ($('#showMouseCoordinates').is(":checked")) ? $('#mouseCoordinateDisplay').show() : $('#mouseCoordinateDisplay').hide(); 
                ($('#showZoomLevel').is(":checked")) ? $('.zoomInfo').show() : $('.zoomInfo').hide();

Viewer.data.preferences = preferences;

//If co-discovery is off, make sure that only one dataset is selected
                if (Viewer.data.preferences.general.codiscoveryEnabled === false && $('#datasetRowContainer .datasetToggle.fa-toggle-on').length > 1) {
                    $('#datasetRowContainer .datasetToggle.fa-toggle-on:not(:first)').trigger({type: 'dataset:unselect', isBulkSelect: true});

//Re-search
                    Viewer.search.update(true, function (response)
                    {
                        DevConsole.logMessage('debug', 'Search after co-discovery disabled');
                    }, function (errorText)
                    {
                        DevConsole.logMessage('debug', 'Search after co-discovery disabled error: ' + errorText);
                    });

//We can return because the rolling browse will be updated after the new search finishes
                    return;
                }

if (updateRollingBrowse) {
                    Viewer.sceneNavigator.updateRollingBrowse();
                }
            }
        }, function(errorText, errorCode)
        {
            $('#errornamePreferences').html("Unable to save preferences at this time.");
        });

$('#closePreferencesButton').click();
    });

$(function() {  
        $("#cloudSlider").slider({  
            range:true,  
            min: 0,  
            max: 100,  
            values: [ 0, 100 ],  
            slide: function( event, ui ) {  
                $("#cloudCoverLow").val(ui.values[ 0 ]);
                $("#cloudCoverHigh").val(ui.values[ 1 ]);
                $("#cloudCoverLow").attr({"max":$("#cloudCoverHigh").val()}); 
                $("#cloudCoverHigh").attr({"min":$("#cloudCoverLow").val()}); 
                if ($("#filterContainer").find('#cloudSlider').length > 0) {
                    $('#applyFilterButton').addClass('glowing');
                }
            }  
        });
        $("#cloudCoverLow").val($("#cloudSlider").slider("values", 0));
        $("#cloudCoverHigh").val($("#cloudSlider").slider("values", 1));
    });
    
    $('.opacitySlider').each(function()
    {
        var $slider = $(this);
        var sliderValue = 100.0 * $slider.attr('data-initialValue');
        
        $(this).closest('.optionLine').find('.sliderValue').text(parseInt(sliderValue, 10));
        
        $(this).slider({
            min: 0,
            max: 100,
            step: 1,
            slide: function (event, ui)
            {
                $slider.closest('.optionLine').find('.sliderValue').text(ui.value);
            },
            change: function(event, ui) {
                $slider.closest('.optionLine').find('.sliderValue').text(ui.value);
                $slider.attr('data-currentValue', ui.value / 100);
            },
            value: sliderValue
        });
    });

function getUserPreference(viewerOptions)
    {
        Viewer.m2m.apiUrl = viewerOptions.apiUrl;
        Viewer.data.appToken = viewerOptions.appToken;
        Viewer.data.ersUrl = viewerOptions.ersUrl;

var resultSearchPayload = {
            systemId: ''
        };

Viewer.m2m.executeRequest('user-preference-get', resultSearchPayload, function(response)
        {
            Viewer.load(viewerOptions);
            $('.zoomInfo').text('Zoom: ' + Viewer.map.data.lmap.getZoom());

if (response.data !== null) {
                settingsObj = JSON.parse(response.data);
                userDataset = [settingsObj.general.defaultDataset];
                var loadedDatasets = [];
                if (null) {
                    loadedDatasets = [""];
                } else {
                    loadedDatasets = userDataset;
                }
                var autoSelect = false;
                Viewer.datasets.load(datasetSearchOptions, {loadedDatasets: loadedDatasets, autoSelect: autoSelect},  function(jsonPayload)
                {
                    console.log(jsonPayload);
                });
                Viewer.map.data.lmap.setView(new L.LatLng(settingsObj.map.lat, settingsObj.map.lng), settingsObj.map.zoomLevel);
                Viewer.map.data.centerMarker.setOpacity(settingsObj.mapLayer.centerOpacity/100);
                $('#mapCenterPoint').css("color", settingsObj.mapLayer.centerColor);
                Viewer.map.data.footprintStyle.color = settingsObj.currentScene.strokeColor;
                Viewer.map.data.footprintStyle.opacity = settingsObj.currentScene.strokeOpacity/100;
                Viewer.map.data.footprintStyle.weight = settingsObj.currentScene.strokeWeight;
                Viewer.datasets.data.opacity = settingsObj.datasetCoverage.strokeOpacity/100;
                Viewer.datasets.data.fillOpacity = settingsObj.datasetCoverage.fillOpacity/100;
                Viewer.datasets.data.strokeWeight = settingsObj.datasetCoverage.strokeWeight;
                Viewer.sceneNavigator.data.rollingBrowseSize = settingsObj.browse.browseSize;
                (settingsObj.map.showMouse) ? $('#mouseCoordinateDisplay').show() : $('#mouseCoordinateDisplay').hide(); 
                (settingsObj.map.showZoom) ? $('.zoomInfo').show() : $('.zoomInfo').hide();

if (settingsObj.general.codiscoveryEnabled === undefined) {
                    settingsObj.general.codiscoveryEnabled = false;
                }

Viewer.data.preferences = settingsObj;

if (Viewer.data.isLoaded) {
                    for (let i = 0; i < Object.keys(viewerOptions.mapOptions.basemapLayers).length; i++) {
                        if (viewerOptions.mapOptions.basemapLayers[i].mapTitle == settingsObj.map.defaultBasemap) {
                            $('.leaflet-control-layers-selector')[i].click()
                        }
                    }
                }

} else {
                var autoSelect = false;
                var loadedDatasets = [""];
                Viewer.datasets.load(datasetSearchOptions, {loadedDatasets: loadedDatasets, autoSelect: autoSelect},  function(jsonPayload)
                {
                    console.log(jsonPayload);
                });
            }
        }, function(errorText, errorCode)
        {
            console.log("Unable to retrieve preferences at this time.");
        });
    }

if (Viewer.cookie.get('') === "") {
        loadTourOption();
    } else if (Viewer.util.getQueryParameterByName('tour')) {
        Viewer.cookie.set('', 'A' , 365);
        Viewer.tours.init();
        Viewer.tours.mainTour.start();
    }
</script>