Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="description" content="Utah Geologic and Mineral Resources">

    <title>Utah Mineral Resources</title>

    <!-- Calcite Maps Bootstrap -->
    <link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-bootstrap.min-v0.10.css">

    <!-- Calcite Maps -->
    <link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-arcgis-4.x.min-v0.10.css">
    <!--link rel="stylesheet" href="../../dist/css/calcite-maps.min-v0.10.css"-->
    <!-- works -->

    <!-- ArcGIS JS 4.10 -->
    <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/css/main.css">
    <link rel="stylesheet" href="lightbox2/dist/css/lightbox.min.css">
    <link  href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.5.0/viewer.css" rel="stylesheet">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.5.0/viewer.js"></script>

    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        .calcite-panels.calcite-panels-left.calcite-bg-custom.calcite-text-light.calcite-bgcolor-dark.panel-group {
            position: absolute;
            left: 55px;
        }

        .esri-layer-list__item-actions-menu-item:first-of-type {
            display: none;
        }

        .tab {
            margin-left: 4%;
        }

        .esri-legend__message {
            display: none;
        }

        .esri-layer-list__child-toggle+.esri-layer-list__item-label>.esri-layer-list__item-toggle {
            display: none;
        }

        a {
            cursor: pointer;
        }

        .esri-layer-list__item-actions-menu-item--active,
        .esri-layer-list__item-actions-menu-item--active:hover {
            background-color: whitesmoke;
        }

        .calcite-title:before {
            content: url('/apps/jay/tests/UGS-blm.png');
            padding: 6px 12px 0 2px;
            cursor: pointer;
        }



        .esri-layer-list__item-container .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: ivory;
            color: #fff;
            text-align: center;
            padding: 5px 0;
            border-radius: 6px;
            position: absolute;
            z-index: 1;
        }

        .esri-layer-list__item-container:hover .tooltiptext {
            visibility: visible;
        }

        .calcite-maps .calcite-search-expander .esri-search__sources-button.esri-widget--button {
            display: block !important;
        }

        .calcite-maps .calcite-search-expanded .esri-menu.esri-search__sources-menu {
            display: block !important;
        }

        .calcite-panels {
            z-index: 1;
        }

        .pictures {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .pictures > li {
      float: left;
      width: 33.3%;
      height: 33.3%;
      margin: 0 -1px -1px 0;
      border: 1px solid transparent;
      overflow: hidden;
    }
    .pictures > li > img {
      width: 100%;
      cursor: -webkit-zoom-in;
      cursor: zoom-in;
    }

    .viewer-title {
        color: #cd4;
        font-size: 20px;
    }
    </style>

</head>

<body class="calcite-maps calcite-nav-top">

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-M7CNXDK"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

    <!-- Navbar -->
    <a class="ugs-watermark " href="https://geology.utah.gov"></a>
    <nav class="navbar calcite-navbar navbar-fixed-top calcite-text-light calcite-bg-dark calcite-bgcolor-dark">
        <!-- Menu -->
        <div class="dropdown calcite-dropdown calcite-bg-light calcite-text-dark" role="presentation">
            <a class="dropdown-toggle" role="menubutton" aria-haspopup="true" aria-expanded="false" tabindex="0">
                <div class="calcite-dropdown-toggle">
                    <span class="sr-only">Toggle dropdown menu</span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </a>
            <ul class="dropdown-menu calcite-menu">
                <li><a role="menuitem" tabindex="0" data-target="#panelInfo" aria-haspopup="true"><span class="esri-icon-notice-round"></span> About</a></li>
                <li><a role="menuitem" tabindex="0" data-target="#panelDisclaimer" aria-haspopup="true"><span class="esri-icon-notice-triangle"></span> Disclaimer</a></li>
                <li><a role="menuitem" tabindex="0" data-target="#panelLegend" aria-haspopup="true"><span class="glyphicon glyphicon-list-alt"></span> Legend</a></li>
                <li><a role="menuitem" tabindex="0" data-target="#panelBasemaps" aria-haspopup="true"><span class="esri-icon-basemap"></span> Basemaps</a></li>
                <!-- <li><a role="menuitem" tabindex="0" data-target="#calciteLocate" id="calciteLocate" aria-haspopup="true"><span class="glyphicon glyphicon-map-marker"></span> Locate</a></li> -->
                <!-- <li><a role="menuitem" tabindex="0" id="calciteToggleNavbar" aria-haspopup="true"><span class="glyphicon glyphicon-fullscreen"></span> Full Map</a></li> -->
            </ul>
        </div>
        <!-- Title -->
        <div class="calcite-title calcite-overflow-hidden">
            <span class="calcite-title-main">Utah Geological Survey</span>
            <span class="calcite-title-divider hidden-xs"></span>
            <span class="calcite-title-sub hidden-xs">Utah Mineral Resources: Metals and Industrial Minerals</span>
        </div>
        <!-- Nav -->
        <ul class="calcite-nav nav navbar-nav">
            <!-- <li><a id="mapNav" class="hidden-xs hidden-sm" href="#mapTab" aria-controls="mapTab" aria-expanded="true" role="tab" data-toggle="tab" data-tooltip="tip" title="2D View" data-placement="bottom">2D View</a></li>
    <li class="active"><a id="sceneNav" class="hidden-xs hidden-sm" href="#sceneTab" aria-controls="mapTab" role="tab" data-toggle="tab" data-tooltip="tip" title="3D View" data-placement="bottom">3D View</a></li>                   -->
            <li>
                <div class="calcite-navbar-search calcite-search-expander" role="presentation" tabindex="-1">
                    <div id="searchNavDiv" tabindex="0"></div>
                </div>
            </li>
        </ul>
    </nav>
    <!--/.navbar -->

    <!-- Map Container  -->

    <div class="calcite-map calcite-map-absolute">
        <div id="tabContainer" class="tab-content">
            <div id="mapTab" class="tab-pane fade in active" role="tabpanel">
                <div id="mapViewDiv"></div>
            </div>
            <!-- <div id="sceneTab" class="tab-pane fade in active" role="tabpanel">
      <div id="sceneViewDiv"></div>
    </div> -->
        </div>
    </div>

    <!-- Panel Container -->

    <!-- Panel - Legend -->
    <div class="calcite-panels calcite-panels-left calcite-bg-custom calcite-text-light calcite-bgcolor-dark panel-group" role="tablist" aria-multiselectable="true">

        <div id="panelLegend" class="panel collapse in">
            <div id="headingLegend" class="panel-heading" role="tab">
                <div class="panel-title">
                    <a class="panel-toggle" role="button" data-toggle="collapse" href="#collapseLegend" aria-expanded="true" aria-controls="collapseLegend"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span><span class="panel-label">Legend</span></a>
                    <a class="panel-close" role="button" data-toggle="collapse" tabindex="0" href="#panelLegend"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>
                </div>
            </div>
            <div id="collapseLegend" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingLegend">
                <div class="panel-body">
                    <div id="legendDiv"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="calcite-panels calcite-panels-right calcite-bg-custom calcite-text-light calcite-bgcolor-dark panel-group" role="tablist" aria-multiselectable="true">

        <!-- Info Panel -->



        <div id="panelInfo" class="panel collapse in">
            <div id="headingInfo" class="panel-heading" role="tab">
                <div class="panel-title">
                    <a class="panel-toggle" role="button" data-toggle="collapse" href="#collapseInfo" aria-expanded="true" aria-controls="collapseInfo"><span class="esri-icon-notice-round" aria-hidden="true"></span><span class="panel-label">About</span></a>
                    <a class="panel-close" role="button" data-toggle="collapse" tabindex="0" href="#panelInfo"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>
                </div>
            </div>
            <div id="collapseInfo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingInfo">
                <div class="panel-body">
                    <p align="justify">This web map application was created by the Utah Geological Survey (UGS) in cooperation with the U.S. Bureau of Land Management (BLM) to show mineral resource information in Utah. Use the links below to download the map data. <br /><br />

                        <strong>Layer Information</strong></p>

                        <p><br /><strong>Utah Mineral Occurrence System (UMOS)</strong><a href="https://geology.utah.gov/apps/blm_mineral/appfiles/UMOS2021_05_05.zip" target="_blank"><span style="color: blue;">(download)</span></a></p>
                        <p class="tab" style="padding-left: 10px;">A database of mineral occurrences, prospects, mines, and mineral resources in the state of Utah.</p>

                        <p><br /><strong>Mining Districts</strong>
<a href="https://ugspub.nr.utah.gov/publications/open_file_reports/ofr-695.pdf" target="_blank"><span style="color: blue;">(publication, </span></a>
<a href="https://geology.utah.gov/apps/blm_mineral/appfiles/Mining_Districts_20190116gdb.zip" target="_blank"><span style="color: blue;">GIS data)</span></a> 
                        <p class="tab" style="padding-left: 10px;">Locations of Utah’s mining districts with summaries of relevant information for each district.</p>

                    <p><br /><strong>Industrial Mineral Resource Potential </strong>
                    <a href="https://geology.utah.gov/apps/blm_mineral/appfiles/Utah_IM_GIS.zip" target="_blank"><span style="color: blue;">(download)</span></a> <br /><br /></p>
                    <p class="tab" style="padding-left: 10px;">Resource potential for various locatable industrial mineral commodities.</p>
                

                    <p><br /><strong>U.S. Bureau of Mines Wilderness Study Area (WSA) Mineral Land Assessment</strong></p>
                    <p class="tab" style="padding-left: 10px;">Mineral resource assessment reports of BLM Wilderness Study Areas prepared by the U.S. Bureau of Mines.</p>
                </div>
            </div>
        </div>

        <!-- Basemaps Panel -->

        <div id="panelBasemaps" class="panel collapse">
            <div id="headingBasemaps" class="panel-heading" role="tab">
                <div class="panel-title">
                    <a class="panel-toggle collapsed" role="button" data-toggle="collapse" href="#collapseBasemaps" aria-expanded="false" aria-controls="collapseBasemaps"><span class="esri-icon-basemap" aria-hidden="true"></span><span class="panel-label">Basemaps</span></a>
                    <a class="panel-close" role="button" data-toggle="collapse" tabindex="0" href="#panelBasemaps"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>
                </div>
            </div>
            <div id="collapseBasemaps" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingBasemaps">
                <div class="panel-body">
                    <select id="selectBasemapPanel" class="form-control">
                        <option value="streets" data-vector="streets-vector">Streets</option>
                        <option value="satellite" data-vector="satellite">Satellite</option>
                        <option value="hybrid" data-vector="hybrid">Hybrid</option>
                        <option value="national-geographic" data-vector="national-geographic">National Geographic</option>
                        <option value="topo" data-vector="topo-vector" selected="">Topographic</option>
                        <option value="gray" data-vector="gray-vector">Gray</option>
                        <option value="dark-gray" data-vector="dark-gray-vector">Dark Gray</option>
                        <option value="osm" data-vector="osm">Open Street Map</option>
                        <option value="dark-gray" data-vector="streets-night-vector">Streets Night</option>
                        <option value="streets" data-vector="streets-navigation-vector">Streets Mobile</option>
                    </select>
                </div>
            </div>
        </div>





        <!-- Grid panelSearch panel -->
        <div id="panelGrid" class="panel collapse">
            <div id="headingInfo" class="panel-heading" role="tab">
                <div class="panel-title">
                    <a class="panel-toggle" role="button" data-toggle="collapse" href="#collapseGrid" aria-expanded="false" aria-controls="collapseGrid"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span><span class="panel-label">Search Results</span></a>
                    <a class="panel-close" role="button" data-toggle="collapse" data-target="#panelGrid"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>
                </div>
            </div>
            <div id="collapseGrid" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingGrid">
                <div class="panel-body">


                    <div id="grid"></div>
                    <!--  <div id="results" class="results"></div>  -->

                </div>
            </div>
        </div>


        <!-- Attribute Details panel -->
        <div id="panelDetails" class="panel collapse">
            <div id="headingInfo" class="panel-heading" role="tab">
                <div class="panel-title">
                    <a class="panel-toggle" role="button" data-toggle="collapse" href="#collapseDetails" aria-expanded="true" aria-controls="collapseDetails"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span><span class="panel-label" id="details">Photos</span></a>
                    <a class="panel-close" role="button" data-toggle="collapse" data-target="#panelDetails"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>
                </div>
            </div>
            <div id="collapseDetails" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingDetails">
                <div class="panel-body">

                    <div id="gallery">
                        <ul class="pictures" id="attDetails">
                </ul>
              </div>

                </div>
            </div>
        </div>

        <!-- Disclaimer panel -->
        <div id="panelDisclaimer" class="panel collapse">
            <div id="headingInfo" class="panel-heading" role="tab">
                <div class="panel-title">
                    <a class="panel-toggle" role="button" data-toggle="collapse" href="#collapseDisclaimer" aria-expanded="true" aria-controls="collapseDisclaimer"><span class="esri-icon-notice-triangle" aria-hidden="true"></span><span class="panel-label">Disclaimer</span></a>
                    <a class="panel-close" role="button" data-toggle="collapse" data-target="#panelDisclaimer"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>
                </div>
            </div>
            <div id="collapseDisclaimer" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingDisclaimer">
                <div class="panel-body">

                    <p style="text-align: justify;">Although this product represents the work of professional scientists, the Utah Department of Natural Resources, Utah Geological Survey and U.S. Department of the Interior, U.S. Bureau of Land Management make no warranty, expressed or implied, regarding its suitability for any particular use. The Utah Department of Natural Resources, Utah Geological Survey, and U.S. Department of the Interior, U.S. Bureau of Land Management shall not be liable under any circumstances for any direct, indirect, special, incidental, or consequential damages with respect to claims by users of this product. The Utah Geological Survey and U.S. Bureau of Land Management do not guarantee accuracy or completeness of the data. The views and conclusions contained in this document are those of the authors and should not be interpreted as necessarily representing the official policies, either expressed or implied, of the U.S. Government. Persons or agencies using these data specifically agree not to misrepresent the data, nor to imply that changes they made were approved by the Utah Geological Survey, and should indicate the data source and any modifications made on plots, digital copies, derivative products, and in metadata. The authors' determinations of resource potential DO NOT imply a determination of locatability for claim-staking purposes. The authors' determinations of resource potential also DO NOT imply potential for development of mineral resources.</p>
                    <p>The Utah Geological Survey presents U.S. Bureau of Mines Mineral Land Assessments as a public service and has no role in the production or approval of these reports. The Utah Department of Natural Resources, Utah Geological Survey makes no warranty, expressed or implied, regarding the suitability of these reports for a particular purpose and shall not be liable under any circumstances for any direct, indirect, special, incidental, or consequential damages with respect to claims by users of this product.</p>

                </div>
            </div>
        </div>

    </div> <!-- /.calcite-panels -->

    <script src="https://momentjs.com/downloads/moment.js"></script>

    <script src="lightbox2/dist/js/lightbox-plus-jquery.min.js"></script>

    <script type="text/javascript">
        var dojoConfig = {
            packages: [{
                    name: "bootstrap",
                    location: "https://esri.github.io/calcite-maps/dist/vendor/dojo-bootstrap"
                },
                {
                    name: "calcite-maps",
                    location: "https://esri.github.io/calcite-maps/dist/js/dojo"
                }
            ]
        };
    </script>

    <!-- ArcGIS JS 4 -->
    <script src="https://js.arcgis.com/4.19/"></script>


    <script>
var app;
require([
    "esri/Map",
    "esri/Basemap",
    "esri/portal/Portal",
    "esri/Graphic",
    "esri/layers/FeatureLayer",
    "esri/layers/GroupLayer",
    "esri/views/MapView",
    "esri/views/SceneView",
    "esri/popup/content/TextContent",
    "esri/popup/content/AttachmentsContent",
    "esri/tasks/support/RelationshipQuery",
    "esri/widgets/Search",
    "esri/core/watchUtils",
    "esri/widgets/Home",
    "esri/widgets/Zoom",
    "esri/widgets/Compass",
    "esri/widgets/Locate",
    "esri/widgets/Legend",
    "esri/widgets/BasemapToggle",
    "esri/widgets/LayerList",
    "esri/tasks/QueryTask",
    "esri/tasks/support/Query",
    "dojo/query",
    "dojo/_base/declare",
    "dojo/request",
    // Calcite-maps
    "calcite-maps/calcitemaps-v0.10",
    "calcite-maps/calcitemaps-arcgis-support-v0.10",
    // Bootstrap
    "bootstrap/Collapse",
    "bootstrap/Dropdown",
    "bootstrap/Tab"

], function(Map, Basemap, Portal, Graphic, FeatureLayer, GroupLayer, MapView, SceneView, TextContent, AttachmentsContent, RelationshipQuery, Search, watchUtils, Home, Zoom, Compass, Locate, Legend, BasemapToggle, LayerList, QueryTask, Query, query, declare, request, CalciteMaps, CalciteMapsArcGIS) {

    // App
    app = {
        zoom: 8,
        center: [-112, 39.5],
        basemap: "terrain",
        viewPadding: {
            top: 50,
            bottom: 0
        },
        uiPadding: {
            top: 15,
            bottom: 15
        },
        map: null,
        mapView: null,
        sceneView: null,
        activeView: null,
        searchWidgetNav: null,
        containerMap: "mapViewDiv",
        containerScene: "sceneViewDiv"
    };
    // Map 
    app.map = new Map({
        basemap: app.basemap,
        //ground: "world-elevation"
    });
    // 2D View
    app.mapView = new MapView({
        container: app.containerMap, // deactivate
        map: app.map,
        zoom: 8,
        center: [-112, 39.5],
        padding: app.viewPadding,
        ui: {
            components: ["zoom", "compass", "home"],
            padding: app.uiPadding
        }
    });
    // 3D View
    app.sceneView = new SceneView({
        container: null, // activate
        map: app.map,
        zoom: app.zoom,
        center: app.center,
        padding: app.viewPadding,
        ui: {
            padding: app.uiPadding
        }
    });
    // Active view is scene
    setActiveView(app.mapView);
    // Create search widget
    app.searchWidgetNav = new Search({
        container: "searchNavDiv",
        view: app.activeView,
        includeDefaultSources: false,
    });
    // Wire-up expand events
    CalciteMapsArcGIS.setSearchExpandEvents(app.searchWidgetNav);
    CalciteMapsArcGIS.setPopupPanelSync(app.mapView);
    CalciteMapsArcGIS.setPopupPanelSync(app.sceneView);
    // Menu UI - change Basemaps
    query("#selectBasemapPanel").on("change", function(e) {
        app.mapView.map.basemap = e.target.options[e.target.selectedIndex].dataset.vector;
        app.sceneView.map.basemap = e.target.value;
    });
    // Tab UI - switch views
    query(".calcite-navbar li a[data-toggle='tab']").on("click", function(e) {
        if (e.target.text.indexOf("2D") > -1) {
            syncViews(app.sceneView, app.mapView);
            setActiveView(app.mapView);
        } else {
            syncViews(app.mapView, app.sceneView);
            setActiveView(app.sceneView);
        }
        syncSearch(app.activeView);
    });
    // Views
    function syncViews(fromView, toView) {
        var viewPt = fromView.viewpoint.clone();
        fromView.container = null;
        if (fromView.type === "3d") {
            toView.container = app.containerMap;
        } else {
            toView.container = app.containerScene;
        }
        toView.viewpoint = viewPt;
        toView.padding = app.viewPadding;
    }
    // Search Widget
    function syncSearch(view) {
        app.searchWidgetNav.view = view;
        if (app.searchWidgetNav.selectedResult) {
            watchUtils.whenTrueOnce(view, "ready", function() {
                app.searchWidgetNav.autoSelect = false;
                app.searchWidgetNav.search(app.searchWidgetNav.selectedResult.name);
                app.searchWidgetNav.autoSelect = true;
            });
        }
    }
    // Active view
    function setActiveView(view) {
        app.activeView = view;
    }

    var home = new Home({
        view: app.activeView
    });
    app.activeView.ui.add(home, "top-left");

    var locate = new Locate({
        view: app.activeView
    });
    app.activeView.ui.add(locate, "top-left");

    // Panel widgets - add legend
    var legendWidget = new Legend({
        //container: "legendDiv",
        view: app.activeView
    });

    var photoAction = {
            title: "Photos",
            id: "photo-gallery",
            className: "esri-icon-media"
        };



    //Panel widgets - layerlist
    var layerList = new LayerList({
        view: app.activeView,
        container: "legendDiv",
        listItemCreatedFunction: function(event) {
            var item = event.item;
            setTimeout(function() {  //function to change tooltips for each layer in layerlist
            var labelArr = query('.esri-legend__layer-caption');

           

            if (labelArr.outerText != "Commodity Type" || "Production") {
                labelArr.map(function(node){
                node.outerText = "";
              });
            }

          }, 500);
            if (item.layer.type != "group") { // don't show legend twice
                item.panel = {
                    content: "legend",
                    open: true
                };
                if (item.layer.geometryType == "polygon") { //gets rid of the opacity tool for the point features

                    item.actionsSections = [
                        [{
                            title: "Increase opacity",
                            className: "esri-icon-up",
                            id: "increase-opacity"
                        }, {
                            title: "Decrease opacity",
                            className: "esri-icon-down",
                            id: "decrease-opacity"
                        }]
                    ];
                };
            }
        }
    });


 const umosRenderer = {
          type: "unique-value", // autocasts as new SimpleRenderer()
          field: "TYPE",
          legendOptions: {
                  title: "Commodity Type"
              },
          uniqueValueInfos: [
                {
                  value: "Unspecified",
                  symbol: {
                    type: "simple-marker",
                    size: 6,
                    color: "rgb(78, 78, 78)",
                    outline: {  
                        color: [ 90,90,90 ],
                    width: 0.5  
                    }
                  }
                },                {
                  value: "Energy",
                  symbol: {
                    type: "simple-marker",
                    size: 6,
                    color: "rgb(255, 211, 127)",
                    outline: {  
                        color: [ 90,90,90 ],
                    width: 0.5
                    }
                  }
                },                {
                  value: "Industrial Mineral",
                  symbol: {
                    type: "simple-marker",
                    size: 6,
                    color: "rgb(225, 225, 225)",
                    outline: {  
                        color: [ 90,90,90 ],
                    width: 0.5
                    }
                  }
                },                {
                  value: "Industrial Mineral - Energy",
                  symbol: {
                    type: "simple-marker",
                    size: 6,
                    color: "rgb(214, 157, 188)",
                    outline: {  
                        color: [ 90,90,90 ],
                    width: 0.5
                    }
                  }
                },                {
                  value: "Metal",
                  symbol: {
                    type: "simple-marker",
                    size: 6,
                    color: "rgb(158,215,174)",
                    outline: {  
                        color: [ 90,90,90 ],
                    width: 0.5
                    }
                  }
                },                {
                  value: "Metal - Energy",
                  symbol: {
                    type: "simple-marker",
                    size: 6,
                    color: "rgb(158,170,215)",
                    outline: {  
                        color: [ 90,90,90 ],
                    width: 0.5
                    }
                  }
                },                {
                  value: "Metal - Industrial Mineral",
                  symbol: {
                    type: "simple-marker",
                    size: 6,
                    color: "rgb(102,153,205)",
                    outline: {  
                        color: [ 90,90,90 ],
                    width: 0.5
                    }
                  }
                },                {
                  value: "Metal - Industrial Mineral - Energy",
                  symbol: {
                    type: "simple-marker",
                    size: 6,
                    color: "rgb(68,101,137)",
                    outline: {  
                        color: [ 90,90,90 ],
                    width: 0.5
                    }
                  }
                },
            ],
            visualVariables: [
            {
              type: "size",
              valueExpression: "$feature.Prod_Value_symbol",
              legendOptions: {
                  title: "Production"
              },
              stops: [
                {
                  value: 0,
                  size: 6,
                  label: "None"
                },
                {
                  value: 1,
                  size: 10,
                  label: "Small"
                },
                {
                  value: 2,
                  size: 14,
                  label: "Medium"
                },
                {
                  value: 3,
                  size: 18,
                  label: "Large"
                }
              ]
            },

        ]
    };





      

    //remove panels when user clicks on map

    app.activeView.on("click", function(event) {
        app.activeView.graphics.removeAll();
        query("#panelDetails").removeClass("in");
    });


const umos = new FeatureLayer({
    url: "https://services.arcgis.com/ZzrwjTRez6FJiOq4/arcgis/rest/services/Metal_Mineral_Resources_web_View/FeatureServer/12",
    title: "Utah Mineral Occurrence System",
    outFields: ["*"],
    renderer: umosRenderer,
    popupTemplate: {
        title: "<b>{SITE_NAME}</b>",
        content: "<span class='bold' title='Commodity'><b>Commodity: </b></span>{COMMODITY}</b><br>" +
        "<span class='bold' title='Commodity'><b>Ore Mineral: </b></span>{ORE_MINERALS}</b><br>" +
                    "<span class='bold' title='Commodity Type'><b>Commodity Type: </b></span>{TYPE}</b><br>" +
                    "<span class='bold' title='Production'><b>Production: </b></span>{PRODUCTION}</b><br>" +
                    "<span class='bold' title='Deposit Size'><b>Deposit Size: </b></span>{DEP_SIZE}</b><br>" +
                    "<span class='bold' title='Mining District'><b>Mining District: </b></span>{DISTRICT}</b><br>" +
                    "<span class='bold' title='County'><b>County: </b></span>{COUNTY}</b><br>" +
                    "<br><a href='https://geology.utah.gov/apps/blm_mineral/appfiles/UMOS%20Explanation.pdf' target='_blank'><span style='color: blue;'> UMOS Explanation</span></a>",
        fieldInfos: [{
            fieldName: "COMMODITY",
            },{
            fieldName: "TYPE",
            },{
            fieldName: "PRODUCTION",
        },{
            fieldName: "DEP_SIZE",
        },{
            fieldName: "DISTRICT",
        },{
            fieldName: "PRODUCTION",
            },{
                fieldName: "ORE_MINERAL",
            }]
    },
    visible: true
});
umosRenderer.valueExpressionTitle = "Production";

    app.activeView.map.add(umos);


        // show or hide any open calicite panels when user clicks for attribute details
        function showHideCalcitePanels(showPanel, showCollapse) {
            // hide all windows
            //query(".panel-collapse").query(".panel .in").collapse("hide");   //close any open panels
            query(".panel.in").removeClass("in"); //close any open panels
            query(".panel-collapse").removeClass("in");

            // if specified show this calcite panel
            if (showPanel) {
                //query(showPanel).query(showCollapse).addClass("in");
                query(showPanel).collapse("show"); // so I use these instead
                query(showCollapse).collapse("show");
            }
        }
    



});
  </script>

   <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- jQuery (for Bootstrap's JavaScript plugins). NOTE: You can also use pure Dojo. See examples. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all  plugins or individual files as needed
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  -->

</body>
</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console