Calcite Maps 3.x Legend inside Panel

Question

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? <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>TESTESTESTtitle> <link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-bootstrap.min-v0.3.css"> <link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-arcgis-3.x.min-v0.3.css"> <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"> <nav class="navbar calcite-navbar navbar-fixed-top calcite-text-light calcite-bg-custom calcite-bgcolor-dark-blue"> <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 menuspan> <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> Searcha> 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> Basemapsa> li> <li> <a role="button" data-target="#panelTable" data-toggle="collapse" aria-haspopup="true"> <span class="glyphicon glyphicon-list">span> Tablea> li> <li> <a role="button" id="calciteToggleNavbar" aria-haspopup="true"> <span class="glyphicon glyphicon-fullscreen">span> Full Mapa> li> ul> div> <div class="calcite-title calcite-overflow-hidden"> <span class="calcite-title-main hidden-xs">My Map Appspan> div> <ul class="calcite-nav nav navbar-nav"> <li> <div class="calcite-navbar-search hidden-xs"> <div id="searchNavDiv">div> div> li> ul> nav> <div class="calcite-map"> <div id="map" class="calcite-map-absolute"> div> div> <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">Searchspan> 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> <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">Legendspan> 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> <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">Basemapsspan> 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">Streetsoption> <option value="satellite" data-vector="satellite">Satelliteoption> <option value="hybrid" data-vector="hybrid">Hybridoption> <option value="national-geographic" data-vector="national-geographic">National Geographicoption> <option value="topo" data-vector="vector-streets-relief">Topographicoption> <option value="gray" data-vector="vector-canvas-light">Grayoption> <option value="dark-gray" data-vector="vector-canvas-dark">Dark Grayoption> <option value="osm" data-vector="osm">Open Street Mapoption> <option value="dark-gray" data-vector="vector-streets-night">Streets Nightoption> <option value="streets" data-vector="vector-streets-mobile">Streets Mobileoption> select> div> div> div> div> <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> Tablea> <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> <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> <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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

JudsonCrouch1 · Accepted Answer

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!