Calcite Maps 3.x Legend inside Panel

JudsonCrouch1 — Sat, 11 Dec 2021 23:34:09 GMT
Hello,
I am trying to insert the "esri/dijit/Legend" widget inside a Calcite Maps bootstrap panel but it is not rendering for some reason. Is this a limitation of Calcite Maps and 3.x? (specifically 3.24)
I would have built this application in 4.x however, my understanding is that feature layer labeling is not supported in 2D.
Can anyone provide some insight or a work around on how to get a legend on my map?
<!DOCTYPE html>
<html>

<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="Calcite Maps Demo - ArcGIS">
    <meta name="author" content="">
    
    <title>TESTESTEST</title>

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

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

    <!-- ArcGIS JS 3.x -->
    <link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/themes/calcite/dijit/calcite.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.24/dojox/grid/resources/Grid.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.24/dojox/grid/resources/claroGrid.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/themes/calcite/esri/esri.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.24/dgrid/css/dgrid.css">
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        #bottompane {
            height: 100px;
        }

        #grid {
            height: 100%;
        }

        .dgrid {
            border: none;
        }

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

        .calcite-panels.calcite-panels-table {
            position: absolute;
            bottom: 0;
            top: auto;
            left: 0;
            right: 0;
            z-index: 30;
        }

        #panelTable {
            margin-bottom: 0;
        }

        #panelTable .panel-body {
            height: 800px;
            width: 100%;
        }

    </style>

</head>

<body class="esri claro calcite  calcite-nav-top">

    <!-- Navbar -->

    <nav class="navbar calcite-navbar navbar-fixed-top calcite-text-light calcite-bg-custom calcite-bgcolor-dark-blue">
        <!-- Menu -->
        <div class="dropdown calcite-dropdown calcite-bg-light calcite-text-dark" role="presentation">
            <a class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">
                <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">
                <li>
                    <a class="visible-xs" role="button" data-target="#panelSearch" aria-haspopup="true">
                        <span class="glyphicon glyphicon-search"></span> Search</a>
                </li>
                <li>
                    <a role="menuitem"  data-target="#panelLegend" aria-haspopup="true">
                        <span class="glyphicon glyphicon-list-alt"></span> Legend
                    </a>
                </li>
                <li>
                    <a role="button" data-target="#panelBasemaps" aria-haspopup="true">
                        <span class="glyphicon glyphicon-th-large"></span> Basemaps</a>
                </li>
                <li>
                    <a role="button" data-target="#panelTable" data-toggle="collapse" aria-haspopup="true">
                        <span class="glyphicon glyphicon-list"></span> Table</a>
                </li>
                <li>
                    <a role="button" 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 hidden-xs">My Map App</span>
        </div>
        <!-- Nav -->
        <ul class="calcite-nav nav navbar-nav">
            <li>
                <div class="calcite-navbar-search hidden-xs">
                    <div id="searchNavDiv"></div>
                </div>
            </li>
        </ul>

    </nav>
    <!--/.navbar -->

    <!-- Map Container  -->

    <div class="calcite-map">
        <div id="map" class="calcite-map-absolute">
        </div>
    </div>
    <!-- /.container -->

    <!-- Panel -->

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

        <div id="panelSearch" class="panel collapse hidden-sm hidden-md hidden-lg">
            <div id="headingSearch" class="panel-heading" role="tab">
                <div class="panel-title">
                    <a class="panel-toggle collapsed" role="button" data-toggle="collapse" href="#collapseSearch" aria-expanded="false" aria-controls="collapseSearch">
                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                        <span class="panel-label">Search</span>
                    </a>
                    <a class="panel-close" role="button" data-toggle="collapse" data-target="#panelSearch">
                        <span class="esri-icon esri-icon-close" aria-hidden="true"></span>
                    </a>
                </div>
            </div>
            <div id="collapseSearch" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSearch">
                <div class="panel-body calcite-body-expander">
                    <div id="searchPanelDiv"></div>
                </div>
            </div>
        </div>

        <!-- Legend -->
        <div id="panelLegend" class="panel collapse">
            <div id="headingLegend" class="panel-heading" role="tab">
                <div class="panel-title">
                    <a class="panel-toggle collapsed" role="button" data-toggle="collapse" href="#collapseLegend" aria-expanded="false" 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" role="tabpanel" aria-labelledby="headingLegend">
                <div class="panel-body body-light">
                    <div id="legend" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">
                        <div data-dojo-type="dijit/layout/ContentPane">
                            <div id="legendDiv"></div>
                        </div>
                    </div>
                </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="glyphicon glyphicon-th-large" 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="vector-streets">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="vector-streets-relief">Topographic</option>
                        <option value="gray" data-vector="vector-canvas-light">Gray</option>
                        <option value="dark-gray" data-vector="vector-canvas-dark">Dark Gray</option>
                        <option value="osm" data-vector="osm">Open Street Map</option>
                        <option value="dark-gray" data-vector="vector-streets-night">Streets Night</option>
                        <option value="streets" data-vector="vector-streets-mobile">Streets Mobile</option>
                    </select>
                </div>
            </div>
        </div>

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


    <!--table-->
    <div class="calcite-panels calcite-panels-table calcite-bg-light calcite-text-dark">
        <div id="panelTable" 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="#collapseTable" data-parent="#panelAccordion" aria-expanded="true"
                        aria-controls="collapseInfo">
                        <span class="glyphicon glyphicon-list" aria-hidden="true"></span> Table</a>
                    <a class="panel-close" role="button" data-toggle="collapse" data-target="#panelTable">
                        <span class="esri-icon esri-icon-close" aria-hidden="true"></span>
                    </a>
                </div>
            </div>
            <div id="collapseTable" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingInfo">
                <div id="container" class="panel-body">
                    <div id="grid"></div>
                </div>

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


    



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

    <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 3.x -->
    <script src="https://js.arcgis.com/3.24/"></script>

    <script>
        var map, searchWidgetNav, searchWidgetPanel, activeView;

        require([
            "dojo/ready",
            "esri/map",
            "esri/layers/FeatureLayer",
            "esri/dijit/FeatureTable",
            "esri/tasks/QueryTask",
            "esri/tasks/FindTask",
            "esri/tasks/FindParameters",
            "esri/tasks/query",
            "esri/InfoTemplate",
            "esri/dijit/Search",
            "dojo/_base/Color",
            "dojo/query",

            "dojo/dom",
            "dijit/registry",
            "dojo/_base/array",
            "dojo/_base/connect",
            "dojox/grid/DataGrid",
            "dojo/data/ItemFileReadStore",
            "dijit/form/Button",

            "dijit/layout/BorderContainer",
            "dijit/layout/ContentPane",
            "dgrid/OnDemandGrid",
            "dgrid/Selection",
            "dojo/_base/declare",
            "esri/symbols/SimpleFillSymbol",
            "dojo/store/Memory",
            "dojo/dom-style",
            "dgrid/_StoreMixin",
            "esri/dijit/Legend",


            // OAuth
            "esri/arcgis/Portal",
            "esri/arcgis/OAuthInfo",
            "esri/IdentityManager",

            "dojo/on",
            "dojo/parser",

            // Bootstrap
            "bootstrap/Collapse",
            "bootstrap/Dropdown",
            "bootstrap/Tab",

            // Calcite Maps
            "calcite-maps/calcitemaps",

            // "dojo/domReady!"
        ], function (ready, Map, FeatureLayer, FeatureTable, QueryTask, FindTask, FindParameters, Query, InfoTemplate, Search, Color, query, dom, registry, array, connect, DataGrid, ItemFileReadStore, Button, BorderContainer, ContentPane, Grid, Selection, declare, SimpleFillSymbol, Memory, domStyle, StoreMixin, Legend, arcgisPortal, OAuthInfo, esriID, on, parser) {

            ready(function () {

                var info = new OAuthInfo({
                    appId: //appid
                    portalUrl: //portal.com
                    popup: false
                });

                esriID.registerOAuthInfos([info]);

                parser.parse();

                window.grid = new (declare([Grid, Selection]))({
                    bufferRows: Infinity,
                    columns: {
                        // Columns go here
                    },
                    selectionMode: "single",
                    sortable: true

                }, "grid");




                function formatTimestamp(value) {
                    var inputDate = new Date(value);
                    return dojo.date.locale.format(inputDate, {
                        selector: 'date',
                        datePattern: 'MM/dd/yyyy'
                    });
                }

                var map = new Map("map", {
                    basemap: "streets",
                    center: [-103, 32],
                    zoom: 9,
                    showLabels: true
                });

                // Search
                searchDivNav = createSearchWidget("searchNavDiv");
                searchWidgetPanel = createSearchWidget("searchPanelDiv");

                function createSearchWidget(parentId) {
                    var search = new Search({
                        map: map,
                        enableHighlight: false
                    }, parentId);
                    search.startup();
                    return search;
                };

                // Basemaps
                query("#selectBasemapPanel").on("change", function (e) {
                    map.setBasemap(e.target.options[e.target.selectedIndex].value);
                });

                // FL 1

                // FL 2

                //FL 3

                                

                map.on("load", function (evt) {
                    // show the border container now that the dijits
                    // are rendered and the map has loaded
                    domStyle.set(registry.byId("legend").domNode, "visibility", "visible");
                    populateGrid(Memory); // pass a reference to the MemoryStore constructor
                });

                map.on("layers-add-result", function (evt) {
                    var layerInfo = array.map(evt.layers, function (layer, index) {
                        return { layer: layer.layer, title: layer.layer.name };
                    });
                    if (layerInfo.length > 0) {
                        var legendDijit = new Legend({
                            map: map,
                            layerInfos: layerInfo
                        }, "legendDiv");
                        legendDijit.startup();
                    }
                });
                
                map.addLayers([FL1, FL2, FL3]);


                function populateGrid(Memory) {
                    var qt = new QueryTask(FL1.url);
                    var query = new Query();
                    query.where = "1=1";
                    query.returnGeometry = false;
                    query.outFields = window.outFields;
                    qt.execute(query, function (results) {
                        var data = array.map(results.features, function (feature) {
                            return {
                                // property names used here match those used when creating the dgrid
                            };
                        });
                        // grid.set("columns", generateColumns(results.fields));
                        var memStore = new Memory({ data: data, "idProperty": "col_1" });
                        window.grid.set("store", memStore);
                    });
                }

                //Returns Columns object for dgrid store  
                function generateColumns(fields) {
                    var columns = [];
                    fields.forEach(function (field) {
                        var objects = {};
                        objects.label = field.alias;
                        objects.field = field.name;
                        columns.push(objects);
                    });
                    return columns;
                }

                function showDefaultPanels() {
                    query(".calcite-panels-table").addClass("hidden");
                    query(".calcite-panels:not(.calcite-panels-table)").removeClass("hidden");
                }

                function showTablePanel() {
                    query(".calcite-panels-table").removeClass("hidden");
                    query(".calcite-panels:not(.calcite-panels-table)").addClass("hidden");
                }

                function showAllPanels() {
                    query(".calcite-panels-table").removeClass("hidden");
                    query(".calcite-panels:not(.calcite-panels-table)").removeClass("hidden");
                }

                // Default panels

                query(".calcite-panels .panel:not(#panelTable)").on("show.bs.collapse", function (e) {
                    if (window.innerWidth <= breakpoint) {
                        showDefaultPanels();
                    } else {
                        showAllPanels();
                    }
                });

                // Table panel

                query(".calcite-panels-table .panel").on("show.bs.collapse", function (e) {
                    if (window.innerWidth <= breakpoint) {
                        showTablePanel();
                    } else {
                        showAllPanels();
                    }
                });

                // Responsive

                var breakpoint = 768;
                var isMobile = window.innerWidth <= breakpoint;
                query(window).on("resize", function (e) {
                    if (e.target.innerWidth <= breakpoint && !isMobile) {
                        isMobile = true;
                        showTablePanel();
                    }
                    if (e.target.innerWidth > breakpoint && isMobile) {
                        isMobile = false;
                        showAllPanels();
                    }
                }.bind(this));

            });

        })

    </script>

</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
Re: Calcite Maps 3.x Legend inside Panel

RobertScheitlin__GISP — Thu, 03 May 2018 13:16:30 GMT
Judson,
Your code rendered the legend fine for me when I added my layers.
Re: Calcite Maps 3.x Legend inside Panel

JudsonCrouch1 — Thu, 03 May 2018 13:22:40 GMT
I just found the issue.... I am hosting my map app on Sharepoint and it adds some code at the beginning of the head that somehow disables some of the rendering.
Thanks for the help anyhow!
topic Re: Calcite Maps 3.x Legend inside Panel in ArcGIS JavaScript Maps SDK Questions

Calcite Maps 3.x Legend inside Panel

Re: Calcite Maps 3.x Legend inside Panel

Re: Calcite Maps 3.x Legend inside Panel
